@alfalab/core-components-popover 6.0.4 → 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 (12) hide show
  1. package/Component.js +26 -18
  2. package/cssm/Component.js +31 -23
  3. package/cssm/index.js +0 -2
  4. package/cssm/index.module.css +40 -56
  5. package/esm/Component.js +18 -8
  6. package/esm/index.css +49 -65
  7. package/index.css +49 -65
  8. package/index.js +0 -2
  9. package/modern/Component.js +14 -5
  10. package/modern/index.css +49 -65
  11. package/modern/index.js +1 -1
  12. package/package.json +5 -5
package/Component.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var mergeRefs = require('react-merge-refs');
7
5
  var reactPopper = require('react-popper');
@@ -12,12 +10,12 @@ var maxSize = require('popper-max-size-modifier');
12
10
  var coreComponentsPortal = require('@alfalab/core-components-portal');
13
11
  var coreComponentsStack = require('@alfalab/core-components-stack');
14
12
 
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
16
14
 
17
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
- var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
19
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
20
- var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
15
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
17
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
+ var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
21
19
 
22
20
  /******************************************************************************
23
21
  Copyright (c) Microsoft Corporation.
@@ -46,7 +44,7 @@ var __assign = function () {
46
44
  return __assign.apply(this, arguments);
47
45
  };
48
46
 
49
- var styles = {"component":"popover__component_fo774","inner":"popover__inner_fo774","scrollableContent":"popover__scrollableContent_fo774","arrow":"popover__arrow_fo774","arrowShift":"popover__arrowShift_fo774","enter":"popover__enter_fo774","enterActive":"popover__enterActive_fo774","exit":"popover__exit_fo774","exitActive":"popover__exitActive_fo774"};
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"};
50
48
  require('./index.css')
51
49
 
52
50
  var DEFAULT_TRANSITION = {
@@ -66,9 +64,9 @@ var availableHieghtModifier = {
66
64
  fn: function (_a) {
67
65
  var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
68
66
  var height = modifiersData.maxSize.height;
69
- var content = popper.querySelector("." + styles.scrollableContent);
67
+ var content = popper.querySelector(".".concat(styles.scrollableContent));
70
68
  if (content && !content.style.maxHeight) {
71
- content.style.maxHeight = height + "px";
69
+ content.style.maxHeight = "".concat(height, "px");
72
70
  }
73
71
  },
74
72
  };
@@ -78,12 +76,14 @@ var availableHieghtModifier = {
78
76
  */
79
77
  var MIN_ARROW_SHIFT_SIZE = 75;
80
78
  var Popover = React.forwardRef(function (_a, ref) {
81
- 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 ? [0, 0] : _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 ? 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;
79
+ 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 ? [0, 0] : _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;
82
80
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
83
81
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
84
82
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
85
83
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
86
84
  var updatePopperRef = React.useRef();
85
+ var popperRef = React.useRef(null);
86
+ var innerRef = React.useRef(null);
87
87
  var popperModifiers = React.useMemo(function () {
88
88
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
89
89
  if (withArrow) {
@@ -99,7 +99,7 @@ var Popover = React.forwardRef(function (_a, ref) {
99
99
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
100
100
  }
101
101
  if (availableHeight) {
102
- modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
102
+ modifiers.push(__assign(__assign({}, maxSize__default.default), { options: {} }));
103
103
  modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
104
104
  }
105
105
  return modifiers;
@@ -161,17 +161,25 @@ var Popover = React.forwardRef(function (_a, ref) {
161
161
  }
162
162
  }
163
163
  }, [referenceElement, position]);
164
- var renderContent = function (computedZIndex, style) {
164
+ var renderContent = function (computedZIndex) {
165
165
  var _a, _b;
166
166
  var _c;
167
- 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 = {},
168
168
  _a[styles.arrowShift] = arrowShift,
169
169
  _a)) }, attributes.popper),
170
- React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
171
- React__default['default'].createElement("div", { className: cn__default['default']((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
172
- withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles.arrow, arrowClassName) })))));
170
+ React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef },
171
+ React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
172
+ withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles.arrow, arrowClassName) })))));
173
173
  };
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 }, 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)))); }));
175
183
  });
176
184
 
177
185
  exports.Popover = Popover;
package/cssm/Component.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  var mergeRefs = require('react-merge-refs');
7
5
  var reactPopper = require('react-popper');
@@ -13,13 +11,13 @@ var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
13
11
  var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
14
12
  var styles = require('./index.module.css');
15
13
 
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
17
15
 
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
- var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
20
- var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
21
- var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
22
- var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
16
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
18
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
+ var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
20
+ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
23
21
 
24
22
  /******************************************************************************
25
23
  Copyright (c) Microsoft Corporation.
@@ -52,10 +50,10 @@ var DEFAULT_TRANSITION = {
52
50
  timeout: 150,
53
51
  };
54
52
  var CSS_TRANSITION_CLASS_NAMES = {
55
- enter: styles__default['default'].enter,
56
- enterActive: styles__default['default'].enterActive,
57
- exit: styles__default['default'].exit,
58
- exitActive: styles__default['default'].exitActive,
53
+ enter: styles__default.default.enter,
54
+ enterActive: styles__default.default.enterActive,
55
+ exit: styles__default.default.exit,
56
+ exitActive: styles__default.default.exitActive,
59
57
  };
60
58
  var availableHieghtModifier = {
61
59
  name: 'availableHeight',
@@ -65,9 +63,9 @@ var availableHieghtModifier = {
65
63
  fn: function (_a) {
66
64
  var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
67
65
  var height = modifiersData.maxSize.height;
68
- var content = popper.querySelector("." + styles__default['default'].scrollableContent);
66
+ var content = popper.querySelector(".".concat(styles__default.default.scrollableContent));
69
67
  if (content && !content.style.maxHeight) {
70
- content.style.maxHeight = height + "px";
68
+ content.style.maxHeight = "".concat(height, "px");
71
69
  }
72
70
  },
73
71
  };
@@ -77,12 +75,14 @@ var availableHieghtModifier = {
77
75
  */
78
76
  var MIN_ARROW_SHIFT_SIZE = 75;
79
77
  var Popover = React.forwardRef(function (_a, ref) {
80
- 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 ? [0, 0] : _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 ? 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;
78
+ 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 ? [0, 0] : _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;
81
79
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
82
80
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
83
81
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
84
82
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
85
83
  var updatePopperRef = React.useRef();
84
+ var popperRef = React.useRef(null);
85
+ var innerRef = React.useRef(null);
86
86
  var popperModifiers = React.useMemo(function () {
87
87
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
88
88
  if (withArrow) {
@@ -98,7 +98,7 @@ var Popover = React.forwardRef(function (_a, ref) {
98
98
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
99
99
  }
100
100
  if (availableHeight) {
101
- modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
101
+ modifiers.push(__assign(__assign({}, maxSize__default.default), { options: {} }));
102
102
  modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
103
103
  }
104
104
  return modifiers;
@@ -160,17 +160,25 @@ var Popover = React.forwardRef(function (_a, ref) {
160
160
  }
161
161
  }
162
162
  }, [referenceElement, position]);
163
- var renderContent = function (computedZIndex, style) {
163
+ var renderContent = function (computedZIndex) {
164
164
  var _a, _b;
165
165
  var _c;
166
- 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 = {},
167
- _a[styles__default['default'].arrowShift] = arrowShift,
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 = {},
167
+ _a[styles__default.default.arrowShift] = arrowShift,
168
168
  _a)) }, attributes.popper),
169
- React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].inner, popperClassName), style: style },
170
- React__default['default'].createElement("div", { className: cn__default['default']((_b = {}, _b[styles__default['default'].scrollableContent] = availableHeight, _b)) }, children),
171
- withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles__default['default'].arrow, arrowClassName) })))));
169
+ React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
170
+ React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles__default.default.scrollableContent] = availableHeight, _b)) }, children),
171
+ withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
172
172
  };
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 }, 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)))); }));
174
182
  });
175
183
 
176
184
  exports.Popover = Popover;
package/cssm/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
5
  require('react-merge-refs');
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_fo774","inner":"popover__inner_fo774","scrollableContent":"popover__scrollableContent_fo774","arrow":"popover__arrow_fo774","arrowShift":"popover__arrowShift_fo774","enter":"popover__enter_fo774","enterActive":"popover__enterActive_fo774","exit":"popover__exit_fo774","exitActive":"popover__exitActive_fo774"};
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 = {
@@ -55,9 +55,9 @@ var availableHieghtModifier = {
55
55
  fn: function (_a) {
56
56
  var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
57
57
  var height = modifiersData.maxSize.height;
58
- var content = popper.querySelector("." + styles.scrollableContent);
58
+ var content = popper.querySelector(".".concat(styles.scrollableContent));
59
59
  if (content && !content.style.maxHeight) {
60
- content.style.maxHeight = height + "px";
60
+ content.style.maxHeight = "".concat(height, "px");
61
61
  }
62
62
  },
63
63
  };
@@ -67,12 +67,14 @@ var availableHieghtModifier = {
67
67
  */
68
68
  var MIN_ARROW_SHIFT_SIZE = 75;
69
69
  var Popover = 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 ? [0, 0] : _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 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 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 ? [0, 0] : _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 ? 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
71
  var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
72
72
  var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
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: nzath */
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_fo774 {
22
+ } .popover__component_obrv4 {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_fo774 {
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_fo774 {
32
+ } .popover__scrollableContent_obrv4 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_fo774 {
36
+ } .popover__arrow_obrv4 {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_fo774: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_fo774[data-popper-placement='left'] .popover__arrow_fo774,
52
- .popover__component_fo774[data-popper-placement='left-start'] .popover__arrow_fo774,
53
- .popover__component_fo774[data-popper-placement='left-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='left'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='left-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='left-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='left-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='left-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='right'] .popover__arrow_fo774,
68
- .popover__component_fo774[data-popper-placement='right-start'] .popover__arrow_fo774,
69
- .popover__component_fo774[data-popper-placement='right-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='right'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='right-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='right-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='right-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='right-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='top'] .popover__arrow_fo774,
84
- .popover__component_fo774[data-popper-placement='top-start'] .popover__arrow_fo774,
85
- .popover__component_fo774[data-popper-placement='top-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='top'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='top-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='top-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='top-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='top-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='bottom'] .popover__arrow_fo774,
100
- .popover__component_fo774[data-popper-placement='bottom-start'] .popover__arrow_fo774,
101
- .popover__component_fo774[data-popper-placement='bottom-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='bottom'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='bottom-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='bottom-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='bottom-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='bottom-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774 .popover__inner_fo774 {
96
+ } .popover__enter_obrv4 .popover__inner_obrv4 {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_fo774 .popover__inner_fo774 {
99
+ } .popover__enterActive_obrv4 .popover__inner_obrv4 {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_fo774 .popover__inner_fo774 {
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_fo774 .popover__inner_fo774 {
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: nzath */
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_fo774 {
22
+ } .popover__component_obrv4 {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_fo774 {
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_fo774 {
32
+ } .popover__scrollableContent_obrv4 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_fo774 {
36
+ } .popover__arrow_obrv4 {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_fo774: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_fo774[data-popper-placement='left'] .popover__arrow_fo774,
52
- .popover__component_fo774[data-popper-placement='left-start'] .popover__arrow_fo774,
53
- .popover__component_fo774[data-popper-placement='left-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='left'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='left-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='left-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='left-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='left-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='right'] .popover__arrow_fo774,
68
- .popover__component_fo774[data-popper-placement='right-start'] .popover__arrow_fo774,
69
- .popover__component_fo774[data-popper-placement='right-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='right'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='right-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='right-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='right-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='right-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='top'] .popover__arrow_fo774,
84
- .popover__component_fo774[data-popper-placement='top-start'] .popover__arrow_fo774,
85
- .popover__component_fo774[data-popper-placement='top-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='top'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='top-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='top-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='top-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='top-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='bottom'] .popover__arrow_fo774,
100
- .popover__component_fo774[data-popper-placement='bottom-start'] .popover__arrow_fo774,
101
- .popover__component_fo774[data-popper-placement='bottom-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='bottom'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='bottom-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='bottom-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='bottom-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='bottom-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774 .popover__inner_fo774 {
96
+ } .popover__enter_obrv4 .popover__inner_obrv4 {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_fo774 .popover__inner_fo774 {
99
+ } .popover__enterActive_obrv4 .popover__inner_obrv4 {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_fo774 .popover__inner_fo774 {
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_fo774 .popover__inner_fo774 {
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.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var Component = require('./Component.js');
6
4
  require('react');
7
5
  require('react-merge-refs');
package/modern/Component.js CHANGED
@@ -6,9 +6,9 @@ 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 { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
9
+ import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
10
10
 
11
- var styles = {"component":"popover__component_fo774","inner":"popover__inner_fo774","scrollableContent":"popover__scrollableContent_fo774","arrow":"popover__arrow_fo774","arrowShift":"popover__arrowShift_fo774","enter":"popover__enter_fo774","enterActive":"popover__enterActive_fo774","exit":"popover__exit_fo774","exitActive":"popover__exitActive_fo774"};
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: nzath */
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_fo774 {
22
+ } .popover__component_obrv4 {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_fo774 {
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_fo774 {
32
+ } .popover__scrollableContent_obrv4 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_fo774 {
36
+ } .popover__arrow_obrv4 {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_fo774: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_fo774[data-popper-placement='left'] .popover__arrow_fo774,
52
- .popover__component_fo774[data-popper-placement='left-start'] .popover__arrow_fo774,
53
- .popover__component_fo774[data-popper-placement='left-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='left'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='left-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='left-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='left-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='left-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='right'] .popover__arrow_fo774,
68
- .popover__component_fo774[data-popper-placement='right-start'] .popover__arrow_fo774,
69
- .popover__component_fo774[data-popper-placement='right-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='right'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='right-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='right-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='right-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='right-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='top'] .popover__arrow_fo774,
84
- .popover__component_fo774[data-popper-placement='top-start'] .popover__arrow_fo774,
85
- .popover__component_fo774[data-popper-placement='top-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='top'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='top-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='top-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='top-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='top-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='bottom'] .popover__arrow_fo774,
100
- .popover__component_fo774[data-popper-placement='bottom-start'] .popover__arrow_fo774,
101
- .popover__component_fo774[data-popper-placement='bottom-end'] .popover__arrow_fo774 {
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_fo774[data-popper-placement='bottom'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='bottom-start'] .popover__arrow_fo774:after, .popover__component_fo774[data-popper-placement='bottom-end'] .popover__arrow_fo774: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_fo774[data-popper-placement='bottom-start'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774[data-popper-placement='bottom-end'].popover__arrowShift_fo774 .popover__arrow_fo774: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_fo774 .popover__inner_fo774 {
96
+ } .popover__enter_obrv4 .popover__inner_obrv4 {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_fo774 .popover__inner_fo774 {
99
+ } .popover__enterActive_obrv4 .popover__inner_obrv4 {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_fo774 .popover__inner_fo774 {
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_fo774 .popover__inner_fo774 {
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/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { Popover } from './Component.js';
1
2
  import 'react';
2
3
  import 'react-merge-refs';
3
4
  import 'react-popper';
@@ -7,4 +8,3 @@ import 'classnames';
7
8
  import 'popper-max-size-modifier';
8
9
  import '@alfalab/core-components-portal/modern';
9
10
  import '@alfalab/core-components-stack/modern';
10
- export { Popover } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.0.4",
3
+ "version": "6.0.6",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,17 +18,17 @@
18
18
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
19
  },
20
20
  "dependencies": {
21
- "@alfalab/core-components-portal": "^3.1.1",
22
- "@alfalab/core-components-stack": "^4.0.1",
21
+ "@alfalab/core-components-portal": "^3.1.2",
22
+ "@alfalab/core-components-stack": "^4.0.2",
23
23
  "@juggle/resize-observer": "^3.3.1",
24
24
  "@popperjs/core": "^2.3.3",
25
25
  "classnames": "^2.3.1",
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
  }