@alfalab/core-components-popover 5.5.0 → 5.6.2

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 (18) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/Component.d.ts +4 -0
  3. package/dist/Component.js +61 -12
  4. package/dist/cssm/Component.d.ts +4 -0
  5. package/dist/cssm/Component.js +60 -11
  6. package/dist/cssm/index.js +1 -0
  7. package/dist/cssm/index.module.css +16 -8
  8. package/dist/esm/Component.d.ts +4 -0
  9. package/dist/esm/Component.js +60 -12
  10. package/dist/esm/index.css +40 -32
  11. package/dist/esm/index.js +1 -0
  12. package/dist/index.css +40 -32
  13. package/dist/index.js +1 -0
  14. package/dist/modern/Component.d.ts +4 -0
  15. package/dist/modern/Component.js +54 -8
  16. package/dist/modern/index.css +40 -32
  17. package/dist/modern/index.js +1 -0
  18. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.6.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.6.0...@alfalab/core-components-popover@5.6.1) (2022-02-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **gallery:** update header button's tooltip position ([#979](https://github.com/alfa-laboratory/core-components/issues/979)) ([8e2acfc](https://github.com/alfa-laboratory/core-components/commit/8e2acfcb772cf4d8051c185a3f1caaaf507b5bc9))
12
+
13
+
14
+
15
+
16
+
17
+ # [5.6.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.5.0...@alfalab/core-components-popover@5.6.0) (2021-12-01)
18
+
19
+
20
+ ### Features
21
+
22
+ * **popover:** add availableHieght prop, update related snapshots ([43b4ebd](https://github.com/alfa-laboratory/core-components/commit/43b4ebd6ba092f22d0dfc845f3f0113b390317dc)), closes [#758](https://github.com/alfa-laboratory/core-components/issues/758)
23
+
24
+
25
+
26
+
27
+
6
28
  # [5.5.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.4.0...@alfalab/core-components-popover@5.5.0) (2021-09-14)
7
29
 
8
30
 
package/dist/Component.d.ts CHANGED
@@ -32,6 +32,10 @@ type PopoverProps = {
32
32
  * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
33
33
  */
34
34
  preventOverflow?: boolean;
35
+ /**
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
37
+ */
38
+ availableHeight?: boolean;
35
39
  /**
36
40
  * Если `true`, будет отрисована стрелочка
37
41
  */
package/dist/Component.js CHANGED
@@ -6,6 +6,7 @@ var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var reactTransitionGroup = require('react-transition-group');
8
8
  var reactPopper = require('react-popper');
9
+ var maxSize = require('popper-max-size-modifier');
9
10
  var mergeRefs = require('react-merge-refs');
10
11
  var resizeObserver = require('resize-observer');
11
12
  var coreComponentsStack = require('@alfalab/core-components-stack');
@@ -15,6 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
15
16
 
16
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
18
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
19
+ var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
18
20
  var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
19
21
 
20
22
  /*! *****************************************************************************
@@ -44,7 +46,7 @@ var __assign = function () {
44
46
  return __assign.apply(this, arguments);
45
47
  };
46
48
 
47
- var styles = {"component":"popover__component_pqi91","inner":"popover__inner_pqi91","arrow":"popover__arrow_pqi91","enter":"popover__enter_pqi91","enterActive":"popover__enterActive_pqi91","exit":"popover__exit_pqi91","exitActive":"popover__exitActive_pqi91"};
49
+ var styles = {"component":"popover__component_1uaec","inner":"popover__inner_1uaec","scrollableContent":"popover__scrollableContent_1uaec","arrow":"popover__arrow_1uaec","arrowShift":"popover__arrowShift_1uaec","enter":"popover__enter_1uaec","enterActive":"popover__enterActive_1uaec","exit":"popover__exit_1uaec","exitActive":"popover__exitActive_1uaec"};
48
50
  require('./index.css')
49
51
 
50
52
  var DEFAULT_TRANSITION = {
@@ -56,11 +58,31 @@ var CSS_TRANSITION_CLASS_NAMES = {
56
58
  exit: styles.exit,
57
59
  exitActive: styles.exitActive,
58
60
  };
61
+ var availableHieghtModifier = {
62
+ name: 'availableHeight',
63
+ enabled: true,
64
+ phase: 'beforeWrite',
65
+ requires: ['maxSize'],
66
+ fn: function (_a) {
67
+ var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
68
+ var height = modifiersData.maxSize.height;
69
+ var content = popper.querySelector("." + styles.scrollableContent);
70
+ if (content && !content.style.maxHeight) {
71
+ content.style.maxHeight = height + "px";
72
+ }
73
+ },
74
+ };
75
+ /**
76
+ * Минимальный размер anchorElement,
77
+ * при котором возможно смещение стрелочки относительно центра
78
+ */
79
+ var MIN_ARROW_SHIFT_SIZE = 75;
59
80
  var Popover = React.forwardRef(function (_a, ref) {
60
- 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;
61
- var _k = React.useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
62
- var _l = React.useState(null), popperElement = _l[0], setPopperElement = _l[1];
63
- var _m = React.useState(null), arrowElement = _m[0], setArrowElement = _m[1];
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;
82
+ var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
83
+ var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
84
+ var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
85
+ var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
64
86
  var updatePopperRef = React.useRef();
65
87
  var getModifiers = React.useCallback(function () {
66
88
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -76,12 +98,24 @@ var Popover = React.forwardRef(function (_a, ref) {
76
98
  if (preventOverflow) {
77
99
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
78
100
  }
101
+ if (availableHeight) {
102
+ modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
103
+ modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
104
+ }
79
105
  return modifiers;
80
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
81
- var _o = reactPopper.usePopper(referenceElement, popperElement, {
106
+ }, [
107
+ offset,
108
+ withArrow,
109
+ preventFlip,
110
+ fallbackPlacements,
111
+ preventOverflow,
112
+ availableHeight,
113
+ arrowElement,
114
+ ]);
115
+ var _q = reactPopper.usePopper(referenceElement, popperElement, {
82
116
  placement: position,
83
117
  modifiers: getModifiers(),
84
- }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
118
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
85
119
  if (updatePopper) {
86
120
  updatePopperRef.current = updatePopper;
87
121
  }
@@ -116,12 +150,27 @@ var Popover = React.forwardRef(function (_a, ref) {
116
150
  }
117
151
  return function () { return ({}); };
118
152
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
153
+ /**
154
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
155
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
156
+ */
157
+ React.useEffect(function () {
158
+ var shiftedPosition = position.includes('-start') || position.includes('-end');
159
+ if (shiftedPosition && referenceElement) {
160
+ var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
161
+ var size = position.includes('left') || position.includes('right') ? height : width;
162
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
163
+ setArrowShift(true);
164
+ }
165
+ }
166
+ }, [referenceElement, position]);
119
167
  var renderContent = function (computedZIndex, style) {
120
- return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]),
121
- // ref={setPopperElement}
122
- 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) }, attributes.popper),
168
+ 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.component, className, (_a = {},
170
+ _a[styles.arrowShift] = arrowShift,
171
+ _a)) }, attributes.popper),
123
172
  React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
124
- children,
173
+ React__default['default'].createElement("div", { className: cn__default['default']((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
125
174
  withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles.arrow, arrowClassName) })))));
126
175
  };
127
176
  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)))); }));
package/dist/cssm/Component.d.ts CHANGED
@@ -32,6 +32,10 @@ type PopoverProps = {
32
32
  * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
33
33
  */
34
34
  preventOverflow?: boolean;
35
+ /**
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
37
+ */
38
+ availableHeight?: boolean;
35
39
  /**
36
40
  * Если `true`, будет отрисована стрелочка
37
41
  */
package/dist/cssm/Component.js CHANGED
@@ -6,6 +6,7 @@ var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var reactTransitionGroup = require('react-transition-group');
8
8
  var reactPopper = require('react-popper');
9
+ var maxSize = require('popper-max-size-modifier');
9
10
  var mergeRefs = require('react-merge-refs');
10
11
  var resizeObserver = require('resize-observer');
11
12
  var coreComponentsStack = require('@alfalab/core-components-stack/dist/cssm');
@@ -16,6 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
16
17
 
17
18
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
19
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
20
+ var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
19
21
  var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
20
22
  var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
21
23
 
@@ -55,11 +57,31 @@ var CSS_TRANSITION_CLASS_NAMES = {
55
57
  exit: styles__default['default'].exit,
56
58
  exitActive: styles__default['default'].exitActive,
57
59
  };
60
+ var availableHieghtModifier = {
61
+ name: 'availableHeight',
62
+ enabled: true,
63
+ phase: 'beforeWrite',
64
+ requires: ['maxSize'],
65
+ fn: function (_a) {
66
+ var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
67
+ var height = modifiersData.maxSize.height;
68
+ var content = popper.querySelector("." + styles__default['default'].scrollableContent);
69
+ if (content && !content.style.maxHeight) {
70
+ content.style.maxHeight = height + "px";
71
+ }
72
+ },
73
+ };
74
+ /**
75
+ * Минимальный размер anchorElement,
76
+ * при котором возможно смещение стрелочки относительно центра
77
+ */
78
+ var MIN_ARROW_SHIFT_SIZE = 75;
58
79
  var Popover = React.forwardRef(function (_a, ref) {
59
- 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;
60
- var _k = React.useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
61
- var _l = React.useState(null), popperElement = _l[0], setPopperElement = _l[1];
62
- var _m = React.useState(null), arrowElement = _m[0], setArrowElement = _m[1];
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;
81
+ var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
82
+ var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
83
+ var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
84
+ var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
63
85
  var updatePopperRef = React.useRef();
64
86
  var getModifiers = React.useCallback(function () {
65
87
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -75,12 +97,24 @@ var Popover = React.forwardRef(function (_a, ref) {
75
97
  if (preventOverflow) {
76
98
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
77
99
  }
100
+ if (availableHeight) {
101
+ modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
102
+ modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
103
+ }
78
104
  return modifiers;
79
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
80
- var _o = reactPopper.usePopper(referenceElement, popperElement, {
105
+ }, [
106
+ offset,
107
+ withArrow,
108
+ preventFlip,
109
+ fallbackPlacements,
110
+ preventOverflow,
111
+ availableHeight,
112
+ arrowElement,
113
+ ]);
114
+ var _q = reactPopper.usePopper(referenceElement, popperElement, {
81
115
  placement: position,
82
116
  modifiers: getModifiers(),
83
- }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
117
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
84
118
  if (updatePopper) {
85
119
  updatePopperRef.current = updatePopper;
86
120
  }
@@ -115,12 +149,27 @@ var Popover = React.forwardRef(function (_a, ref) {
115
149
  }
116
150
  return function () { return ({}); };
117
151
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
152
+ /**
153
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
154
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
155
+ */
156
+ React.useEffect(function () {
157
+ var shiftedPosition = position.includes('-start') || position.includes('-end');
158
+ if (shiftedPosition && referenceElement) {
159
+ var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
160
+ var size = position.includes('left') || position.includes('right') ? height : width;
161
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
162
+ setArrowShift(true);
163
+ }
164
+ }
165
+ }, [referenceElement, position]);
118
166
  var renderContent = function (computedZIndex, style) {
119
- return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]),
120
- // ref={setPopperElement}
121
- 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) }, attributes.popper),
167
+ var _a, _b;
168
+ 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 = {},
169
+ _a[styles__default['default'].arrowShift] = arrowShift,
170
+ _a)) }, attributes.popper),
122
171
  React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].inner, popperClassName), style: style },
123
- children,
172
+ React__default['default'].createElement("div", { className: cn__default['default']((_b = {}, _b[styles__default['default'].scrollableContent] = availableHeight, _b)) }, children),
124
173
  withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles__default['default'].arrow, arrowClassName) })))));
125
174
  };
126
175
  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)))); }));
package/dist/cssm/index.js CHANGED
@@ -7,6 +7,7 @@ require('react');
7
7
  require('classnames');
8
8
  require('react-transition-group');
9
9
  require('react-popper');
10
+ require('popper-max-size-modifier');
10
11
  require('react-merge-refs');
11
12
  require('resize-observer');
12
13
  require('@alfalab/core-components-stack/dist/cssm');
package/dist/cssm/index.module.css CHANGED
@@ -28,6 +28,14 @@
28
28
  box-sizing: border-box;
29
29
  will-change: transform;
30
30
  }
31
+ .scrollableContent {
32
+ position: relative;
33
+ z-index: 2;
34
+ overflow-y: auto;
35
+ }
36
+ .arrow {
37
+ z-index: 1;
38
+ }
31
39
  .arrow:after {
32
40
  content: '';
33
41
  display: block;
@@ -49,10 +57,10 @@
49
57
  border-bottom: none;
50
58
  border-left: none;
51
59
  }
52
- .component[data-popper-placement='left-start'] .arrow:after {
60
+ .component[data-popper-placement='left-start'].arrowShift .arrow:after {
53
61
  top: -7px;
54
62
  }
55
- .component[data-popper-placement='left-end'] .arrow:after {
63
+ .component[data-popper-placement='left-end'].arrowShift .arrow:after {
56
64
  top: -5px;
57
65
  }
58
66
  .component[data-popper-placement='right'] .arrow,
@@ -65,10 +73,10 @@
65
73
  border-top: none;
66
74
  border-right: none;
67
75
  }
68
- .component[data-popper-placement='right-start'] .arrow:after {
76
+ .component[data-popper-placement='right-start'].arrowShift .arrow:after {
69
77
  top: -7px;
70
78
  }
71
- .component[data-popper-placement='right-end'] .arrow:after {
79
+ .component[data-popper-placement='right-end'].arrowShift .arrow:after {
72
80
  top: -5px;
73
81
  }
74
82
  .component[data-popper-placement='top'] .arrow,
@@ -81,10 +89,10 @@
81
89
  border-top: none;
82
90
  border-left: none;
83
91
  }
84
- .component[data-popper-placement='top-start'] .arrow:after {
92
+ .component[data-popper-placement='top-start'].arrowShift .arrow:after {
85
93
  left: -17px;
86
94
  }
87
- .component[data-popper-placement='top-end'] .arrow:after {
95
+ .component[data-popper-placement='top-end'].arrowShift .arrow:after {
88
96
  left: 5px;
89
97
  }
90
98
  .component[data-popper-placement='bottom'] .arrow,
@@ -97,10 +105,10 @@
97
105
  border-bottom: none;
98
106
  border-right: none;
99
107
  }
100
- .component[data-popper-placement='bottom-start'] .arrow:after {
108
+ .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
101
109
  left: -17px;
102
110
  }
103
- .component[data-popper-placement='bottom-end'] .arrow:after {
111
+ .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
104
112
  left: 5px;
105
113
  }
106
114
  .enter .inner {
package/dist/esm/Component.d.ts CHANGED
@@ -32,6 +32,10 @@ type PopoverProps = {
32
32
  * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
33
33
  */
34
34
  preventOverflow?: boolean;
35
+ /**
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
37
+ */
38
+ availableHeight?: boolean;
35
39
  /**
36
40
  * Если `true`, будет отрисована стрелочка
37
41
  */
package/dist/esm/Component.js CHANGED
@@ -2,6 +2,7 @@ import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'rea
2
2
  import cn from 'classnames';
3
3
  import { CSSTransition } from 'react-transition-group';
4
4
  import { usePopper } from 'react-popper';
5
+ import maxSize from 'popper-max-size-modifier';
5
6
  import mergeRefs from 'react-merge-refs';
6
7
  import { ResizeObserver } from 'resize-observer';
7
8
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/esm';
@@ -34,7 +35,7 @@ var __assign = function () {
34
35
  return __assign.apply(this, arguments);
35
36
  };
36
37
 
37
- var styles = {"component":"popover__component_pqi91","inner":"popover__inner_pqi91","arrow":"popover__arrow_pqi91","enter":"popover__enter_pqi91","enterActive":"popover__enterActive_pqi91","exit":"popover__exit_pqi91","exitActive":"popover__exitActive_pqi91"};
38
+ var styles = {"component":"popover__component_1uaec","inner":"popover__inner_1uaec","scrollableContent":"popover__scrollableContent_1uaec","arrow":"popover__arrow_1uaec","arrowShift":"popover__arrowShift_1uaec","enter":"popover__enter_1uaec","enterActive":"popover__enterActive_1uaec","exit":"popover__exit_1uaec","exitActive":"popover__exitActive_1uaec"};
38
39
  require('./index.css')
39
40
 
40
41
  var DEFAULT_TRANSITION = {
@@ -46,11 +47,31 @@ var CSS_TRANSITION_CLASS_NAMES = {
46
47
  exit: styles.exit,
47
48
  exitActive: styles.exitActive,
48
49
  };
50
+ var availableHieghtModifier = {
51
+ name: 'availableHeight',
52
+ enabled: true,
53
+ phase: 'beforeWrite',
54
+ requires: ['maxSize'],
55
+ fn: function (_a) {
56
+ var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
57
+ var height = modifiersData.maxSize.height;
58
+ var content = popper.querySelector("." + styles.scrollableContent);
59
+ if (content && !content.style.maxHeight) {
60
+ content.style.maxHeight = height + "px";
61
+ }
62
+ },
63
+ };
64
+ /**
65
+ * Минимальный размер anchorElement,
66
+ * при котором возможно смещение стрелочки относительно центра
67
+ */
68
+ var MIN_ARROW_SHIFT_SIZE = 75;
49
69
  var Popover = forwardRef(function (_a, ref) {
50
- 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;
51
- var _k = useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
52
- var _l = useState(null), popperElement = _l[0], setPopperElement = _l[1];
53
- var _m = useState(null), arrowElement = _m[0], setArrowElement = _m[1];
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;
71
+ var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
72
+ var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
73
+ var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
74
+ var _p = useState(false), arrowShift = _p[0], setArrowShift = _p[1];
54
75
  var updatePopperRef = useRef();
55
76
  var getModifiers = useCallback(function () {
56
77
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -66,12 +87,24 @@ var Popover = forwardRef(function (_a, ref) {
66
87
  if (preventOverflow) {
67
88
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
68
89
  }
90
+ if (availableHeight) {
91
+ modifiers.push(__assign(__assign({}, maxSize), { options: {} }));
92
+ modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
93
+ }
69
94
  return modifiers;
70
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
71
- var _o = usePopper(referenceElement, popperElement, {
95
+ }, [
96
+ offset,
97
+ withArrow,
98
+ preventFlip,
99
+ fallbackPlacements,
100
+ preventOverflow,
101
+ availableHeight,
102
+ arrowElement,
103
+ ]);
104
+ var _q = usePopper(referenceElement, popperElement, {
72
105
  placement: position,
73
106
  modifiers: getModifiers(),
74
- }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
107
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
75
108
  if (updatePopper) {
76
109
  updatePopperRef.current = updatePopper;
77
110
  }
@@ -106,12 +139,27 @@ var Popover = forwardRef(function (_a, ref) {
106
139
  }
107
140
  return function () { return ({}); };
108
141
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
142
+ /**
143
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
144
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
145
+ */
146
+ useEffect(function () {
147
+ var shiftedPosition = position.includes('-start') || position.includes('-end');
148
+ if (shiftedPosition && referenceElement) {
149
+ var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
150
+ var size = position.includes('left') || position.includes('right') ? height : width;
151
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
152
+ setArrowShift(true);
153
+ }
154
+ }
155
+ }, [referenceElement, position]);
109
156
  var renderContent = function (computedZIndex, style) {
110
- return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]),
111
- // ref={setPopperElement}
112
- 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) }, attributes.popper),
157
+ var _a, _b;
158
+ 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 = {},
159
+ _a[styles.arrowShift] = arrowShift,
160
+ _a)) }, attributes.popper),
113
161
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
114
- children,
162
+ React.createElement("div", { className: cn((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
115
163
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
116
164
  };
117
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 }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: pqi91 */
1
+ /* hash: 1l83w */
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_pqi91 {
18
+ .popover__component_1uaec {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_pqi91 {
22
+ .popover__inner_1uaec {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,7 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__arrow_pqi91:after {
32
+ .popover__scrollableContent_1uaec {
33
+ position: relative;
34
+ z-index: 2;
35
+ overflow-y: auto;
36
+ }
37
+ .popover__arrow_1uaec {
38
+ z-index: 1;
39
+ }
40
+ .popover__arrow_1uaec:after {
33
41
  content: '';
34
42
  display: block;
35
43
  position: absolute;
@@ -40,83 +48,83 @@
40
48
  box-sizing: border-box;
41
49
  transform: rotate(45deg);
42
50
  }
43
- .popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91,
44
- .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91,
45
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91 {
51
+ .popover__component_1uaec[data-popper-placement='left'] .popover__arrow_1uaec,
52
+ .popover__component_1uaec[data-popper-placement='left-start'] .popover__arrow_1uaec,
53
+ .popover__component_1uaec[data-popper-placement='left-end'] .popover__arrow_1uaec {
46
54
  right: 5px
47
55
  }
48
- .popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
56
+ .popover__component_1uaec[data-popper-placement='left'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='left-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='left-end'] .popover__arrow_1uaec:after {
49
57
  top: -6px;
50
58
  border-bottom: none;
51
59
  border-left: none;
52
60
  }
53
- .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after {
61
+ .popover__component_1uaec[data-popper-placement='left-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
54
62
  top: -7px;
55
63
  }
56
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
64
+ .popover__component_1uaec[data-popper-placement='left-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
57
65
  top: -5px;
58
66
  }
59
- .popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91,
60
- .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91,
61
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91 {
67
+ .popover__component_1uaec[data-popper-placement='right'] .popover__arrow_1uaec,
68
+ .popover__component_1uaec[data-popper-placement='right-start'] .popover__arrow_1uaec,
69
+ .popover__component_1uaec[data-popper-placement='right-end'] .popover__arrow_1uaec {
62
70
  left: -7px
63
71
  }
64
- .popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
72
+ .popover__component_1uaec[data-popper-placement='right'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='right-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='right-end'] .popover__arrow_1uaec:after {
65
73
  top: -6px;
66
74
  border-top: none;
67
75
  border-right: none;
68
76
  }
69
- .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after {
77
+ .popover__component_1uaec[data-popper-placement='right-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
70
78
  top: -7px;
71
79
  }
72
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
80
+ .popover__component_1uaec[data-popper-placement='right-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
73
81
  top: -5px;
74
82
  }
75
- .popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91,
76
- .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91,
77
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91 {
83
+ .popover__component_1uaec[data-popper-placement='top'] .popover__arrow_1uaec,
84
+ .popover__component_1uaec[data-popper-placement='top-start'] .popover__arrow_1uaec,
85
+ .popover__component_1uaec[data-popper-placement='top-end'] .popover__arrow_1uaec {
78
86
  bottom: 5px
79
87
  }
80
- .popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
88
+ .popover__component_1uaec[data-popper-placement='top'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='top-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='top-end'] .popover__arrow_1uaec:after {
81
89
  left: -6px;
82
90
  border-top: none;
83
91
  border-left: none;
84
92
  }
85
- .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after {
93
+ .popover__component_1uaec[data-popper-placement='top-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
86
94
  left: -17px;
87
95
  }
88
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
96
+ .popover__component_1uaec[data-popper-placement='top-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
89
97
  left: 5px;
90
98
  }
91
- .popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91,
92
- .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91,
93
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91 {
99
+ .popover__component_1uaec[data-popper-placement='bottom'] .popover__arrow_1uaec,
100
+ .popover__component_1uaec[data-popper-placement='bottom-start'] .popover__arrow_1uaec,
101
+ .popover__component_1uaec[data-popper-placement='bottom-end'] .popover__arrow_1uaec {
94
102
  top: -7px
95
103
  }
96
- .popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
104
+ .popover__component_1uaec[data-popper-placement='bottom'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='bottom-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='bottom-end'] .popover__arrow_1uaec:after {
97
105
  left: -6px;
98
106
  border-bottom: none;
99
107
  border-right: none;
100
108
  }
101
- .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after {
109
+ .popover__component_1uaec[data-popper-placement='bottom-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
102
110
  left: -17px;
103
111
  }
104
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
112
+ .popover__component_1uaec[data-popper-placement='bottom-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
105
113
  left: 5px;
106
114
  }
107
- .popover__enter_pqi91 .popover__inner_pqi91 {
115
+ .popover__enter_1uaec .popover__inner_1uaec {
108
116
  opacity: 0;
109
117
  transform: scale(0.98);
110
118
  }
111
- .popover__enterActive_pqi91 .popover__inner_pqi91 {
119
+ .popover__enterActive_1uaec .popover__inner_1uaec {
112
120
  opacity: 1;
113
121
  transform: scale(1);
114
122
  }
115
- .popover__exit_pqi91 .popover__inner_pqi91 {
123
+ .popover__exit_1uaec .popover__inner_1uaec {
116
124
  opacity: 1;
117
125
  transform: scale(1);
118
126
  }
119
- .popover__exitActive_pqi91 .popover__inner_pqi91 {
127
+ .popover__exitActive_1uaec .popover__inner_1uaec {
120
128
  opacity: 0;
121
129
  transform: scale(0.98);
122
130
  }
package/dist/esm/index.js CHANGED
@@ -3,6 +3,7 @@ import 'react';
3
3
  import 'classnames';
4
4
  import 'react-transition-group';
5
5
  import 'react-popper';
6
+ import 'popper-max-size-modifier';
6
7
  import 'react-merge-refs';
7
8
  import 'resize-observer';
8
9
  import '@alfalab/core-components-stack/dist/esm';
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: pqi91 */
1
+ /* hash: 1l83w */
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_pqi91 {
18
+ .popover__component_1uaec {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_pqi91 {
22
+ .popover__inner_1uaec {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,7 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__arrow_pqi91:after {
32
+ .popover__scrollableContent_1uaec {
33
+ position: relative;
34
+ z-index: 2;
35
+ overflow-y: auto;
36
+ }
37
+ .popover__arrow_1uaec {
38
+ z-index: 1;
39
+ }
40
+ .popover__arrow_1uaec:after {
33
41
  content: '';
34
42
  display: block;
35
43
  position: absolute;
@@ -40,83 +48,83 @@
40
48
  box-sizing: border-box;
41
49
  transform: rotate(45deg);
42
50
  }
43
- .popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91,
44
- .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91,
45
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91 {
51
+ .popover__component_1uaec[data-popper-placement='left'] .popover__arrow_1uaec,
52
+ .popover__component_1uaec[data-popper-placement='left-start'] .popover__arrow_1uaec,
53
+ .popover__component_1uaec[data-popper-placement='left-end'] .popover__arrow_1uaec {
46
54
  right: 5px
47
55
  }
48
- .popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
56
+ .popover__component_1uaec[data-popper-placement='left'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='left-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='left-end'] .popover__arrow_1uaec:after {
49
57
  top: -6px;
50
58
  border-bottom: none;
51
59
  border-left: none;
52
60
  }
53
- .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after {
61
+ .popover__component_1uaec[data-popper-placement='left-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
54
62
  top: -7px;
55
63
  }
56
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
64
+ .popover__component_1uaec[data-popper-placement='left-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
57
65
  top: -5px;
58
66
  }
59
- .popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91,
60
- .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91,
61
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91 {
67
+ .popover__component_1uaec[data-popper-placement='right'] .popover__arrow_1uaec,
68
+ .popover__component_1uaec[data-popper-placement='right-start'] .popover__arrow_1uaec,
69
+ .popover__component_1uaec[data-popper-placement='right-end'] .popover__arrow_1uaec {
62
70
  left: -7px
63
71
  }
64
- .popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
72
+ .popover__component_1uaec[data-popper-placement='right'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='right-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='right-end'] .popover__arrow_1uaec:after {
65
73
  top: -6px;
66
74
  border-top: none;
67
75
  border-right: none;
68
76
  }
69
- .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after {
77
+ .popover__component_1uaec[data-popper-placement='right-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
70
78
  top: -7px;
71
79
  }
72
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
80
+ .popover__component_1uaec[data-popper-placement='right-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
73
81
  top: -5px;
74
82
  }
75
- .popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91,
76
- .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91,
77
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91 {
83
+ .popover__component_1uaec[data-popper-placement='top'] .popover__arrow_1uaec,
84
+ .popover__component_1uaec[data-popper-placement='top-start'] .popover__arrow_1uaec,
85
+ .popover__component_1uaec[data-popper-placement='top-end'] .popover__arrow_1uaec {
78
86
  bottom: 5px
79
87
  }
80
- .popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
88
+ .popover__component_1uaec[data-popper-placement='top'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='top-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='top-end'] .popover__arrow_1uaec:after {
81
89
  left: -6px;
82
90
  border-top: none;
83
91
  border-left: none;
84
92
  }
85
- .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after {
93
+ .popover__component_1uaec[data-popper-placement='top-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
86
94
  left: -17px;
87
95
  }
88
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
96
+ .popover__component_1uaec[data-popper-placement='top-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
89
97
  left: 5px;
90
98
  }
91
- .popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91,
92
- .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91,
93
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91 {
99
+ .popover__component_1uaec[data-popper-placement='bottom'] .popover__arrow_1uaec,
100
+ .popover__component_1uaec[data-popper-placement='bottom-start'] .popover__arrow_1uaec,
101
+ .popover__component_1uaec[data-popper-placement='bottom-end'] .popover__arrow_1uaec {
94
102
  top: -7px
95
103
  }
96
- .popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
104
+ .popover__component_1uaec[data-popper-placement='bottom'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='bottom-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='bottom-end'] .popover__arrow_1uaec:after {
97
105
  left: -6px;
98
106
  border-bottom: none;
99
107
  border-right: none;
100
108
  }
101
- .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after {
109
+ .popover__component_1uaec[data-popper-placement='bottom-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
102
110
  left: -17px;
103
111
  }
104
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
112
+ .popover__component_1uaec[data-popper-placement='bottom-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
105
113
  left: 5px;
106
114
  }
107
- .popover__enter_pqi91 .popover__inner_pqi91 {
115
+ .popover__enter_1uaec .popover__inner_1uaec {
108
116
  opacity: 0;
109
117
  transform: scale(0.98);
110
118
  }
111
- .popover__enterActive_pqi91 .popover__inner_pqi91 {
119
+ .popover__enterActive_1uaec .popover__inner_1uaec {
112
120
  opacity: 1;
113
121
  transform: scale(1);
114
122
  }
115
- .popover__exit_pqi91 .popover__inner_pqi91 {
123
+ .popover__exit_1uaec .popover__inner_1uaec {
116
124
  opacity: 1;
117
125
  transform: scale(1);
118
126
  }
119
- .popover__exitActive_pqi91 .popover__inner_pqi91 {
127
+ .popover__exitActive_1uaec .popover__inner_1uaec {
120
128
  opacity: 0;
121
129
  transform: scale(0.98);
122
130
  }
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ require('react');
7
7
  require('classnames');
8
8
  require('react-transition-group');
9
9
  require('react-popper');
10
+ require('popper-max-size-modifier');
10
11
  require('react-merge-refs');
11
12
  require('resize-observer');
12
13
  require('@alfalab/core-components-stack');
package/dist/modern/Component.d.ts CHANGED
@@ -32,6 +32,10 @@ type PopoverProps = {
32
32
  * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
33
33
  */
34
34
  preventOverflow?: boolean;
35
+ /**
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
37
+ */
38
+ availableHeight?: boolean;
35
39
  /**
36
40
  * Если `true`, будет отрисована стрелочка
37
41
  */
package/dist/modern/Component.js CHANGED
@@ -2,12 +2,13 @@ import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'rea
2
2
  import cn from 'classnames';
3
3
  import { CSSTransition } from 'react-transition-group';
4
4
  import { usePopper } from 'react-popper';
5
+ import maxSize from 'popper-max-size-modifier';
5
6
  import mergeRefs from 'react-merge-refs';
6
7
  import { ResizeObserver } from 'resize-observer';
7
8
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern';
8
9
  import { Portal } from '@alfalab/core-components-portal/dist/modern';
9
10
 
10
- var styles = {"component":"popover__component_pqi91","inner":"popover__inner_pqi91","arrow":"popover__arrow_pqi91","enter":"popover__enter_pqi91","enterActive":"popover__enterActive_pqi91","exit":"popover__exit_pqi91","exitActive":"popover__exitActive_pqi91"};
11
+ var styles = {"component":"popover__component_1uaec","inner":"popover__inner_1uaec","scrollableContent":"popover__scrollableContent_1uaec","arrow":"popover__arrow_1uaec","arrowShift":"popover__arrowShift_1uaec","enter":"popover__enter_1uaec","enterActive":"popover__enterActive_1uaec","exit":"popover__exit_1uaec","exitActive":"popover__exitActive_1uaec"};
11
12
  require('./index.css')
12
13
 
13
14
  const DEFAULT_TRANSITION = {
@@ -19,10 +20,29 @@ const CSS_TRANSITION_CLASS_NAMES = {
19
20
  exit: styles.exit,
20
21
  exitActive: styles.exitActive,
21
22
  };
22
- const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = [0, 0], withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, }, ref) => {
23
+ const availableHieghtModifier = {
24
+ name: 'availableHeight',
25
+ enabled: true,
26
+ phase: 'beforeWrite',
27
+ requires: ['maxSize'],
28
+ fn({ state: { modifiersData, elements: { popper }, }, }) {
29
+ const { height } = modifiersData.maxSize;
30
+ const content = popper.querySelector(`.${styles.scrollableContent}`);
31
+ if (content && !content.style.maxHeight) {
32
+ content.style.maxHeight = `${height}px`;
33
+ }
34
+ },
35
+ };
36
+ /**
37
+ * Минимальный размер anchorElement,
38
+ * при котором возможно смещение стрелочки относительно центра
39
+ */
40
+ const MIN_ARROW_SHIFT_SIZE = 75;
41
+ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = [0, 0], withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
23
42
  const [referenceElement, setReferenceElement] = useState(anchorElement);
24
43
  const [popperElement, setPopperElement] = useState(null);
25
44
  const [arrowElement, setArrowElement] = useState(null);
45
+ const [arrowShift, setArrowShift] = useState(false);
26
46
  const updatePopperRef = useRef();
27
47
  const getModifiers = useCallback(() => {
28
48
  const modifiers = [{ name: 'offset', options: { offset } }];
@@ -38,8 +58,20 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
38
58
  if (preventOverflow) {
39
59
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
40
60
  }
61
+ if (availableHeight) {
62
+ modifiers.push({ ...maxSize, options: {} });
63
+ modifiers.push({ ...availableHieghtModifier, options: {} });
64
+ }
41
65
  return modifiers;
42
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
66
+ }, [
67
+ offset,
68
+ withArrow,
69
+ preventFlip,
70
+ fallbackPlacements,
71
+ preventOverflow,
72
+ availableHeight,
73
+ arrowElement,
74
+ ]);
43
75
  const { styles: popperStyles, attributes, update: updatePopper } = usePopper(referenceElement, popperElement, {
44
76
  placement: position,
45
77
  modifiers: getModifiers(),
@@ -78,16 +110,30 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
78
110
  }
79
111
  return () => ({});
80
112
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
113
+ /**
114
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
115
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
116
+ */
117
+ useEffect(() => {
118
+ const shiftedPosition = position.includes('-start') || position.includes('-end');
119
+ if (shiftedPosition && referenceElement) {
120
+ const { width, height } = referenceElement.getBoundingClientRect();
121
+ const size = position.includes('left') || position.includes('right') ? height : width;
122
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
123
+ setArrowShift(true);
124
+ }
125
+ }
126
+ }, [referenceElement, position]);
81
127
  const renderContent = (computedZIndex, style) => {
82
- return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]),
83
- // ref={setPopperElement}
84
- style: {
128
+ return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]), style: {
85
129
  zIndex: computedZIndex,
86
130
  width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
87
131
  ...popperStyles.popper,
88
- }, "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
132
+ }, "data-test-id": dataTestId, className: cn(styles.component, className, {
133
+ [styles.arrowShift]: arrowShift,
134
+ }) }, attributes.popper),
89
135
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
90
- children,
136
+ React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
91
137
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
92
138
  };
93
139
  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))))));
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: pqi91 */
1
+ /* hash: 1l83w */
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_pqi91 {
18
+ .popover__component_1uaec {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_pqi91 {
22
+ .popover__inner_1uaec {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,7 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__arrow_pqi91:after {
32
+ .popover__scrollableContent_1uaec {
33
+ position: relative;
34
+ z-index: 2;
35
+ overflow-y: auto;
36
+ }
37
+ .popover__arrow_1uaec {
38
+ z-index: 1;
39
+ }
40
+ .popover__arrow_1uaec:after {
33
41
  content: '';
34
42
  display: block;
35
43
  position: absolute;
@@ -40,83 +48,83 @@
40
48
  box-sizing: border-box;
41
49
  transform: rotate(45deg);
42
50
  }
43
- .popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91,
44
- .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91,
45
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91 {
51
+ .popover__component_1uaec[data-popper-placement='left'] .popover__arrow_1uaec,
52
+ .popover__component_1uaec[data-popper-placement='left-start'] .popover__arrow_1uaec,
53
+ .popover__component_1uaec[data-popper-placement='left-end'] .popover__arrow_1uaec {
46
54
  right: 5px
47
55
  }
48
- .popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
56
+ .popover__component_1uaec[data-popper-placement='left'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='left-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='left-end'] .popover__arrow_1uaec:after {
49
57
  top: -6px;
50
58
  border-bottom: none;
51
59
  border-left: none;
52
60
  }
53
- .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after {
61
+ .popover__component_1uaec[data-popper-placement='left-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
54
62
  top: -7px;
55
63
  }
56
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
64
+ .popover__component_1uaec[data-popper-placement='left-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
57
65
  top: -5px;
58
66
  }
59
- .popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91,
60
- .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91,
61
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91 {
67
+ .popover__component_1uaec[data-popper-placement='right'] .popover__arrow_1uaec,
68
+ .popover__component_1uaec[data-popper-placement='right-start'] .popover__arrow_1uaec,
69
+ .popover__component_1uaec[data-popper-placement='right-end'] .popover__arrow_1uaec {
62
70
  left: -7px
63
71
  }
64
- .popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
72
+ .popover__component_1uaec[data-popper-placement='right'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='right-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='right-end'] .popover__arrow_1uaec:after {
65
73
  top: -6px;
66
74
  border-top: none;
67
75
  border-right: none;
68
76
  }
69
- .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after {
77
+ .popover__component_1uaec[data-popper-placement='right-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
70
78
  top: -7px;
71
79
  }
72
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
80
+ .popover__component_1uaec[data-popper-placement='right-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
73
81
  top: -5px;
74
82
  }
75
- .popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91,
76
- .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91,
77
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91 {
83
+ .popover__component_1uaec[data-popper-placement='top'] .popover__arrow_1uaec,
84
+ .popover__component_1uaec[data-popper-placement='top-start'] .popover__arrow_1uaec,
85
+ .popover__component_1uaec[data-popper-placement='top-end'] .popover__arrow_1uaec {
78
86
  bottom: 5px
79
87
  }
80
- .popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
88
+ .popover__component_1uaec[data-popper-placement='top'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='top-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='top-end'] .popover__arrow_1uaec:after {
81
89
  left: -6px;
82
90
  border-top: none;
83
91
  border-left: none;
84
92
  }
85
- .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after {
93
+ .popover__component_1uaec[data-popper-placement='top-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
86
94
  left: -17px;
87
95
  }
88
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
96
+ .popover__component_1uaec[data-popper-placement='top-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
89
97
  left: 5px;
90
98
  }
91
- .popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91,
92
- .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91,
93
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91 {
99
+ .popover__component_1uaec[data-popper-placement='bottom'] .popover__arrow_1uaec,
100
+ .popover__component_1uaec[data-popper-placement='bottom-start'] .popover__arrow_1uaec,
101
+ .popover__component_1uaec[data-popper-placement='bottom-end'] .popover__arrow_1uaec {
94
102
  top: -7px
95
103
  }
96
- .popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
104
+ .popover__component_1uaec[data-popper-placement='bottom'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='bottom-start'] .popover__arrow_1uaec:after, .popover__component_1uaec[data-popper-placement='bottom-end'] .popover__arrow_1uaec:after {
97
105
  left: -6px;
98
106
  border-bottom: none;
99
107
  border-right: none;
100
108
  }
101
- .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after {
109
+ .popover__component_1uaec[data-popper-placement='bottom-start'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
102
110
  left: -17px;
103
111
  }
104
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
112
+ .popover__component_1uaec[data-popper-placement='bottom-end'].popover__arrowShift_1uaec .popover__arrow_1uaec:after {
105
113
  left: 5px;
106
114
  }
107
- .popover__enter_pqi91 .popover__inner_pqi91 {
115
+ .popover__enter_1uaec .popover__inner_1uaec {
108
116
  opacity: 0;
109
117
  transform: scale(0.98);
110
118
  }
111
- .popover__enterActive_pqi91 .popover__inner_pqi91 {
119
+ .popover__enterActive_1uaec .popover__inner_1uaec {
112
120
  opacity: 1;
113
121
  transform: scale(1);
114
122
  }
115
- .popover__exit_pqi91 .popover__inner_pqi91 {
123
+ .popover__exit_1uaec .popover__inner_1uaec {
116
124
  opacity: 1;
117
125
  transform: scale(1);
118
126
  }
119
- .popover__exitActive_pqi91 .popover__inner_pqi91 {
127
+ .popover__exitActive_1uaec .popover__inner_1uaec {
120
128
  opacity: 0;
121
129
  transform: scale(0.98);
122
130
  }
package/dist/modern/index.js CHANGED
@@ -2,6 +2,7 @@ import 'react';
2
2
  import 'classnames';
3
3
  import 'react-transition-group';
4
4
  import 'react-popper';
5
+ import 'popper-max-size-modifier';
5
6
  import 'react-merge-refs';
6
7
  import 'resize-observer';
7
8
  import '@alfalab/core-components-stack/dist/modern';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "5.5.0",
3
+ "version": "5.6.2",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -22,15 +22,16 @@
22
22
  "dependencies": {
23
23
  "@alfalab/core-components-portal": "^2.0.1",
24
24
  "@alfalab/core-components-stack": "^3.0.1",
25
- "@popperjs/core": "^2.3.3",
26
- "classnames": "^2.2.6",
27
- "react-merge-refs": "^1.1.0",
28
- "react-popper": "^2.2.5",
29
- "react-transition-group": "^4.3.0",
30
- "resize-observer": "^1.0.0"
25
+ "@popperjs/core": "2.3.3",
26
+ "classnames": "2.2.6",
27
+ "popper-max-size-modifier": "0.2.0",
28
+ "react-merge-refs": "1.1.0",
29
+ "react-popper": "2.2.5",
30
+ "react-transition-group": "4.4.1",
31
+ "resize-observer": "1.0.0"
31
32
  },
32
33
  "devDependencies": {
33
34
  "@types/react-transition-group": "^4.2.4"
34
35
  },
35
- "gitHead": "a80a4377703da0cb8fd257612117ef3eb2d9bc42"
36
+ "gitHead": "0363f194b7d8e6d2949795b8f0570262d7028aff"
36
37
  }