@alfalab/core-components-navigation-bar 1.0.7 → 1.1.1

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.d.ts +4 -2
  2. package/Component.js +5 -4
  3. package/components/action-icon-addon/Component.js +1 -1
  4. package/components/action-icon-addon/index.css +10 -8
  5. package/components/action-text-addon/Component.js +1 -1
  6. package/components/action-text-addon/index.css +8 -6
  7. package/cssm/Component.d.ts +4 -2
  8. package/cssm/Component.js +4 -3
  9. package/cssm/components/action-icon-addon/index.module.css +3 -1
  10. package/cssm/components/action-text-addon/index.module.css +5 -3
  11. package/cssm/index.module.css +6 -4
  12. package/esm/Component.d.ts +4 -2
  13. package/esm/Component.js +6 -5
  14. package/esm/components/action-icon-addon/Component.js +1 -1
  15. package/esm/components/action-icon-addon/index.css +10 -8
  16. package/esm/components/action-text-addon/Component.js +1 -1
  17. package/esm/components/action-text-addon/index.css +8 -6
  18. package/esm/index.css +23 -21
  19. package/index.css +23 -21
  20. package/modern/Component.d.ts +4 -2
  21. package/modern/Component.js +6 -5
  22. package/modern/components/action-icon-addon/Component.js +1 -1
  23. package/modern/components/action-icon-addon/index.css +10 -8
  24. package/modern/components/action-text-addon/Component.js +1 -1
  25. package/modern/components/action-text-addon/index.css +8 -6
  26. package/modern/index.css +23 -21
  27. package/package.json +6 -4
  28. package/src/Component.tsx +115 -106
package/Component.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- import { FC, ReactNode } from 'react';
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ReactNode } from "react";
2
4
  interface NavigationBarProps {
3
5
  /**
4
6
  * Заголовок
@@ -70,5 +72,5 @@ interface NavigationBarProps {
70
72
  */
71
73
  dataTestId?: string;
72
74
  }
73
- declare const NavigationBar: FC<NavigationBarProps>;
75
+ declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
74
76
  export { NavigationBarProps, NavigationBar };
package/Component.js CHANGED
@@ -12,10 +12,10 @@ 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_oyqj6","sticky":"navigation-bar__sticky_oyqj6","border":"navigation-bar__border_oyqj6","mainLine":"navigation-bar__mainLine_oyqj6","left":"navigation-bar__left_oyqj6","center":"navigation-bar__center_oyqj6","children":"navigation-bar__children_oyqj6","content":"navigation-bar__content_oyqj6","title":"navigation-bar__title_oyqj6","subtitle":"navigation-bar__subtitle_oyqj6","addons":"navigation-bar__addons_oyqj6","rightAddons":"navigation-bar__rightAddons_oyqj6"};
15
+ var styles = {"component":"navigation-bar__component_4e67k","sticky":"navigation-bar__sticky_4e67k","border":"navigation-bar__border_4e67k","mainLine":"navigation-bar__mainLine_4e67k","left":"navigation-bar__left_4e67k","center":"navigation-bar__center_4e67k","children":"navigation-bar__children_4e67k","content":"navigation-bar__content_4e67k","title":"navigation-bar__title_4e67k","subtitle":"navigation-bar__subtitle_4e67k","addons":"navigation-bar__addons_4e67k","rightAddons":"navigation-bar__rightAddons_4e67k"};
16
16
  require('./index.css')
17
17
 
18
- var NavigationBar = function (_a) {
18
+ var NavigationBar = React.forwardRef(function (_a, ref) {
19
19
  var _b, _c, _d;
20
20
  var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, contentWrapperClassName = _a.contentWrapperClassName, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
21
21
  var _g = React.useState({ left: 0, right: 0 }), titleMargin = _g[0], setTitleMargin = _g[1];
@@ -38,7 +38,7 @@ var NavigationBar = function (_a) {
38
38
  });
39
39
  }
40
40
  }, [hasLeftAddons, leftAddons, rightAddons]);
41
- return (React__default.default.createElement("div", { className: cn__default.default(styles.component, (_b = {},
41
+ return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles.component, (_b = {},
42
42
  _b[styles.border] = border,
43
43
  _b[styles.sticky] = sticky,
44
44
  _b), className), style: tslib.__assign({}, (backgroundColor && { backgroundColor: backgroundColor })), "data-test-id": dataTestId },
@@ -59,6 +59,7 @@ var NavigationBar = function (_a) {
59
59
  subtitle && (React__default.default.createElement("div", { className: styles.subtitle, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'subtitle') }, subtitle)))),
60
60
  rightAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.rightAddons, styles.addons, rightAddonsClassName), ref: rightAddonsRef }, rightAddons))),
61
61
  bottomAddons && React__default.default.createElement("div", { className: bottomAddonsClassName }, bottomAddons)));
62
- };
62
+ });
63
+ NavigationBar.displayName = 'NavigationBar';
63
64
 
64
65
  exports.NavigationBar = NavigationBar;
package/components/action-icon-addon/Component.js CHANGED
@@ -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_15t4v","iconWrapper":"navigation-bar__iconWrapper_15t4v","back":"navigation-bar__back_15t4v","floating":"navigation-bar__floating_15t4v"};
17
+ var styles = {"component":"navigation-bar__component_1m2m3","iconWrapper":"navigation-bar__iconWrapper_1m2m3","back":"navigation-bar__back_1m2m3","floating":"navigation-bar__floating_1m2m3"};
18
18
  require('./index.css')
19
19
 
20
20
  var iconComponents = {
package/components/action-icon-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qlugi */
1
+ /* hash: 1fkeg */
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);
@@ -17,14 +17,16 @@
17
17
  } :root {
18
18
  --border-radius-circle: 50%;
19
19
  --border-radius-pill: 99px;
20
+ } :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 */
21
+
22
+ /* новые значения, используйте их */
20
23
  } :root {
21
24
  } :root {
22
- } :root {
23
- } .navigation-bar__component_15t4v {
25
+ } .navigation-bar__component_1m2m3 {
24
26
  height: 100%;
25
27
  border-radius: var(--border-radius-pill);
26
28
  min-width: 48px;
27
- } .navigation-bar__iconWrapper_15t4v {
29
+ } .navigation-bar__iconWrapper_1m2m3 {
28
30
  display: inline-flex;
29
31
  align-items: center;
30
32
  justify-content: center;
@@ -33,12 +35,12 @@
33
35
  border-radius: var(--border-radius-circle);
34
36
  background: var(--color-light-neutral-translucent-100);
35
37
  vertical-align: middle
36
- } .navigation-bar__iconWrapper_15t4v.navigation-bar__back_15t4v {
38
+ } .navigation-bar__iconWrapper_1m2m3.navigation-bar__back_1m2m3 {
37
39
  background: transparent;
38
- } .navigation-bar__floating_15t4v path {
40
+ } .navigation-bar__floating_1m2m3 path {
39
41
  fill: var(--color-light-neutral-translucent-700);
40
- } .navigation-bar__floating_15t4v:hover path {
42
+ } .navigation-bar__floating_1m2m3:hover path {
41
43
  fill: var(--color-light-neutral-translucent-700-hover);
42
- } .navigation-bar__floating_15t4v:active path {
44
+ } .navigation-bar__floating_1m2m3:active path {
43
45
  fill: var(--color-light-neutral-translucent-700-press);
44
46
  }
package/components/action-text-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_1pt44","text":"navigation-bar__text_1pt44"};
16
+ var styles = {"component":"navigation-bar__component_bckej","text":"navigation-bar__text_bckej"};
17
17
  require('./index.css')
18
18
 
19
19
  var ActionTextAddon = function (_a) {
package/components/action-text-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 3wez5 */
1
+ /* hash: 1dxum */
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 */
@@ -11,13 +11,15 @@
11
11
 
12
12
  /* Hard up */
13
13
  } :root {
14
- } :root {
15
- --gap-xs: 8px;
16
- --gap-m: 16px;
14
+ } :root { /* deprecated */ /* deprecated */
15
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
16
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
17
19
  } :root {
18
20
  } :root {
19
- } .navigation-bar__component_1pt44 {
21
+ } .navigation-bar__component_bckej {
20
22
  height: 100%;
21
- } .navigation-bar__text_1pt44 {
23
+ } .navigation-bar__text_bckej {
22
24
  padding: var(--gap-xs) var(--gap-m);
23
25
  }
package/cssm/Component.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- import { FC, ReactNode } from 'react';
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ReactNode } from "react";
2
4
  interface NavigationBarProps {
3
5
  /**
4
6
  * Заголовок
@@ -70,5 +72,5 @@ interface NavigationBarProps {
70
72
  */
71
73
  dataTestId?: string;
72
74
  }
73
- declare const NavigationBar: FC<NavigationBarProps>;
75
+ declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
74
76
  export { NavigationBarProps, NavigationBar };
package/cssm/Component.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
16
16
 
17
- var NavigationBar = function (_a) {
17
+ var NavigationBar = React.forwardRef(function (_a, ref) {
18
18
  var _b, _c, _d;
19
19
  var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, contentWrapperClassName = _a.contentWrapperClassName, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
20
20
  var _g = React.useState({ left: 0, right: 0 }), titleMargin = _g[0], setTitleMargin = _g[1];
@@ -37,7 +37,7 @@ var NavigationBar = function (_a) {
37
37
  });
38
38
  }
39
39
  }, [hasLeftAddons, leftAddons, rightAddons]);
40
- return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {},
40
+ return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, (_b = {},
41
41
  _b[styles__default.default.border] = border,
42
42
  _b[styles__default.default.sticky] = sticky,
43
43
  _b), className), style: tslib.__assign({}, (backgroundColor && { backgroundColor: backgroundColor })), "data-test-id": dataTestId },
@@ -58,6 +58,7 @@ var NavigationBar = function (_a) {
58
58
  subtitle && (React__default.default.createElement("div", { className: styles__default.default.subtitle, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'subtitle') }, subtitle)))),
59
59
  rightAddons && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.rightAddons, styles__default.default.addons, rightAddonsClassName), ref: rightAddonsRef }, rightAddons))),
60
60
  bottomAddons && React__default.default.createElement("div", { className: bottomAddonsClassName }, bottomAddons)));
61
- };
61
+ });
62
+ NavigationBar.displayName = 'NavigationBar';
62
63
 
63
64
  exports.NavigationBar = NavigationBar;
package/cssm/components/action-icon-addon/index.module.css CHANGED
@@ -16,7 +16,9 @@
16
16
  } :root {
17
17
  --border-radius-circle: 50%;
18
18
  --border-radius-pill: 99px;
19
- } :root {
19
+ } :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 */
20
+
21
+ /* новые значения, используйте их */
20
22
  } :root {
21
23
  } :root {
22
24
  } .component {
package/cssm/components/action-text-addon/index.module.css CHANGED
@@ -10,9 +10,11 @@
10
10
 
11
11
  /* Hard up */
12
12
  } :root {
13
- } :root {
14
- --gap-xs: 8px;
15
- --gap-m: 16px;
13
+ } :root { /* deprecated */ /* deprecated */
14
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
15
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
16
18
  } :root {
17
19
  } :root {
18
20
  } .component {
package/cssm/index.module.css CHANGED
@@ -13,10 +13,12 @@
13
13
 
14
14
  /* Hard up */
15
15
  } :root {
16
- } :root {
17
- --gap-2xs: 4px;
18
- --gap-xs: 8px;
19
- --gap-m: 16px;
16
+ } :root { /* deprecated */
17
+ --gap-2xs: 4px; /* deprecated */
18
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
19
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
20
+
21
+ /* новые значения, используйте их */
20
22
  } :root {
21
23
  } :root {
22
24
  } .component {
package/esm/Component.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- import { FC, ReactNode } from 'react';
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ReactNode } from "react";
2
4
  interface NavigationBarProps {
3
5
  /**
4
6
  * Заголовок
@@ -70,5 +72,5 @@ interface NavigationBarProps {
70
72
  */
71
73
  dataTestId?: string;
72
74
  }
73
- declare const NavigationBar: FC<NavigationBarProps>;
75
+ declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
74
76
  export { NavigationBarProps, NavigationBar };
package/esm/Component.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { __assign } from 'tslib';
2
- import React, { useState, useRef, useEffect } from 'react';
2
+ 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_oyqj6","sticky":"navigation-bar__sticky_oyqj6","border":"navigation-bar__border_oyqj6","mainLine":"navigation-bar__mainLine_oyqj6","left":"navigation-bar__left_oyqj6","center":"navigation-bar__center_oyqj6","children":"navigation-bar__children_oyqj6","content":"navigation-bar__content_oyqj6","title":"navigation-bar__title_oyqj6","subtitle":"navigation-bar__subtitle_oyqj6","addons":"navigation-bar__addons_oyqj6","rightAddons":"navigation-bar__rightAddons_oyqj6"};
6
+ var styles = {"component":"navigation-bar__component_4e67k","sticky":"navigation-bar__sticky_4e67k","border":"navigation-bar__border_4e67k","mainLine":"navigation-bar__mainLine_4e67k","left":"navigation-bar__left_4e67k","center":"navigation-bar__center_4e67k","children":"navigation-bar__children_4e67k","content":"navigation-bar__content_4e67k","title":"navigation-bar__title_4e67k","subtitle":"navigation-bar__subtitle_4e67k","addons":"navigation-bar__addons_4e67k","rightAddons":"navigation-bar__rightAddons_4e67k"};
7
7
  require('./index.css')
8
8
 
9
- var NavigationBar = function (_a) {
9
+ var NavigationBar = forwardRef(function (_a, ref) {
10
10
  var _b, _c, _d;
11
11
  var _e = _a.align, align = _e === void 0 ? 'center' : _e, rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, bottomAddons = _a.bottomAddons, sticky = _a.sticky, border = _a.border, subtitle = _a.subtitle, title = _a.title, children = _a.children, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'var(--color-light-base-bg-primary)' : _f, contentWrapperClassName = _a.contentWrapperClassName, className = _a.className, contentClassName = _a.contentClassName, rightAddonsClassName = _a.rightAddonsClassName, leftAddonsClassName = _a.leftAddonsClassName, bottomAddonsClassName = _a.bottomAddonsClassName, dataTestId = _a.dataTestId;
12
12
  var _g = useState({ left: 0, right: 0 }), titleMargin = _g[0], setTitleMargin = _g[1];
@@ -29,7 +29,7 @@ var NavigationBar = function (_a) {
29
29
  });
30
30
  }
31
31
  }, [hasLeftAddons, leftAddons, rightAddons]);
32
- return (React.createElement("div", { className: cn(styles.component, (_b = {},
32
+ return (React.createElement("div", { ref: ref, className: cn(styles.component, (_b = {},
33
33
  _b[styles.border] = border,
34
34
  _b[styles.sticky] = sticky,
35
35
  _b), className), style: __assign({}, (backgroundColor && { backgroundColor: backgroundColor })), "data-test-id": dataTestId },
@@ -50,6 +50,7 @@ var NavigationBar = function (_a) {
50
50
  subtitle && (React.createElement("div", { className: styles.subtitle, "data-test-id": getDataTestId(dataTestId, 'subtitle') }, subtitle)))),
51
51
  rightAddons && (React.createElement("div", { className: cn(styles.rightAddons, styles.addons, rightAddonsClassName), ref: rightAddonsRef }, rightAddons))),
52
52
  bottomAddons && React.createElement("div", { className: bottomAddonsClassName }, bottomAddons)));
53
- };
53
+ });
54
+ NavigationBar.displayName = 'NavigationBar';
54
55
 
55
56
  export { NavigationBar };
package/esm/components/action-icon-addon/Component.js CHANGED
@@ -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_15t4v","iconWrapper":"navigation-bar__iconWrapper_15t4v","back":"navigation-bar__back_15t4v","floating":"navigation-bar__floating_15t4v"};
8
+ var styles = {"component":"navigation-bar__component_1m2m3","iconWrapper":"navigation-bar__iconWrapper_1m2m3","back":"navigation-bar__back_1m2m3","floating":"navigation-bar__floating_1m2m3"};
9
9
  require('./index.css')
10
10
 
11
11
  var iconComponents = {
package/esm/components/action-icon-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qlugi */
1
+ /* hash: 1fkeg */
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);
@@ -17,14 +17,16 @@
17
17
  } :root {
18
18
  --border-radius-circle: 50%;
19
19
  --border-radius-pill: 99px;
20
+ } :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 */
21
+
22
+ /* новые значения, используйте их */
20
23
  } :root {
21
24
  } :root {
22
- } :root {
23
- } .navigation-bar__component_15t4v {
25
+ } .navigation-bar__component_1m2m3 {
24
26
  height: 100%;
25
27
  border-radius: var(--border-radius-pill);
26
28
  min-width: 48px;
27
- } .navigation-bar__iconWrapper_15t4v {
29
+ } .navigation-bar__iconWrapper_1m2m3 {
28
30
  display: inline-flex;
29
31
  align-items: center;
30
32
  justify-content: center;
@@ -33,12 +35,12 @@
33
35
  border-radius: var(--border-radius-circle);
34
36
  background: var(--color-light-neutral-translucent-100);
35
37
  vertical-align: middle
36
- } .navigation-bar__iconWrapper_15t4v.navigation-bar__back_15t4v {
38
+ } .navigation-bar__iconWrapper_1m2m3.navigation-bar__back_1m2m3 {
37
39
  background: transparent;
38
- } .navigation-bar__floating_15t4v path {
40
+ } .navigation-bar__floating_1m2m3 path {
39
41
  fill: var(--color-light-neutral-translucent-700);
40
- } .navigation-bar__floating_15t4v:hover path {
42
+ } .navigation-bar__floating_1m2m3:hover path {
41
43
  fill: var(--color-light-neutral-translucent-700-hover);
42
- } .navigation-bar__floating_15t4v:active path {
44
+ } .navigation-bar__floating_1m2m3:active path {
43
45
  fill: var(--color-light-neutral-translucent-700-press);
44
46
  }
package/esm/components/action-text-addon/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { ButtonDesktop } from '@alfalab/core-components-button/esm/desktop';
5
5
  import { Typography } from '@alfalab/core-components-typography/esm';
6
6
 
7
- var styles = {"component":"navigation-bar__component_1pt44","text":"navigation-bar__text_1pt44"};
7
+ var styles = {"component":"navigation-bar__component_bckej","text":"navigation-bar__text_bckej"};
8
8
  require('./index.css')
9
9
 
10
10
  var ActionTextAddon = function (_a) {
package/esm/components/action-text-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 3wez5 */
1
+ /* hash: 1dxum */
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 */
@@ -11,13 +11,15 @@
11
11
 
12
12
  /* Hard up */
13
13
  } :root {
14
- } :root {
15
- --gap-xs: 8px;
16
- --gap-m: 16px;
14
+ } :root { /* deprecated */ /* deprecated */
15
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
16
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
17
19
  } :root {
18
20
  } :root {
19
- } .navigation-bar__component_1pt44 {
21
+ } .navigation-bar__component_bckej {
20
22
  height: 100%;
21
- } .navigation-bar__text_1pt44 {
23
+ } .navigation-bar__text_bckej {
22
24
  padding: var(--gap-xs) var(--gap-m);
23
25
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1xdo4 */
1
+ /* hash: 1xg4b */
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;
@@ -14,66 +14,68 @@
14
14
 
15
15
  /* Hard up */
16
16
  } :root {
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-xs: 8px;
20
- --gap-m: 16px;
17
+ } :root { /* deprecated */
18
+ --gap-2xs: 4px; /* deprecated */
19
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
20
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
21
23
  } :root {
22
24
  } :root {
23
- } .navigation-bar__component_oyqj6 {
25
+ } .navigation-bar__component_4e67k {
24
26
  padding: var(--gap-xs) var(--gap-2xs);
25
27
  box-sizing: border-box;
26
28
  width: 100%;
27
- } .navigation-bar__sticky_oyqj6 {
29
+ } .navigation-bar__sticky_4e67k {
28
30
  position: sticky;
29
31
  top: 0;
30
32
  z-index: 1;
31
- } .navigation-bar__border_oyqj6 {
33
+ } .navigation-bar__border_4e67k {
32
34
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
33
- } .navigation-bar__mainLine_oyqj6 {
35
+ } .navigation-bar__mainLine_4e67k {
34
36
  display: flex;
35
37
  background-color: inherit;
36
38
  justify-content: space-between;
37
39
  min-height: 40px;
38
40
  align-items: stretch;
39
- } .navigation-bar__left_oyqj6 {
41
+ } .navigation-bar__left_4e67k {
40
42
  text-align: left;
41
- } .navigation-bar__center_oyqj6 {
43
+ } .navigation-bar__center_4e67k {
42
44
  text-align: center;
43
- } .navigation-bar__children_oyqj6 {
45
+ } .navigation-bar__children_4e67k {
44
46
  width: 100%;
45
- } .navigation-bar__content_oyqj6 {
47
+ } .navigation-bar__content_4e67k {
46
48
  display: flex;
47
49
  flex-grow: 1;
48
50
  justify-content: center;
49
51
  flex-flow: column nowrap;
50
52
  color: var(--color-light-text-primary)
51
- } .navigation-bar__content_oyqj6.navigation-bar__left_oyqj6 {
53
+ } .navigation-bar__content_4e67k.navigation-bar__left_4e67k {
52
54
  padding: 0 var(--gap-m);
53
- } .navigation-bar__content_oyqj6 > .navigation-bar__title_oyqj6,
54
- .navigation-bar__content_oyqj6 > .navigation-bar__subtitle_oyqj6 {
55
+ } .navigation-bar__content_4e67k > .navigation-bar__title_4e67k,
56
+ .navigation-bar__content_4e67k > .navigation-bar__subtitle_4e67k {
55
57
  -webkit-line-clamp: 1;
56
58
  display: -webkit-box;
57
59
  -webkit-box-orient: vertical;
58
60
  overflow: hidden;
59
61
  word-break: break-all;
60
- } .navigation-bar__title_oyqj6 {
62
+ } .navigation-bar__title_4e67k {
61
63
  font-size: 16px;
62
64
  line-height: 20px;
63
65
  font-weight: 500
64
- } .navigation-bar__title_oyqj6.navigation-bar__left_oyqj6 {
66
+ } .navigation-bar__title_4e67k.navigation-bar__left_4e67k {
65
67
  font-size: 20px;
66
68
  line-height: 28px;
67
69
  font-weight: 600;
68
- } .navigation-bar__subtitle_oyqj6 {
70
+ } .navigation-bar__subtitle_4e67k {
69
71
  font-size: 14px;
70
72
  line-height: 20px;
71
73
  font-weight: 400;
72
74
  color: var(--color-light-text-secondary);
73
- } .navigation-bar__addons_oyqj6 {
75
+ } .navigation-bar__addons_4e67k {
74
76
  min-width: 48px;
75
77
  display: flex;
76
78
  justify-content: center;
77
- } .navigation-bar__rightAddons_oyqj6 {
79
+ } .navigation-bar__rightAddons_4e67k {
78
80
  margin-left: auto;
79
81
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1xdo4 */
1
+ /* hash: 1xg4b */
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;
@@ -14,66 +14,68 @@
14
14
 
15
15
  /* Hard up */
16
16
  } :root {
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-xs: 8px;
20
- --gap-m: 16px;
17
+ } :root { /* deprecated */
18
+ --gap-2xs: 4px; /* deprecated */
19
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
20
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
21
23
  } :root {
22
24
  } :root {
23
- } .navigation-bar__component_oyqj6 {
25
+ } .navigation-bar__component_4e67k {
24
26
  padding: var(--gap-xs) var(--gap-2xs);
25
27
  box-sizing: border-box;
26
28
  width: 100%;
27
- } .navigation-bar__sticky_oyqj6 {
29
+ } .navigation-bar__sticky_4e67k {
28
30
  position: sticky;
29
31
  top: 0;
30
32
  z-index: 1;
31
- } .navigation-bar__border_oyqj6 {
33
+ } .navigation-bar__border_4e67k {
32
34
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
33
- } .navigation-bar__mainLine_oyqj6 {
35
+ } .navigation-bar__mainLine_4e67k {
34
36
  display: flex;
35
37
  background-color: inherit;
36
38
  justify-content: space-between;
37
39
  min-height: 40px;
38
40
  align-items: stretch;
39
- } .navigation-bar__left_oyqj6 {
41
+ } .navigation-bar__left_4e67k {
40
42
  text-align: left;
41
- } .navigation-bar__center_oyqj6 {
43
+ } .navigation-bar__center_4e67k {
42
44
  text-align: center;
43
- } .navigation-bar__children_oyqj6 {
45
+ } .navigation-bar__children_4e67k {
44
46
  width: 100%;
45
- } .navigation-bar__content_oyqj6 {
47
+ } .navigation-bar__content_4e67k {
46
48
  display: flex;
47
49
  flex-grow: 1;
48
50
  justify-content: center;
49
51
  flex-flow: column nowrap;
50
52
  color: var(--color-light-text-primary)
51
- } .navigation-bar__content_oyqj6.navigation-bar__left_oyqj6 {
53
+ } .navigation-bar__content_4e67k.navigation-bar__left_4e67k {
52
54
  padding: 0 var(--gap-m);
53
- } .navigation-bar__content_oyqj6 > .navigation-bar__title_oyqj6,
54
- .navigation-bar__content_oyqj6 > .navigation-bar__subtitle_oyqj6 {
55
+ } .navigation-bar__content_4e67k > .navigation-bar__title_4e67k,
56
+ .navigation-bar__content_4e67k > .navigation-bar__subtitle_4e67k {
55
57
  -webkit-line-clamp: 1;
56
58
  display: -webkit-box;
57
59
  -webkit-box-orient: vertical;
58
60
  overflow: hidden;
59
61
  word-break: break-all;
60
- } .navigation-bar__title_oyqj6 {
62
+ } .navigation-bar__title_4e67k {
61
63
  font-size: 16px;
62
64
  line-height: 20px;
63
65
  font-weight: 500
64
- } .navigation-bar__title_oyqj6.navigation-bar__left_oyqj6 {
66
+ } .navigation-bar__title_4e67k.navigation-bar__left_4e67k {
65
67
  font-size: 20px;
66
68
  line-height: 28px;
67
69
  font-weight: 600;
68
- } .navigation-bar__subtitle_oyqj6 {
70
+ } .navigation-bar__subtitle_4e67k {
69
71
  font-size: 14px;
70
72
  line-height: 20px;
71
73
  font-weight: 400;
72
74
  color: var(--color-light-text-secondary);
73
- } .navigation-bar__addons_oyqj6 {
75
+ } .navigation-bar__addons_4e67k {
74
76
  min-width: 48px;
75
77
  display: flex;
76
78
  justify-content: center;
77
- } .navigation-bar__rightAddons_oyqj6 {
79
+ } .navigation-bar__rightAddons_4e67k {
78
80
  margin-left: auto;
79
81
  }
package/modern/Component.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- import { FC, ReactNode } from 'react';
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ReactNode } from "react";
2
4
  interface NavigationBarProps {
3
5
  /**
4
6
  * Заголовок
@@ -70,5 +72,5 @@ interface NavigationBarProps {
70
72
  */
71
73
  dataTestId?: string;
72
74
  }
73
- declare const NavigationBar: FC<NavigationBarProps>;
75
+ declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
74
76
  export { NavigationBarProps, NavigationBar };
package/modern/Component.js CHANGED
@@ -1,11 +1,11 @@
1
- import React, { useState, useRef, useEffect } from 'react';
1
+ 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_oyqj6","sticky":"navigation-bar__sticky_oyqj6","border":"navigation-bar__border_oyqj6","mainLine":"navigation-bar__mainLine_oyqj6","left":"navigation-bar__left_oyqj6","center":"navigation-bar__center_oyqj6","children":"navigation-bar__children_oyqj6","content":"navigation-bar__content_oyqj6","title":"navigation-bar__title_oyqj6","subtitle":"navigation-bar__subtitle_oyqj6","addons":"navigation-bar__addons_oyqj6","rightAddons":"navigation-bar__rightAddons_oyqj6"};
5
+ const styles = {"component":"navigation-bar__component_4e67k","sticky":"navigation-bar__sticky_4e67k","border":"navigation-bar__border_4e67k","mainLine":"navigation-bar__mainLine_4e67k","left":"navigation-bar__left_4e67k","center":"navigation-bar__center_4e67k","children":"navigation-bar__children_4e67k","content":"navigation-bar__content_4e67k","title":"navigation-bar__title_4e67k","subtitle":"navigation-bar__subtitle_4e67k","addons":"navigation-bar__addons_4e67k","rightAddons":"navigation-bar__rightAddons_4e67k"};
6
6
  require('./index.css')
7
7
 
8
- const NavigationBar = ({ align = 'center', rightAddons, leftAddons, bottomAddons, sticky, border, subtitle, title, children, backgroundColor = 'var(--color-light-base-bg-primary)', contentWrapperClassName, className, contentClassName, rightAddonsClassName, leftAddonsClassName, bottomAddonsClassName, dataTestId, }) => {
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) => {
9
9
  const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });
10
10
  const leftAddonsRef = useRef(null);
11
11
  const rightAddonsRef = useRef(null);
@@ -25,7 +25,7 @@ const NavigationBar = ({ align = 'center', rightAddons, leftAddons, bottomAddons
25
25
  });
26
26
  }
27
27
  }, [hasLeftAddons, leftAddons, rightAddons]);
28
- return (React.createElement("div", { className: cn(styles.component, {
28
+ return (React.createElement("div", { ref: ref, className: cn(styles.component, {
29
29
  [styles.border]: border,
30
30
  [styles.sticky]: sticky,
31
31
  }, className), style: {
@@ -50,6 +50,7 @@ const NavigationBar = ({ align = 'center', rightAddons, leftAddons, bottomAddons
50
50
  subtitle && (React.createElement("div", { className: styles.subtitle, "data-test-id": getDataTestId(dataTestId, 'subtitle') }, subtitle)))),
51
51
  rightAddons && (React.createElement("div", { className: cn(styles.rightAddons, styles.addons, rightAddonsClassName), ref: rightAddonsRef }, rightAddons))),
52
52
  bottomAddons && React.createElement("div", { className: bottomAddonsClassName }, bottomAddons)));
53
- };
53
+ });
54
+ NavigationBar.displayName = 'NavigationBar';
54
55
 
55
56
  export { NavigationBar };
package/modern/components/action-icon-addon/Component.js CHANGED
@@ -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_15t4v","iconWrapper":"navigation-bar__iconWrapper_15t4v","back":"navigation-bar__back_15t4v","floating":"navigation-bar__floating_15t4v"};
7
+ const styles = {"component":"navigation-bar__component_1m2m3","iconWrapper":"navigation-bar__iconWrapper_1m2m3","back":"navigation-bar__back_1m2m3","floating":"navigation-bar__floating_1m2m3"};
8
8
  require('./index.css')
9
9
 
10
10
  const iconComponents = {
package/modern/components/action-icon-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: qlugi */
1
+ /* hash: 1fkeg */
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);
@@ -17,14 +17,16 @@
17
17
  } :root {
18
18
  --border-radius-circle: 50%;
19
19
  --border-radius-pill: 99px;
20
+ } :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 */
21
+
22
+ /* новые значения, используйте их */
20
23
  } :root {
21
24
  } :root {
22
- } :root {
23
- } .navigation-bar__component_15t4v {
25
+ } .navigation-bar__component_1m2m3 {
24
26
  height: 100%;
25
27
  border-radius: var(--border-radius-pill);
26
28
  min-width: 48px;
27
- } .navigation-bar__iconWrapper_15t4v {
29
+ } .navigation-bar__iconWrapper_1m2m3 {
28
30
  display: inline-flex;
29
31
  align-items: center;
30
32
  justify-content: center;
@@ -33,12 +35,12 @@
33
35
  border-radius: var(--border-radius-circle);
34
36
  background: var(--color-light-neutral-translucent-100);
35
37
  vertical-align: middle
36
- } .navigation-bar__iconWrapper_15t4v.navigation-bar__back_15t4v {
38
+ } .navigation-bar__iconWrapper_1m2m3.navigation-bar__back_1m2m3 {
37
39
  background: transparent;
38
- } .navigation-bar__floating_15t4v path {
40
+ } .navigation-bar__floating_1m2m3 path {
39
41
  fill: var(--color-light-neutral-translucent-700);
40
- } .navigation-bar__floating_15t4v:hover path {
42
+ } .navigation-bar__floating_1m2m3:hover path {
41
43
  fill: var(--color-light-neutral-translucent-700-hover);
42
- } .navigation-bar__floating_15t4v:active path {
44
+ } .navigation-bar__floating_1m2m3:active path {
43
45
  fill: var(--color-light-neutral-translucent-700-press);
44
46
  }
package/modern/components/action-text-addon/Component.js CHANGED
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { ButtonDesktop } from '@alfalab/core-components-button/modern/desktop';
4
4
  import { Typography } from '@alfalab/core-components-typography/modern';
5
5
 
6
- const styles = {"component":"navigation-bar__component_1pt44","text":"navigation-bar__text_1pt44"};
6
+ const styles = {"component":"navigation-bar__component_bckej","text":"navigation-bar__text_bckej"};
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 },
package/modern/components/action-text-addon/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 3wez5 */
1
+ /* hash: 1dxum */
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 */
@@ -11,13 +11,15 @@
11
11
 
12
12
  /* Hard up */
13
13
  } :root {
14
- } :root {
15
- --gap-xs: 8px;
16
- --gap-m: 16px;
14
+ } :root { /* deprecated */ /* deprecated */
15
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
16
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
17
19
  } :root {
18
20
  } :root {
19
- } .navigation-bar__component_1pt44 {
21
+ } .navigation-bar__component_bckej {
20
22
  height: 100%;
21
- } .navigation-bar__text_1pt44 {
23
+ } .navigation-bar__text_bckej {
22
24
  padding: var(--gap-xs) var(--gap-m);
23
25
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1xdo4 */
1
+ /* hash: 1xg4b */
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;
@@ -14,66 +14,68 @@
14
14
 
15
15
  /* Hard up */
16
16
  } :root {
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-xs: 8px;
20
- --gap-m: 16px;
17
+ } :root { /* deprecated */
18
+ --gap-2xs: 4px; /* deprecated */
19
+ --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
20
+ --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
21
23
  } :root {
22
24
  } :root {
23
- } .navigation-bar__component_oyqj6 {
25
+ } .navigation-bar__component_4e67k {
24
26
  padding: var(--gap-xs) var(--gap-2xs);
25
27
  box-sizing: border-box;
26
28
  width: 100%;
27
- } .navigation-bar__sticky_oyqj6 {
29
+ } .navigation-bar__sticky_4e67k {
28
30
  position: sticky;
29
31
  top: 0;
30
32
  z-index: 1;
31
- } .navigation-bar__border_oyqj6 {
33
+ } .navigation-bar__border_4e67k {
32
34
  box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
33
- } .navigation-bar__mainLine_oyqj6 {
35
+ } .navigation-bar__mainLine_4e67k {
34
36
  display: flex;
35
37
  background-color: inherit;
36
38
  justify-content: space-between;
37
39
  min-height: 40px;
38
40
  align-items: stretch;
39
- } .navigation-bar__left_oyqj6 {
41
+ } .navigation-bar__left_4e67k {
40
42
  text-align: left;
41
- } .navigation-bar__center_oyqj6 {
43
+ } .navigation-bar__center_4e67k {
42
44
  text-align: center;
43
- } .navigation-bar__children_oyqj6 {
45
+ } .navigation-bar__children_4e67k {
44
46
  width: 100%;
45
- } .navigation-bar__content_oyqj6 {
47
+ } .navigation-bar__content_4e67k {
46
48
  display: flex;
47
49
  flex-grow: 1;
48
50
  justify-content: center;
49
51
  flex-flow: column nowrap;
50
52
  color: var(--color-light-text-primary)
51
- } .navigation-bar__content_oyqj6.navigation-bar__left_oyqj6 {
53
+ } .navigation-bar__content_4e67k.navigation-bar__left_4e67k {
52
54
  padding: 0 var(--gap-m);
53
- } .navigation-bar__content_oyqj6 > .navigation-bar__title_oyqj6,
54
- .navigation-bar__content_oyqj6 > .navigation-bar__subtitle_oyqj6 {
55
+ } .navigation-bar__content_4e67k > .navigation-bar__title_4e67k,
56
+ .navigation-bar__content_4e67k > .navigation-bar__subtitle_4e67k {
55
57
  -webkit-line-clamp: 1;
56
58
  display: -webkit-box;
57
59
  -webkit-box-orient: vertical;
58
60
  overflow: hidden;
59
61
  word-break: break-all;
60
- } .navigation-bar__title_oyqj6 {
62
+ } .navigation-bar__title_4e67k {
61
63
  font-size: 16px;
62
64
  line-height: 20px;
63
65
  font-weight: 500
64
- } .navigation-bar__title_oyqj6.navigation-bar__left_oyqj6 {
66
+ } .navigation-bar__title_4e67k.navigation-bar__left_4e67k {
65
67
  font-size: 20px;
66
68
  line-height: 28px;
67
69
  font-weight: 600;
68
- } .navigation-bar__subtitle_oyqj6 {
70
+ } .navigation-bar__subtitle_4e67k {
69
71
  font-size: 14px;
70
72
  line-height: 20px;
71
73
  font-weight: 400;
72
74
  color: var(--color-light-text-secondary);
73
- } .navigation-bar__addons_oyqj6 {
75
+ } .navigation-bar__addons_4e67k {
74
76
  min-width: 48px;
75
77
  display: flex;
76
78
  justify-content: center;
77
- } .navigation-bar__rightAddons_oyqj6 {
79
+ } .navigation-bar__rightAddons_4e67k {
78
80
  margin-left: auto;
79
81
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-navigation-bar",
3
- "version": "1.0.7",
3
+ "version": "1.1.1",
4
4
  "description": "NavigationBar",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,11 +14,13 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-button": "^11.5.2",
18
- "@alfalab/core-components-typography": "^4.6.0",
17
+ "@alfalab/core-components-button": "^11.5.3",
18
+ "@alfalab/core-components-typography": "^4.8.0",
19
19
  "@alfalab/core-components-shared": "^0.11.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
- }
23
+ },
24
+ "themesVersion": "13.0.1",
25
+ "varsVersion": "9.10.0"
24
26
  }
package/src/Component.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { FC, ReactNode, useEffect, useRef, useState } from 'react';
1
+ import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
4
  import { getDataTestId } from '@alfalab/core-components-shared';
@@ -93,119 +93,128 @@ export interface NavigationBarProps {
93
93
  dataTestId?: string;
94
94
  }
95
95
 
96
- export const NavigationBar: FC<NavigationBarProps> = ({
97
- align = 'center',
98
- rightAddons,
99
- leftAddons,
100
- bottomAddons,
101
- sticky,
102
- border,
103
- subtitle,
104
- title,
105
- children,
106
- backgroundColor = 'var(--color-light-base-bg-primary)',
107
- contentWrapperClassName,
108
- className,
109
- contentClassName,
110
- rightAddonsClassName,
111
- leftAddonsClassName,
112
- bottomAddonsClassName,
113
- dataTestId,
114
- }) => {
115
- const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });
116
- const leftAddonsRef = useRef<HTMLDivElement>(null);
117
- const rightAddonsRef = useRef<HTMLDivElement>(null);
118
- const hasLeftAddons = leftAddons && align !== 'left';
119
-
120
- useEffect(() => {
121
- if (hasLeftAddons) {
122
- const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
123
- const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
124
-
125
- const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
126
- const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
127
-
128
- setTitleMargin((prev) => {
129
- const newState = shouldAddLeftMargin
130
- ? { left: marginSize, right: 0 }
131
- : { left: 0, right: marginSize };
132
-
133
- const isStateChanged = prev.left !== newState.left || prev.right !== newState.right;
134
-
135
- return isStateChanged ? newState : prev;
136
- });
137
- }
138
- }, [hasLeftAddons, leftAddons, rightAddons]);
139
-
140
- return (
141
- <div
142
- className={cn(
143
- styles.component,
144
- {
145
- [styles.border]: border,
146
- [styles.sticky]: sticky,
147
- },
148
- className,
149
- )}
150
- style={{
151
- ...(backgroundColor && { backgroundColor }),
152
- }}
153
- data-test-id={dataTestId}
154
- >
155
- <div className={cn(styles.mainLine, styles[align], contentClassName)}>
156
- {hasLeftAddons && (
157
- <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>
158
- {leftAddons}
159
- </div>
96
+ export const NavigationBar = forwardRef<HTMLDivElement, NavigationBarProps>(
97
+ (
98
+ {
99
+ align = 'center',
100
+ rightAddons,
101
+ leftAddons,
102
+ bottomAddons,
103
+ sticky,
104
+ border,
105
+ subtitle,
106
+ title,
107
+ children,
108
+ backgroundColor = 'var(--color-light-base-bg-primary)',
109
+ contentWrapperClassName,
110
+ className,
111
+ contentClassName,
112
+ rightAddonsClassName,
113
+ leftAddonsClassName,
114
+ bottomAddonsClassName,
115
+ dataTestId,
116
+ },
117
+ ref,
118
+ ) => {
119
+ const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });
120
+ const leftAddonsRef = useRef<HTMLDivElement>(null);
121
+ const rightAddonsRef = useRef<HTMLDivElement>(null);
122
+ const hasLeftAddons = leftAddons && align !== 'left';
123
+
124
+ useEffect(() => {
125
+ if (hasLeftAddons) {
126
+ const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;
127
+ const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;
128
+
129
+ const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);
130
+ const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;
131
+
132
+ setTitleMargin((prev) => {
133
+ const newState = shouldAddLeftMargin
134
+ ? { left: marginSize, right: 0 }
135
+ : { left: 0, right: marginSize };
136
+
137
+ const isStateChanged =
138
+ prev.left !== newState.left || prev.right !== newState.right;
139
+
140
+ return isStateChanged ? newState : prev;
141
+ });
142
+ }
143
+ }, [hasLeftAddons, leftAddons, rightAddons]);
144
+
145
+ return (
146
+ <div
147
+ ref={ref}
148
+ className={cn(
149
+ styles.component,
150
+ {
151
+ [styles.border]: border,
152
+ [styles.sticky]: sticky,
153
+ },
154
+ className,
160
155
  )}
156
+ style={{
157
+ ...(backgroundColor && { backgroundColor }),
158
+ }}
159
+ data-test-id={dataTestId}
160
+ >
161
+ <div className={cn(styles.mainLine, styles[align], contentClassName)}>
162
+ {hasLeftAddons && (
163
+ <div className={cn(styles.addons, leftAddonsClassName)} ref={leftAddonsRef}>
164
+ {leftAddons}
165
+ </div>
166
+ )}
167
+
168
+ {children && <div className={styles.children}>{children}</div>}
161
169
 
162
- {children && <div className={styles.children}>{children}</div>}
163
-
164
- {title && (
165
- <div
166
- className={cn(styles.content, contentWrapperClassName, {
167
- [styles[align]]: !hasLeftAddons,
168
- })}
169
- style={{
170
- ...(align === 'center'
171
- ? {
172
- marginLeft: titleMargin.left,
173
- marginRight: titleMargin.right,
174
- }
175
- : null),
176
- }}
177
- >
170
+ {title && (
178
171
  <div
179
- className={cn(styles.title, {
180
- [styles[align]]: !hasLeftAddons && !subtitle,
172
+ className={cn(styles.content, contentWrapperClassName, {
173
+ [styles[align]]: !hasLeftAddons,
181
174
  })}
182
- data-test-id={getDataTestId(dataTestId, 'title')}
175
+ style={{
176
+ ...(align === 'center'
177
+ ? {
178
+ marginLeft: titleMargin.left,
179
+ marginRight: titleMargin.right,
180
+ }
181
+ : null),
182
+ }}
183
183
  >
184
- {title}
185
- </div>
186
-
187
- {subtitle && (
188
184
  <div
189
- className={styles.subtitle}
190
- data-test-id={getDataTestId(dataTestId, 'subtitle')}
185
+ className={cn(styles.title, {
186
+ [styles[align]]: !hasLeftAddons && !subtitle,
187
+ })}
188
+ data-test-id={getDataTestId(dataTestId, 'title')}
191
189
  >
192
- {subtitle}
190
+ {title}
193
191
  </div>
194
- )}
195
- </div>
196
- )}
197
192
 
198
- {rightAddons && (
199
- <div
200
- className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}
201
- ref={rightAddonsRef}
202
- >
203
- {rightAddons}
204
- </div>
205
- )}
193
+ {subtitle && (
194
+ <div
195
+ className={styles.subtitle}
196
+ data-test-id={getDataTestId(dataTestId, 'subtitle')}
197
+ >
198
+ {subtitle}
199
+ </div>
200
+ )}
201
+ </div>
202
+ )}
203
+
204
+ {rightAddons && (
205
+ <div
206
+ className={cn(styles.rightAddons, styles.addons, rightAddonsClassName)}
207
+ ref={rightAddonsRef}
208
+ >
209
+ {rightAddons}
210
+ </div>
211
+ )}
212
+ </div>
213
+
214
+ {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}
206
215
  </div>
216
+ );
217
+ },
218
+ );
207
219
 
208
- {bottomAddons && <div className={bottomAddonsClassName}>{bottomAddons}</div>}
209
- </div>
210
- );
211
- };
220
+ NavigationBar.displayName = 'NavigationBar';