@alfalab/core-components-popover 5.3.0 → 5.6.1

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.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.6.0...@alfalab/core-components-popover@5.6.1) (2022-02-15)
+
+
+### Bug Fixes
+
+* **gallery:** update header button's tooltip position ([#979](https://github.com/alfa-laboratory/core-components/issues/979)) ([8e2acfc](https://github.com/alfa-laboratory/core-components/commit/8e2acfcb772cf4d8051c185a3f1caaaf507b5bc9))
+
+
+
+
+
+# [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)
 
 

package/dist/Component.d.ts

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

package/dist/Component.js

@@ -6,7 +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');
 
@@ -14,6 +16,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);
 
 /*! *****************************************************************************
@@ -43,7 +46,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_4qqzo","inner":"popover__inner_4qqzo","arrow":"popover__arrow_4qqzo","enter":"popover__enter_4qqzo","enterActive":"popover__enterActive_4qqzo","exit":"popover__exit_4qqzo","exitActive":"popover__exitActive_4qqzo"};
+var styles = {"component":"popover__component_dvtgo","inner":"popover__inner_dvtgo","scrollableContent":"popover__scrollableContent_dvtgo","arrow":"popover__arrow_dvtgo","arrowShift":"popover__arrowShift_dvtgo","enter":"popover__enter_dvtgo","enterActive":"popover__enterActive_dvtgo","exit":"popover__exit_dvtgo","exitActive":"popover__exitActive_dvtgo"};
 require('./index.css')
 
 var DEFAULT_TRANSITION = {
@@ -55,11 +58,32 @@ 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";
+        }
+    },
+};
+/**
+ * Минимальный размер anchorElement,
+ * при котором возможно смещение стрелочки относительно центра
+ */
+var MIN_ARROW_SHIFT_SIZE = 75;
 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, _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 _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
+    var updatePopperRef = React.useRef();
     var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
@@ -74,12 +98,32 @@ 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 _q = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -94,12 +138,39 @@ var Popover = React.forwardRef(function (_a, ref) {
             update.current = updatePopper;
         }
     });
+    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]);
+    /**
+     * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
+     * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
+     */
+    React.useEffect(function () {
+        var shiftedPosition = position.includes('-start') || position.includes('-end');
+        if (shiftedPosition && referenceElement) {
+            var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
+            var size = position.includes('left') || position.includes('right') ? height : width;
+            if (size >= MIN_ARROW_SHIFT_SIZE) {
+                setArrowShift(true);
+            }
+        }
+    }, [referenceElement, position]);
     var renderContent = function (computedZIndex, style) {
-        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), 
-            // ref={setPopperElement}
-            style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className) }, attributes.popper),
+        var _a, _b;
+        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className, (_a = {},
+                _a[styles.arrowShift] = arrowShift,
+                _a)) }, 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']((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, 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/dist/cssm/Component.d.ts

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

package/dist/cssm/Component.js

@@ -6,7 +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');
@@ -15,6 +17,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);
 
@@ -54,11 +57,32 @@ 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";
+        }
+    },
+};
+/**
+ * Минимальный размер anchorElement,
+ * при котором возможно смещение стрелочки относительно центра
+ */
+var MIN_ARROW_SHIFT_SIZE = 75;
 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, _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 _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
+    var updatePopperRef = React.useRef();
     var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
@@ -73,12 +97,32 @@ 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 _q = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -93,12 +137,39 @@ var Popover = React.forwardRef(function (_a, ref) {
             update.current = updatePopper;
         }
     });
+    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]);
+    /**
+     * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
+     * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
+     */
+    React.useEffect(function () {
+        var shiftedPosition = position.includes('-start') || position.includes('-end');
+        if (shiftedPosition && referenceElement) {
+            var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
+            var size = position.includes('left') || position.includes('right') ? height : width;
+            if (size >= MIN_ARROW_SHIFT_SIZE) {
+                setArrowShift(true);
+            }
+        }
+    }, [referenceElement, position]);
     var renderContent = function (computedZIndex, style) {
-        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), 
-            // ref={setPopperElement}
-            style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className) }, attributes.popper),
+        var _a, _b;
+        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className, (_a = {},
+                _a[styles__default['default'].arrowShift] = arrowShift,
+                _a)) }, 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']((_b = {}, _b[styles__default['default'].scrollableContent] = availableHeight, _b)) }, 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/dist/cssm/index.js

@@ -7,7 +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

@@ -1,12 +1,9 @@
 :root {
     --color-light-bg-primary: #fff;
     --color-light-text-primary: #0b1f35;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :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 */
 
@@ -24,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,
@@ -47,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'].arrowShift .arrow:after {
+    top: -7px;
+}
+.component[data-popper-placement='left-end'].arrowShift .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'].arrowShift .arrow:after {
+    top: -7px;
+}
+.component[data-popper-placement='right-end'].arrowShift .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'].arrowShift .arrow:after {
+    left: -17px;
+}
+.component[data-popper-placement='top-end'].arrowShift .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'].arrowShift .arrow:after {
+    left: -17px;
+}
+.component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
+    left: 5px;
+}
 .enter .inner {
     opacity: 0;
     transform: scale(0.98);

package/dist/esm/Component.d.ts

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