@alfalab/core-components-navigation-bar 1.2.9 → 1.2.11

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.
package/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 = {"component":"navigation-bar__component_14f87","sticky":"navigation-bar__sticky_14f87","border":"navigation-bar__border_14f87","mainLine":"navigation-bar__mainLine_14f87","left":"navigation-bar__left_14f87","center":"navigation-bar__center_14f87","children":"navigation-bar__children_14f87","content":"navigation-bar__content_14f87","title":"navigation-bar__title_14f87","subtitle":"navigation-bar__subtitle_14f87","addons":"navigation-bar__addons_14f87","rightAddons":"navigation-bar__rightAddons_14f87"};
15
+ var styles = {"component":"navigation-bar__component_byf8d","sticky":"navigation-bar__sticky_byf8d","border":"navigation-bar__border_byf8d","mainLine":"navigation-bar__mainLine_byf8d","left":"navigation-bar__left_byf8d","center":"navigation-bar__center_byf8d","children":"navigation-bar__children_byf8d","content":"navigation-bar__content_byf8d","title":"navigation-bar__title_byf8d","subtitle":"navigation-bar__subtitle_byf8d","addons":"navigation-bar__addons_byf8d","rightAddons":"navigation-bar__rightAddons_byf8d"};
16
16
  require('./index.css')
17
17
 
18
18
  var NavigationBar = React.forwardRef(function (_a, ref) {
@@ -22,21 +22,20 @@ var NavigationBar = React.forwardRef(function (_a, ref) {
22
22
  var leftAddonsRef = React.useRef(null);
23
23
  var rightAddonsRef = React.useRef(null);
24
24
  var hasLeftAddons = leftAddons && align !== 'left';
25
+ // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов
25
26
  React.useEffect(function () {
26
27
  var _a, _b;
27
- if (hasLeftAddons) {
28
- var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
29
- var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
30
- var marginSize_1 = Math.abs(rightAddonsWidth - leftAddonsWidth);
31
- var shouldAddLeftMargin_1 = rightAddonsWidth - leftAddonsWidth > 0;
32
- setTitleMargin(function (prev) {
33
- var newState = shouldAddLeftMargin_1
34
- ? { left: marginSize_1, right: 0 }
35
- : { left: 0, right: marginSize_1 };
36
- var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
37
- return isStateChanged ? newState : prev;
38
- });
39
- }
28
+ var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
29
+ var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
30
+ var marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
31
+ var shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
32
+ setTitleMargin(function (prev) {
33
+ var newState = shouldAddLeftMargin
34
+ ? { left: marginSize, right: 0 }
35
+ : { left: 0, right: marginSize };
36
+ var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
37
+ return isStateChanged ? newState : prev;
38
+ });
40
39
  }, [hasLeftAddons, leftAddons, rightAddons]);
41
40
  return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, (_b = {},
42
41
  _b[styles.border] = border,
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
 
17
- var styles = {"component":"navigation-bar__component_r853d","iconWrapper":"navigation-bar__iconWrapper_r853d","back":"navigation-bar__back_r853d","floating":"navigation-bar__floating_r853d"};
17
+ var styles = {"component":"navigation-bar__component_1p9bz","iconWrapper":"navigation-bar__iconWrapper_1p9bz","back":"navigation-bar__back_1p9bz","floating":"navigation-bar__floating_1p9bz"};
18
18
  require('./index.css')
19
19
 
20
20
  var iconComponents = {
@@ -1,4 +1,4 @@
1
- /* hash: 1xw1m */
1
+ /* hash: xw0ux */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
@@ -24,11 +24,11 @@
24
24
  /* новые значения, используйте их */
25
25
  } :root {
26
26
  } :root {
27
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_r853d {
27
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_1p9bz {
28
28
  height: 100%;
29
29
  border-radius: var(--border-radius-pill);
30
30
  min-width: 48px;
31
- } .navigation-bar__iconWrapper_r853d {
31
+ } .navigation-bar__iconWrapper_1p9bz {
32
32
  display: inline-flex;
33
33
  align-items: center;
34
34
  justify-content: center;
@@ -37,12 +37,12 @@
37
37
  border-radius: var(--border-radius-circle);
38
38
  background: var(--color-light-neutral-translucent-100);
39
39
  vertical-align: middle
40
- } .navigation-bar__iconWrapper_r853d.navigation-bar__back_r853d {
40
+ } .navigation-bar__iconWrapper_1p9bz.navigation-bar__back_1p9bz {
41
41
  background: transparent;
42
- } .navigation-bar__floating_r853d path {
42
+ } .navigation-bar__floating_1p9bz path {
43
43
  fill: var(--color-light-neutral-translucent-700);
44
- } .navigation-bar__floating_r853d:hover path {
44
+ } .navigation-bar__floating_1p9bz:hover path {
45
45
  fill: var(--color-light-neutral-translucent-700-hover);
46
- } .navigation-bar__floating_r853d:active path {
46
+ } .navigation-bar__floating_1p9bz:active path {
47
47
  fill: var(--color-light-neutral-translucent-700-press);
48
48
  }
@@ -13,13 +13,13 @@ 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_1ihho","text":"navigation-bar__text_1ihho"};
16
+ var styles = {"component":"navigation-bar__component_fes6w","text":"navigation-bar__text_fes6w"};
17
17
  require('./index.css')
18
18
 
19
19
  var ActionTextAddon = function (_a) {
20
20
  var _b = _a.text, text = _b === void 0 ? 'Назад' : _b, onClick = _a.onClick, className = _a.className, action = _a.action, dataTestId = _a.dataTestId, htmlAttributes = tslib.__rest(_a, ["text", "onClick", "className", "action", "dataTestId"]);
21
21
  return (React__default.default.createElement(desktop.ButtonDesktop, tslib.__assign({ view: 'text', size: 's', onClick: onClick, "aria-label": text, className: cn__default.default(styles.component, className), dataTestId: dataTestId }, htmlAttributes),
22
- React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
22
+ React__default.default.createElement(coreComponentsTypography.Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
23
23
  };
24
24
 
25
25
  exports.ActionTextAddon = ActionTextAddon;
@@ -1,4 +1,4 @@
1
- /* hash: 1sfuq */
1
+ /* hash: 102gx */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,8 +22,8 @@
22
22
  --gap-16: var(--gap-m);
23
23
  } :root {
24
24
  } :root {
25
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_1ihho {
25
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_fes6w {
26
26
  height: 100%;
27
- } .navigation-bar__text_1ihho {
27
+ } .navigation-bar__text_fes6w {
28
28
  padding: var(--gap-8) var(--gap-16);
29
29
  }
package/cssm/Component.js CHANGED
@@ -21,21 +21,20 @@ var NavigationBar = React.forwardRef(function (_a, ref) {
21
21
  var leftAddonsRef = React.useRef(null);
22
22
  var rightAddonsRef = React.useRef(null);
23
23
  var hasLeftAddons = leftAddons && align !== 'left';
24
+ // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов
24
25
  React.useEffect(function () {
25
26
  var _a, _b;
26
- if (hasLeftAddons) {
27
- var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
28
- var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
29
- var marginSize_1 = Math.abs(rightAddonsWidth - leftAddonsWidth);
30
- var shouldAddLeftMargin_1 = rightAddonsWidth - leftAddonsWidth > 0;
31
- setTitleMargin(function (prev) {
32
- var newState = shouldAddLeftMargin_1
33
- ? { left: marginSize_1, right: 0 }
34
- : { left: 0, right: marginSize_1 };
35
- var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
36
- return isStateChanged ? newState : prev;
37
- });
38
- }
27
+ var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
28
+ var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
29
+ var marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
30
+ var shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
31
+ setTitleMargin(function (prev) {
32
+ var newState = shouldAddLeftMargin
33
+ ? { left: marginSize, right: 0 }
34
+ : { left: 0, right: marginSize };
35
+ var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
36
+ return isStateChanged ? newState : prev;
37
+ });
39
38
  }, [hasLeftAddons, leftAddons, rightAddons]);
40
39
  return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, (_b = {},
41
40
  _b[styles__default.default.border] = border,
@@ -18,7 +18,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
18
18
  var ActionTextAddon = function (_a) {
19
19
  var _b = _a.text, text = _b === void 0 ? 'Назад' : _b, onClick = _a.onClick, className = _a.className, action = _a.action, dataTestId = _a.dataTestId, htmlAttributes = tslib.__rest(_a, ["text", "onClick", "className", "action", "dataTestId"]);
20
20
  return (React__default.default.createElement(desktop.ButtonDesktop, tslib.__assign({ view: 'text', size: 's', onClick: onClick, "aria-label": text, className: cn__default.default(styles__default.default.component, className), dataTestId: dataTestId }, htmlAttributes),
21
- React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles__default.default.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
21
+ React__default.default.createElement(coreComponentsTypography.Text, { className: styles__default.default.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
22
22
  };
23
23
 
24
24
  exports.ActionTextAddon = ActionTextAddon;
package/esm/Component.js CHANGED
@@ -3,7 +3,7 @@ import React, { forwardRef, useState, useRef, useEffect } from 'react';
3
3
  import cn from 'classnames';
4
4
  import { getDataTestId } from '@alfalab/core-components-shared/esm';
5
5
 
6
- var styles = {"component":"navigation-bar__component_14f87","sticky":"navigation-bar__sticky_14f87","border":"navigation-bar__border_14f87","mainLine":"navigation-bar__mainLine_14f87","left":"navigation-bar__left_14f87","center":"navigation-bar__center_14f87","children":"navigation-bar__children_14f87","content":"navigation-bar__content_14f87","title":"navigation-bar__title_14f87","subtitle":"navigation-bar__subtitle_14f87","addons":"navigation-bar__addons_14f87","rightAddons":"navigation-bar__rightAddons_14f87"};
6
+ var styles = {"component":"navigation-bar__component_byf8d","sticky":"navigation-bar__sticky_byf8d","border":"navigation-bar__border_byf8d","mainLine":"navigation-bar__mainLine_byf8d","left":"navigation-bar__left_byf8d","center":"navigation-bar__center_byf8d","children":"navigation-bar__children_byf8d","content":"navigation-bar__content_byf8d","title":"navigation-bar__title_byf8d","subtitle":"navigation-bar__subtitle_byf8d","addons":"navigation-bar__addons_byf8d","rightAddons":"navigation-bar__rightAddons_byf8d"};
7
7
  require('./index.css')
8
8
 
9
9
  var NavigationBar = forwardRef(function (_a, ref) {
@@ -13,21 +13,20 @@ var NavigationBar = forwardRef(function (_a, ref) {
13
13
  var leftAddonsRef = useRef(null);
14
14
  var rightAddonsRef = useRef(null);
15
15
  var hasLeftAddons = leftAddons && align !== 'left';
16
+ // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов
16
17
  useEffect(function () {
17
18
  var _a, _b;
18
- if (hasLeftAddons) {
19
- var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
20
- var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
21
- var marginSize_1 = Math.abs(rightAddonsWidth - leftAddonsWidth);
22
- var shouldAddLeftMargin_1 = rightAddonsWidth - leftAddonsWidth > 0;
23
- setTitleMargin(function (prev) {
24
- var newState = shouldAddLeftMargin_1
25
- ? { left: marginSize_1, right: 0 }
26
- : { left: 0, right: marginSize_1 };
27
- var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
28
- return isStateChanged ? newState : prev;
29
- });
30
- }
19
+ var leftAddonsWidth = ((_a = leftAddonsRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
20
+ var rightAddonsWidth = ((_b = rightAddonsRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
21
+ var marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
22
+ var shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
23
+ setTitleMargin(function (prev) {
24
+ var newState = shouldAddLeftMargin
25
+ ? { left: marginSize, right: 0 }
26
+ : { left: 0, right: marginSize };
27
+ var isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
28
+ return isStateChanged ? newState : prev;
29
+ });
31
30
  }, [hasLeftAddons, leftAddons, rightAddons]);
32
31
  return (React.createElement("div", { ref: ref, className: cn(styles.component, (_b = {},
33
32
  _b[styles.border] = border,
@@ -5,7 +5,7 @@ import { ButtonDesktop } from '@alfalab/core-components-button/esm/desktop';
5
5
  import { ChevronLeftMIcon } from '@alfalab/icons-glyph/ChevronLeftMIcon';
6
6
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
7
7
 
8
- var styles = {"component":"navigation-bar__component_r853d","iconWrapper":"navigation-bar__iconWrapper_r853d","back":"navigation-bar__back_r853d","floating":"navigation-bar__floating_r853d"};
8
+ var styles = {"component":"navigation-bar__component_1p9bz","iconWrapper":"navigation-bar__iconWrapper_1p9bz","back":"navigation-bar__back_1p9bz","floating":"navigation-bar__floating_1p9bz"};
9
9
  require('./index.css')
10
10
 
11
11
  var iconComponents = {
@@ -1,4 +1,4 @@
1
- /* hash: 1xw1m */
1
+ /* hash: xw0ux */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
@@ -24,11 +24,11 @@
24
24
  /* новые значения, используйте их */
25
25
  } :root {
26
26
  } :root {
27
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_r853d {
27
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_1p9bz {
28
28
  height: 100%;
29
29
  border-radius: var(--border-radius-pill);
30
30
  min-width: 48px;
31
- } .navigation-bar__iconWrapper_r853d {
31
+ } .navigation-bar__iconWrapper_1p9bz {
32
32
  display: inline-flex;
33
33
  align-items: center;
34
34
  justify-content: center;
@@ -37,12 +37,12 @@
37
37
  border-radius: var(--border-radius-circle);
38
38
  background: var(--color-light-neutral-translucent-100);
39
39
  vertical-align: middle
40
- } .navigation-bar__iconWrapper_r853d.navigation-bar__back_r853d {
40
+ } .navigation-bar__iconWrapper_1p9bz.navigation-bar__back_1p9bz {
41
41
  background: transparent;
42
- } .navigation-bar__floating_r853d path {
42
+ } .navigation-bar__floating_1p9bz path {
43
43
  fill: var(--color-light-neutral-translucent-700);
44
- } .navigation-bar__floating_r853d:hover path {
44
+ } .navigation-bar__floating_1p9bz:hover path {
45
45
  fill: var(--color-light-neutral-translucent-700-hover);
46
- } .navigation-bar__floating_r853d:active path {
46
+ } .navigation-bar__floating_1p9bz:active path {
47
47
  fill: var(--color-light-neutral-translucent-700-press);
48
48
  }
@@ -2,15 +2,15 @@ import { __rest, __assign } from 'tslib';
2
2
  import React from 'react';
3
3
  import cn from 'classnames';
4
4
  import { ButtonDesktop } from '@alfalab/core-components-button/esm/desktop';
5
- import { Typography } from '@alfalab/core-components-typography/esm';
5
+ import { Text } from '@alfalab/core-components-typography/esm';
6
6
 
7
- var styles = {"component":"navigation-bar__component_1ihho","text":"navigation-bar__text_1ihho"};
7
+ var styles = {"component":"navigation-bar__component_fes6w","text":"navigation-bar__text_fes6w"};
8
8
  require('./index.css')
9
9
 
10
10
  var ActionTextAddon = function (_a) {
11
11
  var _b = _a.text, text = _b === void 0 ? 'Назад' : _b, onClick = _a.onClick, className = _a.className, action = _a.action, dataTestId = _a.dataTestId, htmlAttributes = __rest(_a, ["text", "onClick", "className", "action", "dataTestId"]);
12
12
  return (React.createElement(ButtonDesktop, __assign({ view: 'text', size: 's', onClick: onClick, "aria-label": text, className: cn(styles.component, className), dataTestId: dataTestId }, htmlAttributes),
13
- React.createElement(Typography.Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
13
+ React.createElement(Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
14
14
  };
15
15
 
16
16
  export { ActionTextAddon };
@@ -1,4 +1,4 @@
1
- /* hash: 1sfuq */
1
+ /* hash: 102gx */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,8 +22,8 @@
22
22
  --gap-16: var(--gap-m);
23
23
  } :root {
24
24
  } :root {
25
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_1ihho {
25
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_fes6w {
26
26
  height: 100%;
27
- } .navigation-bar__text_1ihho {
27
+ } .navigation-bar__text_fes6w {
28
28
  padding: var(--gap-8) var(--gap-16);
29
29
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 8u8d2 */
1
+ /* hash: xzdj0 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,60 +28,60 @@
28
28
  --gap-16: var(--gap-m);
29
29
  } :root {
30
30
  } :root {
31
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_14f87 {
31
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_byf8d {
32
32
  padding: var(--gap-8) var(--gap-4);
33
33
  box-sizing: border-box;
34
34
  width: 100%;
35
- } .navigation-bar__sticky_14f87 {
35
+ } .navigation-bar__sticky_byf8d {
36
36
  position: sticky;
37
37
  top: var(--gap-0);
38
38
  z-index: 1;
39
- } .navigation-bar__border_14f87 {
39
+ } .navigation-bar__border_byf8d {
40
40
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
41
- } .navigation-bar__mainLine_14f87 {
41
+ } .navigation-bar__mainLine_byf8d {
42
42
  display: flex;
43
43
  background-color: inherit;
44
44
  justify-content: space-between;
45
45
  min-height: 40px;
46
46
  align-items: stretch;
47
- } .navigation-bar__left_14f87 {
47
+ } .navigation-bar__left_byf8d {
48
48
  text-align: left;
49
- } .navigation-bar__center_14f87 {
49
+ } .navigation-bar__center_byf8d {
50
50
  text-align: center;
51
- } .navigation-bar__children_14f87 {
51
+ } .navigation-bar__children_byf8d {
52
52
  width: 100%;
53
- } .navigation-bar__content_14f87 {
53
+ } .navigation-bar__content_byf8d {
54
54
  display: flex;
55
55
  flex-grow: 1;
56
56
  justify-content: center;
57
57
  flex-flow: column nowrap;
58
58
  color: var(--color-light-text-primary)
59
- } .navigation-bar__content_14f87.navigation-bar__left_14f87 {
59
+ } .navigation-bar__content_byf8d.navigation-bar__left_byf8d {
60
60
  padding: var(--gap-0) var(--gap-16);
61
- } .navigation-bar__content_14f87 > .navigation-bar__title_14f87,
62
- .navigation-bar__content_14f87 > .navigation-bar__subtitle_14f87 {
61
+ } .navigation-bar__content_byf8d > .navigation-bar__title_byf8d,
62
+ .navigation-bar__content_byf8d > .navigation-bar__subtitle_byf8d {
63
63
  -webkit-line-clamp: 1;
64
64
  display: -webkit-box;
65
65
  -webkit-box-orient: vertical;
66
66
  overflow: hidden;
67
67
  word-break: break-all;
68
- } .navigation-bar__title_14f87 {
68
+ } .navigation-bar__title_byf8d {
69
69
  font-size: 16px;
70
70
  line-height: 20px;
71
71
  font-weight: 500
72
- } .navigation-bar__title_14f87.navigation-bar__left_14f87 {
72
+ } .navigation-bar__title_byf8d.navigation-bar__left_byf8d {
73
73
  font-size: 20px;
74
74
  line-height: 28px;
75
75
  font-weight: 600;
76
- } .navigation-bar__subtitle_14f87 {
76
+ } .navigation-bar__subtitle_byf8d {
77
77
  font-size: 14px;
78
78
  line-height: 20px;
79
79
  font-weight: 400;
80
80
  color: var(--color-light-text-secondary);
81
- } .navigation-bar__addons_14f87 {
81
+ } .navigation-bar__addons_byf8d {
82
82
  min-width: 48px;
83
83
  display: flex;
84
84
  justify-content: center;
85
- } .navigation-bar__rightAddons_14f87 {
85
+ } .navigation-bar__rightAddons_byf8d {
86
86
  margin-left: auto;
87
87
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 8u8d2 */
1
+ /* hash: xzdj0 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,60 +28,60 @@
28
28
  --gap-16: var(--gap-m);
29
29
  } :root {
30
30
  } :root {
31
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_14f87 {
31
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_byf8d {
32
32
  padding: var(--gap-8) var(--gap-4);
33
33
  box-sizing: border-box;
34
34
  width: 100%;
35
- } .navigation-bar__sticky_14f87 {
35
+ } .navigation-bar__sticky_byf8d {
36
36
  position: sticky;
37
37
  top: var(--gap-0);
38
38
  z-index: 1;
39
- } .navigation-bar__border_14f87 {
39
+ } .navigation-bar__border_byf8d {
40
40
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
41
- } .navigation-bar__mainLine_14f87 {
41
+ } .navigation-bar__mainLine_byf8d {
42
42
  display: flex;
43
43
  background-color: inherit;
44
44
  justify-content: space-between;
45
45
  min-height: 40px;
46
46
  align-items: stretch;
47
- } .navigation-bar__left_14f87 {
47
+ } .navigation-bar__left_byf8d {
48
48
  text-align: left;
49
- } .navigation-bar__center_14f87 {
49
+ } .navigation-bar__center_byf8d {
50
50
  text-align: center;
51
- } .navigation-bar__children_14f87 {
51
+ } .navigation-bar__children_byf8d {
52
52
  width: 100%;
53
- } .navigation-bar__content_14f87 {
53
+ } .navigation-bar__content_byf8d {
54
54
  display: flex;
55
55
  flex-grow: 1;
56
56
  justify-content: center;
57
57
  flex-flow: column nowrap;
58
58
  color: var(--color-light-text-primary)
59
- } .navigation-bar__content_14f87.navigation-bar__left_14f87 {
59
+ } .navigation-bar__content_byf8d.navigation-bar__left_byf8d {
60
60
  padding: var(--gap-0) var(--gap-16);
61
- } .navigation-bar__content_14f87 > .navigation-bar__title_14f87,
62
- .navigation-bar__content_14f87 > .navigation-bar__subtitle_14f87 {
61
+ } .navigation-bar__content_byf8d > .navigation-bar__title_byf8d,
62
+ .navigation-bar__content_byf8d > .navigation-bar__subtitle_byf8d {
63
63
  -webkit-line-clamp: 1;
64
64
  display: -webkit-box;
65
65
  -webkit-box-orient: vertical;
66
66
  overflow: hidden;
67
67
  word-break: break-all;
68
- } .navigation-bar__title_14f87 {
68
+ } .navigation-bar__title_byf8d {
69
69
  font-size: 16px;
70
70
  line-height: 20px;
71
71
  font-weight: 500
72
- } .navigation-bar__title_14f87.navigation-bar__left_14f87 {
72
+ } .navigation-bar__title_byf8d.navigation-bar__left_byf8d {
73
73
  font-size: 20px;
74
74
  line-height: 28px;
75
75
  font-weight: 600;
76
- } .navigation-bar__subtitle_14f87 {
76
+ } .navigation-bar__subtitle_byf8d {
77
77
  font-size: 14px;
78
78
  line-height: 20px;
79
79
  font-weight: 400;
80
80
  color: var(--color-light-text-secondary);
81
- } .navigation-bar__addons_14f87 {
81
+ } .navigation-bar__addons_byf8d {
82
82
  min-width: 48px;
83
83
  display: flex;
84
84
  justify-content: center;
85
- } .navigation-bar__rightAddons_14f87 {
85
+ } .navigation-bar__rightAddons_byf8d {
86
86
  margin-left: auto;
87
87
  }
@@ -2,7 +2,7 @@ import React, { forwardRef, useState, useRef, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { getDataTestId } from '@alfalab/core-components-shared/modern';
4
4
 
5
- const styles = {"component":"navigation-bar__component_14f87","sticky":"navigation-bar__sticky_14f87","border":"navigation-bar__border_14f87","mainLine":"navigation-bar__mainLine_14f87","left":"navigation-bar__left_14f87","center":"navigation-bar__center_14f87","children":"navigation-bar__children_14f87","content":"navigation-bar__content_14f87","title":"navigation-bar__title_14f87","subtitle":"navigation-bar__subtitle_14f87","addons":"navigation-bar__addons_14f87","rightAddons":"navigation-bar__rightAddons_14f87"};
5
+ const styles = {"component":"navigation-bar__component_byf8d","sticky":"navigation-bar__sticky_byf8d","border":"navigation-bar__border_byf8d","mainLine":"navigation-bar__mainLine_byf8d","left":"navigation-bar__left_byf8d","center":"navigation-bar__center_byf8d","children":"navigation-bar__children_byf8d","content":"navigation-bar__content_byf8d","title":"navigation-bar__title_byf8d","subtitle":"navigation-bar__subtitle_byf8d","addons":"navigation-bar__addons_byf8d","rightAddons":"navigation-bar__rightAddons_byf8d"};
6
6
  require('./index.css')
7
7
 
8
8
  const NavigationBar = forwardRef(({ align = 'center', rightAddons, leftAddons, bottomAddons, sticky, border, subtitle, title, children, backgroundColor = 'var(--color-light-base-bg-primary)', contentWrapperClassName, className, contentClassName, rightAddonsClassName, leftAddonsClassName, bottomAddonsClassName, dataTestId, }, ref) => {
@@ -10,20 +10,19 @@ const NavigationBar = forwardRef(({ align = 'center', rightAddons, leftAddons, b
10
10
  const leftAddonsRef = useRef(null);
11
11
  const rightAddonsRef = useRef(null);
12
12
  const hasLeftAddons = leftAddons && align !== 'left';
13
+ // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов
13
14
  useEffect(() => {
14
- if (hasLeftAddons) {
15
- const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
16
- const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
17
- const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
18
- const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
19
- setTitleMargin((prev) => {
20
- const newState = shouldAddLeftMargin
21
- ? { left: marginSize, right: 0 }
22
- : { left: 0, right: marginSize };
23
- const isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
24
- return isStateChanged ? newState : prev;
25
- });
26
- }
15
+ const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
16
+ const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
17
+ const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
18
+ const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
19
+ setTitleMargin((prev) => {
20
+ const newState = shouldAddLeftMargin
21
+ ? { left: marginSize, right: 0 }
22
+ : { left: 0, right: marginSize };
23
+ const isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
24
+ return isStateChanged ? newState : prev;
25
+ });
27
26
  }, [hasLeftAddons, leftAddons, rightAddons]);
28
27
  return (React.createElement("div", { ref: ref, className: cn(styles.component, {
29
28
  [styles.border]: border,
@@ -4,7 +4,7 @@ import { ButtonDesktop } from '@alfalab/core-components-button/modern/desktop';
4
4
  import { ChevronLeftMIcon } from '@alfalab/icons-glyph/ChevronLeftMIcon';
5
5
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
6
6
 
7
- const styles = {"component":"navigation-bar__component_r853d","iconWrapper":"navigation-bar__iconWrapper_r853d","back":"navigation-bar__back_r853d","floating":"navigation-bar__floating_r853d"};
7
+ const styles = {"component":"navigation-bar__component_1p9bz","iconWrapper":"navigation-bar__iconWrapper_1p9bz","back":"navigation-bar__back_1p9bz","floating":"navigation-bar__floating_1p9bz"};
8
8
  require('./index.css')
9
9
 
10
10
  const iconComponents = {
@@ -1,4 +1,4 @@
1
- /* hash: 1xw1m */
1
+ /* hash: xw0ux */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
@@ -24,11 +24,11 @@
24
24
  /* новые значения, используйте их */
25
25
  } :root {
26
26
  } :root {
27
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_r853d {
27
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_1p9bz {
28
28
  height: 100%;
29
29
  border-radius: var(--border-radius-pill);
30
30
  min-width: 48px;
31
- } .navigation-bar__iconWrapper_r853d {
31
+ } .navigation-bar__iconWrapper_1p9bz {
32
32
  display: inline-flex;
33
33
  align-items: center;
34
34
  justify-content: center;
@@ -37,12 +37,12 @@
37
37
  border-radius: var(--border-radius-circle);
38
38
  background: var(--color-light-neutral-translucent-100);
39
39
  vertical-align: middle
40
- } .navigation-bar__iconWrapper_r853d.navigation-bar__back_r853d {
40
+ } .navigation-bar__iconWrapper_1p9bz.navigation-bar__back_1p9bz {
41
41
  background: transparent;
42
- } .navigation-bar__floating_r853d path {
42
+ } .navigation-bar__floating_1p9bz path {
43
43
  fill: var(--color-light-neutral-translucent-700);
44
- } .navigation-bar__floating_r853d:hover path {
44
+ } .navigation-bar__floating_1p9bz:hover path {
45
45
  fill: var(--color-light-neutral-translucent-700-hover);
46
- } .navigation-bar__floating_r853d:active path {
46
+ } .navigation-bar__floating_1p9bz:active path {
47
47
  fill: var(--color-light-neutral-translucent-700-press);
48
48
  }
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { ButtonDesktop } from '@alfalab/core-components-button/modern/desktop';
4
- import { Typography } from '@alfalab/core-components-typography/modern';
4
+ import { Text } from '@alfalab/core-components-typography/modern';
5
5
 
6
- const styles = {"component":"navigation-bar__component_1ihho","text":"navigation-bar__text_1ihho"};
6
+ const styles = {"component":"navigation-bar__component_fes6w","text":"navigation-bar__text_fes6w"};
7
7
  require('./index.css')
8
8
 
9
9
  const ActionTextAddon = ({ text = 'Назад', onClick, className, action, dataTestId, ...htmlAttributes }) => (React.createElement(ButtonDesktop, { view: 'text', size: 's', onClick: onClick, "aria-label": text, className: cn(styles.component, className), dataTestId: dataTestId, ...htmlAttributes },
10
- React.createElement(Typography.Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
10
+ React.createElement(Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
11
11
 
12
12
  export { ActionTextAddon };
@@ -1,4 +1,4 @@
1
- /* hash: 1sfuq */
1
+ /* hash: 102gx */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -22,8 +22,8 @@
22
22
  --gap-16: var(--gap-m);
23
23
  } :root {
24
24
  } :root {
25
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_1ihho {
25
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_fes6w {
26
26
  height: 100%;
27
- } .navigation-bar__text_1ihho {
27
+ } .navigation-bar__text_fes6w {
28
28
  padding: var(--gap-8) var(--gap-16);
29
29
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 8u8d2 */
1
+ /* hash: xzdj0 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,60 +28,60 @@
28
28
  --gap-16: var(--gap-m);
29
29
  } :root {
30
30
  } :root {
31
- } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_14f87 {
31
+ } /* сбрасывает синюю подсветку при нажатии */ .navigation-bar__component_byf8d {
32
32
  padding: var(--gap-8) var(--gap-4);
33
33
  box-sizing: border-box;
34
34
  width: 100%;
35
- } .navigation-bar__sticky_14f87 {
35
+ } .navigation-bar__sticky_byf8d {
36
36
  position: sticky;
37
37
  top: var(--gap-0);
38
38
  z-index: 1;
39
- } .navigation-bar__border_14f87 {
39
+ } .navigation-bar__border_byf8d {
40
40
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
41
- } .navigation-bar__mainLine_14f87 {
41
+ } .navigation-bar__mainLine_byf8d {
42
42
  display: flex;
43
43
  background-color: inherit;
44
44
  justify-content: space-between;
45
45
  min-height: 40px;
46
46
  align-items: stretch;
47
- } .navigation-bar__left_14f87 {
47
+ } .navigation-bar__left_byf8d {
48
48
  text-align: left;
49
- } .navigation-bar__center_14f87 {
49
+ } .navigation-bar__center_byf8d {
50
50
  text-align: center;
51
- } .navigation-bar__children_14f87 {
51
+ } .navigation-bar__children_byf8d {
52
52
  width: 100%;
53
- } .navigation-bar__content_14f87 {
53
+ } .navigation-bar__content_byf8d {
54
54
  display: flex;
55
55
  flex-grow: 1;
56
56
  justify-content: center;
57
57
  flex-flow: column nowrap;
58
58
  color: var(--color-light-text-primary)
59
- } .navigation-bar__content_14f87.navigation-bar__left_14f87 {
59
+ } .navigation-bar__content_byf8d.navigation-bar__left_byf8d {
60
60
  padding: var(--gap-0) var(--gap-16);
61
- } .navigation-bar__content_14f87 > .navigation-bar__title_14f87,
62
- .navigation-bar__content_14f87 > .navigation-bar__subtitle_14f87 {
61
+ } .navigation-bar__content_byf8d > .navigation-bar__title_byf8d,
62
+ .navigation-bar__content_byf8d > .navigation-bar__subtitle_byf8d {
63
63
  -webkit-line-clamp: 1;
64
64
  display: -webkit-box;
65
65
  -webkit-box-orient: vertical;
66
66
  overflow: hidden;
67
67
  word-break: break-all;
68
- } .navigation-bar__title_14f87 {
68
+ } .navigation-bar__title_byf8d {
69
69
  font-size: 16px;
70
70
  line-height: 20px;
71
71
  font-weight: 500
72
- } .navigation-bar__title_14f87.navigation-bar__left_14f87 {
72
+ } .navigation-bar__title_byf8d.navigation-bar__left_byf8d {
73
73
  font-size: 20px;
74
74
  line-height: 28px;
75
75
  font-weight: 600;
76
- } .navigation-bar__subtitle_14f87 {
76
+ } .navigation-bar__subtitle_byf8d {
77
77
  font-size: 14px;
78
78
  line-height: 20px;
79
79
  font-weight: 400;
80
80
  color: var(--color-light-text-secondary);
81
- } .navigation-bar__addons_14f87 {
81
+ } .navigation-bar__addons_byf8d {
82
82
  min-width: 48px;
83
83
  display: flex;
84
84
  justify-content: center;
85
- } .navigation-bar__rightAddons_14f87 {
85
+ } .navigation-bar__rightAddons_byf8d {
86
86
  margin-left: auto;
87
87
  }
@@ -8,20 +8,19 @@ const NavigationBar = forwardRef(({ align = 'center', rightAddons, leftAddons, b
8
8
  const leftAddonsRef = useRef(null);
9
9
  const rightAddonsRef = useRef(null);
10
10
  const hasLeftAddons = leftAddons && align !== 'left';
11
+ // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов
11
12
  useEffect(() => {
12
- if (hasLeftAddons) {
13
- const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
14
- const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
15
- const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
16
- const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
17
- setTitleMargin((prev) => {
18
- const newState = shouldAddLeftMargin
19
- ? { left: marginSize, right: 0 }
20
- : { left: 0, right: marginSize };
21
- const isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
22
- return isStateChanged ? newState : prev;
23
- });
24
- }
13
+ const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
14
+ const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
15
+ const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
16
+ const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
17
+ setTitleMargin((prev) => {
18
+ const newState = shouldAddLeftMargin
19
+ ? { left: marginSize, right: 0 }
20
+ : { left: 0, right: marginSize };
21
+ const isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
22
+ return isStateChanged ? newState : prev;
23
+ });
25
24
  }, [hasLeftAddons, leftAddons, rightAddons]);
26
25
  return (React.createElement("div", { ref: ref, className: cn(styles.component, {
27
26
  [styles.border]: border,
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { ButtonDesktop } from '@alfalab/core-components-button/moderncssm/desktop';
4
- import { Typography } from '@alfalab/core-components-typography/moderncssm';
4
+ import { Text } from '@alfalab/core-components-typography/moderncssm';
5
5
  import styles from './index.module.css';
6
6
 
7
7
  const ActionTextAddon = ({ text = 'Назад', onClick, className, action, dataTestId, ...htmlAttributes }) => (React.createElement(ButtonDesktop, { view: 'text', size: 's', onClick: onClick, "aria-label": text, className: cn(styles.component, className), dataTestId: dataTestId, ...htmlAttributes },
8
- React.createElement(Typography.Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
8
+ React.createElement(Text, { className: styles.text, view: 'component', weight: action === 'primary' ? 'medium' : 'regular' }, text)));
9
9
 
10
10
  export { ActionTextAddon };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-navigation-bar",
3
- "version": "1.2.9",
3
+ "version": "1.2.11",
4
4
  "description": "NavigationBar",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,11 +14,11 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-button": "^11.10.2",
18
- "@alfalab/core-components-typography": "^4.11.0",
17
+ "@alfalab/core-components-button": "^11.11.1",
18
+ "@alfalab/core-components-typography": "^4.11.1",
19
19
  "@alfalab/core-components-shared": "^0.14.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
21
- "classnames": "^2.3.1",
21
+ "classnames": "^2.5.1",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
24
  "themesVersion": "13.6.0",
package/src/Component.tsx CHANGED
@@ -121,25 +121,23 @@ export const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(
121
121
  const rightAddonsRef = useRef<HTMLDivElement>(null);
122
122
  const hasLeftAddons = leftAddons && align !== 'left';
123
123
 
124
+ // добавляет отступ для того чтобы title находился по центру не зависимо от ширины аддонов
124
125
  useEffect(() => {
125
- if (hasLeftAddons) {
126
- const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
127
- const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
126
+ const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
127
+ const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
128
128
 
129
- const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
130
- const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
129
+ const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
130
+ const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
131
131
 
132
- setTitleMargin((prev) => {
133
- const newState = shouldAddLeftMargin
134
- ? { left: marginSize, right: 0 }
135
- : { left: 0, right: marginSize };
132
+ setTitleMargin((prev) => {
133
+ const newState = shouldAddLeftMargin
134
+ ? { left: marginSize, right: 0 }
135
+ : { left: 0, right: marginSize };
136
136
 
137
- const isStateChanged =
138
- prev.left !== newState.left || prev.right !== newState.right;
137
+ const isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
139
138
 
140
- return isStateChanged ? newState : prev;
141
- });
142
- }
139
+ return isStateChanged ? newState : prev;
140
+ });
143
141
  }, [hasLeftAddons, leftAddons, rightAddons]);
144
142
 
145
143
  return (
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
4
  import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
5
- import { Typography } from '@alfalab/core-components-typography';
5
+ import { Text } from '@alfalab/core-components-typography';
6
6
 
7
7
  import styles from './index.module.css';
8
8
 
@@ -50,12 +50,12 @@ export const ActionTextAddon: React.FC<ActionTextAddonProps> = ({
50
50
  dataTestId={dataTestId}
51
51
  {...htmlAttributes}
52
52
  >
53
- <Typography.Text
53
+ <Text
54
54
  className={styles.text}
55
55
  view='component'
56
56
  weight={action === 'primary' ? 'medium' : 'regular'}
57
57
  >
58
58
  {text}
59
- </Typography.Text>
59
+ </Text>
60
60
  </ButtonDesktop>
61
61
  );