@alfalab/core-components 21.3.3 → 22.3.0

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_n2xh0","inner":"popover__inner_n2xh0","arrow":"popover__arrow_n2xh0","enter":"popover__enter_n2xh0","enterActive":"popover__enterActive_n2xh0","exit":"popover__exit_n2xh0","exitActive":"popover__exitActive_n2xh0"};
+var styles = {"component":"popover__component_15edr","inner":"popover__inner_15edr","scrollableContent":"popover__scrollableContent_15edr","arrow":"popover__arrow_15edr","enter":"popover__enter_15edr","enterActive":"popover__enterActive_15edr","exit":"popover__exit_15edr","exitActive":"popover__exitActive_15edr"};
 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_n2xh0","inner":"popover__inner_n2xh0","arrow":"popover__arrow_n2xh0","enter":"popover__enter_n2xh0","enterActive":"popover__enterActive_n2xh0","exit":"popover__exit_n2xh0","exitActive":"popover__exitActive_n2xh0"};
+var styles = {"component":"popover__component_15edr","inner":"popover__inner_15edr","scrollableContent":"popover__scrollableContent_15edr","arrow":"popover__arrow_15edr","enter":"popover__enter_15edr","enterActive":"popover__enterActive_15edr","exit":"popover__exit_15edr","exitActive":"popover__exitActive_15edr"};
 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)))); }));

package/popover/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1x604 */
+/* hash: 5ddm6 */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_n2xh0 {
+.popover__component_15edr {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_n2xh0 {
+.popover__inner_15edr {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,7 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__arrow_n2xh0:after {
+.popover__scrollableContent_15edr {
+    position: relative;
+    z-index: 2;
+    overflow-y: auto;
+}
+.popover__arrow_15edr {
+    z-index: 1;
+}
+.popover__arrow_15edr:after {
     content: '';
     display: block;
     position: absolute;
@@ -40,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_n2xh0[data-popper-placement='left'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='left-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='left-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='left'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='left-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='left-end'] .popover__arrow_15edr {
     right: 5px
 }
-.popover__component_n2xh0[data-popper-placement='left'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='left-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='left-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='left'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='left-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='left-end'] .popover__arrow_15edr:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_n2xh0[data-popper-placement='left-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='left-start'] .popover__arrow_15edr:after {
     top: -7px;
 }
-.popover__component_n2xh0[data-popper-placement='left-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='left-end'] .popover__arrow_15edr:after {
     top: -5px;
 }
-.popover__component_n2xh0[data-popper-placement='right'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='right-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='right-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='right'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='right-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='right-end'] .popover__arrow_15edr {
     left: -7px
 }
-.popover__component_n2xh0[data-popper-placement='right'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='right-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='right-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='right'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='right-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='right-end'] .popover__arrow_15edr:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_n2xh0[data-popper-placement='right-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='right-start'] .popover__arrow_15edr:after {
     top: -7px;
 }
-.popover__component_n2xh0[data-popper-placement='right-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='right-end'] .popover__arrow_15edr:after {
     top: -5px;
 }
-.popover__component_n2xh0[data-popper-placement='top'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='top-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='top-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='top'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='top-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='top-end'] .popover__arrow_15edr {
     bottom: 5px
 }
-.popover__component_n2xh0[data-popper-placement='top'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='top-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='top-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='top'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='top-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='top-end'] .popover__arrow_15edr:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_n2xh0[data-popper-placement='top-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='top-start'] .popover__arrow_15edr:after {
     left: -17px;
 }
-.popover__component_n2xh0[data-popper-placement='top-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='top-end'] .popover__arrow_15edr:after {
     left: 5px;
 }
-.popover__component_n2xh0[data-popper-placement='bottom'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='bottom-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='bottom-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='bottom'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='bottom-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='bottom-end'] .popover__arrow_15edr {
     top: -7px
 }
-.popover__component_n2xh0[data-popper-placement='bottom'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='bottom-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='bottom-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='bottom'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='bottom-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='bottom-end'] .popover__arrow_15edr:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_n2xh0[data-popper-placement='bottom-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='bottom-start'] .popover__arrow_15edr:after {
     left: -17px;
 }
-.popover__component_n2xh0[data-popper-placement='bottom-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='bottom-end'] .popover__arrow_15edr:after {
     left: 5px;
 }
-.popover__enter_n2xh0 .popover__inner_n2xh0 {
+.popover__enter_15edr .popover__inner_15edr {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_n2xh0 .popover__inner_n2xh0 {
+.popover__enterActive_15edr .popover__inner_15edr {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_n2xh0 .popover__inner_n2xh0 {
+.popover__exit_15edr .popover__inner_15edr {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_n2xh0 .popover__inner_n2xh0 {
+.popover__exitActive_15edr .popover__inner_15edr {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/esm/index.js

@@ -2,6 +2,7 @@ import 'react';
 import 'classnames';
 import 'react-transition-group';
 import 'react-popper';
+import 'popper-max-size-modifier';
 import 'react-merge-refs';
 import 'resize-observer';
 import '../../stack/esm';

package/popover/index.css

@@ -1,4 +1,4 @@
-/* hash: 1x604 */
+/* hash: 5ddm6 */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_n2xh0 {
+.popover__component_15edr {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_n2xh0 {
+.popover__inner_15edr {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,7 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__arrow_n2xh0:after {
+.popover__scrollableContent_15edr {
+    position: relative;
+    z-index: 2;
+    overflow-y: auto;
+}
+.popover__arrow_15edr {
+    z-index: 1;
+}
+.popover__arrow_15edr:after {
     content: '';
     display: block;
     position: absolute;
@@ -40,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_n2xh0[data-popper-placement='left'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='left-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='left-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='left'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='left-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='left-end'] .popover__arrow_15edr {
     right: 5px
 }
-.popover__component_n2xh0[data-popper-placement='left'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='left-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='left-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='left'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='left-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='left-end'] .popover__arrow_15edr:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_n2xh0[data-popper-placement='left-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='left-start'] .popover__arrow_15edr:after {
     top: -7px;
 }
-.popover__component_n2xh0[data-popper-placement='left-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='left-end'] .popover__arrow_15edr:after {
     top: -5px;
 }
-.popover__component_n2xh0[data-popper-placement='right'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='right-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='right-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='right'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='right-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='right-end'] .popover__arrow_15edr {
     left: -7px
 }
-.popover__component_n2xh0[data-popper-placement='right'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='right-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='right-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='right'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='right-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='right-end'] .popover__arrow_15edr:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_n2xh0[data-popper-placement='right-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='right-start'] .popover__arrow_15edr:after {
     top: -7px;
 }
-.popover__component_n2xh0[data-popper-placement='right-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='right-end'] .popover__arrow_15edr:after {
     top: -5px;
 }
-.popover__component_n2xh0[data-popper-placement='top'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='top-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='top-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='top'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='top-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='top-end'] .popover__arrow_15edr {
     bottom: 5px
 }
-.popover__component_n2xh0[data-popper-placement='top'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='top-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='top-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='top'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='top-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='top-end'] .popover__arrow_15edr:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_n2xh0[data-popper-placement='top-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='top-start'] .popover__arrow_15edr:after {
     left: -17px;
 }
-.popover__component_n2xh0[data-popper-placement='top-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='top-end'] .popover__arrow_15edr:after {
     left: 5px;
 }
-.popover__component_n2xh0[data-popper-placement='bottom'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='bottom-start'] .popover__arrow_n2xh0,
-.popover__component_n2xh0[data-popper-placement='bottom-end'] .popover__arrow_n2xh0 {
+.popover__component_15edr[data-popper-placement='bottom'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='bottom-start'] .popover__arrow_15edr,
+.popover__component_15edr[data-popper-placement='bottom-end'] .popover__arrow_15edr {
     top: -7px
 }
-.popover__component_n2xh0[data-popper-placement='bottom'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='bottom-start'] .popover__arrow_n2xh0:after, .popover__component_n2xh0[data-popper-placement='bottom-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='bottom'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='bottom-start'] .popover__arrow_15edr:after, .popover__component_15edr[data-popper-placement='bottom-end'] .popover__arrow_15edr:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_n2xh0[data-popper-placement='bottom-start'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='bottom-start'] .popover__arrow_15edr:after {
     left: -17px;
 }
-.popover__component_n2xh0[data-popper-placement='bottom-end'] .popover__arrow_n2xh0:after {
+.popover__component_15edr[data-popper-placement='bottom-end'] .popover__arrow_15edr:after {
     left: 5px;
 }
-.popover__enter_n2xh0 .popover__inner_n2xh0 {
+.popover__enter_15edr .popover__inner_15edr {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_n2xh0 .popover__inner_n2xh0 {
+.popover__enterActive_15edr .popover__inner_15edr {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_n2xh0 .popover__inner_n2xh0 {
+.popover__exit_15edr .popover__inner_15edr {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_n2xh0 .popover__inner_n2xh0 {
+.popover__exitActive_15edr .popover__inner_15edr {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/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');