@alfalab/core-components-popover 6.2.5 → 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 (13) hide show
  1. package/Component.js +1 -1
  2. package/esm/Component.js +1 -1
  3. package/esm/index.css +26 -26
  4. package/index.css +26 -26
  5. package/modern/Component.js +1 -1
  6. package/modern/index.css +26 -26
  7. package/moderncssm/Component.d.ts +101 -0
  8. package/moderncssm/Component.js +150 -0
  9. package/moderncssm/index.d.ts +1 -0
  10. package/moderncssm/index.js +1 -0
  11. package/moderncssm/index.module.css +115 -0
  12. package/package.json +3 -3
  13. 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_4gwte","inner":"popover__inner_4gwte","scrollableContent":"popover__scrollableContent_4gwte","arrow":"popover__arrow_4gwte","enter":"popover__enter_4gwte","enterActive":"popover__enterActive_4gwte","exit":"popover__exit_4gwte","exitActive":"popover__exitActive_4gwte"};
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/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_4gwte","inner":"popover__inner_4gwte","scrollableContent":"popover__scrollableContent_4gwte","arrow":"popover__arrow_4gwte","enter":"popover__enter_4gwte","enterActive":"popover__enterActive_4gwte","exit":"popover__exit_4gwte","exitActive":"popover__exitActive_4gwte"};
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: 17ng5 */
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;
@@ -24,23 +24,23 @@
24
24
  } :root {
25
25
  } :root {
26
26
  --popover-border-color: transparent;
27
- } .popover__component_4gwte {
27
+ } .popover__component_1m1im {
28
28
  background-color: transparent;
29
29
  color: var(--color-light-text-primary);
30
- } .popover__inner_4gwte {
30
+ } .popover__inner_1m1im {
31
31
  position: relative;
32
32
  background-color: var(--color-light-modal-bg-primary);
33
33
  box-shadow: var(--shadow-m);
34
34
  border: 1px solid var(--popover-border-color);
35
35
  box-sizing: border-box;
36
36
  will-change: transform;
37
- } .popover__scrollableContent_4gwte {
37
+ } .popover__scrollableContent_1m1im {
38
38
  position: relative;
39
39
  z-index: 2;
40
40
  overflow-y: auto;
41
- } .popover__arrow_4gwte {
41
+ } .popover__arrow_1m1im {
42
42
  z-index: 1;
43
- } .popover__arrow_4gwte:after {
43
+ } .popover__arrow_1m1im:after {
44
44
  content: '';
45
45
  display: block;
46
46
  position: absolute;
@@ -50,51 +50,51 @@
50
50
  border: 1px solid var(--popover-border-color);
51
51
  box-sizing: border-box;
52
52
  transform: rotate(45deg);
53
- } .popover__component_4gwte[data-popper-placement='left'] .popover__arrow_4gwte,
54
- .popover__component_4gwte[data-popper-placement='left-start'] .popover__arrow_4gwte,
55
- .popover__component_4gwte[data-popper-placement='left-end'] .popover__arrow_4gwte {
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 {
56
56
  right: 5px
57
- } .popover__component_4gwte[data-popper-placement='left'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='left-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='left-end'] .popover__arrow_4gwte: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 {
58
58
  top: -6px;
59
59
  border-bottom: none;
60
60
  border-left: none;
61
- } .popover__component_4gwte[data-popper-placement='right'] .popover__arrow_4gwte,
62
- .popover__component_4gwte[data-popper-placement='right-start'] .popover__arrow_4gwte,
63
- .popover__component_4gwte[data-popper-placement='right-end'] .popover__arrow_4gwte {
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 {
64
64
  left: -7px
65
- } .popover__component_4gwte[data-popper-placement='right'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='right-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='right-end'] .popover__arrow_4gwte: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 {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_4gwte[data-popper-placement='top'] .popover__arrow_4gwte,
70
- .popover__component_4gwte[data-popper-placement='top-start'] .popover__arrow_4gwte,
71
- .popover__component_4gwte[data-popper-placement='top-end'] .popover__arrow_4gwte {
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 {
72
72
  bottom: 5px
73
- } .popover__component_4gwte[data-popper-placement='top'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='top-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='top-end'] .popover__arrow_4gwte: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 {
74
74
  left: -6px;
75
75
  border-top: none;
76
76
  border-left: none;
77
- } .popover__component_4gwte[data-popper-placement='bottom'] .popover__arrow_4gwte,
78
- .popover__component_4gwte[data-popper-placement='bottom-start'] .popover__arrow_4gwte,
79
- .popover__component_4gwte[data-popper-placement='bottom-end'] .popover__arrow_4gwte {
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 {
80
80
  top: -7px
81
- } .popover__component_4gwte[data-popper-placement='bottom'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='bottom-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='bottom-end'] .popover__arrow_4gwte: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 {
82
82
  left: -6px;
83
83
  border-bottom: none;
84
84
  border-right: none;
85
- } .popover__enter_4gwte .popover__inner_4gwte {
85
+ } .popover__enter_1m1im .popover__inner_1m1im {
86
86
  opacity: 0;
87
87
  transform: scale(0.98);
88
- } .popover__enterActive_4gwte .popover__inner_4gwte {
88
+ } .popover__enterActive_1m1im .popover__inner_1m1im {
89
89
  opacity: 1;
90
90
  transform: scale(1);
91
91
  transition-property: opacity, transform;
92
92
  transition-timing-function: ease-in-out;
93
93
  transition-duration: 150ms;
94
- } .popover__exit_4gwte .popover__inner_4gwte {
94
+ } .popover__exit_1m1im .popover__inner_1m1im {
95
95
  opacity: 1;
96
96
  transform: scale(1);
97
- } .popover__exitActive_4gwte .popover__inner_4gwte {
97
+ } .popover__exitActive_1m1im .popover__inner_1m1im {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
100
  transition-property: opacity, transform;
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 17ng5 */
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;
@@ -24,23 +24,23 @@
24
24
  } :root {
25
25
  } :root {
26
26
  --popover-border-color: transparent;
27
- } .popover__component_4gwte {
27
+ } .popover__component_1m1im {
28
28
  background-color: transparent;
29
29
  color: var(--color-light-text-primary);
30
- } .popover__inner_4gwte {
30
+ } .popover__inner_1m1im {
31
31
  position: relative;
32
32
  background-color: var(--color-light-modal-bg-primary);
33
33
  box-shadow: var(--shadow-m);
34
34
  border: 1px solid var(--popover-border-color);
35
35
  box-sizing: border-box;
36
36
  will-change: transform;
37
- } .popover__scrollableContent_4gwte {
37
+ } .popover__scrollableContent_1m1im {
38
38
  position: relative;
39
39
  z-index: 2;
40
40
  overflow-y: auto;
41
- } .popover__arrow_4gwte {
41
+ } .popover__arrow_1m1im {
42
42
  z-index: 1;
43
- } .popover__arrow_4gwte:after {
43
+ } .popover__arrow_1m1im:after {
44
44
  content: '';
45
45
  display: block;
46
46
  position: absolute;
@@ -50,51 +50,51 @@
50
50
  border: 1px solid var(--popover-border-color);
51
51
  box-sizing: border-box;
52
52
  transform: rotate(45deg);
53
- } .popover__component_4gwte[data-popper-placement='left'] .popover__arrow_4gwte,
54
- .popover__component_4gwte[data-popper-placement='left-start'] .popover__arrow_4gwte,
55
- .popover__component_4gwte[data-popper-placement='left-end'] .popover__arrow_4gwte {
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 {
56
56
  right: 5px
57
- } .popover__component_4gwte[data-popper-placement='left'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='left-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='left-end'] .popover__arrow_4gwte: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 {
58
58
  top: -6px;
59
59
  border-bottom: none;
60
60
  border-left: none;
61
- } .popover__component_4gwte[data-popper-placement='right'] .popover__arrow_4gwte,
62
- .popover__component_4gwte[data-popper-placement='right-start'] .popover__arrow_4gwte,
63
- .popover__component_4gwte[data-popper-placement='right-end'] .popover__arrow_4gwte {
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 {
64
64
  left: -7px
65
- } .popover__component_4gwte[data-popper-placement='right'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='right-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='right-end'] .popover__arrow_4gwte: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 {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_4gwte[data-popper-placement='top'] .popover__arrow_4gwte,
70
- .popover__component_4gwte[data-popper-placement='top-start'] .popover__arrow_4gwte,
71
- .popover__component_4gwte[data-popper-placement='top-end'] .popover__arrow_4gwte {
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 {
72
72
  bottom: 5px
73
- } .popover__component_4gwte[data-popper-placement='top'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='top-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='top-end'] .popover__arrow_4gwte: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 {
74
74
  left: -6px;
75
75
  border-top: none;
76
76
  border-left: none;
77
- } .popover__component_4gwte[data-popper-placement='bottom'] .popover__arrow_4gwte,
78
- .popover__component_4gwte[data-popper-placement='bottom-start'] .popover__arrow_4gwte,
79
- .popover__component_4gwte[data-popper-placement='bottom-end'] .popover__arrow_4gwte {
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 {
80
80
  top: -7px
81
- } .popover__component_4gwte[data-popper-placement='bottom'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='bottom-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='bottom-end'] .popover__arrow_4gwte: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 {
82
82
  left: -6px;
83
83
  border-bottom: none;
84
84
  border-right: none;
85
- } .popover__enter_4gwte .popover__inner_4gwte {
85
+ } .popover__enter_1m1im .popover__inner_1m1im {
86
86
  opacity: 0;
87
87
  transform: scale(0.98);
88
- } .popover__enterActive_4gwte .popover__inner_4gwte {
88
+ } .popover__enterActive_1m1im .popover__inner_1m1im {
89
89
  opacity: 1;
90
90
  transform: scale(1);
91
91
  transition-property: opacity, transform;
92
92
  transition-timing-function: ease-in-out;
93
93
  transition-duration: 150ms;
94
- } .popover__exit_4gwte .popover__inner_4gwte {
94
+ } .popover__exit_1m1im .popover__inner_1m1im {
95
95
  opacity: 1;
96
96
  transform: scale(1);
97
- } .popover__exitActive_4gwte .popover__inner_4gwte {
97
+ } .popover__exitActive_1m1im .popover__inner_1m1im {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
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_4gwte","inner":"popover__inner_4gwte","scrollableContent":"popover__scrollableContent_4gwte","arrow":"popover__arrow_4gwte","enter":"popover__enter_4gwte","enterActive":"popover__enterActive_4gwte","exit":"popover__exit_4gwte","exitActive":"popover__exitActive_4gwte"};
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: 17ng5 */
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;
@@ -24,23 +24,23 @@
24
24
  } :root {
25
25
  } :root {
26
26
  --popover-border-color: transparent;
27
- } .popover__component_4gwte {
27
+ } .popover__component_1m1im {
28
28
  background-color: transparent;
29
29
  color: var(--color-light-text-primary);
30
- } .popover__inner_4gwte {
30
+ } .popover__inner_1m1im {
31
31
  position: relative;
32
32
  background-color: var(--color-light-modal-bg-primary);
33
33
  box-shadow: var(--shadow-m);
34
34
  border: 1px solid var(--popover-border-color);
35
35
  box-sizing: border-box;
36
36
  will-change: transform;
37
- } .popover__scrollableContent_4gwte {
37
+ } .popover__scrollableContent_1m1im {
38
38
  position: relative;
39
39
  z-index: 2;
40
40
  overflow-y: auto;
41
- } .popover__arrow_4gwte {
41
+ } .popover__arrow_1m1im {
42
42
  z-index: 1;
43
- } .popover__arrow_4gwte:after {
43
+ } .popover__arrow_1m1im:after {
44
44
  content: '';
45
45
  display: block;
46
46
  position: absolute;
@@ -50,51 +50,51 @@
50
50
  border: 1px solid var(--popover-border-color);
51
51
  box-sizing: border-box;
52
52
  transform: rotate(45deg);
53
- } .popover__component_4gwte[data-popper-placement='left'] .popover__arrow_4gwte,
54
- .popover__component_4gwte[data-popper-placement='left-start'] .popover__arrow_4gwte,
55
- .popover__component_4gwte[data-popper-placement='left-end'] .popover__arrow_4gwte {
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 {
56
56
  right: 5px
57
- } .popover__component_4gwte[data-popper-placement='left'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='left-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='left-end'] .popover__arrow_4gwte: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 {
58
58
  top: -6px;
59
59
  border-bottom: none;
60
60
  border-left: none;
61
- } .popover__component_4gwte[data-popper-placement='right'] .popover__arrow_4gwte,
62
- .popover__component_4gwte[data-popper-placement='right-start'] .popover__arrow_4gwte,
63
- .popover__component_4gwte[data-popper-placement='right-end'] .popover__arrow_4gwte {
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 {
64
64
  left: -7px
65
- } .popover__component_4gwte[data-popper-placement='right'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='right-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='right-end'] .popover__arrow_4gwte: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 {
66
66
  top: -6px;
67
67
  border-top: none;
68
68
  border-right: none;
69
- } .popover__component_4gwte[data-popper-placement='top'] .popover__arrow_4gwte,
70
- .popover__component_4gwte[data-popper-placement='top-start'] .popover__arrow_4gwte,
71
- .popover__component_4gwte[data-popper-placement='top-end'] .popover__arrow_4gwte {
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 {
72
72
  bottom: 5px
73
- } .popover__component_4gwte[data-popper-placement='top'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='top-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='top-end'] .popover__arrow_4gwte: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 {
74
74
  left: -6px;
75
75
  border-top: none;
76
76
  border-left: none;
77
- } .popover__component_4gwte[data-popper-placement='bottom'] .popover__arrow_4gwte,
78
- .popover__component_4gwte[data-popper-placement='bottom-start'] .popover__arrow_4gwte,
79
- .popover__component_4gwte[data-popper-placement='bottom-end'] .popover__arrow_4gwte {
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 {
80
80
  top: -7px
81
- } .popover__component_4gwte[data-popper-placement='bottom'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='bottom-start'] .popover__arrow_4gwte:after, .popover__component_4gwte[data-popper-placement='bottom-end'] .popover__arrow_4gwte: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 {
82
82
  left: -6px;
83
83
  border-bottom: none;
84
84
  border-right: none;
85
- } .popover__enter_4gwte .popover__inner_4gwte {
85
+ } .popover__enter_1m1im .popover__inner_1m1im {
86
86
  opacity: 0;
87
87
  transform: scale(0.98);
88
- } .popover__enterActive_4gwte .popover__inner_4gwte {
88
+ } .popover__enterActive_1m1im .popover__inner_1m1im {
89
89
  opacity: 1;
90
90
  transform: scale(1);
91
91
  transition-property: opacity, transform;
92
92
  transition-timing-function: ease-in-out;
93
93
  transition-duration: 150ms;
94
- } .popover__exit_4gwte .popover__inner_4gwte {
94
+ } .popover__exit_1m1im .popover__inner_1m1im {
95
95
  opacity: 1;
96
96
  transform: scale(1);
97
- } .popover__exitActive_4gwte .popover__inner_4gwte {
97
+ } .popover__exitActive_1m1im .popover__inner_1m1im {
98
98
  opacity: 0;
99
99
  transform: scale(0.98);
100
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.5",
3
+ "version": "6.3.0",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -30,6 +30,6 @@
30
30
  "devDependencies": {
31
31
  "@types/react-transition-group": "^4.4.5"
32
32
  },
33
- "themesVersion": "13.0.1",
34
- "varsVersion": "9.11.1"
33
+ "themesVersion": "13.1.0",
34
+ "varsVersion": "9.12.0"
35
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;