@alfalab/core-components-popover 6.2.3 → 6.2.5

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 (10) hide show
  1. package/Component.js +3 -2
  2. package/cssm/Component.js +2 -1
  3. package/cssm/index.module.css +6 -2
  4. package/esm/Component.js +3 -2
  5. package/esm/index.css +32 -28
  6. package/index.css +32 -28
  7. package/modern/Component.js +3 -2
  8. package/modern/index.css +32 -28
  9. package/package.json +6 -4
  10. package/src/Component.tsx +2 -1
package/Component.js CHANGED
@@ -13,6 +13,7 @@ var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal');
14
14
  var coreComponentsStack = require('@alfalab/core-components-stack');
15
15
  var hooks = require('@alfalab/hooks');
16
+ var stackContext = require('@alfalab/stack-context');
16
17
 
17
18
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
18
19
 
@@ -21,7 +22,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
21
22
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
22
23
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
23
24
 
24
- var styles = {"component":"popover__component_1gm3q","inner":"popover__inner_1gm3q","scrollableContent":"popover__scrollableContent_1gm3q","arrow":"popover__arrow_1gm3q","enter":"popover__enter_1gm3q","enterActive":"popover__enterActive_1gm3q","exit":"popover__exit_1gm3q","exitActive":"popover__exitActive_1gm3q"};
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
26
  require('./index.css')
26
27
 
27
28
  var DEFAULT_TRANSITION = {
@@ -67,7 +68,7 @@ function getArrowPadding(_a) {
67
68
  return 0;
68
69
  }
69
70
  var Popover = React.forwardRef(function (_a, ref) {
70
- var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
71
+ var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
71
72
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
72
73
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
73
74
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
package/cssm/Component.js CHANGED
@@ -13,6 +13,7 @@ var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
14
14
  var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
15
15
  var hooks = require('@alfalab/hooks');
16
+ var stackContext = require('@alfalab/stack-context');
16
17
  var styles = require('./index.module.css');
17
18
 
18
19
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -66,7 +67,7 @@ function getArrowPadding(_a) {
66
67
  return 0;
67
68
  }
68
69
  var Popover = React.forwardRef(function (_a, ref) {
69
- var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
70
+ var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
70
71
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
71
72
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
72
73
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
package/cssm/index.module.css CHANGED
@@ -13,8 +13,12 @@
13
13
  /* Up */
14
14
 
15
15
  /* Hard up */
16
- } :root {
17
- } :root {
16
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
19
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
20
+
21
+ /* новые значения, используйте их */
18
22
  } :root {
19
23
  } :root {
20
24
  } :root {
package/esm/Component.js CHANGED
@@ -7,10 +7,11 @@ import { ResizeObserver } from '@juggle/resize-observer';
7
7
  import cn from 'classnames';
8
8
  import maxSize from 'popper-max-size-modifier';
9
9
  import { Portal } from '@alfalab/core-components-portal/esm';
10
- import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
10
+ import { Stack } from '@alfalab/core-components-stack/esm';
11
11
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
12
+ import { stackingOrder } from '@alfalab/stack-context';
12
13
 
13
- var styles = {"component":"popover__component_1gm3q","inner":"popover__inner_1gm3q","scrollableContent":"popover__scrollableContent_1gm3q","arrow":"popover__arrow_1gm3q","enter":"popover__enter_1gm3q","enterActive":"popover__enterActive_1gm3q","exit":"popover__exit_1gm3q","exitActive":"popover__exitActive_1gm3q"};
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
15
  require('./index.css')
15
16
 
16
17
  var DEFAULT_TRANSITION = {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1p0o4 */
1
+ /* hash: 17ng5 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -14,29 +14,33 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
18
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
19
23
  } :root {
20
24
  } :root {
21
25
  } :root {
22
26
  --popover-border-color: transparent;
23
- } .popover__component_1gm3q {
27
+ } .popover__component_4gwte {
24
28
  background-color: transparent;
25
29
  color: var(--color-light-text-primary);
26
- } .popover__inner_1gm3q {
30
+ } .popover__inner_4gwte {
27
31
  position: relative;
28
32
  background-color: var(--color-light-modal-bg-primary);
29
33
  box-shadow: var(--shadow-m);
30
34
  border: 1px solid var(--popover-border-color);
31
35
  box-sizing: border-box;
32
36
  will-change: transform;
33
- } .popover__scrollableContent_1gm3q {
37
+ } .popover__scrollableContent_4gwte {
34
38
  position: relative;
35
39
  z-index: 2;
36
40
  overflow-y: auto;
37
- } .popover__arrow_1gm3q {
41
+ } .popover__arrow_4gwte {
38
42
  z-index: 1;
39
- } .popover__arrow_1gm3q:after {
43
+ } .popover__arrow_4gwte:after {
40
44
  content: '';
41
45
  display: block;
42
46
  position: absolute;
@@ -46,51 +50,51 @@
46
50
  border: 1px solid var(--popover-border-color);
47
51
  box-sizing: border-box;
48
52
  transform: rotate(45deg);
49
- } .popover__component_1gm3q[data-popper-placement='left'] .popover__arrow_1gm3q,
50
- .popover__component_1gm3q[data-popper-placement='left-start'] .popover__arrow_1gm3q,
51
- .popover__component_1gm3q[data-popper-placement='left-end'] .popover__arrow_1gm3q {
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 {
52
56
  right: 5px
53
- } .popover__component_1gm3q[data-popper-placement='left'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='left-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='left-end'] .popover__arrow_1gm3q:after {
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 {
54
58
  top: -6px;
55
59
  border-bottom: none;
56
60
  border-left: none;
57
- } .popover__component_1gm3q[data-popper-placement='right'] .popover__arrow_1gm3q,
58
- .popover__component_1gm3q[data-popper-placement='right-start'] .popover__arrow_1gm3q,
59
- .popover__component_1gm3q[data-popper-placement='right-end'] .popover__arrow_1gm3q {
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 {
60
64
  left: -7px
61
- } .popover__component_1gm3q[data-popper-placement='right'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='right-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='right-end'] .popover__arrow_1gm3q:after {
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 {
62
66
  top: -6px;
63
67
  border-top: none;
64
68
  border-right: none;
65
- } .popover__component_1gm3q[data-popper-placement='top'] .popover__arrow_1gm3q,
66
- .popover__component_1gm3q[data-popper-placement='top-start'] .popover__arrow_1gm3q,
67
- .popover__component_1gm3q[data-popper-placement='top-end'] .popover__arrow_1gm3q {
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 {
68
72
  bottom: 5px
69
- } .popover__component_1gm3q[data-popper-placement='top'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='top-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='top-end'] .popover__arrow_1gm3q:after {
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 {
70
74
  left: -6px;
71
75
  border-top: none;
72
76
  border-left: none;
73
- } .popover__component_1gm3q[data-popper-placement='bottom'] .popover__arrow_1gm3q,
74
- .popover__component_1gm3q[data-popper-placement='bottom-start'] .popover__arrow_1gm3q,
75
- .popover__component_1gm3q[data-popper-placement='bottom-end'] .popover__arrow_1gm3q {
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 {
76
80
  top: -7px
77
- } .popover__component_1gm3q[data-popper-placement='bottom'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='bottom-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='bottom-end'] .popover__arrow_1gm3q:after {
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 {
78
82
  left: -6px;
79
83
  border-bottom: none;
80
84
  border-right: none;
81
- } .popover__enter_1gm3q .popover__inner_1gm3q {
85
+ } .popover__enter_4gwte .popover__inner_4gwte {
82
86
  opacity: 0;
83
87
  transform: scale(0.98);
84
- } .popover__enterActive_1gm3q .popover__inner_1gm3q {
88
+ } .popover__enterActive_4gwte .popover__inner_4gwte {
85
89
  opacity: 1;
86
90
  transform: scale(1);
87
91
  transition-property: opacity, transform;
88
92
  transition-timing-function: ease-in-out;
89
93
  transition-duration: 150ms;
90
- } .popover__exit_1gm3q .popover__inner_1gm3q {
94
+ } .popover__exit_4gwte .popover__inner_4gwte {
91
95
  opacity: 1;
92
96
  transform: scale(1);
93
- } .popover__exitActive_1gm3q .popover__inner_1gm3q {
97
+ } .popover__exitActive_4gwte .popover__inner_4gwte {
94
98
  opacity: 0;
95
99
  transform: scale(0.98);
96
100
  transition-property: opacity, transform;
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1p0o4 */
1
+ /* hash: 17ng5 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -14,29 +14,33 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
18
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
19
23
  } :root {
20
24
  } :root {
21
25
  } :root {
22
26
  --popover-border-color: transparent;
23
- } .popover__component_1gm3q {
27
+ } .popover__component_4gwte {
24
28
  background-color: transparent;
25
29
  color: var(--color-light-text-primary);
26
- } .popover__inner_1gm3q {
30
+ } .popover__inner_4gwte {
27
31
  position: relative;
28
32
  background-color: var(--color-light-modal-bg-primary);
29
33
  box-shadow: var(--shadow-m);
30
34
  border: 1px solid var(--popover-border-color);
31
35
  box-sizing: border-box;
32
36
  will-change: transform;
33
- } .popover__scrollableContent_1gm3q {
37
+ } .popover__scrollableContent_4gwte {
34
38
  position: relative;
35
39
  z-index: 2;
36
40
  overflow-y: auto;
37
- } .popover__arrow_1gm3q {
41
+ } .popover__arrow_4gwte {
38
42
  z-index: 1;
39
- } .popover__arrow_1gm3q:after {
43
+ } .popover__arrow_4gwte:after {
40
44
  content: '';
41
45
  display: block;
42
46
  position: absolute;
@@ -46,51 +50,51 @@
46
50
  border: 1px solid var(--popover-border-color);
47
51
  box-sizing: border-box;
48
52
  transform: rotate(45deg);
49
- } .popover__component_1gm3q[data-popper-placement='left'] .popover__arrow_1gm3q,
50
- .popover__component_1gm3q[data-popper-placement='left-start'] .popover__arrow_1gm3q,
51
- .popover__component_1gm3q[data-popper-placement='left-end'] .popover__arrow_1gm3q {
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 {
52
56
  right: 5px
53
- } .popover__component_1gm3q[data-popper-placement='left'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='left-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='left-end'] .popover__arrow_1gm3q:after {
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 {
54
58
  top: -6px;
55
59
  border-bottom: none;
56
60
  border-left: none;
57
- } .popover__component_1gm3q[data-popper-placement='right'] .popover__arrow_1gm3q,
58
- .popover__component_1gm3q[data-popper-placement='right-start'] .popover__arrow_1gm3q,
59
- .popover__component_1gm3q[data-popper-placement='right-end'] .popover__arrow_1gm3q {
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 {
60
64
  left: -7px
61
- } .popover__component_1gm3q[data-popper-placement='right'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='right-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='right-end'] .popover__arrow_1gm3q:after {
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 {
62
66
  top: -6px;
63
67
  border-top: none;
64
68
  border-right: none;
65
- } .popover__component_1gm3q[data-popper-placement='top'] .popover__arrow_1gm3q,
66
- .popover__component_1gm3q[data-popper-placement='top-start'] .popover__arrow_1gm3q,
67
- .popover__component_1gm3q[data-popper-placement='top-end'] .popover__arrow_1gm3q {
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 {
68
72
  bottom: 5px
69
- } .popover__component_1gm3q[data-popper-placement='top'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='top-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='top-end'] .popover__arrow_1gm3q:after {
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 {
70
74
  left: -6px;
71
75
  border-top: none;
72
76
  border-left: none;
73
- } .popover__component_1gm3q[data-popper-placement='bottom'] .popover__arrow_1gm3q,
74
- .popover__component_1gm3q[data-popper-placement='bottom-start'] .popover__arrow_1gm3q,
75
- .popover__component_1gm3q[data-popper-placement='bottom-end'] .popover__arrow_1gm3q {
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 {
76
80
  top: -7px
77
- } .popover__component_1gm3q[data-popper-placement='bottom'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='bottom-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='bottom-end'] .popover__arrow_1gm3q:after {
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 {
78
82
  left: -6px;
79
83
  border-bottom: none;
80
84
  border-right: none;
81
- } .popover__enter_1gm3q .popover__inner_1gm3q {
85
+ } .popover__enter_4gwte .popover__inner_4gwte {
82
86
  opacity: 0;
83
87
  transform: scale(0.98);
84
- } .popover__enterActive_1gm3q .popover__inner_1gm3q {
88
+ } .popover__enterActive_4gwte .popover__inner_4gwte {
85
89
  opacity: 1;
86
90
  transform: scale(1);
87
91
  transition-property: opacity, transform;
88
92
  transition-timing-function: ease-in-out;
89
93
  transition-duration: 150ms;
90
- } .popover__exit_1gm3q .popover__inner_1gm3q {
94
+ } .popover__exit_4gwte .popover__inner_4gwte {
91
95
  opacity: 1;
92
96
  transform: scale(1);
93
- } .popover__exitActive_1gm3q .popover__inner_1gm3q {
97
+ } .popover__exitActive_4gwte .popover__inner_4gwte {
94
98
  opacity: 0;
95
99
  transform: scale(0.98);
96
100
  transition-property: opacity, transform;
package/modern/Component.js CHANGED
@@ -6,10 +6,11 @@ import { ResizeObserver } from '@juggle/resize-observer';
6
6
  import cn from 'classnames';
7
7
  import maxSize from 'popper-max-size-modifier';
8
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
- import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
9
+ import { Stack } from '@alfalab/core-components-stack/modern';
10
10
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
11
+ import { stackingOrder } from '@alfalab/stack-context';
11
12
 
12
- const styles = {"component":"popover__component_1gm3q","inner":"popover__inner_1gm3q","scrollableContent":"popover__scrollableContent_1gm3q","arrow":"popover__arrow_1gm3q","enter":"popover__enter_1gm3q","enterActive":"popover__enterActive_1gm3q","exit":"popover__exit_1gm3q","exitActive":"popover__exitActive_1gm3q"};
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
14
  require('./index.css')
14
15
 
15
16
  const DEFAULT_TRANSITION = {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1p0o4 */
1
+ /* hash: 17ng5 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -14,29 +14,33 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
18
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
19
23
  } :root {
20
24
  } :root {
21
25
  } :root {
22
26
  --popover-border-color: transparent;
23
- } .popover__component_1gm3q {
27
+ } .popover__component_4gwte {
24
28
  background-color: transparent;
25
29
  color: var(--color-light-text-primary);
26
- } .popover__inner_1gm3q {
30
+ } .popover__inner_4gwte {
27
31
  position: relative;
28
32
  background-color: var(--color-light-modal-bg-primary);
29
33
  box-shadow: var(--shadow-m);
30
34
  border: 1px solid var(--popover-border-color);
31
35
  box-sizing: border-box;
32
36
  will-change: transform;
33
- } .popover__scrollableContent_1gm3q {
37
+ } .popover__scrollableContent_4gwte {
34
38
  position: relative;
35
39
  z-index: 2;
36
40
  overflow-y: auto;
37
- } .popover__arrow_1gm3q {
41
+ } .popover__arrow_4gwte {
38
42
  z-index: 1;
39
- } .popover__arrow_1gm3q:after {
43
+ } .popover__arrow_4gwte:after {
40
44
  content: '';
41
45
  display: block;
42
46
  position: absolute;
@@ -46,51 +50,51 @@
46
50
  border: 1px solid var(--popover-border-color);
47
51
  box-sizing: border-box;
48
52
  transform: rotate(45deg);
49
- } .popover__component_1gm3q[data-popper-placement='left'] .popover__arrow_1gm3q,
50
- .popover__component_1gm3q[data-popper-placement='left-start'] .popover__arrow_1gm3q,
51
- .popover__component_1gm3q[data-popper-placement='left-end'] .popover__arrow_1gm3q {
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 {
52
56
  right: 5px
53
- } .popover__component_1gm3q[data-popper-placement='left'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='left-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='left-end'] .popover__arrow_1gm3q:after {
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 {
54
58
  top: -6px;
55
59
  border-bottom: none;
56
60
  border-left: none;
57
- } .popover__component_1gm3q[data-popper-placement='right'] .popover__arrow_1gm3q,
58
- .popover__component_1gm3q[data-popper-placement='right-start'] .popover__arrow_1gm3q,
59
- .popover__component_1gm3q[data-popper-placement='right-end'] .popover__arrow_1gm3q {
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 {
60
64
  left: -7px
61
- } .popover__component_1gm3q[data-popper-placement='right'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='right-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='right-end'] .popover__arrow_1gm3q:after {
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 {
62
66
  top: -6px;
63
67
  border-top: none;
64
68
  border-right: none;
65
- } .popover__component_1gm3q[data-popper-placement='top'] .popover__arrow_1gm3q,
66
- .popover__component_1gm3q[data-popper-placement='top-start'] .popover__arrow_1gm3q,
67
- .popover__component_1gm3q[data-popper-placement='top-end'] .popover__arrow_1gm3q {
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 {
68
72
  bottom: 5px
69
- } .popover__component_1gm3q[data-popper-placement='top'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='top-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='top-end'] .popover__arrow_1gm3q:after {
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 {
70
74
  left: -6px;
71
75
  border-top: none;
72
76
  border-left: none;
73
- } .popover__component_1gm3q[data-popper-placement='bottom'] .popover__arrow_1gm3q,
74
- .popover__component_1gm3q[data-popper-placement='bottom-start'] .popover__arrow_1gm3q,
75
- .popover__component_1gm3q[data-popper-placement='bottom-end'] .popover__arrow_1gm3q {
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 {
76
80
  top: -7px
77
- } .popover__component_1gm3q[data-popper-placement='bottom'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='bottom-start'] .popover__arrow_1gm3q:after, .popover__component_1gm3q[data-popper-placement='bottom-end'] .popover__arrow_1gm3q:after {
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 {
78
82
  left: -6px;
79
83
  border-bottom: none;
80
84
  border-right: none;
81
- } .popover__enter_1gm3q .popover__inner_1gm3q {
85
+ } .popover__enter_4gwte .popover__inner_4gwte {
82
86
  opacity: 0;
83
87
  transform: scale(0.98);
84
- } .popover__enterActive_1gm3q .popover__inner_1gm3q {
88
+ } .popover__enterActive_4gwte .popover__inner_4gwte {
85
89
  opacity: 1;
86
90
  transform: scale(1);
87
91
  transition-property: opacity, transform;
88
92
  transition-timing-function: ease-in-out;
89
93
  transition-duration: 150ms;
90
- } .popover__exit_1gm3q .popover__inner_1gm3q {
94
+ } .popover__exit_4gwte .popover__inner_4gwte {
91
95
  opacity: 1;
92
96
  transform: scale(1);
93
- } .popover__exitActive_1gm3q .popover__inner_1gm3q {
97
+ } .popover__exitActive_4gwte .popover__inner_4gwte {
94
98
  opacity: 0;
95
99
  transform: scale(0.98);
96
100
  transition-property: opacity, transform;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.2.3",
3
+ "version": "6.2.5",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,8 +15,8 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-portal": "^3.3.0",
19
- "@alfalab/core-components-stack": "^4.1.0",
18
+ "@alfalab/core-components-portal": "^3.3.1",
19
+ "@alfalab/core-components-stack": "^5.0.0",
20
20
  "@alfalab/hooks": "^1.13.0",
21
21
  "@juggle/resize-observer": "^3.3.1",
22
22
  "@popperjs/core": "^2.11.8",
@@ -29,5 +29,7 @@
29
29
  },
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
35
  }
package/src/Component.tsx CHANGED
@@ -18,8 +18,9 @@ import cn from 'classnames';
18
18
  import maxSize from 'popper-max-size-modifier';
19
19
 
20
20
  import { Portal } from '@alfalab/core-components-portal';
21
- import { Stack, stackingOrder } from '@alfalab/core-components-stack';
21
+ import { Stack } from '@alfalab/core-components-stack';
22
22
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
23
+ import { stackingOrder } from '@alfalab/stack-context';
23
24
 
24
25
  import styles from './index.module.css';
25
26