@alfalab/core-components-popover 6.0.2 → 6.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/Component.js +14 -17
  2. package/cssm/Component.js +13 -16
  3. package/cssm/index.js +5 -5
  4. package/esm/Component.js +14 -17
  5. package/esm/index.css +34 -34
  6. package/esm/index.js +5 -5
  7. package/index.css +34 -34
  8. package/index.js +5 -5
  9. package/modern/Component.js +24 -29
  10. package/modern/index.css +34 -34
  11. package/modern/index.js +5 -5
  12. package/package.json +2 -2
  13. package/send-stats.js +1 -1
package/Component.js CHANGED
@@ -3,23 +3,23 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var cn = require('classnames');
7
- var reactTransitionGroup = require('react-transition-group');
8
- var reactPopper = require('react-popper');
9
- var maxSize = require('popper-max-size-modifier');
10
6
  var mergeRefs = require('react-merge-refs');
7
+ var reactPopper = require('react-popper');
8
+ var reactTransitionGroup = require('react-transition-group');
11
9
  var resizeObserver = require('@juggle/resize-observer');
12
- var coreComponentsStack = require('@alfalab/core-components-stack');
10
+ var cn = require('classnames');
11
+ var maxSize = require('popper-max-size-modifier');
13
12
  var coreComponentsPortal = require('@alfalab/core-components-portal');
13
+ var coreComponentsStack = require('@alfalab/core-components-stack');
14
14
 
15
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
16
 
17
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
18
19
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
19
20
  var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
20
- var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
21
21
 
22
- /*! *****************************************************************************
22
+ /******************************************************************************
23
23
  Copyright (c) Microsoft Corporation.
24
24
 
25
25
  Permission to use, copy, modify, and/or distribute this software for any
@@ -46,7 +46,7 @@ var __assign = function () {
46
46
  return __assign.apply(this, arguments);
47
47
  };
48
48
 
49
- var styles = {"component":"popover__component_1t42k","inner":"popover__inner_1t42k","scrollableContent":"popover__scrollableContent_1t42k","arrow":"popover__arrow_1t42k","arrowShift":"popover__arrowShift_1t42k","enter":"popover__enter_1t42k","enterActive":"popover__enterActive_1t42k","exit":"popover__exit_1t42k","exitActive":"popover__exitActive_1t42k"};
49
+ var styles = {"component":"popover__component_y7e05","inner":"popover__inner_y7e05","scrollableContent":"popover__scrollableContent_y7e05","arrow":"popover__arrow_y7e05","arrowShift":"popover__arrowShift_y7e05","enter":"popover__enter_y7e05","enterActive":"popover__enterActive_y7e05","exit":"popover__exit_y7e05","exitActive":"popover__exitActive_y7e05"};
50
50
  require('./index.css')
51
51
 
52
52
  var DEFAULT_TRANSITION = {
@@ -84,7 +84,7 @@ var Popover = React.forwardRef(function (_a, ref) {
84
84
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
85
85
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
86
86
  var updatePopperRef = React.useRef();
87
- var getModifiers = React.useCallback(function () {
87
+ var popperModifiers = React.useMemo(function () {
88
88
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
89
89
  if (withArrow) {
90
90
  modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -114,16 +114,11 @@ var Popover = React.forwardRef(function (_a, ref) {
114
114
  ]);
115
115
  var _q = reactPopper.usePopper(referenceElement, popperElement, {
116
116
  placement: position,
117
- modifiers: getModifiers(),
117
+ modifiers: popperModifiers,
118
118
  }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
119
119
  if (updatePopper) {
120
120
  updatePopperRef.current = updatePopper;
121
121
  }
122
- var updatePopoverWidth = React.useCallback(function () {
123
- if (useAnchorWidth && updatePopperRef.current) {
124
- updatePopperRef.current();
125
- }
126
- }, [useAnchorWidth]);
127
122
  React.useEffect(function () {
128
123
  setReferenceElement(anchorElement);
129
124
  }, [anchorElement]);
@@ -140,6 +135,7 @@ var Popover = React.forwardRef(function (_a, ref) {
140
135
  });
141
136
  React.useEffect(function () {
142
137
  if (useAnchorWidth) {
138
+ var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
143
139
  var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
144
140
  var observer_1 = new ResizeObserver_1(updatePopoverWidth);
145
141
  if (anchorElement) {
@@ -150,7 +146,7 @@ var Popover = React.forwardRef(function (_a, ref) {
150
146
  };
151
147
  }
152
148
  return function () { return ({}); };
153
- }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
149
+ }, [anchorElement, useAnchorWidth]);
154
150
  /**
155
151
  * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
156
152
  * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -167,7 +163,8 @@ var Popover = React.forwardRef(function (_a, ref) {
167
163
  }, [referenceElement, position]);
168
164
  var renderContent = function (computedZIndex, style) {
169
165
  var _a, _b;
170
- return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className, (_a = {},
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 = {},
171
168
  _a[styles.arrowShift] = arrowShift,
172
169
  _a)) }, attributes.popper),
173
170
  React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
package/cssm/Component.js CHANGED
@@ -3,25 +3,25 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var cn = require('classnames');
7
- var reactTransitionGroup = require('react-transition-group');
8
- var reactPopper = require('react-popper');
9
- var maxSize = require('popper-max-size-modifier');
10
6
  var mergeRefs = require('react-merge-refs');
7
+ var reactPopper = require('react-popper');
8
+ var reactTransitionGroup = require('react-transition-group');
11
9
  var resizeObserver = require('@juggle/resize-observer');
12
- var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
10
+ var cn = require('classnames');
11
+ var maxSize = require('popper-max-size-modifier');
13
12
  var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
13
+ var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
14
14
  var styles = require('./index.module.css');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
18
18
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
+ var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
19
20
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
20
21
  var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
21
- var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
22
22
  var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
23
23
 
24
- /*! *****************************************************************************
24
+ /******************************************************************************
25
25
  Copyright (c) Microsoft Corporation.
26
26
 
27
27
  Permission to use, copy, modify, and/or distribute this software for any
@@ -83,7 +83,7 @@ var Popover = React.forwardRef(function (_a, ref) {
83
83
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
84
84
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
85
85
  var updatePopperRef = React.useRef();
86
- var getModifiers = React.useCallback(function () {
86
+ var popperModifiers = React.useMemo(function () {
87
87
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
88
88
  if (withArrow) {
89
89
  modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -113,16 +113,11 @@ var Popover = React.forwardRef(function (_a, ref) {
113
113
  ]);
114
114
  var _q = reactPopper.usePopper(referenceElement, popperElement, {
115
115
  placement: position,
116
- modifiers: getModifiers(),
116
+ modifiers: popperModifiers,
117
117
  }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
118
118
  if (updatePopper) {
119
119
  updatePopperRef.current = updatePopper;
120
120
  }
121
- var updatePopoverWidth = React.useCallback(function () {
122
- if (useAnchorWidth && updatePopperRef.current) {
123
- updatePopperRef.current();
124
- }
125
- }, [useAnchorWidth]);
126
121
  React.useEffect(function () {
127
122
  setReferenceElement(anchorElement);
128
123
  }, [anchorElement]);
@@ -139,6 +134,7 @@ var Popover = React.forwardRef(function (_a, ref) {
139
134
  });
140
135
  React.useEffect(function () {
141
136
  if (useAnchorWidth) {
137
+ var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
142
138
  var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
143
139
  var observer_1 = new ResizeObserver_1(updatePopoverWidth);
144
140
  if (anchorElement) {
@@ -149,7 +145,7 @@ var Popover = React.forwardRef(function (_a, ref) {
149
145
  };
150
146
  }
151
147
  return function () { return ({}); };
152
- }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
148
+ }, [anchorElement, useAnchorWidth]);
153
149
  /**
154
150
  * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
155
151
  * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -166,7 +162,8 @@ var Popover = React.forwardRef(function (_a, ref) {
166
162
  }, [referenceElement, position]);
167
163
  var renderContent = function (computedZIndex, style) {
168
164
  var _a, _b;
169
- return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className, (_a = {},
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 = {},
170
167
  _a[styles__default['default'].arrowShift] = arrowShift,
171
168
  _a)) }, attributes.popper),
172
169
  React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].inner, popperClassName), style: style },
package/cssm/index.js CHANGED
@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
6
  require('react');
7
- require('classnames');
8
- require('react-transition-group');
9
- require('react-popper');
10
- require('popper-max-size-modifier');
11
7
  require('react-merge-refs');
8
+ require('react-popper');
9
+ require('react-transition-group');
12
10
  require('@juggle/resize-observer');
13
- require('@alfalab/core-components-stack/cssm');
11
+ require('classnames');
12
+ require('popper-max-size-modifier');
14
13
  require('@alfalab/core-components-portal/cssm');
14
+ require('@alfalab/core-components-stack/cssm');
15
15
  require('./index.module.css');
16
16
 
17
17
 
package/esm/Component.js CHANGED
@@ -1,14 +1,14 @@
1
- import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
2
- import cn from 'classnames';
3
- import { CSSTransition } from 'react-transition-group';
4
- import { usePopper } from 'react-popper';
5
- import maxSize from 'popper-max-size-modifier';
1
+ import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
6
2
  import mergeRefs from 'react-merge-refs';
3
+ import { usePopper } from 'react-popper';
4
+ import { CSSTransition } from 'react-transition-group';
7
5
  import { ResizeObserver } from '@juggle/resize-observer';
8
- import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
6
+ import cn from 'classnames';
7
+ import maxSize from 'popper-max-size-modifier';
9
8
  import { Portal } from '@alfalab/core-components-portal/esm';
9
+ import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
10
10
 
11
- /*! *****************************************************************************
11
+ /******************************************************************************
12
12
  Copyright (c) Microsoft Corporation.
13
13
 
14
14
  Permission to use, copy, modify, and/or distribute this software for any
@@ -35,7 +35,7 @@ var __assign = function () {
35
35
  return __assign.apply(this, arguments);
36
36
  };
37
37
 
38
- var styles = {"component":"popover__component_1t42k","inner":"popover__inner_1t42k","scrollableContent":"popover__scrollableContent_1t42k","arrow":"popover__arrow_1t42k","arrowShift":"popover__arrowShift_1t42k","enter":"popover__enter_1t42k","enterActive":"popover__enterActive_1t42k","exit":"popover__exit_1t42k","exitActive":"popover__exitActive_1t42k"};
38
+ var styles = {"component":"popover__component_y7e05","inner":"popover__inner_y7e05","scrollableContent":"popover__scrollableContent_y7e05","arrow":"popover__arrow_y7e05","arrowShift":"popover__arrowShift_y7e05","enter":"popover__enter_y7e05","enterActive":"popover__enterActive_y7e05","exit":"popover__exit_y7e05","exitActive":"popover__exitActive_y7e05"};
39
39
  require('./index.css')
40
40
 
41
41
  var DEFAULT_TRANSITION = {
@@ -73,7 +73,7 @@ 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 getModifiers = useCallback(function () {
76
+ var popperModifiers = useMemo(function () {
77
77
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
78
78
  if (withArrow) {
79
79
  modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -103,16 +103,11 @@ var Popover = forwardRef(function (_a, ref) {
103
103
  ]);
104
104
  var _q = usePopper(referenceElement, popperElement, {
105
105
  placement: position,
106
- modifiers: getModifiers(),
106
+ modifiers: popperModifiers,
107
107
  }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
108
108
  if (updatePopper) {
109
109
  updatePopperRef.current = updatePopper;
110
110
  }
111
- var updatePopoverWidth = useCallback(function () {
112
- if (useAnchorWidth && updatePopperRef.current) {
113
- updatePopperRef.current();
114
- }
115
- }, [useAnchorWidth]);
116
111
  useEffect(function () {
117
112
  setReferenceElement(anchorElement);
118
113
  }, [anchorElement]);
@@ -129,6 +124,7 @@ var Popover = forwardRef(function (_a, ref) {
129
124
  });
130
125
  useEffect(function () {
131
126
  if (useAnchorWidth) {
127
+ var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
132
128
  var ResizeObserver_1 = window.ResizeObserver || ResizeObserver;
133
129
  var observer_1 = new ResizeObserver_1(updatePopoverWidth);
134
130
  if (anchorElement) {
@@ -139,7 +135,7 @@ var Popover = forwardRef(function (_a, ref) {
139
135
  };
140
136
  }
141
137
  return function () { return ({}); };
142
- }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
138
+ }, [anchorElement, useAnchorWidth]);
143
139
  /**
144
140
  * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
145
141
  * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -156,7 +152,8 @@ var Popover = forwardRef(function (_a, ref) {
156
152
  }, [referenceElement, position]);
157
153
  var renderContent = function (computedZIndex, style) {
158
154
  var _a, _b;
159
- return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
155
+ 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 = {},
160
157
  _a[styles.arrowShift] = arrowShift,
161
158
  _a)) }, attributes.popper),
162
159
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 15z5e */
1
+ /* hash: bj7vn */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
15
15
  :root {
16
16
  --popover-border-color: transparent;
17
17
  }
18
- .popover__component_1t42k {
18
+ .popover__component_y7e05 {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_1t42k {
22
+ .popover__inner_y7e05 {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__scrollableContent_1t42k {
32
+ .popover__scrollableContent_y7e05 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
36
  }
37
- .popover__arrow_1t42k {
37
+ .popover__arrow_y7e05 {
38
38
  z-index: 1;
39
39
  }
40
- .popover__arrow_1t42k:after {
40
+ .popover__arrow_y7e05:after {
41
41
  content: '';
42
42
  display: block;
43
43
  position: absolute;
@@ -48,83 +48,83 @@
48
48
  box-sizing: border-box;
49
49
  transform: rotate(45deg);
50
50
  }
51
- .popover__component_1t42k[data-popper-placement='left'] .popover__arrow_1t42k,
52
- .popover__component_1t42k[data-popper-placement='left-start'] .popover__arrow_1t42k,
53
- .popover__component_1t42k[data-popper-placement='left-end'] .popover__arrow_1t42k {
51
+ .popover__component_y7e05[data-popper-placement='left'] .popover__arrow_y7e05,
52
+ .popover__component_y7e05[data-popper-placement='left-start'] .popover__arrow_y7e05,
53
+ .popover__component_y7e05[data-popper-placement='left-end'] .popover__arrow_y7e05 {
54
54
  right: 5px
55
55
  }
56
- .popover__component_1t42k[data-popper-placement='left'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='left-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='left-end'] .popover__arrow_1t42k:after {
56
+ .popover__component_y7e05[data-popper-placement='left'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='left-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='left-end'] .popover__arrow_y7e05:after {
57
57
  top: -6px;
58
58
  border-bottom: none;
59
59
  border-left: none;
60
60
  }
61
- .popover__component_1t42k[data-popper-placement='left-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
61
+ .popover__component_y7e05[data-popper-placement='left-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
62
62
  top: -7px;
63
63
  }
64
- .popover__component_1t42k[data-popper-placement='left-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
64
+ .popover__component_y7e05[data-popper-placement='left-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
65
65
  top: -5px;
66
66
  }
67
- .popover__component_1t42k[data-popper-placement='right'] .popover__arrow_1t42k,
68
- .popover__component_1t42k[data-popper-placement='right-start'] .popover__arrow_1t42k,
69
- .popover__component_1t42k[data-popper-placement='right-end'] .popover__arrow_1t42k {
67
+ .popover__component_y7e05[data-popper-placement='right'] .popover__arrow_y7e05,
68
+ .popover__component_y7e05[data-popper-placement='right-start'] .popover__arrow_y7e05,
69
+ .popover__component_y7e05[data-popper-placement='right-end'] .popover__arrow_y7e05 {
70
70
  left: -7px
71
71
  }
72
- .popover__component_1t42k[data-popper-placement='right'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='right-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='right-end'] .popover__arrow_1t42k:after {
72
+ .popover__component_y7e05[data-popper-placement='right'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='right-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='right-end'] .popover__arrow_y7e05:after {
73
73
  top: -6px;
74
74
  border-top: none;
75
75
  border-right: none;
76
76
  }
77
- .popover__component_1t42k[data-popper-placement='right-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
77
+ .popover__component_y7e05[data-popper-placement='right-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
78
78
  top: -7px;
79
79
  }
80
- .popover__component_1t42k[data-popper-placement='right-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
80
+ .popover__component_y7e05[data-popper-placement='right-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
81
81
  top: -5px;
82
82
  }
83
- .popover__component_1t42k[data-popper-placement='top'] .popover__arrow_1t42k,
84
- .popover__component_1t42k[data-popper-placement='top-start'] .popover__arrow_1t42k,
85
- .popover__component_1t42k[data-popper-placement='top-end'] .popover__arrow_1t42k {
83
+ .popover__component_y7e05[data-popper-placement='top'] .popover__arrow_y7e05,
84
+ .popover__component_y7e05[data-popper-placement='top-start'] .popover__arrow_y7e05,
85
+ .popover__component_y7e05[data-popper-placement='top-end'] .popover__arrow_y7e05 {
86
86
  bottom: 5px
87
87
  }
88
- .popover__component_1t42k[data-popper-placement='top'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='top-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='top-end'] .popover__arrow_1t42k:after {
88
+ .popover__component_y7e05[data-popper-placement='top'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='top-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='top-end'] .popover__arrow_y7e05:after {
89
89
  left: -6px;
90
90
  border-top: none;
91
91
  border-left: none;
92
92
  }
93
- .popover__component_1t42k[data-popper-placement='top-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
93
+ .popover__component_y7e05[data-popper-placement='top-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
94
94
  left: -17px;
95
95
  }
96
- .popover__component_1t42k[data-popper-placement='top-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
96
+ .popover__component_y7e05[data-popper-placement='top-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
97
97
  left: 5px;
98
98
  }
99
- .popover__component_1t42k[data-popper-placement='bottom'] .popover__arrow_1t42k,
100
- .popover__component_1t42k[data-popper-placement='bottom-start'] .popover__arrow_1t42k,
101
- .popover__component_1t42k[data-popper-placement='bottom-end'] .popover__arrow_1t42k {
99
+ .popover__component_y7e05[data-popper-placement='bottom'] .popover__arrow_y7e05,
100
+ .popover__component_y7e05[data-popper-placement='bottom-start'] .popover__arrow_y7e05,
101
+ .popover__component_y7e05[data-popper-placement='bottom-end'] .popover__arrow_y7e05 {
102
102
  top: -7px
103
103
  }
104
- .popover__component_1t42k[data-popper-placement='bottom'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='bottom-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='bottom-end'] .popover__arrow_1t42k:after {
104
+ .popover__component_y7e05[data-popper-placement='bottom'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='bottom-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='bottom-end'] .popover__arrow_y7e05:after {
105
105
  left: -6px;
106
106
  border-bottom: none;
107
107
  border-right: none;
108
108
  }
109
- .popover__component_1t42k[data-popper-placement='bottom-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
109
+ .popover__component_y7e05[data-popper-placement='bottom-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
110
110
  left: -17px;
111
111
  }
112
- .popover__component_1t42k[data-popper-placement='bottom-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
112
+ .popover__component_y7e05[data-popper-placement='bottom-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
113
113
  left: 5px;
114
114
  }
115
- .popover__enter_1t42k .popover__inner_1t42k {
115
+ .popover__enter_y7e05 .popover__inner_y7e05 {
116
116
  opacity: 0;
117
117
  transform: scale(0.98);
118
118
  }
119
- .popover__enterActive_1t42k .popover__inner_1t42k {
119
+ .popover__enterActive_y7e05 .popover__inner_y7e05 {
120
120
  opacity: 1;
121
121
  transform: scale(1);
122
122
  }
123
- .popover__exit_1t42k .popover__inner_1t42k {
123
+ .popover__exit_y7e05 .popover__inner_y7e05 {
124
124
  opacity: 1;
125
125
  transform: scale(1);
126
126
  }
127
- .popover__exitActive_1t42k .popover__inner_1t42k {
127
+ .popover__exitActive_y7e05 .popover__inner_y7e05 {
128
128
  opacity: 0;
129
129
  transform: scale(0.98);
130
130
  }
package/esm/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  export { Popover } from './Component.js';
2
2
  import 'react';
3
- import 'classnames';
4
- import 'react-transition-group';
5
- import 'react-popper';
6
- import 'popper-max-size-modifier';
7
3
  import 'react-merge-refs';
4
+ import 'react-popper';
5
+ import 'react-transition-group';
8
6
  import '@juggle/resize-observer';
9
- import '@alfalab/core-components-stack/esm';
7
+ import 'classnames';
8
+ import 'popper-max-size-modifier';
10
9
  import '@alfalab/core-components-portal/esm';
10
+ import '@alfalab/core-components-stack/esm';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 15z5e */
1
+ /* hash: bj7vn */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
15
15
  :root {
16
16
  --popover-border-color: transparent;
17
17
  }
18
- .popover__component_1t42k {
18
+ .popover__component_y7e05 {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_1t42k {
22
+ .popover__inner_y7e05 {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__scrollableContent_1t42k {
32
+ .popover__scrollableContent_y7e05 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
36
  }
37
- .popover__arrow_1t42k {
37
+ .popover__arrow_y7e05 {
38
38
  z-index: 1;
39
39
  }
40
- .popover__arrow_1t42k:after {
40
+ .popover__arrow_y7e05:after {
41
41
  content: '';
42
42
  display: block;
43
43
  position: absolute;
@@ -48,83 +48,83 @@
48
48
  box-sizing: border-box;
49
49
  transform: rotate(45deg);
50
50
  }
51
- .popover__component_1t42k[data-popper-placement='left'] .popover__arrow_1t42k,
52
- .popover__component_1t42k[data-popper-placement='left-start'] .popover__arrow_1t42k,
53
- .popover__component_1t42k[data-popper-placement='left-end'] .popover__arrow_1t42k {
51
+ .popover__component_y7e05[data-popper-placement='left'] .popover__arrow_y7e05,
52
+ .popover__component_y7e05[data-popper-placement='left-start'] .popover__arrow_y7e05,
53
+ .popover__component_y7e05[data-popper-placement='left-end'] .popover__arrow_y7e05 {
54
54
  right: 5px
55
55
  }
56
- .popover__component_1t42k[data-popper-placement='left'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='left-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='left-end'] .popover__arrow_1t42k:after {
56
+ .popover__component_y7e05[data-popper-placement='left'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='left-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='left-end'] .popover__arrow_y7e05:after {
57
57
  top: -6px;
58
58
  border-bottom: none;
59
59
  border-left: none;
60
60
  }
61
- .popover__component_1t42k[data-popper-placement='left-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
61
+ .popover__component_y7e05[data-popper-placement='left-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
62
62
  top: -7px;
63
63
  }
64
- .popover__component_1t42k[data-popper-placement='left-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
64
+ .popover__component_y7e05[data-popper-placement='left-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
65
65
  top: -5px;
66
66
  }
67
- .popover__component_1t42k[data-popper-placement='right'] .popover__arrow_1t42k,
68
- .popover__component_1t42k[data-popper-placement='right-start'] .popover__arrow_1t42k,
69
- .popover__component_1t42k[data-popper-placement='right-end'] .popover__arrow_1t42k {
67
+ .popover__component_y7e05[data-popper-placement='right'] .popover__arrow_y7e05,
68
+ .popover__component_y7e05[data-popper-placement='right-start'] .popover__arrow_y7e05,
69
+ .popover__component_y7e05[data-popper-placement='right-end'] .popover__arrow_y7e05 {
70
70
  left: -7px
71
71
  }
72
- .popover__component_1t42k[data-popper-placement='right'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='right-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='right-end'] .popover__arrow_1t42k:after {
72
+ .popover__component_y7e05[data-popper-placement='right'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='right-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='right-end'] .popover__arrow_y7e05:after {
73
73
  top: -6px;
74
74
  border-top: none;
75
75
  border-right: none;
76
76
  }
77
- .popover__component_1t42k[data-popper-placement='right-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
77
+ .popover__component_y7e05[data-popper-placement='right-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
78
78
  top: -7px;
79
79
  }
80
- .popover__component_1t42k[data-popper-placement='right-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
80
+ .popover__component_y7e05[data-popper-placement='right-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
81
81
  top: -5px;
82
82
  }
83
- .popover__component_1t42k[data-popper-placement='top'] .popover__arrow_1t42k,
84
- .popover__component_1t42k[data-popper-placement='top-start'] .popover__arrow_1t42k,
85
- .popover__component_1t42k[data-popper-placement='top-end'] .popover__arrow_1t42k {
83
+ .popover__component_y7e05[data-popper-placement='top'] .popover__arrow_y7e05,
84
+ .popover__component_y7e05[data-popper-placement='top-start'] .popover__arrow_y7e05,
85
+ .popover__component_y7e05[data-popper-placement='top-end'] .popover__arrow_y7e05 {
86
86
  bottom: 5px
87
87
  }
88
- .popover__component_1t42k[data-popper-placement='top'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='top-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='top-end'] .popover__arrow_1t42k:after {
88
+ .popover__component_y7e05[data-popper-placement='top'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='top-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='top-end'] .popover__arrow_y7e05:after {
89
89
  left: -6px;
90
90
  border-top: none;
91
91
  border-left: none;
92
92
  }
93
- .popover__component_1t42k[data-popper-placement='top-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
93
+ .popover__component_y7e05[data-popper-placement='top-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
94
94
  left: -17px;
95
95
  }
96
- .popover__component_1t42k[data-popper-placement='top-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
96
+ .popover__component_y7e05[data-popper-placement='top-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
97
97
  left: 5px;
98
98
  }
99
- .popover__component_1t42k[data-popper-placement='bottom'] .popover__arrow_1t42k,
100
- .popover__component_1t42k[data-popper-placement='bottom-start'] .popover__arrow_1t42k,
101
- .popover__component_1t42k[data-popper-placement='bottom-end'] .popover__arrow_1t42k {
99
+ .popover__component_y7e05[data-popper-placement='bottom'] .popover__arrow_y7e05,
100
+ .popover__component_y7e05[data-popper-placement='bottom-start'] .popover__arrow_y7e05,
101
+ .popover__component_y7e05[data-popper-placement='bottom-end'] .popover__arrow_y7e05 {
102
102
  top: -7px
103
103
  }
104
- .popover__component_1t42k[data-popper-placement='bottom'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='bottom-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='bottom-end'] .popover__arrow_1t42k:after {
104
+ .popover__component_y7e05[data-popper-placement='bottom'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='bottom-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='bottom-end'] .popover__arrow_y7e05:after {
105
105
  left: -6px;
106
106
  border-bottom: none;
107
107
  border-right: none;
108
108
  }
109
- .popover__component_1t42k[data-popper-placement='bottom-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
109
+ .popover__component_y7e05[data-popper-placement='bottom-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
110
110
  left: -17px;
111
111
  }
112
- .popover__component_1t42k[data-popper-placement='bottom-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
112
+ .popover__component_y7e05[data-popper-placement='bottom-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
113
113
  left: 5px;
114
114
  }
115
- .popover__enter_1t42k .popover__inner_1t42k {
115
+ .popover__enter_y7e05 .popover__inner_y7e05 {
116
116
  opacity: 0;
117
117
  transform: scale(0.98);
118
118
  }
119
- .popover__enterActive_1t42k .popover__inner_1t42k {
119
+ .popover__enterActive_y7e05 .popover__inner_y7e05 {
120
120
  opacity: 1;
121
121
  transform: scale(1);
122
122
  }
123
- .popover__exit_1t42k .popover__inner_1t42k {
123
+ .popover__exit_y7e05 .popover__inner_y7e05 {
124
124
  opacity: 1;
125
125
  transform: scale(1);
126
126
  }
127
- .popover__exitActive_1t42k .popover__inner_1t42k {
127
+ .popover__exitActive_y7e05 .popover__inner_y7e05 {
128
128
  opacity: 0;
129
129
  transform: scale(0.98);
130
130
  }
package/index.js CHANGED
@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
6
  require('react');
7
- require('classnames');
8
- require('react-transition-group');
9
- require('react-popper');
10
- require('popper-max-size-modifier');
11
7
  require('react-merge-refs');
8
+ require('react-popper');
9
+ require('react-transition-group');
12
10
  require('@juggle/resize-observer');
13
- require('@alfalab/core-components-stack');
11
+ require('classnames');
12
+ require('popper-max-size-modifier');
14
13
  require('@alfalab/core-components-portal');
14
+ require('@alfalab/core-components-stack');
15
15
 
16
16
 
17
17
 
package/modern/Component.js CHANGED
@@ -1,14 +1,14 @@
1
- import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
2
- import cn from 'classnames';
3
- import { CSSTransition } from 'react-transition-group';
4
- import { usePopper } from 'react-popper';
5
- import maxSize from 'popper-max-size-modifier';
1
+ import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
6
2
  import mergeRefs from 'react-merge-refs';
3
+ import { usePopper } from 'react-popper';
4
+ import { CSSTransition } from 'react-transition-group';
7
5
  import { ResizeObserver } from '@juggle/resize-observer';
8
- import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
6
+ import cn from 'classnames';
7
+ import maxSize from 'popper-max-size-modifier';
9
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
+ import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
10
10
 
11
- var styles = {"component":"popover__component_1t42k","inner":"popover__inner_1t42k","scrollableContent":"popover__scrollableContent_1t42k","arrow":"popover__arrow_1t42k","arrowShift":"popover__arrowShift_1t42k","enter":"popover__enter_1t42k","enterActive":"popover__enterActive_1t42k","exit":"popover__exit_1t42k","exitActive":"popover__exitActive_1t42k"};
11
+ var styles = {"component":"popover__component_y7e05","inner":"popover__inner_y7e05","scrollableContent":"popover__scrollableContent_y7e05","arrow":"popover__arrow_y7e05","arrowShift":"popover__arrowShift_y7e05","enter":"popover__enter_y7e05","enterActive":"popover__enterActive_y7e05","exit":"popover__exit_y7e05","exitActive":"popover__exitActive_y7e05"};
12
12
  require('./index.css')
13
13
 
14
14
  const DEFAULT_TRANSITION = {
@@ -44,7 +44,7 @@ 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 getModifiers = useCallback(() => {
47
+ const popperModifiers = useMemo(() => {
48
48
  const modifiers = [{ name: 'offset', options: { offset } }];
49
49
  if (withArrow) {
50
50
  modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -72,18 +72,13 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
72
72
  availableHeight,
73
73
  arrowElement,
74
74
  ]);
75
- const { styles: popperStyles, attributes, update: updatePopper } = usePopper(referenceElement, popperElement, {
75
+ const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
76
76
  placement: position,
77
- modifiers: getModifiers(),
77
+ modifiers: popperModifiers,
78
78
  });
79
79
  if (updatePopper) {
80
80
  updatePopperRef.current = updatePopper;
81
81
  }
82
- const updatePopoverWidth = useCallback(() => {
83
- if (useAnchorWidth && updatePopperRef.current) {
84
- updatePopperRef.current();
85
- }
86
- }, [useAnchorWidth]);
87
82
  useEffect(() => {
88
83
  setReferenceElement(anchorElement);
89
84
  }, [anchorElement]);
@@ -100,6 +95,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
100
95
  });
101
96
  useEffect(() => {
102
97
  if (useAnchorWidth) {
98
+ const updatePopoverWidth = () => updatePopperRef.current?.();
103
99
  const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
104
100
  const observer = new ResizeObserver$1(updatePopoverWidth);
105
101
  if (anchorElement) {
@@ -110,7 +106,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
110
106
  };
111
107
  }
112
108
  return () => ({});
113
- }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
109
+ }, [anchorElement, useAnchorWidth]);
114
110
  /**
115
111
  * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
116
112
  * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -125,19 +121,18 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
125
121
  }
126
122
  }
127
123
  }, [referenceElement, position]);
128
- const renderContent = (computedZIndex, style) => {
129
- return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]), style: {
130
- zIndex: computedZIndex,
131
- width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
132
- ...popperStyles.popper,
133
- }, "data-test-id": dataTestId, className: cn(styles.component, className, {
134
- [styles.arrowShift]: arrowShift,
135
- }) }, attributes.popper),
136
- React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
137
- React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
138
- withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
139
- };
140
- return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, Object.assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));
124
+ const renderContent = (computedZIndex, style) => (React.createElement("div", { ref: mergeRefs([ref, setPopperElement]), style: {
125
+ zIndex: computedZIndex,
126
+ width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
127
+ ...popperStyles.popper,
128
+ ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
129
+ }, "data-test-id": dataTestId, className: cn(styles.component, className, {
130
+ [styles.arrowShift]: arrowShift,
131
+ }), ...attributes.popper },
132
+ React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
133
+ React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
134
+ 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))))));
141
136
  });
142
137
 
143
138
  export { Popover };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 15z5e */
1
+ /* hash: bj7vn */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
15
15
  :root {
16
16
  --popover-border-color: transparent;
17
17
  }
18
- .popover__component_1t42k {
18
+ .popover__component_y7e05 {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_1t42k {
22
+ .popover__inner_y7e05 {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__scrollableContent_1t42k {
32
+ .popover__scrollableContent_y7e05 {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
36
  }
37
- .popover__arrow_1t42k {
37
+ .popover__arrow_y7e05 {
38
38
  z-index: 1;
39
39
  }
40
- .popover__arrow_1t42k:after {
40
+ .popover__arrow_y7e05:after {
41
41
  content: '';
42
42
  display: block;
43
43
  position: absolute;
@@ -48,83 +48,83 @@
48
48
  box-sizing: border-box;
49
49
  transform: rotate(45deg);
50
50
  }
51
- .popover__component_1t42k[data-popper-placement='left'] .popover__arrow_1t42k,
52
- .popover__component_1t42k[data-popper-placement='left-start'] .popover__arrow_1t42k,
53
- .popover__component_1t42k[data-popper-placement='left-end'] .popover__arrow_1t42k {
51
+ .popover__component_y7e05[data-popper-placement='left'] .popover__arrow_y7e05,
52
+ .popover__component_y7e05[data-popper-placement='left-start'] .popover__arrow_y7e05,
53
+ .popover__component_y7e05[data-popper-placement='left-end'] .popover__arrow_y7e05 {
54
54
  right: 5px
55
55
  }
56
- .popover__component_1t42k[data-popper-placement='left'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='left-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='left-end'] .popover__arrow_1t42k:after {
56
+ .popover__component_y7e05[data-popper-placement='left'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='left-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='left-end'] .popover__arrow_y7e05:after {
57
57
  top: -6px;
58
58
  border-bottom: none;
59
59
  border-left: none;
60
60
  }
61
- .popover__component_1t42k[data-popper-placement='left-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
61
+ .popover__component_y7e05[data-popper-placement='left-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
62
62
  top: -7px;
63
63
  }
64
- .popover__component_1t42k[data-popper-placement='left-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
64
+ .popover__component_y7e05[data-popper-placement='left-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
65
65
  top: -5px;
66
66
  }
67
- .popover__component_1t42k[data-popper-placement='right'] .popover__arrow_1t42k,
68
- .popover__component_1t42k[data-popper-placement='right-start'] .popover__arrow_1t42k,
69
- .popover__component_1t42k[data-popper-placement='right-end'] .popover__arrow_1t42k {
67
+ .popover__component_y7e05[data-popper-placement='right'] .popover__arrow_y7e05,
68
+ .popover__component_y7e05[data-popper-placement='right-start'] .popover__arrow_y7e05,
69
+ .popover__component_y7e05[data-popper-placement='right-end'] .popover__arrow_y7e05 {
70
70
  left: -7px
71
71
  }
72
- .popover__component_1t42k[data-popper-placement='right'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='right-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='right-end'] .popover__arrow_1t42k:after {
72
+ .popover__component_y7e05[data-popper-placement='right'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='right-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='right-end'] .popover__arrow_y7e05:after {
73
73
  top: -6px;
74
74
  border-top: none;
75
75
  border-right: none;
76
76
  }
77
- .popover__component_1t42k[data-popper-placement='right-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
77
+ .popover__component_y7e05[data-popper-placement='right-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
78
78
  top: -7px;
79
79
  }
80
- .popover__component_1t42k[data-popper-placement='right-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
80
+ .popover__component_y7e05[data-popper-placement='right-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
81
81
  top: -5px;
82
82
  }
83
- .popover__component_1t42k[data-popper-placement='top'] .popover__arrow_1t42k,
84
- .popover__component_1t42k[data-popper-placement='top-start'] .popover__arrow_1t42k,
85
- .popover__component_1t42k[data-popper-placement='top-end'] .popover__arrow_1t42k {
83
+ .popover__component_y7e05[data-popper-placement='top'] .popover__arrow_y7e05,
84
+ .popover__component_y7e05[data-popper-placement='top-start'] .popover__arrow_y7e05,
85
+ .popover__component_y7e05[data-popper-placement='top-end'] .popover__arrow_y7e05 {
86
86
  bottom: 5px
87
87
  }
88
- .popover__component_1t42k[data-popper-placement='top'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='top-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='top-end'] .popover__arrow_1t42k:after {
88
+ .popover__component_y7e05[data-popper-placement='top'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='top-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='top-end'] .popover__arrow_y7e05:after {
89
89
  left: -6px;
90
90
  border-top: none;
91
91
  border-left: none;
92
92
  }
93
- .popover__component_1t42k[data-popper-placement='top-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
93
+ .popover__component_y7e05[data-popper-placement='top-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
94
94
  left: -17px;
95
95
  }
96
- .popover__component_1t42k[data-popper-placement='top-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
96
+ .popover__component_y7e05[data-popper-placement='top-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
97
97
  left: 5px;
98
98
  }
99
- .popover__component_1t42k[data-popper-placement='bottom'] .popover__arrow_1t42k,
100
- .popover__component_1t42k[data-popper-placement='bottom-start'] .popover__arrow_1t42k,
101
- .popover__component_1t42k[data-popper-placement='bottom-end'] .popover__arrow_1t42k {
99
+ .popover__component_y7e05[data-popper-placement='bottom'] .popover__arrow_y7e05,
100
+ .popover__component_y7e05[data-popper-placement='bottom-start'] .popover__arrow_y7e05,
101
+ .popover__component_y7e05[data-popper-placement='bottom-end'] .popover__arrow_y7e05 {
102
102
  top: -7px
103
103
  }
104
- .popover__component_1t42k[data-popper-placement='bottom'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='bottom-start'] .popover__arrow_1t42k:after, .popover__component_1t42k[data-popper-placement='bottom-end'] .popover__arrow_1t42k:after {
104
+ .popover__component_y7e05[data-popper-placement='bottom'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='bottom-start'] .popover__arrow_y7e05:after, .popover__component_y7e05[data-popper-placement='bottom-end'] .popover__arrow_y7e05:after {
105
105
  left: -6px;
106
106
  border-bottom: none;
107
107
  border-right: none;
108
108
  }
109
- .popover__component_1t42k[data-popper-placement='bottom-start'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
109
+ .popover__component_y7e05[data-popper-placement='bottom-start'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
110
110
  left: -17px;
111
111
  }
112
- .popover__component_1t42k[data-popper-placement='bottom-end'].popover__arrowShift_1t42k .popover__arrow_1t42k:after {
112
+ .popover__component_y7e05[data-popper-placement='bottom-end'].popover__arrowShift_y7e05 .popover__arrow_y7e05:after {
113
113
  left: 5px;
114
114
  }
115
- .popover__enter_1t42k .popover__inner_1t42k {
115
+ .popover__enter_y7e05 .popover__inner_y7e05 {
116
116
  opacity: 0;
117
117
  transform: scale(0.98);
118
118
  }
119
- .popover__enterActive_1t42k .popover__inner_1t42k {
119
+ .popover__enterActive_y7e05 .popover__inner_y7e05 {
120
120
  opacity: 1;
121
121
  transform: scale(1);
122
122
  }
123
- .popover__exit_1t42k .popover__inner_1t42k {
123
+ .popover__exit_y7e05 .popover__inner_y7e05 {
124
124
  opacity: 1;
125
125
  transform: scale(1);
126
126
  }
127
- .popover__exitActive_1t42k .popover__inner_1t42k {
127
+ .popover__exitActive_y7e05 .popover__inner_y7e05 {
128
128
  opacity: 0;
129
129
  transform: scale(0.98);
130
130
  }
package/modern/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import 'react';
2
- import 'classnames';
3
- import 'react-transition-group';
4
- import 'react-popper';
5
- import 'popper-max-size-modifier';
6
2
  import 'react-merge-refs';
3
+ import 'react-popper';
4
+ import 'react-transition-group';
7
5
  import '@juggle/resize-observer';
8
- import '@alfalab/core-components-stack/modern';
6
+ import 'classnames';
7
+ import 'popper-max-size-modifier';
9
8
  import '@alfalab/core-components-portal/modern';
9
+ import '@alfalab/core-components-stack/modern';
10
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.2",
3
+ "version": "6.0.3",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -25,7 +25,7 @@
25
25
  "classnames": "^2.3.1",
26
26
  "popper-max-size-modifier": "^0.2.0",
27
27
  "react-merge-refs": "^1.1.0",
28
- "react-popper": "^2.2.5",
28
+ "react-popper": "^2.3.0",
29
29
  "react-transition-group": "^4.4.1"
30
30
  },
31
31
  "devDependencies": {
package/send-stats.js CHANGED
@@ -55,7 +55,7 @@ async function main() {
55
55
  };
56
56
 
57
57
  return new Promise((resolve, reject) => {
58
- const req = http.request(options, res => {
58
+ const req = http.request(options, (res) => {
59
59
  res.on('end', () => {
60
60
  resolve();
61
61
  });