@alfalab/core-components-popover 6.0.8 → 6.1.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 (11) hide show
  1. package/Component.js +1 -1
  2. package/esm/Component.js +1 -1
  3. package/esm/index.css +34 -34
  4. package/index.css +34 -34
  5. package/modern/Component.js +1 -1
  6. package/modern/index.css +34 -34
  7. package/package.json +3 -6
  8. package/src/Component.tsx +389 -0
  9. package/src/index.module.css +147 -0
  10. package/src/index.ts +1 -0
  11. package/send-stats.js +0 -82
package/Component.js CHANGED
@@ -20,7 +20,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
22
22
 
23
- var styles = {"component":"popover__component_t0vft","inner":"popover__inner_t0vft","scrollableContent":"popover__scrollableContent_t0vft","arrow":"popover__arrow_t0vft","arrowShift":"popover__arrowShift_t0vft","enter":"popover__enter_t0vft","enterActive":"popover__enterActive_t0vft","exit":"popover__exit_t0vft","exitActive":"popover__exitActive_t0vft"};
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
24
  require('./index.css')
25
25
 
26
26
  var DEFAULT_TRANSITION = {
package/esm/Component.js CHANGED
@@ -9,7 +9,7 @@ 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
11
 
12
- var styles = {"component":"popover__component_t0vft","inner":"popover__inner_t0vft","scrollableContent":"popover__scrollableContent_t0vft","arrow":"popover__arrow_t0vft","arrowShift":"popover__arrowShift_t0vft","enter":"popover__enter_t0vft","enterActive":"popover__enterActive_t0vft","exit":"popover__exit_t0vft","exitActive":"popover__exitActive_t0vft"};
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
13
  require('./index.css')
14
14
 
15
15
  var DEFAULT_TRANSITION = {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: gk0pc */
1
+ /* hash: 1degw */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff;
@@ -20,23 +20,23 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_t0vft {
23
+ } .popover__component_1mk0m {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_t0vft {
26
+ } .popover__inner_1mk0m {
27
27
  position: relative;
28
28
  background-color: var(--color-light-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_t0vft {
33
+ } .popover__scrollableContent_1mk0m {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_t0vft {
37
+ } .popover__arrow_1mk0m {
38
38
  z-index: 1;
39
- } .popover__arrow_t0vft:after {
39
+ } .popover__arrow_1mk0m:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
@@ -46,67 +46,67 @@
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_t0vft[data-popper-placement='left'] .popover__arrow_t0vft,
50
- .popover__component_t0vft[data-popper-placement='left-start'] .popover__arrow_t0vft,
51
- .popover__component_t0vft[data-popper-placement='left-end'] .popover__arrow_t0vft {
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 {
52
52
  right: 5px
53
- } .popover__component_t0vft[data-popper-placement='left'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='left-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='left-end'] .popover__arrow_t0vft:after {
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 {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_t0vft[data-popper-placement='left-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
57
+ } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
58
58
  top: -7px;
59
- } .popover__component_t0vft[data-popper-placement='left-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
59
+ } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
60
60
  top: -5px;
61
- } .popover__component_t0vft[data-popper-placement='right'] .popover__arrow_t0vft,
62
- .popover__component_t0vft[data-popper-placement='right-start'] .popover__arrow_t0vft,
63
- .popover__component_t0vft[data-popper-placement='right-end'] .popover__arrow_t0vft {
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 {
64
64
  left: -7px
65
- } .popover__component_t0vft[data-popper-placement='right'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='right-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='right-end'] .popover__arrow_t0vft:after {
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 {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_t0vft[data-popper-placement='right-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
69
+ } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
70
70
  top: -7px;
71
- } .popover__component_t0vft[data-popper-placement='right-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
71
+ } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
72
72
  top: -5px;
73
- } .popover__component_t0vft[data-popper-placement='top'] .popover__arrow_t0vft,
74
- .popover__component_t0vft[data-popper-placement='top-start'] .popover__arrow_t0vft,
75
- .popover__component_t0vft[data-popper-placement='top-end'] .popover__arrow_t0vft {
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 {
76
76
  bottom: 5px
77
- } .popover__component_t0vft[data-popper-placement='top'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='top-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='top-end'] .popover__arrow_t0vft:after {
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 {
78
78
  left: -6px;
79
79
  border-top: none;
80
80
  border-left: none;
81
- } .popover__component_t0vft[data-popper-placement='top-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
81
+ } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
82
82
  left: -17px;
83
- } .popover__component_t0vft[data-popper-placement='top-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
83
+ } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
84
84
  left: 5px;
85
- } .popover__component_t0vft[data-popper-placement='bottom'] .popover__arrow_t0vft,
86
- .popover__component_t0vft[data-popper-placement='bottom-start'] .popover__arrow_t0vft,
87
- .popover__component_t0vft[data-popper-placement='bottom-end'] .popover__arrow_t0vft {
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 {
88
88
  top: -7px
89
- } .popover__component_t0vft[data-popper-placement='bottom'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='bottom-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='bottom-end'] .popover__arrow_t0vft:after {
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 {
90
90
  left: -6px;
91
91
  border-bottom: none;
92
92
  border-right: none;
93
- } .popover__component_t0vft[data-popper-placement='bottom-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
93
+ } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
94
94
  left: -17px;
95
- } .popover__component_t0vft[data-popper-placement='bottom-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
95
+ } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
96
96
  left: 5px;
97
- } .popover__enter_t0vft .popover__inner_t0vft {
97
+ } .popover__enter_1mk0m .popover__inner_1mk0m {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
- } .popover__enterActive_t0vft .popover__inner_t0vft {
100
+ } .popover__enterActive_1mk0m .popover__inner_1mk0m {
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_t0vft .popover__inner_t0vft {
106
+ } .popover__exit_1mk0m .popover__inner_1mk0m {
107
107
  opacity: 1;
108
108
  transform: scale(1);
109
- } .popover__exitActive_t0vft .popover__inner_t0vft {
109
+ } .popover__exitActive_1mk0m .popover__inner_1mk0m {
110
110
  opacity: 0;
111
111
  transform: scale(0.98);
112
112
  transition-property: opacity, transform;
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: gk0pc */
1
+ /* hash: 1degw */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff;
@@ -20,23 +20,23 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_t0vft {
23
+ } .popover__component_1mk0m {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_t0vft {
26
+ } .popover__inner_1mk0m {
27
27
  position: relative;
28
28
  background-color: var(--color-light-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_t0vft {
33
+ } .popover__scrollableContent_1mk0m {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_t0vft {
37
+ } .popover__arrow_1mk0m {
38
38
  z-index: 1;
39
- } .popover__arrow_t0vft:after {
39
+ } .popover__arrow_1mk0m:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
@@ -46,67 +46,67 @@
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_t0vft[data-popper-placement='left'] .popover__arrow_t0vft,
50
- .popover__component_t0vft[data-popper-placement='left-start'] .popover__arrow_t0vft,
51
- .popover__component_t0vft[data-popper-placement='left-end'] .popover__arrow_t0vft {
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 {
52
52
  right: 5px
53
- } .popover__component_t0vft[data-popper-placement='left'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='left-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='left-end'] .popover__arrow_t0vft:after {
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 {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_t0vft[data-popper-placement='left-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
57
+ } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
58
58
  top: -7px;
59
- } .popover__component_t0vft[data-popper-placement='left-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
59
+ } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
60
60
  top: -5px;
61
- } .popover__component_t0vft[data-popper-placement='right'] .popover__arrow_t0vft,
62
- .popover__component_t0vft[data-popper-placement='right-start'] .popover__arrow_t0vft,
63
- .popover__component_t0vft[data-popper-placement='right-end'] .popover__arrow_t0vft {
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 {
64
64
  left: -7px
65
- } .popover__component_t0vft[data-popper-placement='right'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='right-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='right-end'] .popover__arrow_t0vft:after {
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 {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_t0vft[data-popper-placement='right-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
69
+ } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
70
70
  top: -7px;
71
- } .popover__component_t0vft[data-popper-placement='right-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
71
+ } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
72
72
  top: -5px;
73
- } .popover__component_t0vft[data-popper-placement='top'] .popover__arrow_t0vft,
74
- .popover__component_t0vft[data-popper-placement='top-start'] .popover__arrow_t0vft,
75
- .popover__component_t0vft[data-popper-placement='top-end'] .popover__arrow_t0vft {
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 {
76
76
  bottom: 5px
77
- } .popover__component_t0vft[data-popper-placement='top'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='top-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='top-end'] .popover__arrow_t0vft:after {
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 {
78
78
  left: -6px;
79
79
  border-top: none;
80
80
  border-left: none;
81
- } .popover__component_t0vft[data-popper-placement='top-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
81
+ } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
82
82
  left: -17px;
83
- } .popover__component_t0vft[data-popper-placement='top-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
83
+ } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
84
84
  left: 5px;
85
- } .popover__component_t0vft[data-popper-placement='bottom'] .popover__arrow_t0vft,
86
- .popover__component_t0vft[data-popper-placement='bottom-start'] .popover__arrow_t0vft,
87
- .popover__component_t0vft[data-popper-placement='bottom-end'] .popover__arrow_t0vft {
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 {
88
88
  top: -7px
89
- } .popover__component_t0vft[data-popper-placement='bottom'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='bottom-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='bottom-end'] .popover__arrow_t0vft:after {
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 {
90
90
  left: -6px;
91
91
  border-bottom: none;
92
92
  border-right: none;
93
- } .popover__component_t0vft[data-popper-placement='bottom-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
93
+ } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
94
94
  left: -17px;
95
- } .popover__component_t0vft[data-popper-placement='bottom-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
95
+ } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
96
96
  left: 5px;
97
- } .popover__enter_t0vft .popover__inner_t0vft {
97
+ } .popover__enter_1mk0m .popover__inner_1mk0m {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
- } .popover__enterActive_t0vft .popover__inner_t0vft {
100
+ } .popover__enterActive_1mk0m .popover__inner_1mk0m {
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_t0vft .popover__inner_t0vft {
106
+ } .popover__exit_1mk0m .popover__inner_1mk0m {
107
107
  opacity: 1;
108
108
  transform: scale(1);
109
- } .popover__exitActive_t0vft .popover__inner_t0vft {
109
+ } .popover__exitActive_1mk0m .popover__inner_1mk0m {
110
110
  opacity: 0;
111
111
  transform: scale(0.98);
112
112
  transition-property: opacity, transform;
package/modern/Component.js CHANGED
@@ -8,7 +8,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
10
 
11
- const styles = {"component":"popover__component_t0vft","inner":"popover__inner_t0vft","scrollableContent":"popover__scrollableContent_t0vft","arrow":"popover__arrow_t0vft","arrowShift":"popover__arrowShift_t0vft","enter":"popover__enter_t0vft","enterActive":"popover__enterActive_t0vft","exit":"popover__exit_t0vft","exitActive":"popover__exitActive_t0vft"};
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
12
  require('./index.css')
13
13
 
14
14
  const DEFAULT_TRANSITION = {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: gk0pc */
1
+ /* hash: 1degw */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-primary: #fff;
@@ -20,23 +20,23 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_t0vft {
23
+ } .popover__component_1mk0m {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_t0vft {
26
+ } .popover__inner_1mk0m {
27
27
  position: relative;
28
28
  background-color: var(--color-light-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_t0vft {
33
+ } .popover__scrollableContent_1mk0m {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_t0vft {
37
+ } .popover__arrow_1mk0m {
38
38
  z-index: 1;
39
- } .popover__arrow_t0vft:after {
39
+ } .popover__arrow_1mk0m:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
@@ -46,67 +46,67 @@
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_t0vft[data-popper-placement='left'] .popover__arrow_t0vft,
50
- .popover__component_t0vft[data-popper-placement='left-start'] .popover__arrow_t0vft,
51
- .popover__component_t0vft[data-popper-placement='left-end'] .popover__arrow_t0vft {
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 {
52
52
  right: 5px
53
- } .popover__component_t0vft[data-popper-placement='left'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='left-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='left-end'] .popover__arrow_t0vft:after {
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 {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_t0vft[data-popper-placement='left-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
57
+ } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
58
58
  top: -7px;
59
- } .popover__component_t0vft[data-popper-placement='left-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
59
+ } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
60
60
  top: -5px;
61
- } .popover__component_t0vft[data-popper-placement='right'] .popover__arrow_t0vft,
62
- .popover__component_t0vft[data-popper-placement='right-start'] .popover__arrow_t0vft,
63
- .popover__component_t0vft[data-popper-placement='right-end'] .popover__arrow_t0vft {
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 {
64
64
  left: -7px
65
- } .popover__component_t0vft[data-popper-placement='right'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='right-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='right-end'] .popover__arrow_t0vft:after {
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 {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_t0vft[data-popper-placement='right-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
69
+ } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
70
70
  top: -7px;
71
- } .popover__component_t0vft[data-popper-placement='right-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
71
+ } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
72
72
  top: -5px;
73
- } .popover__component_t0vft[data-popper-placement='top'] .popover__arrow_t0vft,
74
- .popover__component_t0vft[data-popper-placement='top-start'] .popover__arrow_t0vft,
75
- .popover__component_t0vft[data-popper-placement='top-end'] .popover__arrow_t0vft {
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 {
76
76
  bottom: 5px
77
- } .popover__component_t0vft[data-popper-placement='top'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='top-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='top-end'] .popover__arrow_t0vft:after {
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 {
78
78
  left: -6px;
79
79
  border-top: none;
80
80
  border-left: none;
81
- } .popover__component_t0vft[data-popper-placement='top-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
81
+ } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
82
82
  left: -17px;
83
- } .popover__component_t0vft[data-popper-placement='top-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
83
+ } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
84
84
  left: 5px;
85
- } .popover__component_t0vft[data-popper-placement='bottom'] .popover__arrow_t0vft,
86
- .popover__component_t0vft[data-popper-placement='bottom-start'] .popover__arrow_t0vft,
87
- .popover__component_t0vft[data-popper-placement='bottom-end'] .popover__arrow_t0vft {
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 {
88
88
  top: -7px
89
- } .popover__component_t0vft[data-popper-placement='bottom'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='bottom-start'] .popover__arrow_t0vft:after, .popover__component_t0vft[data-popper-placement='bottom-end'] .popover__arrow_t0vft:after {
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 {
90
90
  left: -6px;
91
91
  border-bottom: none;
92
92
  border-right: none;
93
- } .popover__component_t0vft[data-popper-placement='bottom-start'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
93
+ } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
94
94
  left: -17px;
95
- } .popover__component_t0vft[data-popper-placement='bottom-end'].popover__arrowShift_t0vft .popover__arrow_t0vft:after {
95
+ } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
96
96
  left: 5px;
97
- } .popover__enter_t0vft .popover__inner_t0vft {
97
+ } .popover__enter_1mk0m .popover__inner_1mk0m {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
- } .popover__enterActive_t0vft .popover__inner_t0vft {
100
+ } .popover__enterActive_1mk0m .popover__inner_1mk0m {
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_t0vft .popover__inner_t0vft {
106
+ } .popover__exit_1mk0m .popover__inner_1mk0m {
107
107
  opacity: 1;
108
108
  transform: scale(1);
109
- } .popover__exitActive_t0vft .popover__inner_t0vft {
109
+ } .popover__exitActive_1mk0m .popover__inner_1mk0m {
110
110
  opacity: 0;
111
111
  transform: scale(0.98);
112
112
  transition-property: opacity, transform;
package/package.json CHANGED
@@ -1,14 +1,11 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.0.8",
3
+ "version": "6.1.0",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "main": "index.js",
8
8
  "module": "./esm/index.js",
9
- "scripts": {
10
- "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
11
- },
12
9
  "publishConfig": {
13
10
  "access": "public",
14
11
  "directory": "dist"
@@ -18,8 +15,8 @@
18
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
16
  },
20
17
  "dependencies": {
21
- "@alfalab/core-components-portal": "^3.1.4",
22
- "@alfalab/core-components-stack": "^4.0.4",
18
+ "@alfalab/core-components-portal": "^3.2.0",
19
+ "@alfalab/core-components-stack": "^4.1.0",
23
20
  "@juggle/resize-observer": "^3.3.1",
24
21
  "@popperjs/core": "^2.3.3",
25
22
  "classnames": "^2.3.1",
package/src/Component.tsx ADDED
@@ -0,0 +1,389 @@
1
+ import React, {
2
+ CSSProperties,
3
+ forwardRef,
4
+ MutableRefObject,
5
+ ReactNode,
6
+ useEffect,
7
+ useMemo,
8
+ useRef,
9
+ useState,
10
+ } from 'react';
11
+ import mergeRefs from 'react-merge-refs';
12
+ import { usePopper } from 'react-popper';
13
+ import { CSSTransition } from 'react-transition-group';
14
+ import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
15
+ import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
16
+ import { BasePlacement, ModifierArguments, Obj, VariationPlacement } from '@popperjs/core';
17
+ import cn from 'classnames';
18
+ import maxSize from 'popper-max-size-modifier';
19
+
20
+ import { Portal } from '@alfalab/core-components-portal';
21
+ import { Stack, stackingOrder } from '@alfalab/core-components-stack';
22
+
23
+ import styles from './index.module.css';
24
+
25
+ type RefElement = HTMLElement | null;
26
+
27
+ export type Position = BasePlacement | VariationPlacement;
28
+
29
+ type PopperModifier = {
30
+ name: string;
31
+ options: Obj;
32
+ };
33
+
34
+ export type PopoverProps = {
35
+ /**
36
+ * Управление состоянием поповера (открыт/закрыт)
37
+ */
38
+ open: boolean;
39
+
40
+ /**
41
+ * Элемент, относительного которого появляется поповер
42
+ */
43
+ anchorElement: RefElement;
44
+
45
+ /**
46
+ * Использовать ширину родительского элемента
47
+ */
48
+ useAnchorWidth?: boolean;
49
+
50
+ /**
51
+ * Позиционирование поповера
52
+ */
53
+ position?: Position;
54
+
55
+ /**
56
+ * Запрещает поповеру менять свою позицию.
57
+ * Например, если места снизу недостаточно,то он все равно будет показан снизу
58
+ */
59
+ preventFlip?: boolean;
60
+
61
+ /**
62
+ * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
63
+ */
64
+ preventOverflow?: boolean;
65
+
66
+ /**
67
+ * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
68
+ */
69
+ availableHeight?: boolean;
70
+
71
+ /**
72
+ * Если `true`, будет отрисована стрелочка
73
+ */
74
+ withArrow?: boolean;
75
+
76
+ /**
77
+ * Смещение поповера.
78
+ * Если позиционирование top, bottom, то [x, y].
79
+ * Если позиционирование left, right то [y, x].
80
+ */
81
+ offset?: [number, number];
82
+
83
+ /**
84
+ * Дополнительный класс для поповера
85
+ */
86
+ popperClassName?: string;
87
+
88
+ /**
89
+ * Дополнительный класс для стрелочки
90
+ */
91
+ arrowClassName?: string;
92
+
93
+ /**
94
+ * Функция, возвращающая контейнер, в который будет рендериться поповер
95
+ */
96
+ getPortalContainer?: () => HTMLElement;
97
+
98
+ /**
99
+ * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.
100
+ */
101
+ transition?: CSSTransitionProps;
102
+
103
+ /**
104
+ * Выставляет кастомное свойство transition-duration
105
+ */
106
+ transitionDuration?: CSSProperties['transitionDuration'];
107
+
108
+ /**
109
+ * Рендерит компонент, обернутый в Transition
110
+ */
111
+ withTransition?: boolean;
112
+
113
+ /**
114
+ * Идентификатор для систем автоматизированного тестирования
115
+ */
116
+ dataTestId?: string;
117
+
118
+ /**
119
+ * Хранит функцию, с помощью которой можно обновить положение компонента
120
+ */
121
+ update?: MutableRefObject<() => void>;
122
+
123
+ /**
124
+ * Дополнительный класс
125
+ */
126
+ className?: string;
127
+
128
+ /**
129
+ * z-index компонента
130
+ */
131
+ zIndex?: number;
132
+
133
+ /**
134
+ * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
135
+ * по очереди для каждой позиции из этого списка.
136
+ * Если не передавать, то поповер открывается в противоположном направлении от переданного position.
137
+ */
138
+ fallbackPlacements?: Position[];
139
+
140
+ /**
141
+ * Контент
142
+ */
143
+ children?: ReactNode;
144
+ };
145
+
146
+ const DEFAULT_TRANSITION: PopoverProps['transition'] = {
147
+ timeout: 150,
148
+ };
149
+
150
+ const CSS_TRANSITION_CLASS_NAMES = {
151
+ enter: styles.enter,
152
+ enterActive: styles.enterActive,
153
+ exit: styles.exit,
154
+ exitActive: styles.exitActive,
155
+ };
156
+
157
+ const availableHieghtModifier = {
158
+ name: 'availableHeight',
159
+ enabled: true,
160
+ phase: 'beforeWrite',
161
+ requires: ['maxSize'],
162
+ fn({
163
+ state: {
164
+ modifiersData,
165
+ elements: { popper },
166
+ },
167
+ }: ModifierArguments<Obj>) {
168
+ const { height } = modifiersData.maxSize;
169
+
170
+ const content = popper.querySelector(`.${styles.scrollableContent}`) as HTMLElement;
171
+
172
+ if (content && !content.style.maxHeight) {
173
+ content.style.maxHeight = `${height}px`;
174
+ }
175
+ },
176
+ };
177
+
178
+ /**
179
+ * Минимальный размер anchorElement,
180
+ * при котором возможно смещение стрелочки относительно центра
181
+ */
182
+ const MIN_ARROW_SHIFT_SIZE = 75;
183
+
184
+ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
185
+ (
186
+ {
187
+ children,
188
+ getPortalContainer,
189
+ transition = DEFAULT_TRANSITION,
190
+ anchorElement,
191
+ useAnchorWidth,
192
+ offset = [0, 0],
193
+ withArrow = false,
194
+ withTransition = true,
195
+ position = 'left',
196
+ preventFlip,
197
+ popperClassName,
198
+ arrowClassName,
199
+ className,
200
+ open,
201
+ dataTestId,
202
+ update,
203
+ transitionDuration = `${transition.timeout}ms`,
204
+ zIndex = stackingOrder.POPOVER,
205
+ fallbackPlacements,
206
+ preventOverflow = true,
207
+ availableHeight = false,
208
+ },
209
+ ref,
210
+ ) => {
211
+ const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);
212
+ const [popperElement, setPopperElement] = useState<RefElement>(null);
213
+ const [arrowElement, setArrowElement] = useState<RefElement>(null);
214
+ const [arrowShift, setArrowShift] = useState(false);
215
+
216
+ const updatePopperRef = useRef<() => void>();
217
+
218
+ const popperRef = useRef<HTMLDivElement>(null);
219
+ const innerRef = useRef<HTMLDivElement>(null);
220
+
221
+ const popperModifiers = useMemo(() => {
222
+ const modifiers: PopperModifier[] = [{ name: 'offset', options: { offset } }];
223
+
224
+ if (withArrow) {
225
+ modifiers.push({ name: 'arrow', options: { element: arrowElement } });
226
+ }
227
+
228
+ if (preventFlip) {
229
+ modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
230
+ }
231
+
232
+ if (fallbackPlacements) {
233
+ modifiers.push({ name: 'flip', options: { fallbackPlacements } });
234
+ }
235
+
236
+ if (preventOverflow) {
237
+ modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
238
+ }
239
+
240
+ if (availableHeight) {
241
+ modifiers.push({ ...maxSize, options: {} });
242
+ modifiers.push({ ...availableHieghtModifier, options: {} });
243
+ }
244
+
245
+ return modifiers;
246
+ }, [
247
+ offset,
248
+ withArrow,
249
+ preventFlip,
250
+ fallbackPlacements,
251
+ preventOverflow,
252
+ availableHeight,
253
+ arrowElement,
254
+ ]);
255
+
256
+ const {
257
+ styles: popperStyles,
258
+ attributes,
259
+ update: updatePopper,
260
+ } = usePopper(referenceElement, popperElement, {
261
+ placement: position,
262
+ modifiers: popperModifiers,
263
+ });
264
+
265
+ if (updatePopper) {
266
+ updatePopperRef.current = updatePopper;
267
+ }
268
+
269
+ useEffect(() => {
270
+ setReferenceElement(anchorElement);
271
+ }, [anchorElement]);
272
+
273
+ useEffect(() => {
274
+ if (updatePopper) {
275
+ updatePopper();
276
+ }
277
+ }, [updatePopper, arrowElement, children]);
278
+
279
+ useEffect(() => {
280
+ if (update && !update.current && updatePopper) {
281
+ // eslint-disable-next-line no-param-reassign
282
+ update.current = updatePopper;
283
+ }
284
+ });
285
+
286
+ useEffect(() => {
287
+ if (useAnchorWidth) {
288
+ const updatePopoverWidth = () => updatePopperRef.current?.();
289
+ const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
290
+ const observer = new ResizeObserver(updatePopoverWidth);
291
+
292
+ if (anchorElement) {
293
+ observer.observe(anchorElement);
294
+ }
295
+
296
+ return () => {
297
+ observer.disconnect();
298
+ };
299
+ }
300
+
301
+ return () => ({});
302
+ }, [anchorElement, useAnchorWidth]);
303
+
304
+ /**
305
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
306
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
307
+ */
308
+ useEffect(() => {
309
+ const shiftedPosition = position.includes('-start') || position.includes('-end');
310
+
311
+ if (shiftedPosition && referenceElement) {
312
+ const { width, height } = referenceElement.getBoundingClientRect();
313
+
314
+ const size =
315
+ position.includes('left') || position.includes('right') ? height : width;
316
+
317
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
318
+ setArrowShift(true);
319
+ }
320
+ }
321
+ }, [referenceElement, position]);
322
+
323
+ const renderContent = (computedZIndex: number) => (
324
+ <div
325
+ ref={mergeRefs([ref, popperRef, setPopperElement])}
326
+ style={{
327
+ zIndex: computedZIndex,
328
+ width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
329
+ ...popperStyles.popper,
330
+ ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
331
+ }}
332
+ data-test-id={dataTestId}
333
+ className={cn(styles.component, className, {
334
+ [styles.arrowShift]: arrowShift,
335
+ })}
336
+ {...attributes.popper}
337
+ >
338
+ <div className={cn(styles.inner, popperClassName)} ref={innerRef}>
339
+ <div className={cn({ [styles.scrollableContent]: availableHeight })}>
340
+ {children}
341
+ </div>
342
+
343
+ {withArrow && (
344
+ <div
345
+ ref={setArrowElement}
346
+ style={popperStyles.arrow}
347
+ className={cn(styles.arrow, arrowClassName)}
348
+ />
349
+ )}
350
+ </div>
351
+ </div>
352
+ );
353
+
354
+ return (
355
+ <Stack value={zIndex}>
356
+ {(computedZIndex) => (
357
+ <Portal getPortalContainer={getPortalContainer}>
358
+ {withTransition ? (
359
+ <CSSTransition
360
+ unmountOnExit={true}
361
+ classNames={CSS_TRANSITION_CLASS_NAMES}
362
+ nodeRef={popperRef}
363
+ {...transition}
364
+ in={open}
365
+ onEntering={(node: HTMLElement, isAppearing: boolean) => {
366
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
367
+ if (
368
+ innerRef.current &&
369
+ transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`
370
+ ) {
371
+ innerRef.current.style.setProperty(
372
+ 'transition-duration',
373
+ transitionDuration,
374
+ );
375
+ }
376
+ transition?.onEntering?.(node, isAppearing);
377
+ }}
378
+ >
379
+ {renderContent(computedZIndex)}
380
+ </CSSTransition>
381
+ ) : (
382
+ open && renderContent(computedZIndex)
383
+ )}
384
+ </Portal>
385
+ )}
386
+ </Stack>
387
+ );
388
+ },
389
+ );
package/src/index.module.css ADDED
@@ -0,0 +1,147 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
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-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-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
+ &:after {
49
+ top: -6px;
50
+ border-bottom: none;
51
+ border-left: none;
52
+ }
53
+ }
54
+
55
+ .component[data-popper-placement='left-start'].arrowShift .arrow:after {
56
+ top: -7px;
57
+ }
58
+
59
+ .component[data-popper-placement='left-end'].arrowShift .arrow:after {
60
+ top: -5px;
61
+ }
62
+
63
+ .component[data-popper-placement='right'] .arrow,
64
+ .component[data-popper-placement='right-start'] .arrow,
65
+ .component[data-popper-placement='right-end'] .arrow {
66
+ left: -7px;
67
+
68
+ &:after {
69
+ top: -6px;
70
+ border-top: none;
71
+ border-right: none;
72
+ }
73
+ }
74
+
75
+ .component[data-popper-placement='right-start'].arrowShift .arrow:after {
76
+ top: -7px;
77
+ }
78
+
79
+ .component[data-popper-placement='right-end'].arrowShift .arrow:after {
80
+ top: -5px;
81
+ }
82
+
83
+ .component[data-popper-placement='top'] .arrow,
84
+ .component[data-popper-placement='top-start'] .arrow,
85
+ .component[data-popper-placement='top-end'] .arrow {
86
+ bottom: 5px;
87
+
88
+ &:after {
89
+ left: -6px;
90
+ border-top: none;
91
+ border-left: none;
92
+ }
93
+ }
94
+
95
+ .component[data-popper-placement='top-start'].arrowShift .arrow:after {
96
+ left: -17px;
97
+ }
98
+
99
+ .component[data-popper-placement='top-end'].arrowShift .arrow:after {
100
+ left: 5px;
101
+ }
102
+
103
+ .component[data-popper-placement='bottom'] .arrow,
104
+ .component[data-popper-placement='bottom-start'] .arrow,
105
+ .component[data-popper-placement='bottom-end'] .arrow {
106
+ top: -7px;
107
+
108
+ &:after {
109
+ left: -6px;
110
+ border-bottom: none;
111
+ border-right: none;
112
+ }
113
+ }
114
+
115
+ .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
116
+ left: -17px;
117
+ }
118
+
119
+ .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
120
+ left: 5px;
121
+ }
122
+
123
+ .enter .inner {
124
+ opacity: 0;
125
+ transform: scale(0.98);
126
+ }
127
+
128
+ .enterActive .inner {
129
+ opacity: 1;
130
+ transform: scale(1);
131
+ transition-property: opacity, transform;
132
+ transition-timing-function: ease-in-out;
133
+ transition-duration: 150ms;
134
+ }
135
+
136
+ .exit .inner {
137
+ opacity: 1;
138
+ transform: scale(1);
139
+ }
140
+
141
+ .exitActive .inner {
142
+ opacity: 0;
143
+ transform: scale(0.98);
144
+ transition-property: opacity, transform;
145
+ transition-timing-function: ease-in-out;
146
+ transition-duration: 150ms;
147
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';
package/send-stats.js DELETED
@@ -1,82 +0,0 @@
1
- const http = require('http');
2
- const fs = require('fs');
3
- const { promisify } = require('util');
4
- const path = require('path');
5
-
6
- const readFile = promisify(fs.readFile);
7
-
8
- async function main() {
9
- const remoteHost = process.env.NIS_HOST || 'digital';
10
- const remotePort = process.env.NIS_PORT || 80;
11
- const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
12
-
13
- try {
14
- const [_, node, os, arch] =
15
- /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
16
- const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
17
- const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
18
-
19
- let ownPackageJson, packageJson;
20
-
21
- try {
22
- const result = await Promise.all([
23
- readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
24
- readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
25
- ]);
26
-
27
- ownPackageJson = JSON.parse(result[0]);
28
- packageJson = JSON.parse(result[1]);
29
- } catch (err) {
30
- ownPackageJson = '';
31
- packageJson = '';
32
- }
33
-
34
- const data = {
35
- node,
36
- npm,
37
- yarn,
38
- os,
39
- arch,
40
- ownPackageJson: JSON.stringify(ownPackageJson),
41
- packageJson: JSON.stringify(packageJson),
42
- };
43
-
44
- const body = JSON.stringify(data);
45
-
46
- const options = {
47
- host: remoteHost,
48
- port: remotePort,
49
- path: remotePath,
50
- method: 'POST',
51
- headers: {
52
- 'Content-Type': 'application/json',
53
- 'Content-Length': body.length,
54
- },
55
- };
56
-
57
- return new Promise((resolve, reject) => {
58
- const req = http.request(options, (res) => {
59
- res.on('end', () => {
60
- resolve();
61
- });
62
- });
63
-
64
- req.on('error', () => {
65
- reject();
66
- });
67
-
68
- req.write(body);
69
- req.end();
70
- });
71
- } catch (error) {
72
- throw error;
73
- }
74
- }
75
-
76
- main()
77
- .then(() => {
78
- process.exit(0);
79
- })
80
- .catch(() => {
81
- process.exit(0);
82
- });