@alfalab/core-components-popover 5.5.0 → 5.6.0

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 +11 -0
  2. package/dist/Component.d.ts +4 -0
  3. package/dist/Component.js +37 -9
  4. package/dist/cssm/Component.d.ts +4 -0
  5. package/dist/cssm/Component.js +36 -8
  6. package/dist/cssm/index.js +1 -0
  7. package/dist/cssm/index.module.css +8 -0
  8. package/dist/esm/Component.d.ts +4 -0
  9. package/dist/esm/Component.js +36 -9
  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 +30 -4
  16. package/dist/modern/index.css +40 -32
  17. package/dist/modern/index.js +1 -0
  18. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.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)
7
+
8
+
9
+ ### Features
10
+
11
+ * **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)
12
+
13
+
14
+
15
+
16
+
6
17
  # [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
18
 
8
19
 
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_bivb4","inner":"popover__inner_bivb4","scrollableContent":"popover__scrollableContent_bivb4","arrow":"popover__arrow_bivb4","enter":"popover__enter_bivb4","enterActive":"popover__enterActive_bivb4","exit":"popover__exit_bivb4","exitActive":"popover__exitActive_bivb4"};
48
50
  require('./index.css')
49
51
 
50
52
  var DEFAULT_TRANSITION = {
@@ -56,11 +58,25 @@ 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
+ };
59
75
  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];
76
+ 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;
77
+ var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
78
+ var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
79
+ var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
64
80
  var updatePopperRef = React.useRef();
65
81
  var getModifiers = React.useCallback(function () {
66
82
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -76,12 +92,24 @@ var Popover = React.forwardRef(function (_a, ref) {
76
92
  if (preventOverflow) {
77
93
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
78
94
  }
95
+ if (availableHeight) {
96
+ modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
97
+ modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
98
+ }
79
99
  return modifiers;
80
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
81
- var _o = reactPopper.usePopper(referenceElement, popperElement, {
100
+ }, [
101
+ offset,
102
+ withArrow,
103
+ preventFlip,
104
+ fallbackPlacements,
105
+ preventOverflow,
106
+ availableHeight,
107
+ arrowElement,
108
+ ]);
109
+ var _p = reactPopper.usePopper(referenceElement, popperElement, {
82
110
  placement: position,
83
111
  modifiers: getModifiers(),
84
- }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
112
+ }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
85
113
  if (updatePopper) {
86
114
  updatePopperRef.current = updatePopper;
87
115
  }
@@ -121,7 +149,7 @@ var Popover = React.forwardRef(function (_a, ref) {
121
149
  // ref={setPopperElement}
122
150
  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),
123
151
  React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
124
- children,
152
+ React__default['default'].createElement("div", { className: cn__default['default'](availableHeight ? styles.scrollableContent : '') }, children),
125
153
  withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles.arrow, arrowClassName) })))));
126
154
  };
127
155
  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,25 @@ 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
+ };
58
74
  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];
75
+ 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;
76
+ var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
77
+ var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
78
+ var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
63
79
  var updatePopperRef = React.useRef();
64
80
  var getModifiers = React.useCallback(function () {
65
81
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -75,12 +91,24 @@ var Popover = React.forwardRef(function (_a, ref) {
75
91
  if (preventOverflow) {
76
92
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
77
93
  }
94
+ if (availableHeight) {
95
+ modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
96
+ modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
97
+ }
78
98
  return modifiers;
79
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
80
- var _o = reactPopper.usePopper(referenceElement, popperElement, {
99
+ }, [
100
+ offset,
101
+ withArrow,
102
+ preventFlip,
103
+ fallbackPlacements,
104
+ preventOverflow,
105
+ availableHeight,
106
+ arrowElement,
107
+ ]);
108
+ var _p = reactPopper.usePopper(referenceElement, popperElement, {
81
109
  placement: position,
82
110
  modifiers: getModifiers(),
83
- }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
111
+ }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
84
112
  if (updatePopper) {
85
113
  updatePopperRef.current = updatePopper;
86
114
  }
@@ -120,7 +148,7 @@ var Popover = React.forwardRef(function (_a, ref) {
120
148
  // ref={setPopperElement}
121
149
  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),
122
150
  React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].inner, popperClassName), style: style },
123
- children,
151
+ React__default['default'].createElement("div", { className: cn__default['default'](availableHeight ? styles__default['default'].scrollableContent : '') }, children),
124
152
  withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles__default['default'].arrow, arrowClassName) })))));
125
153
  };
126
154
  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;
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_bivb4","inner":"popover__inner_bivb4","scrollableContent":"popover__scrollableContent_bivb4","arrow":"popover__arrow_bivb4","enter":"popover__enter_bivb4","enterActive":"popover__enterActive_bivb4","exit":"popover__exit_bivb4","exitActive":"popover__exitActive_bivb4"};
38
39
  require('./index.css')
39
40
 
40
41
  var DEFAULT_TRANSITION = {
@@ -46,11 +47,25 @@ 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
+ };
49
64
  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];
65
+ 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;
66
+ var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
67
+ var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
68
+ var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
54
69
  var updatePopperRef = useRef();
55
70
  var getModifiers = useCallback(function () {
56
71
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -66,12 +81,24 @@ var Popover = forwardRef(function (_a, ref) {
66
81
  if (preventOverflow) {
67
82
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
68
83
  }
84
+ if (availableHeight) {
85
+ modifiers.push(__assign(__assign({}, maxSize), { options: {} }));
86
+ modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
87
+ }
69
88
  return modifiers;
70
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
71
- var _o = usePopper(referenceElement, popperElement, {
89
+ }, [
90
+ offset,
91
+ withArrow,
92
+ preventFlip,
93
+ fallbackPlacements,
94
+ preventOverflow,
95
+ availableHeight,
96
+ arrowElement,
97
+ ]);
98
+ var _p = usePopper(referenceElement, popperElement, {
72
99
  placement: position,
73
100
  modifiers: getModifiers(),
74
- }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
101
+ }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
75
102
  if (updatePopper) {
76
103
  updatePopperRef.current = updatePopper;
77
104
  }
@@ -111,7 +138,7 @@ var Popover = forwardRef(function (_a, ref) {
111
138
  // ref={setPopperElement}
112
139
  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),
113
140
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
114
- children,
141
+ React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
115
142
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
116
143
  };
117
144
  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: 1x604 */
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_bivb4 {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_pqi91 {
22
+ .popover__inner_bivb4 {
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_bivb4 {
33
+ position: relative;
34
+ z-index: 2;
35
+ overflow-y: auto;
36
+ }
37
+ .popover__arrow_bivb4 {
38
+ z-index: 1;
39
+ }
40
+ .popover__arrow_bivb4: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_bivb4[data-popper-placement='left'] .popover__arrow_bivb4,
52
+ .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4,
53
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='left'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after {
54
62
  top: -7px;
55
63
  }
56
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
64
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='right'] .popover__arrow_bivb4,
68
+ .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4,
69
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='right'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after {
70
78
  top: -7px;
71
79
  }
72
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
80
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='top'] .popover__arrow_bivb4,
84
+ .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4,
85
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='top'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after {
86
94
  left: -17px;
87
95
  }
88
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
96
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4,
100
+ .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4,
101
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after {
102
110
  left: -17px;
103
111
  }
104
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
112
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
105
113
  left: 5px;
106
114
  }
107
- .popover__enter_pqi91 .popover__inner_pqi91 {
115
+ .popover__enter_bivb4 .popover__inner_bivb4 {
108
116
  opacity: 0;
109
117
  transform: scale(0.98);
110
118
  }
111
- .popover__enterActive_pqi91 .popover__inner_pqi91 {
119
+ .popover__enterActive_bivb4 .popover__inner_bivb4 {
112
120
  opacity: 1;
113
121
  transform: scale(1);
114
122
  }
115
- .popover__exit_pqi91 .popover__inner_pqi91 {
123
+ .popover__exit_bivb4 .popover__inner_bivb4 {
116
124
  opacity: 1;
117
125
  transform: scale(1);
118
126
  }
119
- .popover__exitActive_pqi91 .popover__inner_pqi91 {
127
+ .popover__exitActive_bivb4 .popover__inner_bivb4 {
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: 1x604 */
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_bivb4 {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_pqi91 {
22
+ .popover__inner_bivb4 {
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_bivb4 {
33
+ position: relative;
34
+ z-index: 2;
35
+ overflow-y: auto;
36
+ }
37
+ .popover__arrow_bivb4 {
38
+ z-index: 1;
39
+ }
40
+ .popover__arrow_bivb4: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_bivb4[data-popper-placement='left'] .popover__arrow_bivb4,
52
+ .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4,
53
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='left'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after {
54
62
  top: -7px;
55
63
  }
56
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
64
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='right'] .popover__arrow_bivb4,
68
+ .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4,
69
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='right'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after {
70
78
  top: -7px;
71
79
  }
72
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
80
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='top'] .popover__arrow_bivb4,
84
+ .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4,
85
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='top'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after {
86
94
  left: -17px;
87
95
  }
88
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
96
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4,
100
+ .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4,
101
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after {
102
110
  left: -17px;
103
111
  }
104
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
112
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
105
113
  left: 5px;
106
114
  }
107
- .popover__enter_pqi91 .popover__inner_pqi91 {
115
+ .popover__enter_bivb4 .popover__inner_bivb4 {
108
116
  opacity: 0;
109
117
  transform: scale(0.98);
110
118
  }
111
- .popover__enterActive_pqi91 .popover__inner_pqi91 {
119
+ .popover__enterActive_bivb4 .popover__inner_bivb4 {
112
120
  opacity: 1;
113
121
  transform: scale(1);
114
122
  }
115
- .popover__exit_pqi91 .popover__inner_pqi91 {
123
+ .popover__exit_bivb4 .popover__inner_bivb4 {
116
124
  opacity: 1;
117
125
  transform: scale(1);
118
126
  }
119
- .popover__exitActive_pqi91 .popover__inner_pqi91 {
127
+ .popover__exitActive_bivb4 .popover__inner_bivb4 {
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_bivb4","inner":"popover__inner_bivb4","scrollableContent":"popover__scrollableContent_bivb4","arrow":"popover__arrow_bivb4","enter":"popover__enter_bivb4","enterActive":"popover__enterActive_bivb4","exit":"popover__exit_bivb4","exitActive":"popover__exitActive_bivb4"};
11
12
  require('./index.css')
12
13
 
13
14
  const DEFAULT_TRANSITION = {
@@ -19,7 +20,20 @@ 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
+ 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
37
  const [referenceElement, setReferenceElement] = useState(anchorElement);
24
38
  const [popperElement, setPopperElement] = useState(null);
25
39
  const [arrowElement, setArrowElement] = useState(null);
@@ -38,8 +52,20 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
38
52
  if (preventOverflow) {
39
53
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
40
54
  }
55
+ if (availableHeight) {
56
+ modifiers.push({ ...maxSize, options: {} });
57
+ modifiers.push({ ...availableHieghtModifier, options: {} });
58
+ }
41
59
  return modifiers;
42
- }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
60
+ }, [
61
+ offset,
62
+ withArrow,
63
+ preventFlip,
64
+ fallbackPlacements,
65
+ preventOverflow,
66
+ availableHeight,
67
+ arrowElement,
68
+ ]);
43
69
  const { styles: popperStyles, attributes, update: updatePopper } = usePopper(referenceElement, popperElement, {
44
70
  placement: position,
45
71
  modifiers: getModifiers(),
@@ -87,7 +113,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
87
113
  ...popperStyles.popper,
88
114
  }, "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
89
115
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
90
- children,
116
+ React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
91
117
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
92
118
  };
93
119
  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: 1x604 */
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_bivb4 {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_pqi91 {
22
+ .popover__inner_bivb4 {
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_bivb4 {
33
+ position: relative;
34
+ z-index: 2;
35
+ overflow-y: auto;
36
+ }
37
+ .popover__arrow_bivb4 {
38
+ z-index: 1;
39
+ }
40
+ .popover__arrow_bivb4: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_bivb4[data-popper-placement='left'] .popover__arrow_bivb4,
52
+ .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4,
53
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='left'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after {
54
62
  top: -7px;
55
63
  }
56
- .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
64
+ .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='right'] .popover__arrow_bivb4,
68
+ .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4,
69
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='right'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after {
70
78
  top: -7px;
71
79
  }
72
- .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
80
+ .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='top'] .popover__arrow_bivb4,
84
+ .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4,
85
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='top'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after {
86
94
  left: -17px;
87
95
  }
88
- .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
96
+ .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4,
100
+ .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4,
101
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4 {
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_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4: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_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after {
102
110
  left: -17px;
103
111
  }
104
- .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
112
+ .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
105
113
  left: 5px;
106
114
  }
107
- .popover__enter_pqi91 .popover__inner_pqi91 {
115
+ .popover__enter_bivb4 .popover__inner_bivb4 {
108
116
  opacity: 0;
109
117
  transform: scale(0.98);
110
118
  }
111
- .popover__enterActive_pqi91 .popover__inner_pqi91 {
119
+ .popover__enterActive_bivb4 .popover__inner_bivb4 {
112
120
  opacity: 1;
113
121
  transform: scale(1);
114
122
  }
115
- .popover__exit_pqi91 .popover__inner_pqi91 {
123
+ .popover__exit_bivb4 .popover__inner_bivb4 {
116
124
  opacity: 1;
117
125
  transform: scale(1);
118
126
  }
119
- .popover__exitActive_pqi91 .popover__inner_pqi91 {
127
+ .popover__exitActive_bivb4 .popover__inner_bivb4 {
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.0",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -24,6 +24,7 @@
24
24
  "@alfalab/core-components-stack": "^3.0.1",
25
25
  "@popperjs/core": "^2.3.3",
26
26
  "classnames": "^2.2.6",
27
+ "popper-max-size-modifier": "^0.2.0",
27
28
  "react-merge-refs": "^1.1.0",
28
29
  "react-popper": "^2.2.5",
29
30
  "react-transition-group": "^4.3.0",
@@ -32,5 +33,5 @@
32
33
  "devDependencies": {
33
34
  "@types/react-transition-group": "^4.2.4"
34
35
  },
35
- "gitHead": "a80a4377703da0cb8fd257612117ef3eb2d9bc42"
36
+ "gitHead": "43754f9b8715fe0bd1c0829be9304d78dd923481"
36
37
  }