@alfalab/core-components-popover 6.2.4 → 6.3.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 (14) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +6 -2
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +32 -28
  5. package/index.css +32 -28
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +32 -28
  8. package/moderncssm/Component.d.ts +101 -0
  9. package/moderncssm/Component.js +150 -0
  10. package/moderncssm/index.d.ts +1 -0
  11. package/moderncssm/index.js +1 -0
  12. package/moderncssm/index.module.css +115 -0
  13. package/package.json +5 -3
  14. package/src/index.module.css +1 -1
package/Component.js CHANGED
@@ -22,7 +22,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
22
22
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
23
23
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
24
24
 
25
- var styles = {"component":"popover__component_4z0yx","inner":"popover__inner_4z0yx","scrollableContent":"popover__scrollableContent_4z0yx","arrow":"popover__arrow_4z0yx","enter":"popover__enter_4z0yx","enterActive":"popover__enterActive_4z0yx","exit":"popover__exit_4z0yx","exitActive":"popover__exitActive_4z0yx"};
25
+ var styles = {"component":"popover__component_1m1im","inner":"popover__inner_1m1im","scrollableContent":"popover__scrollableContent_1m1im","arrow":"popover__arrow_1m1im","enter":"popover__enter_1m1im","enterActive":"popover__enterActive_1m1im","exit":"popover__exit_1m1im","exitActive":"popover__exitActive_1m1im"};
26
26
  require('./index.css')
27
27
 
28
28
  var DEFAULT_TRANSITION = {
package/cssm/index.module.css CHANGED
@@ -13,8 +13,12 @@
13
13
  /* Up */
14
14
 
15
15
  /* Hard up */
16
- } :root {
17
- } :root {
16
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
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
+ /* новые значения, используйте их */
18
22
  } :root {
19
23
  } :root {
20
24
  } :root {
package/esm/Component.js CHANGED
@@ -11,7 +11,7 @@ import { Stack } from '@alfalab/core-components-stack/esm';
11
11
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
12
12
  import { stackingOrder } from '@alfalab/stack-context';
13
13
 
14
- var styles = {"component":"popover__component_4z0yx","inner":"popover__inner_4z0yx","scrollableContent":"popover__scrollableContent_4z0yx","arrow":"popover__arrow_4z0yx","enter":"popover__enter_4z0yx","enterActive":"popover__enterActive_4z0yx","exit":"popover__exit_4z0yx","exitActive":"popover__exitActive_4z0yx"};
14
+ var styles = {"component":"popover__component_1m1im","inner":"popover__inner_1m1im","scrollableContent":"popover__scrollableContent_1m1im","arrow":"popover__arrow_1m1im","enter":"popover__enter_1m1im","enterActive":"popover__enterActive_1m1im","exit":"popover__exit_1m1im","exitActive":"popover__exitActive_1m1im"};
15
15
  require('./index.css')
16
16
 
17
17
  var DEFAULT_TRANSITION = {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 2fn0g */
1
+ /* hash: 1k3j3 */
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-modal-bg-primary: #fff;
@@ -14,29 +14,33 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
18
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
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
+ /* новые значения, используйте их */
19
23
  } :root {
20
24
  } :root {
21
25
  } :root {
22
26
  --popover-border-color: transparent;
23
- } .popover__component_4z0yx {
27
+ } .popover__component_1m1im {
24
28
  background-color: transparent;
25
29
  color: var(--color-light-text-primary);
26
- } .popover__inner_4z0yx {
30
+ } .popover__inner_1m1im {
27
31
  position: relative;
28
32
  background-color: var(--color-light-modal-bg-primary);
29
33
  box-shadow: var(--shadow-m);
30
34
  border: 1px solid var(--popover-border-color);
31
35
  box-sizing: border-box;
32
36
  will-change: transform;
33
- } .popover__scrollableContent_4z0yx {
37
+ } .popover__scrollableContent_1m1im {
34
38
  position: relative;
35
39
  z-index: 2;
36
40
  overflow-y: auto;
37
- } .popover__arrow_4z0yx {
41
+ } .popover__arrow_1m1im {
38
42
  z-index: 1;
39
- } .popover__arrow_4z0yx:after {
43
+ } .popover__arrow_1m1im:after {
40
44
  content: '';
41
45
  display: block;
42
46
  position: absolute;
@@ -46,51 +50,51 @@
46
50
  border: 1px solid var(--popover-border-color);
47
51
  box-sizing: border-box;
48
52
  transform: rotate(45deg);
49
- } .popover__component_4z0yx[data-popper-placement='left'] .popover__arrow_4z0yx,
50
- .popover__component_4z0yx[data-popper-placement='left-start'] .popover__arrow_4z0yx,
51
- .popover__component_4z0yx[data-popper-placement='left-end'] .popover__arrow_4z0yx {
53
+ } .popover__component_1m1im[data-popper-placement='left'] .popover__arrow_1m1im,
54
+ .popover__component_1m1im[data-popper-placement='left-start'] .popover__arrow_1m1im,
55
+ .popover__component_1m1im[data-popper-placement='left-end'] .popover__arrow_1m1im {
52
56
  right: 5px
53
- } .popover__component_4z0yx[data-popper-placement='left'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='left-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='left-end'] .popover__arrow_4z0yx:after {
57
+ } .popover__component_1m1im[data-popper-placement='left'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='left-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='left-end'] .popover__arrow_1m1im:after {
54
58
  top: -6px;
55
59
  border-bottom: none;
56
60
  border-left: none;
57
- } .popover__component_4z0yx[data-popper-placement='right'] .popover__arrow_4z0yx,
58
- .popover__component_4z0yx[data-popper-placement='right-start'] .popover__arrow_4z0yx,
59
- .popover__component_4z0yx[data-popper-placement='right-end'] .popover__arrow_4z0yx {
61
+ } .popover__component_1m1im[data-popper-placement='right'] .popover__arrow_1m1im,
62
+ .popover__component_1m1im[data-popper-placement='right-start'] .popover__arrow_1m1im,
63
+ .popover__component_1m1im[data-popper-placement='right-end'] .popover__arrow_1m1im {
60
64
  left: -7px
61
- } .popover__component_4z0yx[data-popper-placement='right'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='right-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='right-end'] .popover__arrow_4z0yx:after {
65
+ } .popover__component_1m1im[data-popper-placement='right'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='right-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='right-end'] .popover__arrow_1m1im:after {
62
66
  top: -6px;
63
67
  border-top: none;
64
68
  border-right: none;
65
- } .popover__component_4z0yx[data-popper-placement='top'] .popover__arrow_4z0yx,
66
- .popover__component_4z0yx[data-popper-placement='top-start'] .popover__arrow_4z0yx,
67
- .popover__component_4z0yx[data-popper-placement='top-end'] .popover__arrow_4z0yx {
69
+ } .popover__component_1m1im[data-popper-placement='top'] .popover__arrow_1m1im,
70
+ .popover__component_1m1im[data-popper-placement='top-start'] .popover__arrow_1m1im,
71
+ .popover__component_1m1im[data-popper-placement='top-end'] .popover__arrow_1m1im {
68
72
  bottom: 5px
69
- } .popover__component_4z0yx[data-popper-placement='top'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='top-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='top-end'] .popover__arrow_4z0yx:after {
73
+ } .popover__component_1m1im[data-popper-placement='top'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='top-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='top-end'] .popover__arrow_1m1im:after {
70
74
  left: -6px;
71
75
  border-top: none;
72
76
  border-left: none;
73
- } .popover__component_4z0yx[data-popper-placement='bottom'] .popover__arrow_4z0yx,
74
- .popover__component_4z0yx[data-popper-placement='bottom-start'] .popover__arrow_4z0yx,
75
- .popover__component_4z0yx[data-popper-placement='bottom-end'] .popover__arrow_4z0yx {
77
+ } .popover__component_1m1im[data-popper-placement='bottom'] .popover__arrow_1m1im,
78
+ .popover__component_1m1im[data-popper-placement='bottom-start'] .popover__arrow_1m1im,
79
+ .popover__component_1m1im[data-popper-placement='bottom-end'] .popover__arrow_1m1im {
76
80
  top: -7px
77
- } .popover__component_4z0yx[data-popper-placement='bottom'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='bottom-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='bottom-end'] .popover__arrow_4z0yx:after {
81
+ } .popover__component_1m1im[data-popper-placement='bottom'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='bottom-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='bottom-end'] .popover__arrow_1m1im:after {
78
82
  left: -6px;
79
83
  border-bottom: none;
80
84
  border-right: none;
81
- } .popover__enter_4z0yx .popover__inner_4z0yx {
85
+ } .popover__enter_1m1im .popover__inner_1m1im {
82
86
  opacity: 0;
83
87
  transform: scale(0.98);
84
- } .popover__enterActive_4z0yx .popover__inner_4z0yx {
88
+ } .popover__enterActive_1m1im .popover__inner_1m1im {
85
89
  opacity: 1;
86
90
  transform: scale(1);
87
91
  transition-property: opacity, transform;
88
92
  transition-timing-function: ease-in-out;
89
93
  transition-duration: 150ms;
90
- } .popover__exit_4z0yx .popover__inner_4z0yx {
94
+ } .popover__exit_1m1im .popover__inner_1m1im {
91
95
  opacity: 1;
92
96
  transform: scale(1);
93
- } .popover__exitActive_4z0yx .popover__inner_4z0yx {
97
+ } .popover__exitActive_1m1im .popover__inner_1m1im {
94
98
  opacity: 0;
95
99
  transform: scale(0.98);
96
100
  transition-property: opacity, transform;
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 2fn0g */
1
+ /* hash: 1k3j3 */
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-modal-bg-primary: #fff;
@@ -14,29 +14,33 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
18
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
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
+ /* новые значения, используйте их */
19
23
  } :root {
20
24
  } :root {
21
25
  } :root {
22
26
  --popover-border-color: transparent;
23
- } .popover__component_4z0yx {
27
+ } .popover__component_1m1im {
24
28
  background-color: transparent;
25
29
  color: var(--color-light-text-primary);
26
- } .popover__inner_4z0yx {
30
+ } .popover__inner_1m1im {
27
31
  position: relative;
28
32
  background-color: var(--color-light-modal-bg-primary);
29
33
  box-shadow: var(--shadow-m);
30
34
  border: 1px solid var(--popover-border-color);
31
35
  box-sizing: border-box;
32
36
  will-change: transform;
33
- } .popover__scrollableContent_4z0yx {
37
+ } .popover__scrollableContent_1m1im {
34
38
  position: relative;
35
39
  z-index: 2;
36
40
  overflow-y: auto;
37
- } .popover__arrow_4z0yx {
41
+ } .popover__arrow_1m1im {
38
42
  z-index: 1;
39
- } .popover__arrow_4z0yx:after {
43
+ } .popover__arrow_1m1im:after {
40
44
  content: '';
41
45
  display: block;
42
46
  position: absolute;
@@ -46,51 +50,51 @@
46
50
  border: 1px solid var(--popover-border-color);
47
51
  box-sizing: border-box;
48
52
  transform: rotate(45deg);
49
- } .popover__component_4z0yx[data-popper-placement='left'] .popover__arrow_4z0yx,
50
- .popover__component_4z0yx[data-popper-placement='left-start'] .popover__arrow_4z0yx,
51
- .popover__component_4z0yx[data-popper-placement='left-end'] .popover__arrow_4z0yx {
53
+ } .popover__component_1m1im[data-popper-placement='left'] .popover__arrow_1m1im,
54
+ .popover__component_1m1im[data-popper-placement='left-start'] .popover__arrow_1m1im,
55
+ .popover__component_1m1im[data-popper-placement='left-end'] .popover__arrow_1m1im {
52
56
  right: 5px
53
- } .popover__component_4z0yx[data-popper-placement='left'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='left-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='left-end'] .popover__arrow_4z0yx:after {
57
+ } .popover__component_1m1im[data-popper-placement='left'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='left-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='left-end'] .popover__arrow_1m1im:after {
54
58
  top: -6px;
55
59
  border-bottom: none;
56
60
  border-left: none;
57
- } .popover__component_4z0yx[data-popper-placement='right'] .popover__arrow_4z0yx,
58
- .popover__component_4z0yx[data-popper-placement='right-start'] .popover__arrow_4z0yx,
59
- .popover__component_4z0yx[data-popper-placement='right-end'] .popover__arrow_4z0yx {
61
+ } .popover__component_1m1im[data-popper-placement='right'] .popover__arrow_1m1im,
62
+ .popover__component_1m1im[data-popper-placement='right-start'] .popover__arrow_1m1im,
63
+ .popover__component_1m1im[data-popper-placement='right-end'] .popover__arrow_1m1im {
60
64
  left: -7px
61
- } .popover__component_4z0yx[data-popper-placement='right'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='right-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='right-end'] .popover__arrow_4z0yx:after {
65
+ } .popover__component_1m1im[data-popper-placement='right'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='right-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='right-end'] .popover__arrow_1m1im:after {
62
66
  top: -6px;
63
67
  border-top: none;
64
68
  border-right: none;
65
- } .popover__component_4z0yx[data-popper-placement='top'] .popover__arrow_4z0yx,
66
- .popover__component_4z0yx[data-popper-placement='top-start'] .popover__arrow_4z0yx,
67
- .popover__component_4z0yx[data-popper-placement='top-end'] .popover__arrow_4z0yx {
69
+ } .popover__component_1m1im[data-popper-placement='top'] .popover__arrow_1m1im,
70
+ .popover__component_1m1im[data-popper-placement='top-start'] .popover__arrow_1m1im,
71
+ .popover__component_1m1im[data-popper-placement='top-end'] .popover__arrow_1m1im {
68
72
  bottom: 5px
69
- } .popover__component_4z0yx[data-popper-placement='top'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='top-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='top-end'] .popover__arrow_4z0yx:after {
73
+ } .popover__component_1m1im[data-popper-placement='top'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='top-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='top-end'] .popover__arrow_1m1im:after {
70
74
  left: -6px;
71
75
  border-top: none;
72
76
  border-left: none;
73
- } .popover__component_4z0yx[data-popper-placement='bottom'] .popover__arrow_4z0yx,
74
- .popover__component_4z0yx[data-popper-placement='bottom-start'] .popover__arrow_4z0yx,
75
- .popover__component_4z0yx[data-popper-placement='bottom-end'] .popover__arrow_4z0yx {
77
+ } .popover__component_1m1im[data-popper-placement='bottom'] .popover__arrow_1m1im,
78
+ .popover__component_1m1im[data-popper-placement='bottom-start'] .popover__arrow_1m1im,
79
+ .popover__component_1m1im[data-popper-placement='bottom-end'] .popover__arrow_1m1im {
76
80
  top: -7px
77
- } .popover__component_4z0yx[data-popper-placement='bottom'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='bottom-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='bottom-end'] .popover__arrow_4z0yx:after {
81
+ } .popover__component_1m1im[data-popper-placement='bottom'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='bottom-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='bottom-end'] .popover__arrow_1m1im:after {
78
82
  left: -6px;
79
83
  border-bottom: none;
80
84
  border-right: none;
81
- } .popover__enter_4z0yx .popover__inner_4z0yx {
85
+ } .popover__enter_1m1im .popover__inner_1m1im {
82
86
  opacity: 0;
83
87
  transform: scale(0.98);
84
- } .popover__enterActive_4z0yx .popover__inner_4z0yx {
88
+ } .popover__enterActive_1m1im .popover__inner_1m1im {
85
89
  opacity: 1;
86
90
  transform: scale(1);
87
91
  transition-property: opacity, transform;
88
92
  transition-timing-function: ease-in-out;
89
93
  transition-duration: 150ms;
90
- } .popover__exit_4z0yx .popover__inner_4z0yx {
94
+ } .popover__exit_1m1im .popover__inner_1m1im {
91
95
  opacity: 1;
92
96
  transform: scale(1);
93
- } .popover__exitActive_4z0yx .popover__inner_4z0yx {
97
+ } .popover__exitActive_1m1im .popover__inner_1m1im {
94
98
  opacity: 0;
95
99
  transform: scale(0.98);
96
100
  transition-property: opacity, transform;
package/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { Stack } from '@alfalab/core-components-stack/modern';
10
10
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
11
11
  import { stackingOrder } from '@alfalab/stack-context';
12
12
 
13
- const styles = {"component":"popover__component_4z0yx","inner":"popover__inner_4z0yx","scrollableContent":"popover__scrollableContent_4z0yx","arrow":"popover__arrow_4z0yx","enter":"popover__enter_4z0yx","enterActive":"popover__enterActive_4z0yx","exit":"popover__exit_4z0yx","exitActive":"popover__exitActive_4z0yx"};
13
+ const styles = {"component":"popover__component_1m1im","inner":"popover__inner_1m1im","scrollableContent":"popover__scrollableContent_1m1im","arrow":"popover__arrow_1m1im","enter":"popover__enter_1m1im","enterActive":"popover__enterActive_1m1im","exit":"popover__exit_1m1im","exitActive":"popover__exitActive_1m1im"};
14
14
  require('./index.css')
15
15
 
16
16
  const DEFAULT_TRANSITION = {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 2fn0g */
1
+ /* hash: 1k3j3 */
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-modal-bg-primary: #fff;
@@ -14,29 +14,33 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
18
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
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
+ /* новые значения, используйте их */
19
23
  } :root {
20
24
  } :root {
21
25
  } :root {
22
26
  --popover-border-color: transparent;
23
- } .popover__component_4z0yx {
27
+ } .popover__component_1m1im {
24
28
  background-color: transparent;
25
29
  color: var(--color-light-text-primary);
26
- } .popover__inner_4z0yx {
30
+ } .popover__inner_1m1im {
27
31
  position: relative;
28
32
  background-color: var(--color-light-modal-bg-primary);
29
33
  box-shadow: var(--shadow-m);
30
34
  border: 1px solid var(--popover-border-color);
31
35
  box-sizing: border-box;
32
36
  will-change: transform;
33
- } .popover__scrollableContent_4z0yx {
37
+ } .popover__scrollableContent_1m1im {
34
38
  position: relative;
35
39
  z-index: 2;
36
40
  overflow-y: auto;
37
- } .popover__arrow_4z0yx {
41
+ } .popover__arrow_1m1im {
38
42
  z-index: 1;
39
- } .popover__arrow_4z0yx:after {
43
+ } .popover__arrow_1m1im:after {
40
44
  content: '';
41
45
  display: block;
42
46
  position: absolute;
@@ -46,51 +50,51 @@
46
50
  border: 1px solid var(--popover-border-color);
47
51
  box-sizing: border-box;
48
52
  transform: rotate(45deg);
49
- } .popover__component_4z0yx[data-popper-placement='left'] .popover__arrow_4z0yx,
50
- .popover__component_4z0yx[data-popper-placement='left-start'] .popover__arrow_4z0yx,
51
- .popover__component_4z0yx[data-popper-placement='left-end'] .popover__arrow_4z0yx {
53
+ } .popover__component_1m1im[data-popper-placement='left'] .popover__arrow_1m1im,
54
+ .popover__component_1m1im[data-popper-placement='left-start'] .popover__arrow_1m1im,
55
+ .popover__component_1m1im[data-popper-placement='left-end'] .popover__arrow_1m1im {
52
56
  right: 5px
53
- } .popover__component_4z0yx[data-popper-placement='left'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='left-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='left-end'] .popover__arrow_4z0yx:after {
57
+ } .popover__component_1m1im[data-popper-placement='left'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='left-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='left-end'] .popover__arrow_1m1im:after {
54
58
  top: -6px;
55
59
  border-bottom: none;
56
60
  border-left: none;
57
- } .popover__component_4z0yx[data-popper-placement='right'] .popover__arrow_4z0yx,
58
- .popover__component_4z0yx[data-popper-placement='right-start'] .popover__arrow_4z0yx,
59
- .popover__component_4z0yx[data-popper-placement='right-end'] .popover__arrow_4z0yx {
61
+ } .popover__component_1m1im[data-popper-placement='right'] .popover__arrow_1m1im,
62
+ .popover__component_1m1im[data-popper-placement='right-start'] .popover__arrow_1m1im,
63
+ .popover__component_1m1im[data-popper-placement='right-end'] .popover__arrow_1m1im {
60
64
  left: -7px
61
- } .popover__component_4z0yx[data-popper-placement='right'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='right-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='right-end'] .popover__arrow_4z0yx:after {
65
+ } .popover__component_1m1im[data-popper-placement='right'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='right-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='right-end'] .popover__arrow_1m1im:after {
62
66
  top: -6px;
63
67
  border-top: none;
64
68
  border-right: none;
65
- } .popover__component_4z0yx[data-popper-placement='top'] .popover__arrow_4z0yx,
66
- .popover__component_4z0yx[data-popper-placement='top-start'] .popover__arrow_4z0yx,
67
- .popover__component_4z0yx[data-popper-placement='top-end'] .popover__arrow_4z0yx {
69
+ } .popover__component_1m1im[data-popper-placement='top'] .popover__arrow_1m1im,
70
+ .popover__component_1m1im[data-popper-placement='top-start'] .popover__arrow_1m1im,
71
+ .popover__component_1m1im[data-popper-placement='top-end'] .popover__arrow_1m1im {
68
72
  bottom: 5px
69
- } .popover__component_4z0yx[data-popper-placement='top'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='top-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='top-end'] .popover__arrow_4z0yx:after {
73
+ } .popover__component_1m1im[data-popper-placement='top'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='top-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='top-end'] .popover__arrow_1m1im:after {
70
74
  left: -6px;
71
75
  border-top: none;
72
76
  border-left: none;
73
- } .popover__component_4z0yx[data-popper-placement='bottom'] .popover__arrow_4z0yx,
74
- .popover__component_4z0yx[data-popper-placement='bottom-start'] .popover__arrow_4z0yx,
75
- .popover__component_4z0yx[data-popper-placement='bottom-end'] .popover__arrow_4z0yx {
77
+ } .popover__component_1m1im[data-popper-placement='bottom'] .popover__arrow_1m1im,
78
+ .popover__component_1m1im[data-popper-placement='bottom-start'] .popover__arrow_1m1im,
79
+ .popover__component_1m1im[data-popper-placement='bottom-end'] .popover__arrow_1m1im {
76
80
  top: -7px
77
- } .popover__component_4z0yx[data-popper-placement='bottom'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='bottom-start'] .popover__arrow_4z0yx:after, .popover__component_4z0yx[data-popper-placement='bottom-end'] .popover__arrow_4z0yx:after {
81
+ } .popover__component_1m1im[data-popper-placement='bottom'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='bottom-start'] .popover__arrow_1m1im:after, .popover__component_1m1im[data-popper-placement='bottom-end'] .popover__arrow_1m1im:after {
78
82
  left: -6px;
79
83
  border-bottom: none;
80
84
  border-right: none;
81
- } .popover__enter_4z0yx .popover__inner_4z0yx {
85
+ } .popover__enter_1m1im .popover__inner_1m1im {
82
86
  opacity: 0;
83
87
  transform: scale(0.98);
84
- } .popover__enterActive_4z0yx .popover__inner_4z0yx {
88
+ } .popover__enterActive_1m1im .popover__inner_1m1im {
85
89
  opacity: 1;
86
90
  transform: scale(1);
87
91
  transition-property: opacity, transform;
88
92
  transition-timing-function: ease-in-out;
89
93
  transition-duration: 150ms;
90
- } .popover__exit_4z0yx .popover__inner_4z0yx {
94
+ } .popover__exit_1m1im .popover__inner_1m1im {
91
95
  opacity: 1;
92
96
  transform: scale(1);
93
- } .popover__exitActive_4z0yx .popover__inner_4z0yx {
97
+ } .popover__exitActive_1m1im .popover__inner_1m1im {
94
98
  opacity: 0;
95
99
  transform: scale(0.98);
96
100
  transition-property: opacity, transform;
package/moderncssm/Component.d.ts ADDED
@@ -0,0 +1,101 @@
1
+ /// <reference types="react-transition-group" />
2
+ /// <reference types="react" />
3
+ import React from 'react';
4
+ import { CSSProperties, MutableRefObject, ReactNode } from "react";
5
+ import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
6
+ import { BasePlacement, VariationPlacement } from '@popperjs/core';
7
+ type RefElement = HTMLElement | null;
8
+ type Position = BasePlacement | VariationPlacement;
9
+ type PopoverProps = {
10
+ /**
11
+ * Управление состоянием поповера (открыт/закрыт)
12
+ */
13
+ open: boolean;
14
+ /**
15
+ * Элемент, относительного которого появляется поповер
16
+ */
17
+ anchorElement: RefElement;
18
+ /**
19
+ * Использовать ширину родительского элемента
20
+ */
21
+ useAnchorWidth?: boolean;
22
+ /**
23
+ * Позиционирование поповера
24
+ */
25
+ position?: Position;
26
+ /**
27
+ * Запрещает поповеру менять свою позицию.
28
+ * Например, если места снизу недостаточно, то он все равно будет показан снизу
29
+ */
30
+ preventFlip?: boolean;
31
+ /**
32
+ * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
33
+ */
34
+ preventOverflow?: boolean;
35
+ /**
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
37
+ */
38
+ availableHeight?: boolean;
39
+ /**
40
+ * Если `true`, будет отрисована стрелочка
41
+ */
42
+ withArrow?: boolean;
43
+ /**
44
+ * Смещение поповера.
45
+ * Если позиционирование top, bottom, то [x, y].
46
+ * Если позиционирование left, right то [y, x].
47
+ */
48
+ offset?: [number, number];
49
+ /**
50
+ * Дополнительный класс для поповера
51
+ */
52
+ popperClassName?: string;
53
+ /**
54
+ * Дополнительный класс для стрелочки
55
+ */
56
+ arrowClassName?: string;
57
+ /**
58
+ * Функция, возвращающая контейнер, в который будет рендериться поповер
59
+ */
60
+ getPortalContainer?: () => HTMLElement;
61
+ /**
62
+ * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.
63
+ */
64
+ transition?: CSSTransitionProps;
65
+ /**
66
+ * Выставляет кастомное свойство transition-duration
67
+ */
68
+ transitionDuration?: CSSProperties['transitionDuration'];
69
+ /**
70
+ * Рендерит компонент, обернутый в Transition
71
+ */
72
+ withTransition?: boolean;
73
+ /**
74
+ * Идентификатор для систем автоматизированного тестирования
75
+ */
76
+ dataTestId?: string;
77
+ /**
78
+ * Хранит функцию, с помощью которой можно обновить положение компонента
79
+ */
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
+ /**
82
+ * Дополнительный класс
83
+ */
84
+ className?: string;
85
+ /**
86
+ * z-index компонента
87
+ */
88
+ zIndex?: number;
89
+ /**
90
+ * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
91
+ * по очереди для каждой позиции из этого списка.
92
+ * Если не передавать, то поповер открывается в противоположном направлении от переданного position.
93
+ */
94
+ fallbackPlacements?: Position[];
95
+ /**
96
+ * Контент
97
+ */
98
+ children?: ReactNode;
99
+ };
100
+ declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
101
+ export { Position, PopoverProps, Popover };
package/moderncssm/Component.js ADDED
@@ -0,0 +1,150 @@
1
+ import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
2
+ import mergeRefs from 'react-merge-refs';
3
+ import { usePopper } from 'react-popper';
4
+ import { CSSTransition } from 'react-transition-group';
5
+ import { ResizeObserver } from '@juggle/resize-observer';
6
+ import cn from 'classnames';
7
+ import maxSize from 'popper-max-size-modifier';
8
+ import { Portal } from '@alfalab/core-components-portal/moderncssm';
9
+ import { Stack } from '@alfalab/core-components-stack/moderncssm';
10
+ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
11
+ import { stackingOrder } from '@alfalab/stack-context';
12
+ import styles from './index.module.css';
13
+
14
+ const DEFAULT_TRANSITION = {
15
+ timeout: 150,
16
+ };
17
+ const CSS_TRANSITION_CLASS_NAMES = {
18
+ enter: styles.enter,
19
+ enterActive: styles.enterActive,
20
+ exit: styles.exit,
21
+ exitActive: styles.exitActive,
22
+ };
23
+ const availableHieghtModifier = {
24
+ name: 'availableHeight',
25
+ enabled: true,
26
+ phase: 'beforeWrite',
27
+ requires: ['maxSize'],
28
+ fn({ state: { modifiersData, elements: { popper }, }, }) {
29
+ const { height } = modifiersData.maxSize;
30
+ const content = popper.querySelector(`.${styles.scrollableContent}`);
31
+ if (content && !content.style.maxHeight) {
32
+ content.style.maxHeight = `${height}px`;
33
+ }
34
+ },
35
+ };
36
+ const DEFAULT_OFFSET = [0, 0];
37
+ // Минимальное расстояние стрелки до края поповера
38
+ const MIN_DISTANCE_TO_EDGE = 24;
39
+ function getArrowPadding({ placement, }) {
40
+ if (placement === 'right-end' || placement === 'left-end') {
41
+ return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
42
+ }
43
+ if (placement === 'top-start' || placement === 'bottom-start') {
44
+ return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
45
+ }
46
+ if (placement === 'right-start' || placement === 'left-start') {
47
+ return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
48
+ }
49
+ if (placement === 'top-end' || placement === 'bottom-end') {
50
+ return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
51
+ }
52
+ return 0;
53
+ }
54
+ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
55
+ const [referenceElement, setReferenceElement] = useState(anchorElement);
56
+ const [popperElement, setPopperElement] = useState(null);
57
+ const [arrowElement, setArrowElement] = useState(null);
58
+ const updatePopperRef = useRef();
59
+ const popperRef = useRef(null);
60
+ const innerRef = useRef(null);
61
+ const popperModifiers = useMemo(() => {
62
+ const modifiers = [{ name: 'offset', options: { offset } }];
63
+ if (withArrow) {
64
+ modifiers.push({
65
+ name: 'arrow',
66
+ options: {
67
+ element: arrowElement,
68
+ padding: getArrowPadding,
69
+ },
70
+ });
71
+ }
72
+ if (preventFlip) {
73
+ modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
74
+ }
75
+ if (fallbackPlacements) {
76
+ modifiers.push({ name: 'flip', options: { fallbackPlacements } });
77
+ }
78
+ if (preventOverflow) {
79
+ modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
80
+ }
81
+ if (availableHeight) {
82
+ modifiers.push({ ...maxSize, options: {} });
83
+ modifiers.push({ ...availableHieghtModifier, options: {} });
84
+ }
85
+ return modifiers;
86
+ }, [
87
+ offset,
88
+ withArrow,
89
+ preventFlip,
90
+ fallbackPlacements,
91
+ preventOverflow,
92
+ availableHeight,
93
+ arrowElement,
94
+ ]);
95
+ const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
96
+ placement: position,
97
+ modifiers: popperModifiers,
98
+ });
99
+ if (updatePopper) {
100
+ updatePopperRef.current = updatePopper;
101
+ }
102
+ useLayoutEffect_SAFE_FOR_SSR(() => {
103
+ setReferenceElement(anchorElement);
104
+ }, [anchorElement]);
105
+ useEffect(() => {
106
+ if (updatePopper) {
107
+ updatePopper();
108
+ }
109
+ }, [updatePopper, arrowElement, children]);
110
+ useEffect(() => {
111
+ if (update && updatePopper) {
112
+ // eslint-disable-next-line no-param-reassign
113
+ update.current = updatePopper;
114
+ }
115
+ });
116
+ useEffect(() => {
117
+ if (useAnchorWidth) {
118
+ const updatePopoverWidth = () => updatePopperRef.current?.();
119
+ const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
120
+ const observer = new ResizeObserver$1(updatePopoverWidth);
121
+ if (anchorElement) {
122
+ observer.observe(anchorElement);
123
+ }
124
+ return () => {
125
+ observer.disconnect();
126
+ };
127
+ }
128
+ return () => ({});
129
+ }, [anchorElement, useAnchorWidth]);
130
+ const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
131
+ zIndex: computedZIndex,
132
+ width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
133
+ ...popperStyles.popper,
134
+ ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
135
+ }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
136
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
137
+ React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
138
+ withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
139
+ return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef, ...transition, in: open, onEntering: (node, isAppearing) => {
140
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
141
+ if (innerRef.current &&
142
+ transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`) {
143
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
144
+ }
145
+ transition?.onEntering?.(node, isAppearing);
146
+ } }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
147
+ });
148
+ Popover.displayName = 'Popover';
149
+
150
+ export { Popover };
package/moderncssm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Component";
package/moderncssm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { Popover } from './Component.js';
package/moderncssm/index.module.css ADDED
@@ -0,0 +1,115 @@
1
+ /* */
2
+
3
+ :root {
4
+ --popover-border-color: transparent;
5
+ }
6
+
7
+ .component {
8
+ background-color: transparent;
9
+ color: var(--color-light-text-primary);
10
+ }
11
+
12
+ .inner {
13
+ position: relative;
14
+ background-color: var(--color-light-modal-bg-primary);
15
+ box-shadow: var(--shadow-m);
16
+ border: 1px solid var(--popover-border-color);
17
+ box-sizing: border-box;
18
+ will-change: transform;
19
+ }
20
+
21
+ .scrollableContent {
22
+ position: relative;
23
+ z-index: 2;
24
+ overflow-y: auto;
25
+ }
26
+
27
+ .arrow {
28
+ z-index: 1;
29
+ }
30
+
31
+ .arrow:after {
32
+ content: '';
33
+ display: block;
34
+ position: absolute;
35
+ width: 12px;
36
+ height: 12px;
37
+ background-color: var(--color-light-modal-bg-primary);
38
+ border: 1px solid var(--popover-border-color);
39
+ box-sizing: border-box;
40
+ transform: rotate(45deg);
41
+ }
42
+
43
+ .component[data-popper-placement='left'] .arrow,
44
+ .component[data-popper-placement='left-start'] .arrow,
45
+ .component[data-popper-placement='left-end'] .arrow {
46
+ right: 5px
47
+ }
48
+
49
+ .component[data-popper-placement='left'] .arrow:after, .component[data-popper-placement='left-start'] .arrow:after, .component[data-popper-placement='left-end'] .arrow:after {
50
+ top: -6px;
51
+ border-bottom: none;
52
+ border-left: none;
53
+ }
54
+
55
+ .component[data-popper-placement='right'] .arrow,
56
+ .component[data-popper-placement='right-start'] .arrow,
57
+ .component[data-popper-placement='right-end'] .arrow {
58
+ left: -7px
59
+ }
60
+
61
+ .component[data-popper-placement='right'] .arrow:after, .component[data-popper-placement='right-start'] .arrow:after, .component[data-popper-placement='right-end'] .arrow:after {
62
+ top: -6px;
63
+ border-top: none;
64
+ border-right: none;
65
+ }
66
+
67
+ .component[data-popper-placement='top'] .arrow,
68
+ .component[data-popper-placement='top-start'] .arrow,
69
+ .component[data-popper-placement='top-end'] .arrow {
70
+ bottom: 5px
71
+ }
72
+
73
+ .component[data-popper-placement='top'] .arrow:after, .component[data-popper-placement='top-start'] .arrow:after, .component[data-popper-placement='top-end'] .arrow:after {
74
+ left: -6px;
75
+ border-top: none;
76
+ border-left: none;
77
+ }
78
+
79
+ .component[data-popper-placement='bottom'] .arrow,
80
+ .component[data-popper-placement='bottom-start'] .arrow,
81
+ .component[data-popper-placement='bottom-end'] .arrow {
82
+ top: -7px
83
+ }
84
+
85
+ .component[data-popper-placement='bottom'] .arrow:after, .component[data-popper-placement='bottom-start'] .arrow:after, .component[data-popper-placement='bottom-end'] .arrow:after {
86
+ left: -6px;
87
+ border-bottom: none;
88
+ border-right: none;
89
+ }
90
+
91
+ .enter .inner {
92
+ opacity: 0;
93
+ transform: scale(0.98);
94
+ }
95
+
96
+ .enterActive .inner {
97
+ opacity: 1;
98
+ transform: scale(1);
99
+ transition-property: opacity, transform;
100
+ transition-timing-function: ease-in-out;
101
+ transition-duration: 150ms;
102
+ }
103
+
104
+ .exit .inner {
105
+ opacity: 1;
106
+ transform: scale(1);
107
+ }
108
+
109
+ .exitActive .inner {
110
+ opacity: 0;
111
+ transform: scale(0.98);
112
+ transition-property: opacity, transform;
113
+ transition-timing-function: ease-in-out;
114
+ transition-duration: 150ms;
115
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.2.4",
3
+ "version": "6.3.0",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,7 +15,7 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-portal": "^3.3.0",
18
+ "@alfalab/core-components-portal": "^3.3.1",
19
19
  "@alfalab/core-components-stack": "^5.0.0",
20
20
  "@alfalab/hooks": "^1.13.0",
21
21
  "@juggle/resize-observer": "^3.3.1",
@@ -29,5 +29,7 @@
29
29
  },
30
30
  "devDependencies": {
31
31
  "@types/react-transition-group": "^4.4.5"
32
- }
32
+ },
33
+ "themesVersion": "13.1.0",
34
+ "varsVersion": "9.12.0"
33
35
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-themes/src/default.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
 
3
3
  :root {
4
4
  --popover-border-color: transparent;