@alfalab/core-components-popover 6.1.0 → 6.2.0

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 (19) hide show
  1. package/Component.d.ts +1 -1
  2. package/Component.js +4 -3
  3. package/cssm/Component.d.ts +1 -1
  4. package/cssm/Component.js +3 -2
  5. package/cssm/index.js +1 -0
  6. package/cssm/index.module.css +3 -3
  7. package/esm/Component.d.ts +1 -1
  8. package/esm/Component.js +4 -3
  9. package/esm/index.css +37 -37
  10. package/esm/index.js +1 -0
  11. package/index.css +37 -37
  12. package/index.js +1 -0
  13. package/modern/Component.d.ts +1 -1
  14. package/modern/Component.js +4 -3
  15. package/modern/index.css +37 -37
  16. package/modern/index.js +1 -0
  17. package/package.json +2 -1
  18. package/src/Component.tsx +4 -3
  19. package/src/index.module.css +2 -2
package/Component.d.ts CHANGED
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/Component.js CHANGED
@@ -12,6 +12,7 @@ var cn = require('classnames');
12
12
  var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal');
14
14
  var coreComponentsStack = require('@alfalab/core-components-stack');
15
+ var hooks = require('@alfalab/hooks');
15
16
 
16
17
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
17
18
 
@@ -20,7 +21,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
20
21
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
22
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
22
23
 
23
- var styles = {"component":"popover__component_1mk0m","inner":"popover__inner_1mk0m","scrollableContent":"popover__scrollableContent_1mk0m","arrow":"popover__arrow_1mk0m","arrowShift":"popover__arrowShift_1mk0m","enter":"popover__enter_1mk0m","enterActive":"popover__enterActive_1mk0m","exit":"popover__exit_1mk0m","exitActive":"popover__exitActive_1mk0m"};
24
+ var styles = {"component":"popover__component_1btnx","inner":"popover__inner_1btnx","scrollableContent":"popover__scrollableContent_1btnx","arrow":"popover__arrow_1btnx","arrowShift":"popover__arrowShift_1btnx","enter":"popover__enter_1btnx","enterActive":"popover__enterActive_1btnx","exit":"popover__exit_1btnx","exitActive":"popover__exitActive_1btnx"};
24
25
  require('./index.css')
25
26
 
26
27
  var DEFAULT_TRANSITION = {
@@ -95,7 +96,7 @@ var Popover = React.forwardRef(function (_a, ref) {
95
96
  if (updatePopper) {
96
97
  updatePopperRef.current = updatePopper;
97
98
  }
98
- React.useEffect(function () {
99
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
99
100
  setReferenceElement(anchorElement);
100
101
  }, [anchorElement]);
101
102
  React.useEffect(function () {
@@ -104,7 +105,7 @@ var Popover = React.forwardRef(function (_a, ref) {
104
105
  }
105
106
  }, [updatePopper, arrowElement, children]);
106
107
  React.useEffect(function () {
107
- if (update && !update.current && updatePopper) {
108
+ if (update && updatePopper) {
108
109
  // eslint-disable-next-line no-param-reassign
109
110
  update.current = updatePopper;
110
111
  }
package/cssm/Component.d.ts CHANGED
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/cssm/Component.js CHANGED
@@ -12,6 +12,7 @@ var cn = require('classnames');
12
12
  var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
14
14
  var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
15
+ var hooks = require('@alfalab/hooks');
15
16
  var styles = require('./index.module.css');
16
17
 
17
18
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -94,7 +95,7 @@ var Popover = React.forwardRef(function (_a, ref) {
94
95
  if (updatePopper) {
95
96
  updatePopperRef.current = updatePopper;
96
97
  }
97
- React.useEffect(function () {
98
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
98
99
  setReferenceElement(anchorElement);
99
100
  }, [anchorElement]);
100
101
  React.useEffect(function () {
@@ -103,7 +104,7 @@ var Popover = React.forwardRef(function (_a, ref) {
103
104
  }
104
105
  }, [updatePopper, arrowElement, children]);
105
106
  React.useEffect(function () {
106
- if (update && !update.current && updatePopper) {
107
+ if (update && updatePopper) {
107
108
  // eslint-disable-next-line no-param-reassign
108
109
  update.current = updatePopper;
109
110
  }
package/cssm/index.js CHANGED
@@ -13,6 +13,7 @@ require('classnames');
13
13
  require('popper-max-size-modifier');
14
14
  require('@alfalab/core-components-portal/cssm');
15
15
  require('@alfalab/core-components-stack/cssm');
16
+ require('@alfalab/hooks');
16
17
  require('./index.module.css');
17
18
 
18
19
 
package/cssm/index.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-bg-primary: #fff;
3
+ --color-light-modal-bg-primary: #fff;
4
4
  --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :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 */
6
6
  } :root {
@@ -24,7 +24,7 @@
24
24
  color: var(--color-light-text-primary);
25
25
  } .inner {
26
26
  position: relative;
27
- background-color: var(--color-light-bg-primary);
27
+ background-color: var(--color-light-modal-bg-primary);
28
28
  box-shadow: var(--shadow-m);
29
29
  border: 1px solid var(--popover-border-color);
30
30
  box-sizing: border-box;
@@ -41,7 +41,7 @@
41
41
  position: absolute;
42
42
  width: 12px;
43
43
  height: 12px;
44
- background-color: var(--color-light-bg-primary);
44
+ background-color: var(--color-light-modal-bg-primary);
45
45
  border: 1px solid var(--popover-border-color);
46
46
  box-sizing: border-box;
47
47
  transform: rotate(45deg);
package/esm/Component.d.ts CHANGED
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/esm/Component.js CHANGED
@@ -8,8 +8,9 @@ import cn from 'classnames';
8
8
  import maxSize from 'popper-max-size-modifier';
9
9
  import { Portal } from '@alfalab/core-components-portal/esm';
10
10
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
11
+ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
11
12
 
12
- var styles = {"component":"popover__component_1mk0m","inner":"popover__inner_1mk0m","scrollableContent":"popover__scrollableContent_1mk0m","arrow":"popover__arrow_1mk0m","arrowShift":"popover__arrowShift_1mk0m","enter":"popover__enter_1mk0m","enterActive":"popover__enterActive_1mk0m","exit":"popover__exit_1mk0m","exitActive":"popover__exitActive_1mk0m"};
13
+ var styles = {"component":"popover__component_1btnx","inner":"popover__inner_1btnx","scrollableContent":"popover__scrollableContent_1btnx","arrow":"popover__arrow_1btnx","arrowShift":"popover__arrowShift_1btnx","enter":"popover__enter_1btnx","enterActive":"popover__enterActive_1btnx","exit":"popover__exit_1btnx","exitActive":"popover__exitActive_1btnx"};
13
14
  require('./index.css')
14
15
 
15
16
  var DEFAULT_TRANSITION = {
@@ -84,7 +85,7 @@ var Popover = forwardRef(function (_a, ref) {
84
85
  if (updatePopper) {
85
86
  updatePopperRef.current = updatePopper;
86
87
  }
87
- useEffect(function () {
88
+ useLayoutEffect_SAFE_FOR_SSR(function () {
88
89
  setReferenceElement(anchorElement);
89
90
  }, [anchorElement]);
90
91
  useEffect(function () {
@@ -93,7 +94,7 @@ var Popover = forwardRef(function (_a, ref) {
93
94
  }
94
95
  }, [updatePopper, arrowElement, children]);
95
96
  useEffect(function () {
96
- if (update && !update.current && updatePopper) {
97
+ if (update && updatePopper) {
97
98
  // eslint-disable-next-line no-param-reassign
98
99
  update.current = updatePopper;
99
100
  }
package/esm/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 1degw */
1
+ /* hash: m7e7m */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-bg-primary: #fff;
4
+ --color-light-modal-bg-primary: #fff;
5
5
  --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :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 */
7
7
  } :root {
@@ -20,93 +20,93 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_1mk0m {
23
+ } .popover__component_1btnx {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_1mk0m {
26
+ } .popover__inner_1btnx {
27
27
  position: relative;
28
- background-color: var(--color-light-bg-primary);
28
+ background-color: var(--color-light-modal-bg-primary);
29
29
  box-shadow: var(--shadow-m);
30
30
  border: 1px solid var(--popover-border-color);
31
31
  box-sizing: border-box;
32
32
  will-change: transform;
33
- } .popover__scrollableContent_1mk0m {
33
+ } .popover__scrollableContent_1btnx {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_1mk0m {
37
+ } .popover__arrow_1btnx {
38
38
  z-index: 1;
39
- } .popover__arrow_1mk0m:after {
39
+ } .popover__arrow_1btnx:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
43
43
  width: 12px;
44
44
  height: 12px;
45
- background-color: var(--color-light-bg-primary);
45
+ background-color: var(--color-light-modal-bg-primary);
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m,
50
- .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m,
51
- .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m {
49
+ } .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx,
50
+ .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx,
51
+ .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx {
52
52
  right: 5px
53
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m:after {
53
+ } .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx:after {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
57
+ } .popover__component_1btnx[data-popper-placement='left-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
58
58
  top: -7px;
59
- } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
59
+ } .popover__component_1btnx[data-popper-placement='left-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
60
60
  top: -5px;
61
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m,
62
- .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m,
63
- .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m {
61
+ } .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx,
62
+ .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx,
63
+ .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx {
64
64
  left: -7px
65
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m:after {
65
+ } .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx:after {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
69
+ } .popover__component_1btnx[data-popper-placement='right-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
70
70
  top: -7px;
71
- } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
71
+ } .popover__component_1btnx[data-popper-placement='right-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
72
72
  top: -5px;
73
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m,
74
- .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m,
75
- .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m {
73
+ } .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx,
74
+ .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx,
75
+ .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx {
76
76
  bottom: 5px
77
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m:after {
77
+ } .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx:after {
78
78
  left: -6px;
79
79
  border-top: none;
80
80
  border-left: none;
81
- } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
81
+ } .popover__component_1btnx[data-popper-placement='top-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
82
82
  left: -17px;
83
- } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
83
+ } .popover__component_1btnx[data-popper-placement='top-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
84
84
  left: 5px;
85
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m,
86
- .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m,
87
- .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m {
85
+ } .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx,
86
+ .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx,
87
+ .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx {
88
88
  top: -7px
89
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m:after {
89
+ } .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx:after {
90
90
  left: -6px;
91
91
  border-bottom: none;
92
92
  border-right: none;
93
- } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
93
+ } .popover__component_1btnx[data-popper-placement='bottom-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
94
94
  left: -17px;
95
- } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
95
+ } .popover__component_1btnx[data-popper-placement='bottom-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
96
96
  left: 5px;
97
- } .popover__enter_1mk0m .popover__inner_1mk0m {
97
+ } .popover__enter_1btnx .popover__inner_1btnx {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
- } .popover__enterActive_1mk0m .popover__inner_1mk0m {
100
+ } .popover__enterActive_1btnx .popover__inner_1btnx {
101
101
  opacity: 1;
102
102
  transform: scale(1);
103
103
  transition-property: opacity, transform;
104
104
  transition-timing-function: ease-in-out;
105
105
  transition-duration: 150ms;
106
- } .popover__exit_1mk0m .popover__inner_1mk0m {
106
+ } .popover__exit_1btnx .popover__inner_1btnx {
107
107
  opacity: 1;
108
108
  transform: scale(1);
109
- } .popover__exitActive_1mk0m .popover__inner_1mk0m {
109
+ } .popover__exitActive_1btnx .popover__inner_1btnx {
110
110
  opacity: 0;
111
111
  transform: scale(0.98);
112
112
  transition-property: opacity, transform;
package/esm/index.js CHANGED
@@ -9,3 +9,4 @@ import 'classnames';
9
9
  import 'popper-max-size-modifier';
10
10
  import '@alfalab/core-components-portal/esm';
11
11
  import '@alfalab/core-components-stack/esm';
12
+ import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 1degw */
1
+ /* hash: m7e7m */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-bg-primary: #fff;
4
+ --color-light-modal-bg-primary: #fff;
5
5
  --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :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 */
7
7
  } :root {
@@ -20,93 +20,93 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_1mk0m {
23
+ } .popover__component_1btnx {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_1mk0m {
26
+ } .popover__inner_1btnx {
27
27
  position: relative;
28
- background-color: var(--color-light-bg-primary);
28
+ background-color: var(--color-light-modal-bg-primary);
29
29
  box-shadow: var(--shadow-m);
30
30
  border: 1px solid var(--popover-border-color);
31
31
  box-sizing: border-box;
32
32
  will-change: transform;
33
- } .popover__scrollableContent_1mk0m {
33
+ } .popover__scrollableContent_1btnx {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_1mk0m {
37
+ } .popover__arrow_1btnx {
38
38
  z-index: 1;
39
- } .popover__arrow_1mk0m:after {
39
+ } .popover__arrow_1btnx:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
43
43
  width: 12px;
44
44
  height: 12px;
45
- background-color: var(--color-light-bg-primary);
45
+ background-color: var(--color-light-modal-bg-primary);
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m,
50
- .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m,
51
- .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m {
49
+ } .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx,
50
+ .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx,
51
+ .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx {
52
52
  right: 5px
53
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m:after {
53
+ } .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx:after {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
57
+ } .popover__component_1btnx[data-popper-placement='left-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
58
58
  top: -7px;
59
- } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
59
+ } .popover__component_1btnx[data-popper-placement='left-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
60
60
  top: -5px;
61
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m,
62
- .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m,
63
- .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m {
61
+ } .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx,
62
+ .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx,
63
+ .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx {
64
64
  left: -7px
65
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m:after {
65
+ } .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx:after {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
69
+ } .popover__component_1btnx[data-popper-placement='right-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
70
70
  top: -7px;
71
- } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
71
+ } .popover__component_1btnx[data-popper-placement='right-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
72
72
  top: -5px;
73
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m,
74
- .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m,
75
- .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m {
73
+ } .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx,
74
+ .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx,
75
+ .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx {
76
76
  bottom: 5px
77
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m:after {
77
+ } .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx:after {
78
78
  left: -6px;
79
79
  border-top: none;
80
80
  border-left: none;
81
- } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
81
+ } .popover__component_1btnx[data-popper-placement='top-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
82
82
  left: -17px;
83
- } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
83
+ } .popover__component_1btnx[data-popper-placement='top-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
84
84
  left: 5px;
85
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m,
86
- .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m,
87
- .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m {
85
+ } .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx,
86
+ .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx,
87
+ .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx {
88
88
  top: -7px
89
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m:after {
89
+ } .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx:after {
90
90
  left: -6px;
91
91
  border-bottom: none;
92
92
  border-right: none;
93
- } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
93
+ } .popover__component_1btnx[data-popper-placement='bottom-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
94
94
  left: -17px;
95
- } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
95
+ } .popover__component_1btnx[data-popper-placement='bottom-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
96
96
  left: 5px;
97
- } .popover__enter_1mk0m .popover__inner_1mk0m {
97
+ } .popover__enter_1btnx .popover__inner_1btnx {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
- } .popover__enterActive_1mk0m .popover__inner_1mk0m {
100
+ } .popover__enterActive_1btnx .popover__inner_1btnx {
101
101
  opacity: 1;
102
102
  transform: scale(1);
103
103
  transition-property: opacity, transform;
104
104
  transition-timing-function: ease-in-out;
105
105
  transition-duration: 150ms;
106
- } .popover__exit_1mk0m .popover__inner_1mk0m {
106
+ } .popover__exit_1btnx .popover__inner_1btnx {
107
107
  opacity: 1;
108
108
  transform: scale(1);
109
- } .popover__exitActive_1mk0m .popover__inner_1mk0m {
109
+ } .popover__exitActive_1btnx .popover__inner_1btnx {
110
110
  opacity: 0;
111
111
  transform: scale(0.98);
112
112
  transition-property: opacity, transform;
package/index.js CHANGED
@@ -13,6 +13,7 @@ require('classnames');
13
13
  require('popper-max-size-modifier');
14
14
  require('@alfalab/core-components-portal');
15
15
  require('@alfalab/core-components-stack');
16
+ require('@alfalab/hooks');
16
17
 
17
18
 
18
19
 
package/modern/Component.d.ts CHANGED
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/modern/Component.js CHANGED
@@ -7,8 +7,9 @@ import cn from 'classnames';
7
7
  import maxSize from 'popper-max-size-modifier';
8
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
9
  import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
10
+ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
10
11
 
11
- const styles = {"component":"popover__component_1mk0m","inner":"popover__inner_1mk0m","scrollableContent":"popover__scrollableContent_1mk0m","arrow":"popover__arrow_1mk0m","arrowShift":"popover__arrowShift_1mk0m","enter":"popover__enter_1mk0m","enterActive":"popover__enterActive_1mk0m","exit":"popover__exit_1mk0m","exitActive":"popover__exitActive_1mk0m"};
12
+ const styles = {"component":"popover__component_1btnx","inner":"popover__inner_1btnx","scrollableContent":"popover__scrollableContent_1btnx","arrow":"popover__arrow_1btnx","arrowShift":"popover__arrowShift_1btnx","enter":"popover__enter_1btnx","enterActive":"popover__enterActive_1btnx","exit":"popover__exit_1btnx","exitActive":"popover__exitActive_1btnx"};
12
13
  require('./index.css')
13
14
 
14
15
  const DEFAULT_TRANSITION = {
@@ -81,7 +82,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
81
82
  if (updatePopper) {
82
83
  updatePopperRef.current = updatePopper;
83
84
  }
84
- useEffect(() => {
85
+ useLayoutEffect_SAFE_FOR_SSR(() => {
85
86
  setReferenceElement(anchorElement);
86
87
  }, [anchorElement]);
87
88
  useEffect(() => {
@@ -90,7 +91,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
90
91
  }
91
92
  }, [updatePopper, arrowElement, children]);
92
93
  useEffect(() => {
93
- if (update && !update.current && updatePopper) {
94
+ if (update && updatePopper) {
94
95
  // eslint-disable-next-line no-param-reassign
95
96
  update.current = updatePopper;
96
97
  }
package/modern/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 1degw */
1
+ /* hash: m7e7m */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-bg-primary: #fff;
4
+ --color-light-modal-bg-primary: #fff;
5
5
  --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :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 */
7
7
  } :root {
@@ -20,93 +20,93 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_1mk0m {
23
+ } .popover__component_1btnx {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_1mk0m {
26
+ } .popover__inner_1btnx {
27
27
  position: relative;
28
- background-color: var(--color-light-bg-primary);
28
+ background-color: var(--color-light-modal-bg-primary);
29
29
  box-shadow: var(--shadow-m);
30
30
  border: 1px solid var(--popover-border-color);
31
31
  box-sizing: border-box;
32
32
  will-change: transform;
33
- } .popover__scrollableContent_1mk0m {
33
+ } .popover__scrollableContent_1btnx {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_1mk0m {
37
+ } .popover__arrow_1btnx {
38
38
  z-index: 1;
39
- } .popover__arrow_1mk0m:after {
39
+ } .popover__arrow_1btnx:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
43
43
  width: 12px;
44
44
  height: 12px;
45
- background-color: var(--color-light-bg-primary);
45
+ background-color: var(--color-light-modal-bg-primary);
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m,
50
- .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m,
51
- .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m {
49
+ } .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx,
50
+ .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx,
51
+ .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx {
52
52
  right: 5px
53
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m:after {
53
+ } .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx:after {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
57
+ } .popover__component_1btnx[data-popper-placement='left-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
58
58
  top: -7px;
59
- } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
59
+ } .popover__component_1btnx[data-popper-placement='left-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
60
60
  top: -5px;
61
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m,
62
- .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m,
63
- .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m {
61
+ } .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx,
62
+ .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx,
63
+ .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx {
64
64
  left: -7px
65
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m:after {
65
+ } .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx:after {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
69
+ } .popover__component_1btnx[data-popper-placement='right-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
70
70
  top: -7px;
71
- } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
71
+ } .popover__component_1btnx[data-popper-placement='right-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
72
72
  top: -5px;
73
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m,
74
- .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m,
75
- .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m {
73
+ } .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx,
74
+ .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx,
75
+ .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx {
76
76
  bottom: 5px
77
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m:after {
77
+ } .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx:after {
78
78
  left: -6px;
79
79
  border-top: none;
80
80
  border-left: none;
81
- } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
81
+ } .popover__component_1btnx[data-popper-placement='top-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
82
82
  left: -17px;
83
- } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
83
+ } .popover__component_1btnx[data-popper-placement='top-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
84
84
  left: 5px;
85
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m,
86
- .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m,
87
- .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m {
85
+ } .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx,
86
+ .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx,
87
+ .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx {
88
88
  top: -7px
89
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m:after {
89
+ } .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx:after {
90
90
  left: -6px;
91
91
  border-bottom: none;
92
92
  border-right: none;
93
- } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
93
+ } .popover__component_1btnx[data-popper-placement='bottom-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
94
94
  left: -17px;
95
- } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
95
+ } .popover__component_1btnx[data-popper-placement='bottom-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
96
96
  left: 5px;
97
- } .popover__enter_1mk0m .popover__inner_1mk0m {
97
+ } .popover__enter_1btnx .popover__inner_1btnx {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
- } .popover__enterActive_1mk0m .popover__inner_1mk0m {
100
+ } .popover__enterActive_1btnx .popover__inner_1btnx {
101
101
  opacity: 1;
102
102
  transform: scale(1);
103
103
  transition-property: opacity, transform;
104
104
  transition-timing-function: ease-in-out;
105
105
  transition-duration: 150ms;
106
- } .popover__exit_1mk0m .popover__inner_1mk0m {
106
+ } .popover__exit_1btnx .popover__inner_1btnx {
107
107
  opacity: 1;
108
108
  transform: scale(1);
109
- } .popover__exitActive_1mk0m .popover__inner_1mk0m {
109
+ } .popover__exitActive_1btnx .popover__inner_1btnx {
110
110
  opacity: 0;
111
111
  transform: scale(0.98);
112
112
  transition-property: opacity, transform;
package/modern/index.js CHANGED
@@ -8,3 +8,4 @@ import 'classnames';
8
8
  import 'popper-max-size-modifier';
9
9
  import '@alfalab/core-components-portal/modern';
10
10
  import '@alfalab/core-components-stack/modern';
11
+ import '@alfalab/hooks';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.1.0",
3
+ "version": "6.2.0",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -17,6 +17,7 @@
17
17
  "dependencies": {
18
18
  "@alfalab/core-components-portal": "^3.2.0",
19
19
  "@alfalab/core-components-stack": "^4.1.0",
20
+ "@alfalab/hooks": "^1.13.0",
20
21
  "@juggle/resize-observer": "^3.3.1",
21
22
  "@popperjs/core": "^2.3.3",
22
23
  "classnames": "^2.3.1",
package/src/Component.tsx CHANGED
@@ -19,6 +19,7 @@ import maxSize from 'popper-max-size-modifier';
19
19
 
20
20
  import { Portal } from '@alfalab/core-components-portal';
21
21
  import { Stack, stackingOrder } from '@alfalab/core-components-stack';
22
+ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
22
23
 
23
24
  import styles from './index.module.css';
24
25
 
@@ -118,7 +119,7 @@ export type PopoverProps = {
118
119
  /**
119
120
  * Хранит функцию, с помощью которой можно обновить положение компонента
120
121
  */
121
- update?: MutableRefObject<() => void>;
122
+ update?: MutableRefObject<(() => void) | undefined>;
122
123
 
123
124
  /**
124
125
  * Дополнительный класс
@@ -266,7 +267,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
266
267
  updatePopperRef.current = updatePopper;
267
268
  }
268
269
 
269
- useEffect(() => {
270
+ useLayoutEffect_SAFE_FOR_SSR(() => {
270
271
  setReferenceElement(anchorElement);
271
272
  }, [anchorElement]);
272
273
 
@@ -277,7 +278,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
277
278
  }, [updatePopper, arrowElement, children]);
278
279
 
279
280
  useEffect(() => {
280
- if (update && !update.current && updatePopper) {
281
+ if (update && updatePopper) {
281
282
  // eslint-disable-next-line no-param-reassign
282
283
  update.current = updatePopper;
283
284
  }
package/src/index.module.css CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  .inner {
13
13
  position: relative;
14
- background-color: var(--color-light-bg-primary);
14
+ background-color: var(--color-light-modal-bg-primary);
15
15
  box-shadow: var(--shadow-m);
16
16
  border: 1px solid var(--popover-border-color);
17
17
  box-sizing: border-box;
@@ -34,7 +34,7 @@
34
34
  position: absolute;
35
35
  width: 12px;
36
36
  height: 12px;
37
- background-color: var(--color-light-bg-primary);
37
+ background-color: var(--color-light-modal-bg-primary);
38
38
  border: 1px solid var(--popover-border-color);
39
39
  box-sizing: border-box;
40
40
  transform: rotate(45deg);