@alfalab/core-components-popover 6.1.0 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/Component.d.ts +2 -2
  2. package/Component.js +37 -33
  3. package/cssm/Component.d.ts +2 -2
  4. package/cssm/Component.js +36 -32
  5. package/cssm/index.js +1 -0
  6. package/cssm/index.module.css +7 -23
  7. package/esm/Component.d.ts +2 -2
  8. package/esm/Component.js +37 -33
  9. package/esm/index.css +29 -45
  10. package/esm/index.js +1 -0
  11. package/index.css +29 -45
  12. package/index.js +1 -0
  13. package/modern/Component.d.ts +2 -2
  14. package/modern/Component.js +31 -28
  15. package/modern/index.css +29 -45
  16. package/modern/index.js +1 -0
  17. package/package.json +3 -2
  18. package/src/Component.tsx +44 -34
  19. package/src/index.module.css +2 -34
package/esm/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 1degw */
1
+ /* hash: 1f2q9 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-bg-primary: #fff;
4
+ --color-light-modal-bg-primary: #fff;
5
5
  --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
7
  } :root {
@@ -20,93 +20,77 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_1mk0m {
23
+ } .popover__component_dqu0o {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_1mk0m {
26
+ } .popover__inner_dqu0o {
27
27
  position: relative;
28
- background-color: var(--color-light-bg-primary);
28
+ background-color: var(--color-light-modal-bg-primary);
29
29
  box-shadow: var(--shadow-m);
30
30
  border: 1px solid var(--popover-border-color);
31
31
  box-sizing: border-box;
32
32
  will-change: transform;
33
- } .popover__scrollableContent_1mk0m {
33
+ } .popover__scrollableContent_dqu0o {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_1mk0m {
37
+ } .popover__arrow_dqu0o {
38
38
  z-index: 1;
39
- } .popover__arrow_1mk0m:after {
39
+ } .popover__arrow_dqu0o:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
43
43
  width: 12px;
44
44
  height: 12px;
45
- background-color: var(--color-light-bg-primary);
45
+ background-color: var(--color-light-modal-bg-primary);
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m,
50
- .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m,
51
- .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m {
49
+ } .popover__component_dqu0o[data-popper-placement='left'] .popover__arrow_dqu0o,
50
+ .popover__component_dqu0o[data-popper-placement='left-start'] .popover__arrow_dqu0o,
51
+ .popover__component_dqu0o[data-popper-placement='left-end'] .popover__arrow_dqu0o {
52
52
  right: 5px
53
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m:after {
53
+ } .popover__component_dqu0o[data-popper-placement='left'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='left-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='left-end'] .popover__arrow_dqu0o:after {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
58
- top: -7px;
59
- } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
60
- top: -5px;
61
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m,
62
- .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m,
63
- .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m {
57
+ } .popover__component_dqu0o[data-popper-placement='right'] .popover__arrow_dqu0o,
58
+ .popover__component_dqu0o[data-popper-placement='right-start'] .popover__arrow_dqu0o,
59
+ .popover__component_dqu0o[data-popper-placement='right-end'] .popover__arrow_dqu0o {
64
60
  left: -7px
65
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m:after {
61
+ } .popover__component_dqu0o[data-popper-placement='right'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='right-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='right-end'] .popover__arrow_dqu0o:after {
66
62
  top: -6px;
67
63
  border-top: none;
68
64
  border-right: none;
69
- } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
70
- top: -7px;
71
- } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
72
- top: -5px;
73
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m,
74
- .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m,
75
- .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m {
65
+ } .popover__component_dqu0o[data-popper-placement='top'] .popover__arrow_dqu0o,
66
+ .popover__component_dqu0o[data-popper-placement='top-start'] .popover__arrow_dqu0o,
67
+ .popover__component_dqu0o[data-popper-placement='top-end'] .popover__arrow_dqu0o {
76
68
  bottom: 5px
77
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m:after {
69
+ } .popover__component_dqu0o[data-popper-placement='top'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='top-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='top-end'] .popover__arrow_dqu0o:after {
78
70
  left: -6px;
79
71
  border-top: none;
80
72
  border-left: none;
81
- } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
82
- left: -17px;
83
- } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
84
- left: 5px;
85
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m,
86
- .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m,
87
- .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m {
73
+ } .popover__component_dqu0o[data-popper-placement='bottom'] .popover__arrow_dqu0o,
74
+ .popover__component_dqu0o[data-popper-placement='bottom-start'] .popover__arrow_dqu0o,
75
+ .popover__component_dqu0o[data-popper-placement='bottom-end'] .popover__arrow_dqu0o {
88
76
  top: -7px
89
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m:after {
77
+ } .popover__component_dqu0o[data-popper-placement='bottom'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='bottom-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='bottom-end'] .popover__arrow_dqu0o:after {
90
78
  left: -6px;
91
79
  border-bottom: none;
92
80
  border-right: none;
93
- } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
94
- left: -17px;
95
- } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
96
- left: 5px;
97
- } .popover__enter_1mk0m .popover__inner_1mk0m {
81
+ } .popover__enter_dqu0o .popover__inner_dqu0o {
98
82
  opacity: 0;
99
83
  transform: scale(0.98);
100
- } .popover__enterActive_1mk0m .popover__inner_1mk0m {
84
+ } .popover__enterActive_dqu0o .popover__inner_dqu0o {
101
85
  opacity: 1;
102
86
  transform: scale(1);
103
87
  transition-property: opacity, transform;
104
88
  transition-timing-function: ease-in-out;
105
89
  transition-duration: 150ms;
106
- } .popover__exit_1mk0m .popover__inner_1mk0m {
90
+ } .popover__exit_dqu0o .popover__inner_dqu0o {
107
91
  opacity: 1;
108
92
  transform: scale(1);
109
- } .popover__exitActive_1mk0m .popover__inner_1mk0m {
93
+ } .popover__exitActive_dqu0o .popover__inner_dqu0o {
110
94
  opacity: 0;
111
95
  transform: scale(0.98);
112
96
  transition-property: opacity, transform;
package/esm/index.js CHANGED
@@ -9,3 +9,4 @@ import 'classnames';
9
9
  import 'popper-max-size-modifier';
10
10
  import '@alfalab/core-components-portal/esm';
11
11
  import '@alfalab/core-components-stack/esm';
12
+ import '@alfalab/hooks';
package/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 1degw */
1
+ /* hash: 1f2q9 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-bg-primary: #fff;
4
+ --color-light-modal-bg-primary: #fff;
5
5
  --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
7
  } :root {
@@ -20,93 +20,77 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_1mk0m {
23
+ } .popover__component_dqu0o {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_1mk0m {
26
+ } .popover__inner_dqu0o {
27
27
  position: relative;
28
- background-color: var(--color-light-bg-primary);
28
+ background-color: var(--color-light-modal-bg-primary);
29
29
  box-shadow: var(--shadow-m);
30
30
  border: 1px solid var(--popover-border-color);
31
31
  box-sizing: border-box;
32
32
  will-change: transform;
33
- } .popover__scrollableContent_1mk0m {
33
+ } .popover__scrollableContent_dqu0o {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_1mk0m {
37
+ } .popover__arrow_dqu0o {
38
38
  z-index: 1;
39
- } .popover__arrow_1mk0m:after {
39
+ } .popover__arrow_dqu0o:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
43
43
  width: 12px;
44
44
  height: 12px;
45
- background-color: var(--color-light-bg-primary);
45
+ background-color: var(--color-light-modal-bg-primary);
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m,
50
- .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m,
51
- .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m {
49
+ } .popover__component_dqu0o[data-popper-placement='left'] .popover__arrow_dqu0o,
50
+ .popover__component_dqu0o[data-popper-placement='left-start'] .popover__arrow_dqu0o,
51
+ .popover__component_dqu0o[data-popper-placement='left-end'] .popover__arrow_dqu0o {
52
52
  right: 5px
53
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m:after {
53
+ } .popover__component_dqu0o[data-popper-placement='left'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='left-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='left-end'] .popover__arrow_dqu0o:after {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
58
- top: -7px;
59
- } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
60
- top: -5px;
61
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m,
62
- .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m,
63
- .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m {
57
+ } .popover__component_dqu0o[data-popper-placement='right'] .popover__arrow_dqu0o,
58
+ .popover__component_dqu0o[data-popper-placement='right-start'] .popover__arrow_dqu0o,
59
+ .popover__component_dqu0o[data-popper-placement='right-end'] .popover__arrow_dqu0o {
64
60
  left: -7px
65
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m:after {
61
+ } .popover__component_dqu0o[data-popper-placement='right'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='right-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='right-end'] .popover__arrow_dqu0o:after {
66
62
  top: -6px;
67
63
  border-top: none;
68
64
  border-right: none;
69
- } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
70
- top: -7px;
71
- } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
72
- top: -5px;
73
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m,
74
- .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m,
75
- .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m {
65
+ } .popover__component_dqu0o[data-popper-placement='top'] .popover__arrow_dqu0o,
66
+ .popover__component_dqu0o[data-popper-placement='top-start'] .popover__arrow_dqu0o,
67
+ .popover__component_dqu0o[data-popper-placement='top-end'] .popover__arrow_dqu0o {
76
68
  bottom: 5px
77
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m:after {
69
+ } .popover__component_dqu0o[data-popper-placement='top'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='top-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='top-end'] .popover__arrow_dqu0o:after {
78
70
  left: -6px;
79
71
  border-top: none;
80
72
  border-left: none;
81
- } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
82
- left: -17px;
83
- } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
84
- left: 5px;
85
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m,
86
- .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m,
87
- .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m {
73
+ } .popover__component_dqu0o[data-popper-placement='bottom'] .popover__arrow_dqu0o,
74
+ .popover__component_dqu0o[data-popper-placement='bottom-start'] .popover__arrow_dqu0o,
75
+ .popover__component_dqu0o[data-popper-placement='bottom-end'] .popover__arrow_dqu0o {
88
76
  top: -7px
89
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m:after {
77
+ } .popover__component_dqu0o[data-popper-placement='bottom'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='bottom-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='bottom-end'] .popover__arrow_dqu0o:after {
90
78
  left: -6px;
91
79
  border-bottom: none;
92
80
  border-right: none;
93
- } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
94
- left: -17px;
95
- } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
96
- left: 5px;
97
- } .popover__enter_1mk0m .popover__inner_1mk0m {
81
+ } .popover__enter_dqu0o .popover__inner_dqu0o {
98
82
  opacity: 0;
99
83
  transform: scale(0.98);
100
- } .popover__enterActive_1mk0m .popover__inner_1mk0m {
84
+ } .popover__enterActive_dqu0o .popover__inner_dqu0o {
101
85
  opacity: 1;
102
86
  transform: scale(1);
103
87
  transition-property: opacity, transform;
104
88
  transition-timing-function: ease-in-out;
105
89
  transition-duration: 150ms;
106
- } .popover__exit_1mk0m .popover__inner_1mk0m {
90
+ } .popover__exit_dqu0o .popover__inner_dqu0o {
107
91
  opacity: 1;
108
92
  transform: scale(1);
109
- } .popover__exitActive_1mk0m .popover__inner_1mk0m {
93
+ } .popover__exitActive_dqu0o .popover__inner_dqu0o {
110
94
  opacity: 0;
111
95
  transform: scale(0.98);
112
96
  transition-property: opacity, transform;
package/index.js CHANGED
@@ -13,6 +13,7 @@ require('classnames');
13
13
  require('popper-max-size-modifier');
14
14
  require('@alfalab/core-components-portal');
15
15
  require('@alfalab/core-components-stack');
16
+ require('@alfalab/hooks');
16
17
 
17
18
 
18
19
 
package/modern/Component.d.ts CHANGED
@@ -25,7 +25,7 @@ type PopoverProps = {
25
25
  position?: Position;
26
26
  /**
27
27
  * Запрещает поповеру менять свою позицию.
28
- * Например, если места снизу недостаточно,то он все равно будет показан снизу
28
+ * Например, если места снизу недостаточно, то он все равно будет показан снизу
29
29
  */
30
30
  preventFlip?: boolean;
31
31
  /**
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/modern/Component.js CHANGED
@@ -7,8 +7,9 @@ import cn from 'classnames';
7
7
  import maxSize from 'popper-max-size-modifier';
8
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
9
  import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
10
+ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
10
11
 
11
- const styles = {"component":"popover__component_1mk0m","inner":"popover__inner_1mk0m","scrollableContent":"popover__scrollableContent_1mk0m","arrow":"popover__arrow_1mk0m","arrowShift":"popover__arrowShift_1mk0m","enter":"popover__enter_1mk0m","enterActive":"popover__enterActive_1mk0m","exit":"popover__exit_1mk0m","exitActive":"popover__exitActive_1mk0m"};
12
+ const styles = {"component":"popover__component_dqu0o","inner":"popover__inner_dqu0o","scrollableContent":"popover__scrollableContent_dqu0o","arrow":"popover__arrow_dqu0o","enter":"popover__enter_dqu0o","enterActive":"popover__enterActive_dqu0o","exit":"popover__exit_dqu0o","exitActive":"popover__exitActive_dqu0o"};
12
13
  require('./index.css')
13
14
 
14
15
  const DEFAULT_TRANSITION = {
@@ -33,23 +34,41 @@ const availableHieghtModifier = {
33
34
  }
34
35
  },
35
36
  };
36
- /**
37
- * Минимальный размер anchorElement,
38
- * при котором возможно смещение стрелочки относительно центра
39
- */
40
- const MIN_ARROW_SHIFT_SIZE = 75;
41
- const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = [0, 0], 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) => {
37
+ const DEFAULT_OFFSET = [0, 0];
38
+ // Минимальное расстояние стрелки до края поповера
39
+ const MIN_DISTANCE_TO_EDGE = 24;
40
+ function getArrowPadding({ placement, }) {
41
+ if (placement === 'right-end' || placement === 'left-end') {
42
+ return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
43
+ }
44
+ if (placement === 'top-start' || placement === 'bottom-start') {
45
+ return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
46
+ }
47
+ if (placement === 'right-start' || placement === 'left-start') {
48
+ return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
49
+ }
50
+ if (placement === 'top-end' || placement === 'bottom-end') {
51
+ return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
52
+ }
53
+ return 0;
54
+ }
55
+ 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) => {
42
56
  const [referenceElement, setReferenceElement] = useState(anchorElement);
43
57
  const [popperElement, setPopperElement] = useState(null);
44
58
  const [arrowElement, setArrowElement] = useState(null);
45
- const [arrowShift, setArrowShift] = useState(false);
46
59
  const updatePopperRef = useRef();
47
60
  const popperRef = useRef(null);
48
61
  const innerRef = useRef(null);
49
62
  const popperModifiers = useMemo(() => {
50
63
  const modifiers = [{ name: 'offset', options: { offset } }];
51
64
  if (withArrow) {
52
- modifiers.push({ name: 'arrow', options: { element: arrowElement } });
65
+ modifiers.push({
66
+ name: 'arrow',
67
+ options: {
68
+ element: arrowElement,
69
+ padding: getArrowPadding,
70
+ },
71
+ });
53
72
  }
54
73
  if (preventFlip) {
55
74
  modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -81,7 +100,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
81
100
  if (updatePopper) {
82
101
  updatePopperRef.current = updatePopper;
83
102
  }
84
- useEffect(() => {
103
+ useLayoutEffect_SAFE_FOR_SSR(() => {
85
104
  setReferenceElement(anchorElement);
86
105
  }, [anchorElement]);
87
106
  useEffect(() => {
@@ -90,7 +109,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
90
109
  }
91
110
  }, [updatePopper, arrowElement, children]);
92
111
  useEffect(() => {
93
- if (update && !update.current && updatePopper) {
112
+ if (update && updatePopper) {
94
113
  // eslint-disable-next-line no-param-reassign
95
114
  update.current = updatePopper;
96
115
  }
@@ -109,28 +128,12 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
109
128
  }
110
129
  return () => ({});
111
130
  }, [anchorElement, useAnchorWidth]);
112
- /**
113
- * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
114
- * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
115
- */
116
- useEffect(() => {
117
- const shiftedPosition = position.includes('-start') || position.includes('-end');
118
- if (shiftedPosition && referenceElement) {
119
- const { width, height } = referenceElement.getBoundingClientRect();
120
- const size = position.includes('left') || position.includes('right') ? height : width;
121
- if (size >= MIN_ARROW_SHIFT_SIZE) {
122
- setArrowShift(true);
123
- }
124
- }
125
- }, [referenceElement, position]);
126
131
  const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
127
132
  zIndex: computedZIndex,
128
133
  width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
129
134
  ...popperStyles.popper,
130
135
  ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
131
- }, "data-test-id": dataTestId, className: cn(styles.component, className, {
132
- [styles.arrowShift]: arrowShift,
133
- }), ...attributes.popper },
136
+ }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
134
137
  React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
135
138
  React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
136
139
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
package/modern/index.css CHANGED
@@ -1,7 +1,7 @@
1
- /* hash: 1degw */
1
+ /* hash: 1f2q9 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-bg-primary: #fff;
4
+ --color-light-modal-bg-primary: #fff;
5
5
  --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
7
  } :root {
@@ -20,93 +20,77 @@
20
20
  } :root {
21
21
  } :root {
22
22
  --popover-border-color: transparent;
23
- } .popover__component_1mk0m {
23
+ } .popover__component_dqu0o {
24
24
  background-color: transparent;
25
25
  color: var(--color-light-text-primary);
26
- } .popover__inner_1mk0m {
26
+ } .popover__inner_dqu0o {
27
27
  position: relative;
28
- background-color: var(--color-light-bg-primary);
28
+ background-color: var(--color-light-modal-bg-primary);
29
29
  box-shadow: var(--shadow-m);
30
30
  border: 1px solid var(--popover-border-color);
31
31
  box-sizing: border-box;
32
32
  will-change: transform;
33
- } .popover__scrollableContent_1mk0m {
33
+ } .popover__scrollableContent_dqu0o {
34
34
  position: relative;
35
35
  z-index: 2;
36
36
  overflow-y: auto;
37
- } .popover__arrow_1mk0m {
37
+ } .popover__arrow_dqu0o {
38
38
  z-index: 1;
39
- } .popover__arrow_1mk0m:after {
39
+ } .popover__arrow_dqu0o:after {
40
40
  content: '';
41
41
  display: block;
42
42
  position: absolute;
43
43
  width: 12px;
44
44
  height: 12px;
45
- background-color: var(--color-light-bg-primary);
45
+ background-color: var(--color-light-modal-bg-primary);
46
46
  border: 1px solid var(--popover-border-color);
47
47
  box-sizing: border-box;
48
48
  transform: rotate(45deg);
49
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m,
50
- .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m,
51
- .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m {
49
+ } .popover__component_dqu0o[data-popper-placement='left'] .popover__arrow_dqu0o,
50
+ .popover__component_dqu0o[data-popper-placement='left-start'] .popover__arrow_dqu0o,
51
+ .popover__component_dqu0o[data-popper-placement='left-end'] .popover__arrow_dqu0o {
52
52
  right: 5px
53
- } .popover__component_1mk0m[data-popper-placement='left'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='left-end'] .popover__arrow_1mk0m:after {
53
+ } .popover__component_dqu0o[data-popper-placement='left'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='left-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='left-end'] .popover__arrow_dqu0o:after {
54
54
  top: -6px;
55
55
  border-bottom: none;
56
56
  border-left: none;
57
- } .popover__component_1mk0m[data-popper-placement='left-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
58
- top: -7px;
59
- } .popover__component_1mk0m[data-popper-placement='left-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
60
- top: -5px;
61
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m,
62
- .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m,
63
- .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m {
57
+ } .popover__component_dqu0o[data-popper-placement='right'] .popover__arrow_dqu0o,
58
+ .popover__component_dqu0o[data-popper-placement='right-start'] .popover__arrow_dqu0o,
59
+ .popover__component_dqu0o[data-popper-placement='right-end'] .popover__arrow_dqu0o {
64
60
  left: -7px
65
- } .popover__component_1mk0m[data-popper-placement='right'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='right-end'] .popover__arrow_1mk0m:after {
61
+ } .popover__component_dqu0o[data-popper-placement='right'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='right-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='right-end'] .popover__arrow_dqu0o:after {
66
62
  top: -6px;
67
63
  border-top: none;
68
64
  border-right: none;
69
- } .popover__component_1mk0m[data-popper-placement='right-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
70
- top: -7px;
71
- } .popover__component_1mk0m[data-popper-placement='right-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
72
- top: -5px;
73
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m,
74
- .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m,
75
- .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m {
65
+ } .popover__component_dqu0o[data-popper-placement='top'] .popover__arrow_dqu0o,
66
+ .popover__component_dqu0o[data-popper-placement='top-start'] .popover__arrow_dqu0o,
67
+ .popover__component_dqu0o[data-popper-placement='top-end'] .popover__arrow_dqu0o {
76
68
  bottom: 5px
77
- } .popover__component_1mk0m[data-popper-placement='top'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='top-end'] .popover__arrow_1mk0m:after {
69
+ } .popover__component_dqu0o[data-popper-placement='top'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='top-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='top-end'] .popover__arrow_dqu0o:after {
78
70
  left: -6px;
79
71
  border-top: none;
80
72
  border-left: none;
81
- } .popover__component_1mk0m[data-popper-placement='top-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
82
- left: -17px;
83
- } .popover__component_1mk0m[data-popper-placement='top-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
84
- left: 5px;
85
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m,
86
- .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m,
87
- .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m {
73
+ } .popover__component_dqu0o[data-popper-placement='bottom'] .popover__arrow_dqu0o,
74
+ .popover__component_dqu0o[data-popper-placement='bottom-start'] .popover__arrow_dqu0o,
75
+ .popover__component_dqu0o[data-popper-placement='bottom-end'] .popover__arrow_dqu0o {
88
76
  top: -7px
89
- } .popover__component_1mk0m[data-popper-placement='bottom'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-start'] .popover__arrow_1mk0m:after, .popover__component_1mk0m[data-popper-placement='bottom-end'] .popover__arrow_1mk0m:after {
77
+ } .popover__component_dqu0o[data-popper-placement='bottom'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='bottom-start'] .popover__arrow_dqu0o:after, .popover__component_dqu0o[data-popper-placement='bottom-end'] .popover__arrow_dqu0o:after {
90
78
  left: -6px;
91
79
  border-bottom: none;
92
80
  border-right: none;
93
- } .popover__component_1mk0m[data-popper-placement='bottom-start'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
94
- left: -17px;
95
- } .popover__component_1mk0m[data-popper-placement='bottom-end'].popover__arrowShift_1mk0m .popover__arrow_1mk0m:after {
96
- left: 5px;
97
- } .popover__enter_1mk0m .popover__inner_1mk0m {
81
+ } .popover__enter_dqu0o .popover__inner_dqu0o {
98
82
  opacity: 0;
99
83
  transform: scale(0.98);
100
- } .popover__enterActive_1mk0m .popover__inner_1mk0m {
84
+ } .popover__enterActive_dqu0o .popover__inner_dqu0o {
101
85
  opacity: 1;
102
86
  transform: scale(1);
103
87
  transition-property: opacity, transform;
104
88
  transition-timing-function: ease-in-out;
105
89
  transition-duration: 150ms;
106
- } .popover__exit_1mk0m .popover__inner_1mk0m {
90
+ } .popover__exit_dqu0o .popover__inner_dqu0o {
107
91
  opacity: 1;
108
92
  transform: scale(1);
109
- } .popover__exitActive_1mk0m .popover__inner_1mk0m {
93
+ } .popover__exitActive_dqu0o .popover__inner_dqu0o {
110
94
  opacity: 0;
111
95
  transform: scale(0.98);
112
96
  transition-property: opacity, transform;
package/modern/index.js CHANGED
@@ -8,3 +8,4 @@ import 'classnames';
8
8
  import 'popper-max-size-modifier';
9
9
  import '@alfalab/core-components-portal/modern';
10
10
  import '@alfalab/core-components-stack/modern';
11
+ import '@alfalab/hooks';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.1.0",
3
+ "version": "6.2.1",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -17,8 +17,9 @@
17
17
  "dependencies": {
18
18
  "@alfalab/core-components-portal": "^3.2.0",
19
19
  "@alfalab/core-components-stack": "^4.1.0",
20
+ "@alfalab/hooks": "^1.13.0",
20
21
  "@juggle/resize-observer": "^3.3.1",
21
- "@popperjs/core": "^2.3.3",
22
+ "@popperjs/core": "^2.11.8",
22
23
  "classnames": "^2.3.1",
23
24
  "popper-max-size-modifier": "^0.2.0",
24
25
  "react-merge-refs": "^1.1.0",