@alfalab/core-components-popover 5.2.0 → 5.6.0

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Features
+
+* **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)
+
+
+
+
+
+# [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)
+
+
+### Features
+
+* **popover:** add useAnchorWidth prop ([#826](https://github.com/alfa-laboratory/core-components/issues/826)) ([8df55c4](https://github.com/alfa-laboratory/core-components/commit/8df55c4c496467c363c5c09c14d1bd08a9709ebf)), closes [#787](https://github.com/alfa-laboratory/core-components/issues/787)
+
+
+
+
+
+# [5.4.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.3.0...@alfalab/core-components-popover@5.4.0) (2021-09-06)
+
+
+### Features
+
+* **tooltip:** update shadow and arrow size/position ([2d40988](https://github.com/alfa-laboratory/core-components/commit/2d40988f3c376c51907aa8a4845ba25c7c43a2f4))
+
+
+
+
+
+# [5.3.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.2.0...@alfalab/core-components-popover@5.3.0) (2021-08-23)
+
+
+### Features
+
+* **tooltip:** add TooltipResponsive,  add `fallbackPlacements` prop ([#780](https://github.com/alfa-laboratory/core-components/issues/780)) ([61d780c](https://github.com/alfa-laboratory/core-components/commit/61d780c750bd9c0331d275f1b12b0512bb3d2049))
+
+
+
+
+
 # [5.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.1.0...@alfalab/core-components-popover@5.2.0) (2021-08-04)
 
 

package/dist/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { CSSProperties, MutableRefObject } from "react";
+import { CSSProperties, MutableRefObject, ReactNode } from "react";
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { BasePlacement, VariationPlacement } from '@popperjs/core';
 type RefElement = HTMLElement | null;
@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */
@@ -24,6 +28,14 @@ type PopoverProps = {
      * Например, если места снизу недостаточно,то он все равно будет показан снизу
      */
     preventFlip?: boolean;
+    /**
+     * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
+     */
+    preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */
@@ -74,6 +86,16 @@ type PopoverProps = {
      * z-index компонента
      */
     zIndex?: number;
+    /**
+     * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
+     * по очереди для каждой позиции из этого списка.
+     * Если не передавать, то поповер открывается в противоположном направлении от переданного position.
+     */
+    fallbackPlacements?: Position[];
+    /**
+     * Контент
+     */
+    children?: ReactNode;
 };
-declare const Popover: React.FC<PopoverProps>;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };

package/dist/Component.js

@@ -6,6 +6,9 @@ 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('@alfalab/core-components-stack');
 var coreComponentsPortal = require('@alfalab/core-components-portal');
 
@@ -13,6 +16,8 @@ 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);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -41,7 +46,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_1wjdh","inner":"popover__inner_1wjdh","arrow":"popover__arrow_1wjdh","enter":"popover__enter_1wjdh","enterActive":"popover__enterActive_1wjdh","exit":"popover__exit_1wjdh","exitActive":"popover__exitActive_1wjdh"};
+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 = {
@@ -53,11 +58,26 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
-var Popover = function (_a) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, _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;
-    var _j = React.useState(anchorElement), referenceElement = _j[0], setReferenceElement = _j[1];
-    var _k = React.useState(null), popperElement = _k[0], setPopperElement = _k[1];
-    var _l = React.useState(null), arrowElement = _l[0], setArrowElement = _l[1];
+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, _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 } }];
         if (withArrow) {
@@ -66,12 +86,38 @@ var Popover = function (_a) {
         if (preventFlip) {
             modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
         }
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: fallbackPlacements } });
+        }
+        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, arrowElement]);
-    var _m = reactPopper.usePopper(referenceElement, popperElement, {
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _m.styles, attributes = _m.attributes, updatePopper = _m.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -81,18 +127,32 @@ var Popover = function (_a) {
         }
     }, [updatePopper, arrowElement, children]);
     React.useEffect(function () {
-        if (update && updatePopper) {
+        if (update && !update.current && updatePopper) {
             // eslint-disable-next-line no-param-reassign
             update.current = updatePopper;
         }
-    }, [updatePopper, update]);
+    });
+    React.useEffect(function () {
+        if (useAnchorWidth) {
+            var observer_1 = new resizeObserver.ResizeObserver(updatePopoverWidth);
+            if (anchorElement) {
+                observer_1.observe(anchorElement);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+        return function () { return ({}); };
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     var renderContent = function (computedZIndex, style) {
-        return (React__default['default'].createElement("div", __assign({ ref: setPopperElement, style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className) }, attributes.popper),
+        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), 
+            // 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)))); }));
-};
+});
 
 exports.Popover = Popover;

package/dist/cssm/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { CSSProperties, MutableRefObject } from "react";
+import { CSSProperties, MutableRefObject, ReactNode } from "react";
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { BasePlacement, VariationPlacement } from '@popperjs/core';
 type RefElement = HTMLElement | null;
@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */
@@ -24,6 +28,14 @@ type PopoverProps = {
      * Например, если места снизу недостаточно,то он все равно будет показан снизу
      */
     preventFlip?: boolean;
+    /**
+     * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
+     */
+    preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */
@@ -74,6 +86,16 @@ type PopoverProps = {
      * z-index компонента
      */
     zIndex?: number;
+    /**
+     * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
+     * по очереди для каждой позиции из этого списка.
+     * Если не передавать, то поповер открывается в противоположном направлении от переданного position.
+     */
+    fallbackPlacements?: Position[];
+    /**
+     * Контент
+     */
+    children?: ReactNode;
 };
-declare const Popover: React.FC<PopoverProps>;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };

package/dist/cssm/Component.js

@@ -6,6 +6,9 @@ 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('@alfalab/core-components-stack/dist/cssm');
 var coreComponentsPortal = require('@alfalab/core-components-portal/dist/cssm');
 var styles = require('./index.module.css');
@@ -14,6 +17,8 @@ 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);
 
 /*! *****************************************************************************
@@ -52,11 +57,26 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles__default['default'].exit,
     exitActive: styles__default['default'].exitActive,
 };
-var Popover = function (_a) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, _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;
-    var _j = React.useState(anchorElement), referenceElement = _j[0], setReferenceElement = _j[1];
-    var _k = React.useState(null), popperElement = _k[0], setPopperElement = _k[1];
-    var _l = React.useState(null), arrowElement = _l[0], setArrowElement = _l[1];
+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, _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 } }];
         if (withArrow) {
@@ -65,12 +85,38 @@ var Popover = function (_a) {
         if (preventFlip) {
             modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
         }
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: fallbackPlacements } });
+        }
+        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, arrowElement]);
-    var _m = reactPopper.usePopper(referenceElement, popperElement, {
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _m.styles, attributes = _m.attributes, updatePopper = _m.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -80,18 +126,32 @@ var Popover = function (_a) {
         }
     }, [updatePopper, arrowElement, children]);
     React.useEffect(function () {
-        if (update && updatePopper) {
+        if (update && !update.current && updatePopper) {
             // eslint-disable-next-line no-param-reassign
             update.current = updatePopper;
         }
-    }, [updatePopper, update]);
+    });
+    React.useEffect(function () {
+        if (useAnchorWidth) {
+            var observer_1 = new resizeObserver.ResizeObserver(updatePopoverWidth);
+            if (anchorElement) {
+                observer_1.observe(anchorElement);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+        return function () { return ({}); };
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     var renderContent = function (computedZIndex, style) {
-        return (React__default['default'].createElement("div", __assign({ ref: setPopperElement, style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className) }, attributes.popper),
+        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), 
+            // 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)))); }));
-};
+});
 
 exports.Popover = Popover;

package/dist/cssm/index.js

@@ -7,6 +7,9 @@ require('react');
 require('classnames');
 require('react-transition-group');
 require('react-popper');
+require('popper-max-size-modifier');
+require('react-merge-refs');
+require('resize-observer');
 require('@alfalab/core-components-stack/dist/cssm');
 require('@alfalab/core-components-portal/dist/cssm');
 require('./index.module.css');

package/dist/cssm/index.module.css

@@ -3,7 +3,7 @@
     --color-light-text-primary: #0b1f35;
 }
 :root {
-    --shadow-l: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24);
+    --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
 
     /* Hard */
 
@@ -21,21 +21,30 @@
 .inner {
     position: relative;
     background-color: var(--color-light-bg-primary);
-    box-shadow: var(--shadow-l);
+    box-shadow: var(--shadow-m);
     border: 1px solid var(--popover-border-color);
     transition-property: opacity, transform;
     transition-timing-function: ease-in-out;
     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;
     position: absolute;
-    width: 10px;
-    height: 10px;
+    width: 12px;
+    height: 12px;
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--popover-border-color);
+    box-sizing: border-box;
     transform: rotate(45deg);
 }
 .component[data-popper-placement='left'] .arrow,
@@ -44,40 +53,64 @@
     right: 5px
 }
 .component[data-popper-placement='left'] .arrow:after, .component[data-popper-placement='left-start'] .arrow:after, .component[data-popper-placement='left-end'] .arrow:after {
-        top: -4px;
+        top: -6px;
         border-bottom: none;
         border-left: none;
     }
+.component[data-popper-placement='left-start'] .arrow:after {
+    top: -7px;
+}
+.component[data-popper-placement='left-end'] .arrow:after {
+    top: -5px;
+}
 .component[data-popper-placement='right'] .arrow,
 .component[data-popper-placement='right-start'] .arrow,
 .component[data-popper-placement='right-end'] .arrow {
-    left: -6px
+    left: -7px
 }
 .component[data-popper-placement='right'] .arrow:after, .component[data-popper-placement='right-start'] .arrow:after, .component[data-popper-placement='right-end'] .arrow:after {
-        top: -4px;
+        top: -6px;
         border-top: none;
         border-right: none;
     }
+.component[data-popper-placement='right-start'] .arrow:after {
+    top: -7px;
+}
+.component[data-popper-placement='right-end'] .arrow:after {
+    top: -5px;
+}
 .component[data-popper-placement='top'] .arrow,
 .component[data-popper-placement='top-start'] .arrow,
 .component[data-popper-placement='top-end'] .arrow {
     bottom: 5px
 }
 .component[data-popper-placement='top'] .arrow:after, .component[data-popper-placement='top-start'] .arrow:after, .component[data-popper-placement='top-end'] .arrow:after {
-        left: -4px;
+        left: -6px;
         border-top: none;
         border-left: none;
     }
+.component[data-popper-placement='top-start'] .arrow:after {
+    left: -17px;
+}
+.component[data-popper-placement='top-end'] .arrow:after {
+    left: 5px;
+}
 .component[data-popper-placement='bottom'] .arrow,
 .component[data-popper-placement='bottom-start'] .arrow,
 .component[data-popper-placement='bottom-end'] .arrow {
-    top: -6px
+    top: -7px
 }
 .component[data-popper-placement='bottom'] .arrow:after, .component[data-popper-placement='bottom-start'] .arrow:after, .component[data-popper-placement='bottom-end'] .arrow:after {
-        left: -4px;
+        left: -6px;
         border-bottom: none;
         border-right: none;
     }
+.component[data-popper-placement='bottom-start'] .arrow:after {
+    left: -17px;
+}
+.component[data-popper-placement='bottom-end'] .arrow:after {
+    left: 5px;
+}
 .enter .inner {
     opacity: 0;
     transform: scale(0.98);

package/dist/esm/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { CSSProperties, MutableRefObject } from "react";
+import { CSSProperties, MutableRefObject, ReactNode } from "react";
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { BasePlacement, VariationPlacement } from '@popperjs/core';
 type RefElement = HTMLElement | null;
@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */
@@ -24,6 +28,14 @@ type PopoverProps = {
      * Например, если места снизу недостаточно,то он все равно будет показан снизу
      */
     preventFlip?: boolean;
+    /**
+     * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
+     */
+    preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */
@@ -74,6 +86,16 @@ type PopoverProps = {
      * z-index компонента
      */
     zIndex?: number;
+    /**
+     * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
+     * по очереди для каждой позиции из этого списка.
+     * Если не передавать, то поповер открывается в противоположном направлении от переданного position.
+     */
+    fallbackPlacements?: Position[];
+    /**
+     * Контент
+     */
+    children?: ReactNode;
 };
-declare const Popover: React.FC<PopoverProps>;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };