@alfalab/core-components 21.3.2 → 22.2.0

package/plate/index.css

@@ -1,4 +1,4 @@
-/* hash: 1he7j */
+/* hash: 1pihc */
 :root {
     --color-static-status-green: #13a463;
     --color-static-status-grey: #6d7986;
@@ -46,7 +46,7 @@
     --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_1t0td {
+.plate__component_b53a3 {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -59,51 +59,51 @@
     outline: none;
     cursor: pointer;
 }
-.plate__component_1t0td * {
+.plate__component_b53a3 * {
     box-sizing: border-box;
 }
-.plate__focused_1t0td {
+.plate__focused_b53a3 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_1t0td {
+.plate__inner_b53a3 {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__common_1t0td {
+.plate__common_b53a3 {
     background-color: var(--color-light-bg-secondary);
     border-color: var(--color-static-status-grey);
 }
-.plate__negative_1t0td {
+.plate__negative_b53a3 {
     background-color: var(--color-light-bg-negative-muted);
     border-color: var(--color-static-status-red);
 }
-.plate__positive_1t0td {
+.plate__positive_b53a3 {
     background-color: var(--color-light-bg-positive-muted);
     border-color: var(--color-static-status-green);
 }
-.plate__attention_1t0td {
+.plate__attention_b53a3 {
     background-color: var(--color-light-bg-attention-muted);
     border-color: var(--color-static-status-orange);
 }
-.plate__isHidden_1t0td {
+.plate__isHidden_b53a3 {
     display: none;
 }
-.plate__leftAddons_1t0td {
+.plate__leftAddons_b53a3 {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-s);
 }
-.plate__title_1t0td {
+.plate__title_b53a3 {
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
 
     word-break: break-word;
 }
-.plate__content_1t0td {
+.plate__content_b53a3 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -115,23 +115,23 @@
     margin: var(--gap-2xs-neg);
     cursor: default
 }
-.plate__content_1t0td.plate__isFolded_1t0td {
+.plate__content_b53a3.plate__isFolded_b53a3 {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_1t0td {
+.plate__contentContainer_b53a3 {
     flex: 1;
     max-width: 586px;
     margin-right: auto
 }
-.plate__contentContainer_1t0td.plate__withoutTitle_1t0td {
+.plate__contentContainer_b53a3.plate__withoutTitle_b53a3 {
         padding-top: var(--gap-3xs);
     }
-.plate__title_1t0td + .plate__content_1t0td > .plate__contentInner_1t0td {
+.plate__title_b53a3 + .plate__content_b53a3 > .plate__contentInner_b53a3 {
     padding-top: var(--gap-xs);
 }
-.plate__closer_1t0td,
-.plate__folder_1t0td {
+.plate__closer_b53a3,
+.plate__folder_b53a3 {
     display: block;
     height: 24px;
     width: 24px;
@@ -140,29 +140,29 @@
     cursor: pointer;
     margin-left: var(--gap-m)
 }
-.plate__closer_1t0td:hover, .plate__folder_1t0td:hover {
+.plate__closer_b53a3:hover, .plate__folder_b53a3:hover {
         opacity: 0.7;
     }
-.plate__closer_1t0td:active, .plate__folder_1t0td:active {
+.plate__closer_b53a3:active, .plate__folder_b53a3:active {
         opacity: 0.5;
     }
-.plate__closer_1t0td {
+.plate__closer_b53a3 {
     background: var(--plate-closer-icon) center no-repeat;
 }
-.plate__folder_1t0td {
+.plate__folder_b53a3 {
     background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_1t0td.plate__isFolded_1t0td {
+.plate__folder_b53a3.plate__isFolded_b53a3 {
         transform: rotate(0deg);
     }
-.plate__buttons_1t0td {
+.plate__buttons_b53a3 {
     margin-top: var(--gap-xl);
 }
-.plate__button_1t0td {
+.plate__button_b53a3 {
     margin-right: var(--gap-s)
 }
-.plate__button_1t0td:last-child {
+.plate__button_b53a3:last-child {
         margin-right: 0;
     }

package/plate/modern/Component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { Button } from '../../button/modern';
 
-var styles = {"component":"plate__component_1t0td","focused":"plate__focused_1t0td","inner":"plate__inner_1t0td","common":"plate__common_1t0td","negative":"plate__negative_1t0td","positive":"plate__positive_1t0td","attention":"plate__attention_1t0td","isHidden":"plate__isHidden_1t0td","leftAddons":"plate__leftAddons_1t0td","title":"plate__title_1t0td","content":"plate__content_1t0td","isFolded":"plate__isFolded_1t0td","contentContainer":"plate__contentContainer_1t0td","withoutTitle":"plate__withoutTitle_1t0td","contentInner":"plate__contentInner_1t0td","closer":"plate__closer_1t0td","folder":"plate__folder_1t0td","buttons":"plate__buttons_1t0td","button":"plate__button_1t0td"};
+var styles = {"component":"plate__component_b53a3","focused":"plate__focused_b53a3","inner":"plate__inner_b53a3","common":"plate__common_b53a3","negative":"plate__negative_b53a3","positive":"plate__positive_b53a3","attention":"plate__attention_b53a3","isHidden":"plate__isHidden_b53a3","leftAddons":"plate__leftAddons_b53a3","title":"plate__title_b53a3","content":"plate__content_b53a3","isFolded":"plate__isFolded_b53a3","contentContainer":"plate__contentContainer_b53a3","withoutTitle":"plate__withoutTitle_b53a3","contentInner":"plate__contentInner_b53a3","closer":"plate__closer_b53a3","folder":"plate__folder_b53a3","buttons":"plate__buttons_b53a3","button":"plate__button_b53a3"};
 require('./index.css');
 
 const Plate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: foldedProp, defaultFolded = true, leftAddons, children, buttons = [], title, view = 'common', className, buttonsClassName, contentClassName, dataTestId, onClick, onClose, onToggle, }, ref) => {

package/plate/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1he7j */
+/* hash: 1pihc */
 :root {
     --color-static-status-green: #13a463;
     --color-static-status-grey: #6d7986;
@@ -46,7 +46,7 @@
     --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_1t0td {
+.plate__component_b53a3 {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -59,51 +59,51 @@
     outline: none;
     cursor: pointer;
 }
-.plate__component_1t0td * {
+.plate__component_b53a3 * {
     box-sizing: border-box;
 }
-.plate__focused_1t0td {
+.plate__focused_b53a3 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_1t0td {
+.plate__inner_b53a3 {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__common_1t0td {
+.plate__common_b53a3 {
     background-color: var(--color-light-bg-secondary);
     border-color: var(--color-static-status-grey);
 }
-.plate__negative_1t0td {
+.plate__negative_b53a3 {
     background-color: var(--color-light-bg-negative-muted);
     border-color: var(--color-static-status-red);
 }
-.plate__positive_1t0td {
+.plate__positive_b53a3 {
     background-color: var(--color-light-bg-positive-muted);
     border-color: var(--color-static-status-green);
 }
-.plate__attention_1t0td {
+.plate__attention_b53a3 {
     background-color: var(--color-light-bg-attention-muted);
     border-color: var(--color-static-status-orange);
 }
-.plate__isHidden_1t0td {
+.plate__isHidden_b53a3 {
     display: none;
 }
-.plate__leftAddons_1t0td {
+.plate__leftAddons_b53a3 {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-s);
 }
-.plate__title_1t0td {
+.plate__title_b53a3 {
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
 
     word-break: break-word;
 }
-.plate__content_1t0td {
+.plate__content_b53a3 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -115,23 +115,23 @@
     margin: var(--gap-2xs-neg);
     cursor: default
 }
-.plate__content_1t0td.plate__isFolded_1t0td {
+.plate__content_b53a3.plate__isFolded_b53a3 {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_1t0td {
+.plate__contentContainer_b53a3 {
     flex: 1;
     max-width: 586px;
     margin-right: auto
 }
-.plate__contentContainer_1t0td.plate__withoutTitle_1t0td {
+.plate__contentContainer_b53a3.plate__withoutTitle_b53a3 {
         padding-top: var(--gap-3xs);
     }
-.plate__title_1t0td + .plate__content_1t0td > .plate__contentInner_1t0td {
+.plate__title_b53a3 + .plate__content_b53a3 > .plate__contentInner_b53a3 {
     padding-top: var(--gap-xs);
 }
-.plate__closer_1t0td,
-.plate__folder_1t0td {
+.plate__closer_b53a3,
+.plate__folder_b53a3 {
     display: block;
     height: 24px;
     width: 24px;
@@ -140,29 +140,29 @@
     cursor: pointer;
     margin-left: var(--gap-m)
 }
-.plate__closer_1t0td:hover, .plate__folder_1t0td:hover {
+.plate__closer_b53a3:hover, .plate__folder_b53a3:hover {
         opacity: 0.7;
     }
-.plate__closer_1t0td:active, .plate__folder_1t0td:active {
+.plate__closer_b53a3:active, .plate__folder_b53a3:active {
         opacity: 0.5;
     }
-.plate__closer_1t0td {
+.plate__closer_b53a3 {
     background: var(--plate-closer-icon) center no-repeat;
 }
-.plate__folder_1t0td {
+.plate__folder_b53a3 {
     background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_1t0td.plate__isFolded_1t0td {
+.plate__folder_b53a3.plate__isFolded_b53a3 {
         transform: rotate(0deg);
     }
-.plate__buttons_1t0td {
+.plate__buttons_b53a3 {
     margin-top: var(--gap-xl);
 }
-.plate__button_1t0td {
+.plate__button_b53a3 {
     margin-right: var(--gap-s)
 }
-.plate__button_1t0td:last-child {
+.plate__button_b53a3:last-child {
         margin-right: 0;
     }

package/popover/Component.d.ts

@@ -32,6 +32,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/popover/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var reactTransitionGroup = require('react-transition-group');
 var reactPopper = require('react-popper');
+var maxSize = require('popper-max-size-modifier');
 var mergeRefs = require('react-merge-refs');
 var resizeObserver = require('resize-observer');
 var coreComponentsStack = require('../stack');
@@ -13,6 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
 /*! *****************************************************************************
@@ -42,7 +44,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_goej3","inner":"popover__inner_goej3","arrow":"popover__arrow_goej3","enter":"popover__enter_goej3","enterActive":"popover__enterActive_goej3","exit":"popover__exit_goej3","exitActive":"popover__exitActive_goej3"};
+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"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {
@@ -54,11 +56,25 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
+var availableHieghtModifier = {
+    name: 'availableHeight',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn: function (_a) {
+        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
+        var height = modifiersData.maxSize.height;
+        var content = popper.querySelector("." + styles.scrollableContent);
+        if (content && !content.style.maxHeight) {
+            content.style.maxHeight = height + "px";
+        }
+    },
+};
 var Popover = React.forwardRef(function (_a, ref) {
-    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;
-    var _k = React.useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
-    var _l = React.useState(null), popperElement = _l[0], setPopperElement = _l[1];
-    var _m = React.useState(null), arrowElement = _m[0], setArrowElement = _m[1];
+    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;
+    var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
+    var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
+    var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
     var updatePopperRef = React.useRef();
     var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -74,12 +90,24 @@ var Popover = React.forwardRef(function (_a, ref) {
         if (preventOverflow) {
             modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
+        if (availableHeight) {
+            modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
+            modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
+        }
         return modifiers;
-    }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
-    var _o = reactPopper.usePopper(referenceElement, popperElement, {
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
@@ -119,7 +147,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             // 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) }, attributes.popper),
             React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
-                children,
+                React__default['default'].createElement("div", { className: cn__default['default'](availableHeight ? styles.scrollableContent : '') }, children),
                 withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles.arrow, arrowClassName) })))));
     };
     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/popover/cssm/Component.d.ts

@@ -32,6 +32,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/popover/cssm/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var reactTransitionGroup = require('react-transition-group');
 var reactPopper = require('react-popper');
+var maxSize = require('popper-max-size-modifier');
 var mergeRefs = require('react-merge-refs');
 var resizeObserver = require('resize-observer');
 var coreComponentsStack = require('../../stack/cssm');
@@ -14,6 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
@@ -53,11 +55,25 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles__default['default'].exit,
     exitActive: styles__default['default'].exitActive,
 };
+var availableHieghtModifier = {
+    name: 'availableHeight',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn: function (_a) {
+        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
+        var height = modifiersData.maxSize.height;
+        var content = popper.querySelector("." + styles__default['default'].scrollableContent);
+        if (content && !content.style.maxHeight) {
+            content.style.maxHeight = height + "px";
+        }
+    },
+};
 var Popover = React.forwardRef(function (_a, ref) {
-    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;
-    var _k = React.useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
-    var _l = React.useState(null), popperElement = _l[0], setPopperElement = _l[1];
-    var _m = React.useState(null), arrowElement = _m[0], setArrowElement = _m[1];
+    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;
+    var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
+    var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
+    var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
     var updatePopperRef = React.useRef();
     var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -73,12 +89,24 @@ var Popover = React.forwardRef(function (_a, ref) {
         if (preventOverflow) {
             modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
+        if (availableHeight) {
+            modifiers.push(__assign(__assign({}, maxSize__default['default']), { options: {} }));
+            modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
+        }
         return modifiers;
-    }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
-    var _o = reactPopper.usePopper(referenceElement, popperElement, {
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
@@ -118,7 +146,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             // 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) }, attributes.popper),
             React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].inner, popperClassName), style: style },
-                children,
+                React__default['default'].createElement("div", { className: cn__default['default'](availableHeight ? styles__default['default'].scrollableContent : '') }, children),
                 withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles__default['default'].arrow, arrowClassName) })))));
     };
     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/popover/cssm/index.js

@@ -5,6 +5,7 @@ require('react');
 require('classnames');
 require('react-transition-group');
 require('react-popper');
+require('popper-max-size-modifier');
 require('react-merge-refs');
 require('resize-observer');
 require('../../stack/cssm');

package/popover/cssm/index.module.css

@@ -28,6 +28,14 @@
     box-sizing: border-box;
     will-change: transform;
 }
+.scrollableContent {
+    position: relative;
+    z-index: 2;
+    overflow-y: auto;
+}
+.arrow {
+    z-index: 1;
+}
 .arrow:after {
     content: '';
     display: block;

package/popover/esm/Component.d.ts

@@ -32,6 +32,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/popover/esm/Component.js

@@ -2,6 +2,7 @@ import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'rea
 import cn from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { usePopper } from 'react-popper';
+import maxSize from 'popper-max-size-modifier';
 import mergeRefs from 'react-merge-refs';
 import { ResizeObserver } from 'resize-observer';
 import { stackingOrder, Stack } from '../../stack/esm';
@@ -34,7 +35,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_goej3","inner":"popover__inner_goej3","arrow":"popover__arrow_goej3","enter":"popover__enter_goej3","enterActive":"popover__enterActive_goej3","exit":"popover__exit_goej3","exitActive":"popover__exitActive_goej3"};
+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"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {
@@ -46,11 +47,25 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
+var availableHieghtModifier = {
+    name: 'availableHeight',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn: function (_a) {
+        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
+        var height = modifiersData.maxSize.height;
+        var content = popper.querySelector("." + styles.scrollableContent);
+        if (content && !content.style.maxHeight) {
+            content.style.maxHeight = height + "px";
+        }
+    },
+};
 var Popover = forwardRef(function (_a, ref) {
-    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;
-    var _k = useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
-    var _l = useState(null), popperElement = _l[0], setPopperElement = _l[1];
-    var _m = useState(null), arrowElement = _m[0], setArrowElement = _m[1];
+    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;
+    var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
+    var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
+    var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
     var updatePopperRef = useRef();
     var getModifiers = useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -66,12 +81,24 @@ var Popover = forwardRef(function (_a, ref) {
         if (preventOverflow) {
             modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
+        if (availableHeight) {
+            modifiers.push(__assign(__assign({}, maxSize), { options: {} }));
+            modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
+        }
         return modifiers;
-    }, [offset, withArrow, preventFlip, fallbackPlacements, preventOverflow, arrowElement]);
-    var _o = usePopper(referenceElement, popperElement, {
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
@@ -111,7 +138,7 @@ var Popover = forwardRef(function (_a, ref) {
             // 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) }, attributes.popper),
             React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
-                children,
+                React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
                 withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
     };
     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)))); }));