@alfalab/core-components-popover 6.0.5 → 6.0.6

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 (9) hide show
  1. package/Component.js +15 -5
  2. package/cssm/Component.js +14 -4
  3. package/cssm/index.module.css +40 -56
  4. package/esm/Component.js +15 -5
  5. package/esm/index.css +49 -65
  6. package/index.css +49 -65
  7. package/modern/Component.js +13 -4
  8. package/modern/index.css +49 -65
  9. package/package.json +3 -3
package/Component.js CHANGED
@@ -44,7 +44,7 @@ var __assign = function () {
44
44
  return __assign.apply(this, arguments);
45
45
  };
46
46
 
47
- var styles = {"component":"popover__component_1bn0c","inner":"popover__inner_1bn0c","scrollableContent":"popover__scrollableContent_1bn0c","arrow":"popover__arrow_1bn0c","arrowShift":"popover__arrowShift_1bn0c","enter":"popover__enter_1bn0c","enterActive":"popover__enterActive_1bn0c","exit":"popover__exit_1bn0c","exitActive":"popover__exitActive_1bn0c"};
47
+ var styles = {"component":"popover__component_obrv4","inner":"popover__inner_obrv4","scrollableContent":"popover__scrollableContent_obrv4","arrow":"popover__arrow_obrv4","arrowShift":"popover__arrowShift_obrv4","enter":"popover__enter_obrv4","enterActive":"popover__enterActive_obrv4","exit":"popover__exit_obrv4","exitActive":"popover__exitActive_obrv4"};
48
48
  require('./index.css')
49
49
 
50
50
  var DEFAULT_TRANSITION = {
@@ -82,6 +82,8 @@ var Popover = React.forwardRef(function (_a, ref) {
82
82
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
83
83
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
84
84
  var updatePopperRef = React.useRef();
85
+ var popperRef = React.useRef(null);
86
+ var innerRef = React.useRef(null);
85
87
  var popperModifiers = React.useMemo(function () {
86
88
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
87
89
  if (withArrow) {
@@ -159,17 +161,25 @@ var Popover = React.forwardRef(function (_a, ref) {
159
161
  }
160
162
  }
161
163
  }, [referenceElement, position]);
162
- var renderContent = function (computedZIndex, style) {
164
+ var renderContent = function (computedZIndex) {
163
165
  var _a, _b;
164
166
  var _c;
165
- return (React__default.default.createElement("div", __assign({ ref: mergeRefs__default.default([ref, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className, (_a = {},
167
+ return (React__default.default.createElement("div", __assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className, (_a = {},
166
168
  _a[styles.arrowShift] = arrowShift,
167
169
  _a)) }, attributes.popper),
168
- React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), style: style },
170
+ React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef },
169
171
  React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
170
172
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles.arrow, arrowClassName) })))));
171
173
  };
172
- return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));
174
+ return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
175
+ var _a;
176
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
177
+ if (innerRef.current &&
178
+ transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
179
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
180
+ }
181
+ (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
182
+ } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
173
183
  });
174
184
 
175
185
  exports.Popover = Popover;
package/cssm/Component.js CHANGED
@@ -81,6 +81,8 @@ var Popover = React.forwardRef(function (_a, ref) {
81
81
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
82
82
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
83
83
  var updatePopperRef = React.useRef();
84
+ var popperRef = React.useRef(null);
85
+ var innerRef = React.useRef(null);
84
86
  var popperModifiers = React.useMemo(function () {
85
87
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
86
88
  if (withArrow) {
@@ -158,17 +160,25 @@ var Popover = React.forwardRef(function (_a, ref) {
158
160
  }
159
161
  }
160
162
  }, [referenceElement, position]);
161
- var renderContent = function (computedZIndex, style) {
163
+ var renderContent = function (computedZIndex) {
162
164
  var _a, _b;
163
165
  var _c;
164
- return (React__default.default.createElement("div", __assign({ ref: mergeRefs__default.default([ref, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className, (_a = {},
166
+ return (React__default.default.createElement("div", __assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className, (_a = {},
165
167
  _a[styles__default.default.arrowShift] = arrowShift,
166
168
  _a)) }, attributes.popper),
167
- React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), style: style },
169
+ React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
168
170
  React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles__default.default.scrollableContent] = availableHeight, _b)) }, children),
169
171
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
170
172
  };
171
- return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));
173
+ return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
174
+ var _a;
175
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
176
+ if (innerRef.current &&
177
+ transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
178
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
179
+ }
180
+ (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
181
+ } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
172
182
  });
173
183
 
174
184
  exports.Popover = Popover;
package/cssm/index.module.css CHANGED
@@ -1,8 +1,10 @@
1
1
  :root {
2
+ } /* deprecated */ :root {
2
3
  --color-light-bg-primary: #fff;
3
4
  --color-light-text-primary: #0b1f35;
4
- }
5
- :root {
5
+ } :root {
6
+ } :root {
7
+ } :root {
6
8
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
7
9
 
8
10
  /* Hard */
@@ -10,33 +12,29 @@
10
12
  /* Up */
11
13
 
12
14
  /* Hard up */
13
- }
14
- :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
15
20
  --popover-border-color: transparent;
16
- }
17
- .component {
21
+ } .component {
18
22
  background-color: transparent;
19
23
  color: var(--color-light-text-primary);
20
- }
21
- .inner {
24
+ } .inner {
22
25
  position: relative;
23
26
  background-color: var(--color-light-bg-primary);
24
27
  box-shadow: var(--shadow-m);
25
28
  border: 1px solid var(--popover-border-color);
26
- transition-property: opacity, transform;
27
- transition-timing-function: ease-in-out;
28
29
  box-sizing: border-box;
29
30
  will-change: transform;
30
- }
31
- .scrollableContent {
31
+ } .scrollableContent {
32
32
  position: relative;
33
33
  z-index: 2;
34
34
  overflow-y: auto;
35
- }
36
- .arrow {
35
+ } .arrow {
37
36
  z-index: 1;
38
- }
39
- .arrow:after {
37
+ } .arrow:after {
40
38
  content: '';
41
39
  display: block;
42
40
  position: absolute;
@@ -46,84 +44,70 @@
46
44
  border: 1px solid var(--popover-border-color);
47
45
  box-sizing: border-box;
48
46
  transform: rotate(45deg);
49
- }
50
- .component[data-popper-placement='left'] .arrow,
47
+ } .component[data-popper-placement='left'] .arrow,
51
48
  .component[data-popper-placement='left-start'] .arrow,
52
49
  .component[data-popper-placement='left-end'] .arrow {
53
50
  right: 5px
54
- }
55
- .component[data-popper-placement='left'] .arrow:after, .component[data-popper-placement='left-start'] .arrow:after, .component[data-popper-placement='left-end'] .arrow:after {
51
+ } .component[data-popper-placement='left'] .arrow:after, .component[data-popper-placement='left-start'] .arrow:after, .component[data-popper-placement='left-end'] .arrow:after {
56
52
  top: -6px;
57
53
  border-bottom: none;
58
54
  border-left: none;
59
- }
60
- .component[data-popper-placement='left-start'].arrowShift .arrow:after {
55
+ } .component[data-popper-placement='left-start'].arrowShift .arrow:after {
61
56
  top: -7px;
62
- }
63
- .component[data-popper-placement='left-end'].arrowShift .arrow:after {
57
+ } .component[data-popper-placement='left-end'].arrowShift .arrow:after {
64
58
  top: -5px;
65
- }
66
- .component[data-popper-placement='right'] .arrow,
59
+ } .component[data-popper-placement='right'] .arrow,
67
60
  .component[data-popper-placement='right-start'] .arrow,
68
61
  .component[data-popper-placement='right-end'] .arrow {
69
62
  left: -7px
70
- }
71
- .component[data-popper-placement='right'] .arrow:after, .component[data-popper-placement='right-start'] .arrow:after, .component[data-popper-placement='right-end'] .arrow:after {
63
+ } .component[data-popper-placement='right'] .arrow:after, .component[data-popper-placement='right-start'] .arrow:after, .component[data-popper-placement='right-end'] .arrow:after {
72
64
  top: -6px;
73
65
  border-top: none;
74
66
  border-right: none;
75
- }
76
- .component[data-popper-placement='right-start'].arrowShift .arrow:after {
67
+ } .component[data-popper-placement='right-start'].arrowShift .arrow:after {
77
68
  top: -7px;
78
- }
79
- .component[data-popper-placement='right-end'].arrowShift .arrow:after {
69
+ } .component[data-popper-placement='right-end'].arrowShift .arrow:after {
80
70
  top: -5px;
81
- }
82
- .component[data-popper-placement='top'] .arrow,
71
+ } .component[data-popper-placement='top'] .arrow,
83
72
  .component[data-popper-placement='top-start'] .arrow,
84
73
  .component[data-popper-placement='top-end'] .arrow {
85
74
  bottom: 5px
86
- }
87
- .component[data-popper-placement='top'] .arrow:after, .component[data-popper-placement='top-start'] .arrow:after, .component[data-popper-placement='top-end'] .arrow:after {
75
+ } .component[data-popper-placement='top'] .arrow:after, .component[data-popper-placement='top-start'] .arrow:after, .component[data-popper-placement='top-end'] .arrow:after {
88
76
  left: -6px;
89
77
  border-top: none;
90
78
  border-left: none;
91
- }
92
- .component[data-popper-placement='top-start'].arrowShift .arrow:after {
79
+ } .component[data-popper-placement='top-start'].arrowShift .arrow:after {
93
80
  left: -17px;
94
- }
95
- .component[data-popper-placement='top-end'].arrowShift .arrow:after {
81
+ } .component[data-popper-placement='top-end'].arrowShift .arrow:after {
96
82
  left: 5px;
97
- }
98
- .component[data-popper-placement='bottom'] .arrow,
83
+ } .component[data-popper-placement='bottom'] .arrow,
99
84
  .component[data-popper-placement='bottom-start'] .arrow,
100
85
  .component[data-popper-placement='bottom-end'] .arrow {
101
86
  top: -7px
102
- }
103
- .component[data-popper-placement='bottom'] .arrow:after, .component[data-popper-placement='bottom-start'] .arrow:after, .component[data-popper-placement='bottom-end'] .arrow:after {
87
+ } .component[data-popper-placement='bottom'] .arrow:after, .component[data-popper-placement='bottom-start'] .arrow:after, .component[data-popper-placement='bottom-end'] .arrow:after {
104
88
  left: -6px;
105
89
  border-bottom: none;
106
90
  border-right: none;
107
- }
108
- .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
91
+ } .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
109
92
  left: -17px;
110
- }
111
- .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
93
+ } .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
112
94
  left: 5px;
113
- }
114
- .enter .inner {
95
+ } .enter .inner {
115
96
  opacity: 0;
116
97
  transform: scale(0.98);
117
- }
118
- .enterActive .inner {
98
+ } .enterActive .inner {
119
99
  opacity: 1;
120
100
  transform: scale(1);
121
- }
122
- .exit .inner {
101
+ transition-property: opacity, transform;
102
+ transition-timing-function: ease-in-out;
103
+ transition-duration: 150ms;
104
+ } .exit .inner {
123
105
  opacity: 1;
124
106
  transform: scale(1);
125
- }
126
- .exitActive .inner {
107
+ } .exitActive .inner {
127
108
  opacity: 0;
128
109
  transform: scale(0.98);
110
+ transition-property: opacity, transform;
111
+ transition-timing-function: ease-in-out;
112
+ transition-duration: 150ms;
129
113
  }
package/esm/Component.js CHANGED
@@ -35,7 +35,7 @@ var __assign = function () {
35
35
  return __assign.apply(this, arguments);
36
36
  };
37
37
 
38
- var styles = {"component":"popover__component_1bn0c","inner":"popover__inner_1bn0c","scrollableContent":"popover__scrollableContent_1bn0c","arrow":"popover__arrow_1bn0c","arrowShift":"popover__arrowShift_1bn0c","enter":"popover__enter_1bn0c","enterActive":"popover__enterActive_1bn0c","exit":"popover__exit_1bn0c","exitActive":"popover__exitActive_1bn0c"};
38
+ var styles = {"component":"popover__component_obrv4","inner":"popover__inner_obrv4","scrollableContent":"popover__scrollableContent_obrv4","arrow":"popover__arrow_obrv4","arrowShift":"popover__arrowShift_obrv4","enter":"popover__enter_obrv4","enterActive":"popover__enterActive_obrv4","exit":"popover__exit_obrv4","exitActive":"popover__exitActive_obrv4"};
39
39
  require('./index.css')
40
40
 
41
41
  var DEFAULT_TRANSITION = {
@@ -73,6 +73,8 @@ var Popover = forwardRef(function (_a, ref) {
73
73
  var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
74
74
  var _p = useState(false), arrowShift = _p[0], setArrowShift = _p[1];
75
75
  var updatePopperRef = useRef();
76
+ var popperRef = useRef(null);
77
+ var innerRef = useRef(null);
76
78
  var popperModifiers = useMemo(function () {
77
79
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
78
80
  if (withArrow) {
@@ -150,17 +152,25 @@ var Popover = forwardRef(function (_a, ref) {
150
152
  }
151
153
  }
152
154
  }, [referenceElement, position]);
153
- var renderContent = function (computedZIndex, style) {
155
+ var renderContent = function (computedZIndex) {
154
156
  var _a, _b;
155
157
  var _c;
156
- return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
158
+ return (React.createElement("div", __assign({ ref: mergeRefs([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
157
159
  _a[styles.arrowShift] = arrowShift,
158
160
  _a)) }, attributes.popper),
159
- React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
161
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
160
162
  React.createElement("div", { className: cn((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
161
163
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
162
164
  };
163
- return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));
165
+ return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
166
+ var _a;
167
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
168
+ if (innerRef.current &&
169
+ transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
170
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
171
+ }
172
+ (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
173
+ } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
164
174
  });
165
175
 
166
176
  export { Popover };
package/esm/index.css CHANGED
@@ -1,9 +1,11 @@
1
- /* hash: m3scs */
1
+ /* hash: yjvam */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-primary: #fff;
4
5
  --color-light-text-primary: #0b1f35;
5
- }
6
- :root {
6
+ } :root {
7
+ } :root {
8
+ } :root {
7
9
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
8
10
 
9
11
  /* Hard */
@@ -11,33 +13,29 @@
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+ } :root {
16
21
  --popover-border-color: transparent;
17
- }
18
- .popover__component_1bn0c {
22
+ } .popover__component_obrv4 {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_1bn0c {
25
+ } .popover__inner_obrv4 {
23
26
  position: relative;
24
27
  background-color: var(--color-light-bg-primary);
25
28
  box-shadow: var(--shadow-m);
26
29
  border: 1px solid var(--popover-border-color);
27
- transition-property: opacity, transform;
28
- transition-timing-function: ease-in-out;
29
30
  box-sizing: border-box;
30
31
  will-change: transform;
31
- }
32
- .popover__scrollableContent_1bn0c {
32
+ } .popover__scrollableContent_obrv4 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_1bn0c {
36
+ } .popover__arrow_obrv4 {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_1bn0c:after {
38
+ } .popover__arrow_obrv4:after {
41
39
  content: '';
42
40
  display: block;
43
41
  position: absolute;
@@ -47,84 +45,70 @@
47
45
  border: 1px solid var(--popover-border-color);
48
46
  box-sizing: border-box;
49
47
  transform: rotate(45deg);
50
- }
51
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c,
52
- .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c,
53
- .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c {
48
+ } .popover__component_obrv4[data-popper-placement='left'] .popover__arrow_obrv4,
49
+ .popover__component_obrv4[data-popper-placement='left-start'] .popover__arrow_obrv4,
50
+ .popover__component_obrv4[data-popper-placement='left-end'] .popover__arrow_obrv4 {
54
51
  right: 5px
55
- }
56
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c:after {
52
+ } .popover__component_obrv4[data-popper-placement='left'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='left-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='left-end'] .popover__arrow_obrv4:after {
57
53
  top: -6px;
58
54
  border-bottom: none;
59
55
  border-left: none;
60
- }
61
- .popover__component_1bn0c[data-popper-placement='left-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
56
+ } .popover__component_obrv4[data-popper-placement='left-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
62
57
  top: -7px;
63
- }
64
- .popover__component_1bn0c[data-popper-placement='left-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
58
+ } .popover__component_obrv4[data-popper-placement='left-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
65
59
  top: -5px;
66
- }
67
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c,
68
- .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c,
69
- .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c {
60
+ } .popover__component_obrv4[data-popper-placement='right'] .popover__arrow_obrv4,
61
+ .popover__component_obrv4[data-popper-placement='right-start'] .popover__arrow_obrv4,
62
+ .popover__component_obrv4[data-popper-placement='right-end'] .popover__arrow_obrv4 {
70
63
  left: -7px
71
- }
72
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c:after {
64
+ } .popover__component_obrv4[data-popper-placement='right'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='right-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='right-end'] .popover__arrow_obrv4:after {
73
65
  top: -6px;
74
66
  border-top: none;
75
67
  border-right: none;
76
- }
77
- .popover__component_1bn0c[data-popper-placement='right-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
68
+ } .popover__component_obrv4[data-popper-placement='right-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
78
69
  top: -7px;
79
- }
80
- .popover__component_1bn0c[data-popper-placement='right-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
70
+ } .popover__component_obrv4[data-popper-placement='right-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
81
71
  top: -5px;
82
- }
83
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c,
84
- .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c,
85
- .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c {
72
+ } .popover__component_obrv4[data-popper-placement='top'] .popover__arrow_obrv4,
73
+ .popover__component_obrv4[data-popper-placement='top-start'] .popover__arrow_obrv4,
74
+ .popover__component_obrv4[data-popper-placement='top-end'] .popover__arrow_obrv4 {
86
75
  bottom: 5px
87
- }
88
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c:after {
76
+ } .popover__component_obrv4[data-popper-placement='top'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='top-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='top-end'] .popover__arrow_obrv4:after {
89
77
  left: -6px;
90
78
  border-top: none;
91
79
  border-left: none;
92
- }
93
- .popover__component_1bn0c[data-popper-placement='top-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
80
+ } .popover__component_obrv4[data-popper-placement='top-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
94
81
  left: -17px;
95
- }
96
- .popover__component_1bn0c[data-popper-placement='top-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
82
+ } .popover__component_obrv4[data-popper-placement='top-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
97
83
  left: 5px;
98
- }
99
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c,
100
- .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c,
101
- .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c {
84
+ } .popover__component_obrv4[data-popper-placement='bottom'] .popover__arrow_obrv4,
85
+ .popover__component_obrv4[data-popper-placement='bottom-start'] .popover__arrow_obrv4,
86
+ .popover__component_obrv4[data-popper-placement='bottom-end'] .popover__arrow_obrv4 {
102
87
  top: -7px
103
- }
104
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c:after {
88
+ } .popover__component_obrv4[data-popper-placement='bottom'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='bottom-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='bottom-end'] .popover__arrow_obrv4:after {
105
89
  left: -6px;
106
90
  border-bottom: none;
107
91
  border-right: none;
108
- }
109
- .popover__component_1bn0c[data-popper-placement='bottom-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
92
+ } .popover__component_obrv4[data-popper-placement='bottom-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
110
93
  left: -17px;
111
- }
112
- .popover__component_1bn0c[data-popper-placement='bottom-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
94
+ } .popover__component_obrv4[data-popper-placement='bottom-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
113
95
  left: 5px;
114
- }
115
- .popover__enter_1bn0c .popover__inner_1bn0c {
96
+ } .popover__enter_obrv4 .popover__inner_obrv4 {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_1bn0c .popover__inner_1bn0c {
99
+ } .popover__enterActive_obrv4 .popover__inner_obrv4 {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_1bn0c .popover__inner_1bn0c {
102
+ transition-property: opacity, transform;
103
+ transition-timing-function: ease-in-out;
104
+ transition-duration: 150ms;
105
+ } .popover__exit_obrv4 .popover__inner_obrv4 {
124
106
  opacity: 1;
125
107
  transform: scale(1);
126
- }
127
- .popover__exitActive_1bn0c .popover__inner_1bn0c {
108
+ } .popover__exitActive_obrv4 .popover__inner_obrv4 {
128
109
  opacity: 0;
129
110
  transform: scale(0.98);
111
+ transition-property: opacity, transform;
112
+ transition-timing-function: ease-in-out;
113
+ transition-duration: 150ms;
130
114
  }
package/index.css CHANGED
@@ -1,9 +1,11 @@
1
- /* hash: m3scs */
1
+ /* hash: yjvam */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-primary: #fff;
4
5
  --color-light-text-primary: #0b1f35;
5
- }
6
- :root {
6
+ } :root {
7
+ } :root {
8
+ } :root {
7
9
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
8
10
 
9
11
  /* Hard */
@@ -11,33 +13,29 @@
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+ } :root {
16
21
  --popover-border-color: transparent;
17
- }
18
- .popover__component_1bn0c {
22
+ } .popover__component_obrv4 {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_1bn0c {
25
+ } .popover__inner_obrv4 {
23
26
  position: relative;
24
27
  background-color: var(--color-light-bg-primary);
25
28
  box-shadow: var(--shadow-m);
26
29
  border: 1px solid var(--popover-border-color);
27
- transition-property: opacity, transform;
28
- transition-timing-function: ease-in-out;
29
30
  box-sizing: border-box;
30
31
  will-change: transform;
31
- }
32
- .popover__scrollableContent_1bn0c {
32
+ } .popover__scrollableContent_obrv4 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_1bn0c {
36
+ } .popover__arrow_obrv4 {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_1bn0c:after {
38
+ } .popover__arrow_obrv4:after {
41
39
  content: '';
42
40
  display: block;
43
41
  position: absolute;
@@ -47,84 +45,70 @@
47
45
  border: 1px solid var(--popover-border-color);
48
46
  box-sizing: border-box;
49
47
  transform: rotate(45deg);
50
- }
51
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c,
52
- .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c,
53
- .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c {
48
+ } .popover__component_obrv4[data-popper-placement='left'] .popover__arrow_obrv4,
49
+ .popover__component_obrv4[data-popper-placement='left-start'] .popover__arrow_obrv4,
50
+ .popover__component_obrv4[data-popper-placement='left-end'] .popover__arrow_obrv4 {
54
51
  right: 5px
55
- }
56
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c:after {
52
+ } .popover__component_obrv4[data-popper-placement='left'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='left-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='left-end'] .popover__arrow_obrv4:after {
57
53
  top: -6px;
58
54
  border-bottom: none;
59
55
  border-left: none;
60
- }
61
- .popover__component_1bn0c[data-popper-placement='left-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
56
+ } .popover__component_obrv4[data-popper-placement='left-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
62
57
  top: -7px;
63
- }
64
- .popover__component_1bn0c[data-popper-placement='left-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
58
+ } .popover__component_obrv4[data-popper-placement='left-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
65
59
  top: -5px;
66
- }
67
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c,
68
- .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c,
69
- .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c {
60
+ } .popover__component_obrv4[data-popper-placement='right'] .popover__arrow_obrv4,
61
+ .popover__component_obrv4[data-popper-placement='right-start'] .popover__arrow_obrv4,
62
+ .popover__component_obrv4[data-popper-placement='right-end'] .popover__arrow_obrv4 {
70
63
  left: -7px
71
- }
72
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c:after {
64
+ } .popover__component_obrv4[data-popper-placement='right'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='right-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='right-end'] .popover__arrow_obrv4:after {
73
65
  top: -6px;
74
66
  border-top: none;
75
67
  border-right: none;
76
- }
77
- .popover__component_1bn0c[data-popper-placement='right-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
68
+ } .popover__component_obrv4[data-popper-placement='right-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
78
69
  top: -7px;
79
- }
80
- .popover__component_1bn0c[data-popper-placement='right-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
70
+ } .popover__component_obrv4[data-popper-placement='right-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
81
71
  top: -5px;
82
- }
83
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c,
84
- .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c,
85
- .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c {
72
+ } .popover__component_obrv4[data-popper-placement='top'] .popover__arrow_obrv4,
73
+ .popover__component_obrv4[data-popper-placement='top-start'] .popover__arrow_obrv4,
74
+ .popover__component_obrv4[data-popper-placement='top-end'] .popover__arrow_obrv4 {
86
75
  bottom: 5px
87
- }
88
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c:after {
76
+ } .popover__component_obrv4[data-popper-placement='top'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='top-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='top-end'] .popover__arrow_obrv4:after {
89
77
  left: -6px;
90
78
  border-top: none;
91
79
  border-left: none;
92
- }
93
- .popover__component_1bn0c[data-popper-placement='top-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
80
+ } .popover__component_obrv4[data-popper-placement='top-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
94
81
  left: -17px;
95
- }
96
- .popover__component_1bn0c[data-popper-placement='top-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
82
+ } .popover__component_obrv4[data-popper-placement='top-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
97
83
  left: 5px;
98
- }
99
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c,
100
- .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c,
101
- .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c {
84
+ } .popover__component_obrv4[data-popper-placement='bottom'] .popover__arrow_obrv4,
85
+ .popover__component_obrv4[data-popper-placement='bottom-start'] .popover__arrow_obrv4,
86
+ .popover__component_obrv4[data-popper-placement='bottom-end'] .popover__arrow_obrv4 {
102
87
  top: -7px
103
- }
104
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c:after {
88
+ } .popover__component_obrv4[data-popper-placement='bottom'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='bottom-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='bottom-end'] .popover__arrow_obrv4:after {
105
89
  left: -6px;
106
90
  border-bottom: none;
107
91
  border-right: none;
108
- }
109
- .popover__component_1bn0c[data-popper-placement='bottom-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
92
+ } .popover__component_obrv4[data-popper-placement='bottom-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
110
93
  left: -17px;
111
- }
112
- .popover__component_1bn0c[data-popper-placement='bottom-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
94
+ } .popover__component_obrv4[data-popper-placement='bottom-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
113
95
  left: 5px;
114
- }
115
- .popover__enter_1bn0c .popover__inner_1bn0c {
96
+ } .popover__enter_obrv4 .popover__inner_obrv4 {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_1bn0c .popover__inner_1bn0c {
99
+ } .popover__enterActive_obrv4 .popover__inner_obrv4 {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_1bn0c .popover__inner_1bn0c {
102
+ transition-property: opacity, transform;
103
+ transition-timing-function: ease-in-out;
104
+ transition-duration: 150ms;
105
+ } .popover__exit_obrv4 .popover__inner_obrv4 {
124
106
  opacity: 1;
125
107
  transform: scale(1);
126
- }
127
- .popover__exitActive_1bn0c .popover__inner_1bn0c {
108
+ } .popover__exitActive_obrv4 .popover__inner_obrv4 {
128
109
  opacity: 0;
129
110
  transform: scale(0.98);
111
+ transition-property: opacity, transform;
112
+ transition-timing-function: ease-in-out;
113
+ transition-duration: 150ms;
130
114
  }
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import maxSize from 'popper-max-size-modifier';
8
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
9
  import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
10
10
 
11
- const styles = {"component":"popover__component_1bn0c","inner":"popover__inner_1bn0c","scrollableContent":"popover__scrollableContent_1bn0c","arrow":"popover__arrow_1bn0c","arrowShift":"popover__arrowShift_1bn0c","enter":"popover__enter_1bn0c","enterActive":"popover__enterActive_1bn0c","exit":"popover__exit_1bn0c","exitActive":"popover__exitActive_1bn0c"};
11
+ const styles = {"component":"popover__component_obrv4","inner":"popover__inner_obrv4","scrollableContent":"popover__scrollableContent_obrv4","arrow":"popover__arrow_obrv4","arrowShift":"popover__arrowShift_obrv4","enter":"popover__enter_obrv4","enterActive":"popover__enterActive_obrv4","exit":"popover__exit_obrv4","exitActive":"popover__exitActive_obrv4"};
12
12
  require('./index.css')
13
13
 
14
14
  const DEFAULT_TRANSITION = {
@@ -44,6 +44,8 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
44
44
  const [arrowElement, setArrowElement] = useState(null);
45
45
  const [arrowShift, setArrowShift] = useState(false);
46
46
  const updatePopperRef = useRef();
47
+ const popperRef = useRef(null);
48
+ const innerRef = useRef(null);
47
49
  const popperModifiers = useMemo(() => {
48
50
  const modifiers = [{ name: 'offset', options: { offset } }];
49
51
  if (withArrow) {
@@ -121,7 +123,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
121
123
  }
122
124
  }
123
125
  }, [referenceElement, position]);
124
- const renderContent = (computedZIndex, style) => (React.createElement("div", { ref: mergeRefs([ref, setPopperElement]), style: {
126
+ const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
125
127
  zIndex: computedZIndex,
126
128
  width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
127
129
  ...popperStyles.popper,
@@ -129,10 +131,17 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
129
131
  }, "data-test-id": dataTestId, className: cn(styles.component, className, {
130
132
  [styles.arrowShift]: arrowShift,
131
133
  }), ...attributes.popper },
132
- React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
134
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
133
135
  React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
134
136
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
135
- return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, ...transition, in: open }, renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));
137
+ 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) => {
138
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
139
+ if (innerRef.current &&
140
+ transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`) {
141
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
142
+ }
143
+ transition?.onEntering?.(node, isAppearing);
144
+ } }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
136
145
  });
137
146
 
138
147
  export { Popover };
package/modern/index.css CHANGED
@@ -1,9 +1,11 @@
1
- /* hash: m3scs */
1
+ /* hash: yjvam */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-primary: #fff;
4
5
  --color-light-text-primary: #0b1f35;
5
- }
6
- :root {
6
+ } :root {
7
+ } :root {
8
+ } :root {
7
9
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
8
10
 
9
11
  /* Hard */
@@ -11,33 +13,29 @@
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+ } :root {
16
21
  --popover-border-color: transparent;
17
- }
18
- .popover__component_1bn0c {
22
+ } .popover__component_obrv4 {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_1bn0c {
25
+ } .popover__inner_obrv4 {
23
26
  position: relative;
24
27
  background-color: var(--color-light-bg-primary);
25
28
  box-shadow: var(--shadow-m);
26
29
  border: 1px solid var(--popover-border-color);
27
- transition-property: opacity, transform;
28
- transition-timing-function: ease-in-out;
29
30
  box-sizing: border-box;
30
31
  will-change: transform;
31
- }
32
- .popover__scrollableContent_1bn0c {
32
+ } .popover__scrollableContent_obrv4 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_1bn0c {
36
+ } .popover__arrow_obrv4 {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_1bn0c:after {
38
+ } .popover__arrow_obrv4:after {
41
39
  content: '';
42
40
  display: block;
43
41
  position: absolute;
@@ -47,84 +45,70 @@
47
45
  border: 1px solid var(--popover-border-color);
48
46
  box-sizing: border-box;
49
47
  transform: rotate(45deg);
50
- }
51
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c,
52
- .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c,
53
- .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c {
48
+ } .popover__component_obrv4[data-popper-placement='left'] .popover__arrow_obrv4,
49
+ .popover__component_obrv4[data-popper-placement='left-start'] .popover__arrow_obrv4,
50
+ .popover__component_obrv4[data-popper-placement='left-end'] .popover__arrow_obrv4 {
54
51
  right: 5px
55
- }
56
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c:after {
52
+ } .popover__component_obrv4[data-popper-placement='left'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='left-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='left-end'] .popover__arrow_obrv4:after {
57
53
  top: -6px;
58
54
  border-bottom: none;
59
55
  border-left: none;
60
- }
61
- .popover__component_1bn0c[data-popper-placement='left-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
56
+ } .popover__component_obrv4[data-popper-placement='left-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
62
57
  top: -7px;
63
- }
64
- .popover__component_1bn0c[data-popper-placement='left-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
58
+ } .popover__component_obrv4[data-popper-placement='left-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
65
59
  top: -5px;
66
- }
67
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c,
68
- .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c,
69
- .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c {
60
+ } .popover__component_obrv4[data-popper-placement='right'] .popover__arrow_obrv4,
61
+ .popover__component_obrv4[data-popper-placement='right-start'] .popover__arrow_obrv4,
62
+ .popover__component_obrv4[data-popper-placement='right-end'] .popover__arrow_obrv4 {
70
63
  left: -7px
71
- }
72
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c:after {
64
+ } .popover__component_obrv4[data-popper-placement='right'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='right-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='right-end'] .popover__arrow_obrv4:after {
73
65
  top: -6px;
74
66
  border-top: none;
75
67
  border-right: none;
76
- }
77
- .popover__component_1bn0c[data-popper-placement='right-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
68
+ } .popover__component_obrv4[data-popper-placement='right-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
78
69
  top: -7px;
79
- }
80
- .popover__component_1bn0c[data-popper-placement='right-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
70
+ } .popover__component_obrv4[data-popper-placement='right-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
81
71
  top: -5px;
82
- }
83
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c,
84
- .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c,
85
- .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c {
72
+ } .popover__component_obrv4[data-popper-placement='top'] .popover__arrow_obrv4,
73
+ .popover__component_obrv4[data-popper-placement='top-start'] .popover__arrow_obrv4,
74
+ .popover__component_obrv4[data-popper-placement='top-end'] .popover__arrow_obrv4 {
86
75
  bottom: 5px
87
- }
88
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c:after {
76
+ } .popover__component_obrv4[data-popper-placement='top'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='top-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='top-end'] .popover__arrow_obrv4:after {
89
77
  left: -6px;
90
78
  border-top: none;
91
79
  border-left: none;
92
- }
93
- .popover__component_1bn0c[data-popper-placement='top-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
80
+ } .popover__component_obrv4[data-popper-placement='top-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
94
81
  left: -17px;
95
- }
96
- .popover__component_1bn0c[data-popper-placement='top-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
82
+ } .popover__component_obrv4[data-popper-placement='top-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
97
83
  left: 5px;
98
- }
99
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c,
100
- .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c,
101
- .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c {
84
+ } .popover__component_obrv4[data-popper-placement='bottom'] .popover__arrow_obrv4,
85
+ .popover__component_obrv4[data-popper-placement='bottom-start'] .popover__arrow_obrv4,
86
+ .popover__component_obrv4[data-popper-placement='bottom-end'] .popover__arrow_obrv4 {
102
87
  top: -7px
103
- }
104
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c:after {
88
+ } .popover__component_obrv4[data-popper-placement='bottom'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='bottom-start'] .popover__arrow_obrv4:after, .popover__component_obrv4[data-popper-placement='bottom-end'] .popover__arrow_obrv4:after {
105
89
  left: -6px;
106
90
  border-bottom: none;
107
91
  border-right: none;
108
- }
109
- .popover__component_1bn0c[data-popper-placement='bottom-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
92
+ } .popover__component_obrv4[data-popper-placement='bottom-start'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
110
93
  left: -17px;
111
- }
112
- .popover__component_1bn0c[data-popper-placement='bottom-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
94
+ } .popover__component_obrv4[data-popper-placement='bottom-end'].popover__arrowShift_obrv4 .popover__arrow_obrv4:after {
113
95
  left: 5px;
114
- }
115
- .popover__enter_1bn0c .popover__inner_1bn0c {
96
+ } .popover__enter_obrv4 .popover__inner_obrv4 {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_1bn0c .popover__inner_1bn0c {
99
+ } .popover__enterActive_obrv4 .popover__inner_obrv4 {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_1bn0c .popover__inner_1bn0c {
102
+ transition-property: opacity, transform;
103
+ transition-timing-function: ease-in-out;
104
+ transition-duration: 150ms;
105
+ } .popover__exit_obrv4 .popover__inner_obrv4 {
124
106
  opacity: 1;
125
107
  transform: scale(1);
126
- }
127
- .popover__exitActive_1bn0c .popover__inner_1bn0c {
108
+ } .popover__exitActive_obrv4 .popover__inner_obrv4 {
128
109
  opacity: 0;
129
110
  transform: scale(0.98);
111
+ transition-property: opacity, transform;
112
+ transition-timing-function: ease-in-out;
113
+ transition-duration: 150ms;
130
114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.0.5",
3
+ "version": "6.0.6",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -26,9 +26,9 @@
26
26
  "popper-max-size-modifier": "^0.2.0",
27
27
  "react-merge-refs": "^1.1.0",
28
28
  "react-popper": "^2.3.0",
29
- "react-transition-group": "^4.4.1"
29
+ "react-transition-group": "^4.4.5"
30
30
  },
31
31
  "devDependencies": {
32
- "@types/react-transition-group": "^4.2.4"
32
+ "@types/react-transition-group": "^4.4.5"
33
33
  }
34
34
  }