@alfalab/core-components-popover 6.2.0 → 6.2.2

package/Component.d.ts

@@ -25,7 +25,7 @@ type PopoverProps = {
     position?: Position;
     /**
      * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     * Например, если места снизу недостаточно, то он все равно будет показан снизу
      */
     preventFlip?: boolean;
     /**

package/Component.js

@@ -21,7 +21,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
 
-var styles = {"component":"popover__component_1btnx","inner":"popover__inner_1btnx","scrollableContent":"popover__scrollableContent_1btnx","arrow":"popover__arrow_1btnx","arrowShift":"popover__arrowShift_1btnx","enter":"popover__enter_1btnx","enterActive":"popover__enterActive_1btnx","exit":"popover__exit_1btnx","exitActive":"popover__exitActive_1btnx"};
+var styles = {"component":"popover__component_trlps","inner":"popover__inner_trlps","scrollableContent":"popover__scrollableContent_trlps","arrow":"popover__arrow_trlps","enter":"popover__enter_trlps","enterActive":"popover__enterActive_trlps","exit":"popover__exit_trlps","exitActive":"popover__exitActive_trlps"};
 require('./index.css')
 
 var DEFAULT_TRANSITION = {
@@ -47,24 +47,43 @@ var availableHieghtModifier = {
         }
     },
 };
-/**
- * Минимальный размер anchorElement,
- * при котором возможно смещение стрелочки относительно центра
- */
-var MIN_ARROW_SHIFT_SIZE = 75;
+var DEFAULT_OFFSET = [0, 0];
+// Минимальное расстояние стрелки до края поповера
+var MIN_DISTANCE_TO_EDGE = 24;
+function getArrowPadding(_a) {
+    var placement = _a.placement;
+    if (placement === 'right-end' || placement === 'left-end') {
+        return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
+    }
+    if (placement === 'top-start' || placement === 'bottom-start') {
+        return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
+    }
+    if (placement === 'right-start' || placement === 'left-start') {
+        return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
+    }
+    if (placement === 'top-end' || placement === 'bottom-end') {
+        return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
+    }
+    return 0;
+}
 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 ? "".concat(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 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 ? DEFAULT_OFFSET : _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 ? "".concat(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 popperRef = React.useRef(null);
     var innerRef = React.useRef(null);
     var popperModifiers = React.useMemo(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
-            modifiers.push({ name: 'arrow', options: { element: arrowElement } });
+            modifiers.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding: getArrowPadding,
+                },
+            });
         }
         if (preventFlip) {
             modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -89,10 +108,10 @@ var Popover = React.forwardRef(function (_a, ref) {
         availableHeight,
         arrowElement,
     ]);
-    var _q = reactPopper.usePopper(referenceElement, popperElement, {
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: popperModifiers,
-    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
@@ -124,28 +143,12 @@ var Popover = React.forwardRef(function (_a, ref) {
         }
         return function () { return ({}); };
     }, [anchorElement, 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) {
-        var _a, _b;
-        var _c;
-        return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className, (_a = {},
-                _a[styles.arrowShift] = arrowShift,
-                _a)) }, attributes.popper),
+        var _a;
+        var _b;
+        return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "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), ref: innerRef },
-                React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
+                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, 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, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
@@ -158,5 +161,6 @@ var Popover = React.forwardRef(function (_a, ref) {
             (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
         } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
 });
+Popover.displayName = 'Popover';
 
 exports.Popover = Popover;

package/cssm/Component.d.ts

@@ -25,7 +25,7 @@ type PopoverProps = {
     position?: Position;
     /**
      * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     * Например, если места снизу недостаточно, то он все равно будет показан снизу
      */
     preventFlip?: boolean;
     /**

package/cssm/Component.js

@@ -46,24 +46,43 @@ var availableHieghtModifier = {
         }
     },
 };
-/**
- * Минимальный размер anchorElement,
- * при котором возможно смещение стрелочки относительно центра
- */
-var MIN_ARROW_SHIFT_SIZE = 75;
+var DEFAULT_OFFSET = [0, 0];
+// Минимальное расстояние стрелки до края поповера
+var MIN_DISTANCE_TO_EDGE = 24;
+function getArrowPadding(_a) {
+    var placement = _a.placement;
+    if (placement === 'right-end' || placement === 'left-end') {
+        return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
+    }
+    if (placement === 'top-start' || placement === 'bottom-start') {
+        return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
+    }
+    if (placement === 'right-start' || placement === 'left-start') {
+        return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
+    }
+    if (placement === 'top-end' || placement === 'bottom-end') {
+        return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
+    }
+    return 0;
+}
 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 ? "".concat(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 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 ? DEFAULT_OFFSET : _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 ? "".concat(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 popperRef = React.useRef(null);
     var innerRef = React.useRef(null);
     var popperModifiers = React.useMemo(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
-            modifiers.push({ name: 'arrow', options: { element: arrowElement } });
+            modifiers.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding: getArrowPadding,
+                },
+            });
         }
         if (preventFlip) {
             modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -88,10 +107,10 @@ var Popover = React.forwardRef(function (_a, ref) {
         availableHeight,
         arrowElement,
     ]);
-    var _q = reactPopper.usePopper(referenceElement, popperElement, {
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: popperModifiers,
-    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
@@ -123,28 +142,12 @@ var Popover = React.forwardRef(function (_a, ref) {
         }
         return function () { return ({}); };
     }, [anchorElement, 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) {
-        var _a, _b;
-        var _c;
-        return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className, (_a = {},
-                _a[styles__default.default.arrowShift] = arrowShift,
-                _a)) }, attributes.popper),
+        var _a;
+        var _b;
+        return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "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), ref: innerRef },
-                React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles__default.default.scrollableContent] = availableHeight, _b)) }, children),
+                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles__default.default.scrollableContent] = availableHeight, _a)) }, 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, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
@@ -157,5 +160,6 @@ var Popover = React.forwardRef(function (_a, ref) {
             (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
         } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
 });
+Popover.displayName = 'Popover';
 
 exports.Popover = Popover;

package/cssm/index.js

@@ -3,18 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('tslib');
-require('react');
-require('react-merge-refs');
-require('react-popper');
-require('react-transition-group');
-require('@juggle/resize-observer');
-require('classnames');
-require('popper-max-size-modifier');
-require('@alfalab/core-components-portal/cssm');
-require('@alfalab/core-components-stack/cssm');
-require('@alfalab/hooks');
-require('./index.module.css');
 
 
 

package/cssm/index.module.css

@@ -1,7 +1,7 @@
-:root {
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
-    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -53,11 +53,7 @@
         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'] .arrow,
 .component[data-popper-placement='right-start'] .arrow,
 .component[data-popper-placement='right-end'] .arrow {
     left: -7px
@@ -65,11 +61,7 @@
         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'] .arrow,
 .component[data-popper-placement='top-start'] .arrow,
 .component[data-popper-placement='top-end'] .arrow {
     bottom: 5px
@@ -77,11 +69,7 @@
         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'] .arrow,
 .component[data-popper-placement='bottom-start'] .arrow,
 .component[data-popper-placement='bottom-end'] .arrow {
     top: -7px
@@ -89,11 +77,7 @@
         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 {
+    } .enter .inner {
     opacity: 0;
     transform: scale(0.98);
 } .enterActive .inner {

package/esm/Component.d.ts

@@ -25,7 +25,7 @@ type PopoverProps = {
     position?: Position;
     /**
      * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     * Например, если места снизу недостаточно, то он все равно будет показан снизу
      */
     preventFlip?: boolean;
     /**

package/esm/Component.js

@@ -10,7 +10,7 @@ import { Portal } from '@alfalab/core-components-portal/esm';
 import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 
-var styles = {"component":"popover__component_1btnx","inner":"popover__inner_1btnx","scrollableContent":"popover__scrollableContent_1btnx","arrow":"popover__arrow_1btnx","arrowShift":"popover__arrowShift_1btnx","enter":"popover__enter_1btnx","enterActive":"popover__enterActive_1btnx","exit":"popover__exit_1btnx","exitActive":"popover__exitActive_1btnx"};
+var styles = {"component":"popover__component_trlps","inner":"popover__inner_trlps","scrollableContent":"popover__scrollableContent_trlps","arrow":"popover__arrow_trlps","enter":"popover__enter_trlps","enterActive":"popover__enterActive_trlps","exit":"popover__exit_trlps","exitActive":"popover__exitActive_trlps"};
 require('./index.css')
 
 var DEFAULT_TRANSITION = {
@@ -36,24 +36,43 @@ var availableHieghtModifier = {
         }
     },
 };
-/**
- * Минимальный размер anchorElement,
- * при котором возможно смещение стрелочки относительно центра
- */
-var MIN_ARROW_SHIFT_SIZE = 75;
+var DEFAULT_OFFSET = [0, 0];
+// Минимальное расстояние стрелки до края поповера
+var MIN_DISTANCE_TO_EDGE = 24;
+function getArrowPadding(_a) {
+    var placement = _a.placement;
+    if (placement === 'right-end' || placement === 'left-end') {
+        return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
+    }
+    if (placement === 'top-start' || placement === 'bottom-start') {
+        return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
+    }
+    if (placement === 'right-start' || placement === 'left-start') {
+        return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
+    }
+    if (placement === 'top-end' || placement === 'bottom-end') {
+        return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
+    }
+    return 0;
+}
 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 ? "".concat(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 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 ? DEFAULT_OFFSET : _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 ? "".concat(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 _p = useState(false), arrowShift = _p[0], setArrowShift = _p[1];
     var updatePopperRef = useRef();
     var popperRef = useRef(null);
     var innerRef = useRef(null);
     var popperModifiers = useMemo(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
-            modifiers.push({ name: 'arrow', options: { element: arrowElement } });
+            modifiers.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding: getArrowPadding,
+                },
+            });
         }
         if (preventFlip) {
             modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -78,10 +97,10 @@ var Popover = forwardRef(function (_a, ref) {
         availableHeight,
         arrowElement,
     ]);
-    var _q = usePopper(referenceElement, popperElement, {
+    var _p = usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: popperModifiers,
-    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
@@ -113,28 +132,12 @@ var Popover = forwardRef(function (_a, ref) {
         }
         return function () { return ({}); };
     }, [anchorElement, useAnchorWidth]);
-    /**
-     * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
-     * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
-     */
-    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) {
-        var _a, _b;
-        var _c;
-        return (React.createElement("div", __assign({ ref: mergeRefs([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
-                _a[styles.arrowShift] = arrowShift,
-                _a)) }, attributes.popper),
+        var _a;
+        var _b;
+        return (React.createElement("div", __assign({ ref: mergeRefs([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
             React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
-                React.createElement("div", { className: cn((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
+                React.createElement("div", { className: cn((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, 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, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
@@ -147,5 +150,6 @@ var Popover = forwardRef(function (_a, ref) {
             (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
         } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
 });
+Popover.displayName = 'Popover';
 
 export { Popover };

package/esm/index.css

@@ -1,8 +1,8 @@
-/* hash: m7e7m */
-:root {
+/* hash: 1rit7 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
-    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -20,23 +20,23 @@
 } :root {
 } :root {
     --popover-border-color: transparent;
-} .popover__component_1btnx {
+} .popover__component_trlps {
     background-color: transparent;
     color: var(--color-light-text-primary);
-} .popover__inner_1btnx {
+} .popover__inner_trlps {
     position: relative;
     background-color: var(--color-light-modal-bg-primary);
     box-shadow: var(--shadow-m);
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     will-change: transform;
-} .popover__scrollableContent_1btnx {
+} .popover__scrollableContent_trlps {
     position: relative;
     z-index: 2;
     overflow-y: auto;
-} .popover__arrow_1btnx {
+} .popover__arrow_trlps {
     z-index: 1;
-} .popover__arrow_1btnx:after {
+} .popover__arrow_trlps:after {
     content: '';
     display: block;
     position: absolute;
@@ -46,67 +46,51 @@
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     transform: rotate(45deg);
-} .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx {
+} .popover__component_trlps[data-popper-placement='left'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='left-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='left-end'] .popover__arrow_trlps {
     right: 5px
-} .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='left'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='left-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='left-end'] .popover__arrow_trlps:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
-    } .popover__component_1btnx[data-popper-placement='left-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -7px;
-} .popover__component_1btnx[data-popper-placement='left-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -5px;
-} .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='right'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='right-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='right-end'] .popover__arrow_trlps {
     left: -7px
-} .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='right'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='right-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='right-end'] .popover__arrow_trlps:after {
         top: -6px;
         border-top: none;
         border-right: none;
-    } .popover__component_1btnx[data-popper-placement='right-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -7px;
-} .popover__component_1btnx[data-popper-placement='right-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -5px;
-} .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='top'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='top-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='top-end'] .popover__arrow_trlps {
     bottom: 5px
-} .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='top'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='top-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='top-end'] .popover__arrow_trlps:after {
         left: -6px;
         border-top: none;
         border-left: none;
-    } .popover__component_1btnx[data-popper-placement='top-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: -17px;
-} .popover__component_1btnx[data-popper-placement='top-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: 5px;
-} .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='bottom'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='bottom-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='bottom-end'] .popover__arrow_trlps {
     top: -7px
-} .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='bottom'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='bottom-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='bottom-end'] .popover__arrow_trlps:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
-    } .popover__component_1btnx[data-popper-placement='bottom-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: -17px;
-} .popover__component_1btnx[data-popper-placement='bottom-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: 5px;
-} .popover__enter_1btnx .popover__inner_1btnx {
+    } .popover__enter_trlps .popover__inner_trlps {
     opacity: 0;
     transform: scale(0.98);
-} .popover__enterActive_1btnx .popover__inner_1btnx {
+} .popover__enterActive_trlps .popover__inner_trlps {
     opacity: 1;
     transform: scale(1);
     transition-property: opacity, transform;
     transition-timing-function: ease-in-out;
     transition-duration: 150ms;
-} .popover__exit_1btnx .popover__inner_1btnx {
+} .popover__exit_trlps .popover__inner_trlps {
     opacity: 1;
     transform: scale(1);
-} .popover__exitActive_1btnx .popover__inner_1btnx {
+} .popover__exitActive_trlps .popover__inner_trlps {
     opacity: 0;
     transform: scale(0.98);
     transition-property: opacity, transform;

package/esm/index.js

@@ -1,12 +1 @@
 export { Popover } from './Component.js';
-import 'tslib';
-import 'react';
-import 'react-merge-refs';
-import 'react-popper';
-import 'react-transition-group';
-import '@juggle/resize-observer';
-import 'classnames';
-import 'popper-max-size-modifier';
-import '@alfalab/core-components-portal/esm';
-import '@alfalab/core-components-stack/esm';
-import '@alfalab/hooks';

package/index.css

@@ -1,8 +1,8 @@
-/* hash: m7e7m */
-:root {
+/* hash: 1rit7 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
-    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -20,23 +20,23 @@
 } :root {
 } :root {
     --popover-border-color: transparent;
-} .popover__component_1btnx {
+} .popover__component_trlps {
     background-color: transparent;
     color: var(--color-light-text-primary);
-} .popover__inner_1btnx {
+} .popover__inner_trlps {
     position: relative;
     background-color: var(--color-light-modal-bg-primary);
     box-shadow: var(--shadow-m);
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     will-change: transform;
-} .popover__scrollableContent_1btnx {
+} .popover__scrollableContent_trlps {
     position: relative;
     z-index: 2;
     overflow-y: auto;
-} .popover__arrow_1btnx {
+} .popover__arrow_trlps {
     z-index: 1;
-} .popover__arrow_1btnx:after {
+} .popover__arrow_trlps:after {
     content: '';
     display: block;
     position: absolute;
@@ -46,67 +46,51 @@
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     transform: rotate(45deg);
-} .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx {
+} .popover__component_trlps[data-popper-placement='left'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='left-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='left-end'] .popover__arrow_trlps {
     right: 5px
-} .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='left'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='left-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='left-end'] .popover__arrow_trlps:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
-    } .popover__component_1btnx[data-popper-placement='left-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -7px;
-} .popover__component_1btnx[data-popper-placement='left-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -5px;
-} .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='right'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='right-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='right-end'] .popover__arrow_trlps {
     left: -7px
-} .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='right'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='right-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='right-end'] .popover__arrow_trlps:after {
         top: -6px;
         border-top: none;
         border-right: none;
-    } .popover__component_1btnx[data-popper-placement='right-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -7px;
-} .popover__component_1btnx[data-popper-placement='right-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -5px;
-} .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='top'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='top-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='top-end'] .popover__arrow_trlps {
     bottom: 5px
-} .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='top'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='top-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='top-end'] .popover__arrow_trlps:after {
         left: -6px;
         border-top: none;
         border-left: none;
-    } .popover__component_1btnx[data-popper-placement='top-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: -17px;
-} .popover__component_1btnx[data-popper-placement='top-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: 5px;
-} .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='bottom'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='bottom-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='bottom-end'] .popover__arrow_trlps {
     top: -7px
-} .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='bottom'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='bottom-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='bottom-end'] .popover__arrow_trlps:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
-    } .popover__component_1btnx[data-popper-placement='bottom-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: -17px;
-} .popover__component_1btnx[data-popper-placement='bottom-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: 5px;
-} .popover__enter_1btnx .popover__inner_1btnx {
+    } .popover__enter_trlps .popover__inner_trlps {
     opacity: 0;
     transform: scale(0.98);
-} .popover__enterActive_1btnx .popover__inner_1btnx {
+} .popover__enterActive_trlps .popover__inner_trlps {
     opacity: 1;
     transform: scale(1);
     transition-property: opacity, transform;
     transition-timing-function: ease-in-out;
     transition-duration: 150ms;
-} .popover__exit_1btnx .popover__inner_1btnx {
+} .popover__exit_trlps .popover__inner_trlps {
     opacity: 1;
     transform: scale(1);
-} .popover__exitActive_1btnx .popover__inner_1btnx {
+} .popover__exitActive_trlps .popover__inner_trlps {
     opacity: 0;
     transform: scale(0.98);
     transition-property: opacity, transform;

package/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('tslib');
-require('react');
-require('react-merge-refs');
-require('react-popper');
-require('react-transition-group');
-require('@juggle/resize-observer');
-require('classnames');
-require('popper-max-size-modifier');
-require('@alfalab/core-components-portal');
-require('@alfalab/core-components-stack');
-require('@alfalab/hooks');
 
 
 

package/modern/Component.d.ts

@@ -25,7 +25,7 @@ type PopoverProps = {
     position?: Position;
     /**
      * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     * Например, если места снизу недостаточно, то он все равно будет показан снизу
      */
     preventFlip?: boolean;
     /**

package/modern/Component.js

@@ -9,7 +9,7 @@ import { Portal } from '@alfalab/core-components-portal/modern';
 import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 
-const styles = {"component":"popover__component_1btnx","inner":"popover__inner_1btnx","scrollableContent":"popover__scrollableContent_1btnx","arrow":"popover__arrow_1btnx","arrowShift":"popover__arrowShift_1btnx","enter":"popover__enter_1btnx","enterActive":"popover__enterActive_1btnx","exit":"popover__exit_1btnx","exitActive":"popover__exitActive_1btnx"};
+const styles = {"component":"popover__component_trlps","inner":"popover__inner_trlps","scrollableContent":"popover__scrollableContent_trlps","arrow":"popover__arrow_trlps","enter":"popover__enter_trlps","enterActive":"popover__enterActive_trlps","exit":"popover__exit_trlps","exitActive":"popover__exitActive_trlps"};
 require('./index.css')
 
 const DEFAULT_TRANSITION = {
@@ -34,23 +34,41 @@ const availableHieghtModifier = {
         }
     },
 };
-/**
- * Минимальный размер anchorElement,
- * при котором возможно смещение стрелочки относительно центра
- */
-const MIN_ARROW_SHIFT_SIZE = 75;
-const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = [0, 0], withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
+const DEFAULT_OFFSET = [0, 0];
+// Минимальное расстояние стрелки до края поповера
+const MIN_DISTANCE_TO_EDGE = 24;
+function getArrowPadding({ placement, }) {
+    if (placement === 'right-end' || placement === 'left-end') {
+        return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
+    }
+    if (placement === 'top-start' || placement === 'bottom-start') {
+        return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
+    }
+    if (placement === 'right-start' || placement === 'left-start') {
+        return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
+    }
+    if (placement === 'top-end' || placement === 'bottom-end') {
+        return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
+    }
+    return 0;
+}
+const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
     const [referenceElement, setReferenceElement] = useState(anchorElement);
     const [popperElement, setPopperElement] = useState(null);
     const [arrowElement, setArrowElement] = useState(null);
-    const [arrowShift, setArrowShift] = useState(false);
     const updatePopperRef = useRef();
     const popperRef = useRef(null);
     const innerRef = useRef(null);
     const popperModifiers = useMemo(() => {
         const modifiers = [{ name: 'offset', options: { offset } }];
         if (withArrow) {
-            modifiers.push({ name: 'arrow', options: { element: arrowElement } });
+            modifiers.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding: getArrowPadding,
+                },
+            });
         }
         if (preventFlip) {
             modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -110,28 +128,12 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
         }
         return () => ({});
     }, [anchorElement, useAnchorWidth]);
-    /**
-     * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
-     * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
-     */
-    useEffect(() => {
-        const shiftedPosition = position.includes('-start') || position.includes('-end');
-        if (shiftedPosition && referenceElement) {
-            const { width, height } = referenceElement.getBoundingClientRect();
-            const size = position.includes('left') || position.includes('right') ? height : width;
-            if (size >= MIN_ARROW_SHIFT_SIZE) {
-                setArrowShift(true);
-            }
-        }
-    }, [referenceElement, position]);
     const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
             zIndex: computedZIndex,
             width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
             ...popperStyles.popper,
             ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
-        }, "data-test-id": dataTestId, className: cn(styles.component, className, {
-            [styles.arrowShift]: arrowShift,
-        }), ...attributes.popper },
+        }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
         React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
             React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
             withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
@@ -144,5 +146,6 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
             transition?.onEntering?.(node, isAppearing);
         } }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
 });
+Popover.displayName = 'Popover';
 
 export { Popover };

package/modern/index.css

@@ -1,8 +1,8 @@
-/* hash: m7e7m */
-:root {
+/* hash: 1rit7 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
-    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-text-primary: rgba(3, 3, 6, 0.88); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
@@ -20,23 +20,23 @@
 } :root {
 } :root {
     --popover-border-color: transparent;
-} .popover__component_1btnx {
+} .popover__component_trlps {
     background-color: transparent;
     color: var(--color-light-text-primary);
-} .popover__inner_1btnx {
+} .popover__inner_trlps {
     position: relative;
     background-color: var(--color-light-modal-bg-primary);
     box-shadow: var(--shadow-m);
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     will-change: transform;
-} .popover__scrollableContent_1btnx {
+} .popover__scrollableContent_trlps {
     position: relative;
     z-index: 2;
     overflow-y: auto;
-} .popover__arrow_1btnx {
+} .popover__arrow_trlps {
     z-index: 1;
-} .popover__arrow_1btnx:after {
+} .popover__arrow_trlps:after {
     content: '';
     display: block;
     position: absolute;
@@ -46,67 +46,51 @@
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     transform: rotate(45deg);
-} .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx {
+} .popover__component_trlps[data-popper-placement='left'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='left-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='left-end'] .popover__arrow_trlps {
     right: 5px
-} .popover__component_1btnx[data-popper-placement='left'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='left-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='left'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='left-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='left-end'] .popover__arrow_trlps:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
-    } .popover__component_1btnx[data-popper-placement='left-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -7px;
-} .popover__component_1btnx[data-popper-placement='left-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -5px;
-} .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='right'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='right-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='right-end'] .popover__arrow_trlps {
     left: -7px
-} .popover__component_1btnx[data-popper-placement='right'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='right-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='right'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='right-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='right-end'] .popover__arrow_trlps:after {
         top: -6px;
         border-top: none;
         border-right: none;
-    } .popover__component_1btnx[data-popper-placement='right-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -7px;
-} .popover__component_1btnx[data-popper-placement='right-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    top: -5px;
-} .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='top'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='top-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='top-end'] .popover__arrow_trlps {
     bottom: 5px
-} .popover__component_1btnx[data-popper-placement='top'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='top-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='top'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='top-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='top-end'] .popover__arrow_trlps:after {
         left: -6px;
         border-top: none;
         border-left: none;
-    } .popover__component_1btnx[data-popper-placement='top-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: -17px;
-} .popover__component_1btnx[data-popper-placement='top-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: 5px;
-} .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx,
-.popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx {
+    } .popover__component_trlps[data-popper-placement='bottom'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='bottom-start'] .popover__arrow_trlps,
+.popover__component_trlps[data-popper-placement='bottom-end'] .popover__arrow_trlps {
     top: -7px
-} .popover__component_1btnx[data-popper-placement='bottom'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-start'] .popover__arrow_1btnx:after, .popover__component_1btnx[data-popper-placement='bottom-end'] .popover__arrow_1btnx:after {
+} .popover__component_trlps[data-popper-placement='bottom'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='bottom-start'] .popover__arrow_trlps:after, .popover__component_trlps[data-popper-placement='bottom-end'] .popover__arrow_trlps:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
-    } .popover__component_1btnx[data-popper-placement='bottom-start'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: -17px;
-} .popover__component_1btnx[data-popper-placement='bottom-end'].popover__arrowShift_1btnx .popover__arrow_1btnx:after {
-    left: 5px;
-} .popover__enter_1btnx .popover__inner_1btnx {
+    } .popover__enter_trlps .popover__inner_trlps {
     opacity: 0;
     transform: scale(0.98);
-} .popover__enterActive_1btnx .popover__inner_1btnx {
+} .popover__enterActive_trlps .popover__inner_trlps {
     opacity: 1;
     transform: scale(1);
     transition-property: opacity, transform;
     transition-timing-function: ease-in-out;
     transition-duration: 150ms;
-} .popover__exit_1btnx .popover__inner_1btnx {
+} .popover__exit_trlps .popover__inner_trlps {
     opacity: 1;
     transform: scale(1);
-} .popover__exitActive_1btnx .popover__inner_1btnx {
+} .popover__exitActive_trlps .popover__inner_trlps {
     opacity: 0;
     transform: scale(0.98);
     transition-property: opacity, transform;

package/modern/index.js

@@ -1,11 +1 @@
 export { Popover } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'react-popper';
-import 'react-transition-group';
-import '@juggle/resize-observer';
-import 'classnames';
-import 'popper-max-size-modifier';
-import '@alfalab/core-components-portal/modern';
-import '@alfalab/core-components-stack/modern';
-import '@alfalab/hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-popover",
-    "version": "6.2.0",
+    "version": "6.2.2",
     "description": "Popover component",
     "keywords": [],
     "license": "MIT",
@@ -15,11 +15,11 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-portal": "^3.2.0",
+        "@alfalab/core-components-portal": "^3.2.1",
         "@alfalab/core-components-stack": "^4.1.0",
         "@alfalab/hooks": "^1.13.0",
         "@juggle/resize-observer": "^3.3.1",
-        "@popperjs/core": "^2.3.3",
+        "@popperjs/core": "^2.11.8",
         "classnames": "^2.3.1",
         "popper-max-size-modifier": "^0.2.0",
         "react-merge-refs": "^1.1.0",

package/src/Component.tsx

@@ -55,7 +55,7 @@ export type PopoverProps = {
 
     /**
      * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     * Например, если места снизу недостаточно, то он все равно будет показан снизу
      */
     preventFlip?: boolean;
 
@@ -176,11 +176,36 @@ const availableHieghtModifier = {
     },
 };
 
-/**
- * Минимальный размер anchorElement,
- * при котором возможно смещение стрелочки относительно центра
- */
-const MIN_ARROW_SHIFT_SIZE = 75;
+const DEFAULT_OFFSET = [0, 0];
+
+// Минимальное расстояние стрелки до края поповера
+const MIN_DISTANCE_TO_EDGE = 24;
+
+function getArrowPadding({
+    placement,
+}: {
+    popper: { height: number; width: number };
+    reference: { height: number; width: number };
+    placement: Position;
+}) {
+    if (placement === 'right-end' || placement === 'left-end') {
+        return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
+    }
+
+    if (placement === 'top-start' || placement === 'bottom-start') {
+        return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
+    }
+
+    if (placement === 'right-start' || placement === 'left-start') {
+        return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
+    }
+
+    if (placement === 'top-end' || placement === 'bottom-end') {
+        return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
+    }
+
+    return 0;
+}
 
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     (
@@ -190,7 +215,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             transition = DEFAULT_TRANSITION,
             anchorElement,
             useAnchorWidth,
-            offset = [0, 0],
+            offset = DEFAULT_OFFSET,
             withArrow = false,
             withTransition = true,
             position = 'left',
@@ -212,7 +237,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);
         const [popperElement, setPopperElement] = useState<RefElement>(null);
         const [arrowElement, setArrowElement] = useState<RefElement>(null);
-        const [arrowShift, setArrowShift] = useState(false);
 
         const updatePopperRef = useRef<() => void>();
 
@@ -223,7 +247,13 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             const modifiers: PopperModifier[] = [{ name: 'offset', options: { offset } }];
 
             if (withArrow) {
-                modifiers.push({ name: 'arrow', options: { element: arrowElement } });
+                modifiers.push({
+                    name: 'arrow',
+                    options: {
+                        element: arrowElement,
+                        padding: getArrowPadding,
+                    },
+                });
             }
 
             if (preventFlip) {
@@ -302,25 +332,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             return () => ({});
         }, [anchorElement, useAnchorWidth]);
 
-        /**
-         * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
-         * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
-         */
-        useEffect(() => {
-            const shiftedPosition = position.includes('-start') || position.includes('-end');
-
-            if (shiftedPosition && referenceElement) {
-                const { width, height } = referenceElement.getBoundingClientRect();
-
-                const size =
-                    position.includes('left') || position.includes('right') ? height : width;
-
-                if (size >= MIN_ARROW_SHIFT_SIZE) {
-                    setArrowShift(true);
-                }
-            }
-        }, [referenceElement, position]);
-
         const renderContent = (computedZIndex: number) => (
             <div
                 ref={mergeRefs([ref, popperRef, setPopperElement])}
@@ -331,9 +342,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
                     ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
                 }}
                 data-test-id={dataTestId}
-                className={cn(styles.component, className, {
-                    [styles.arrowShift]: arrowShift,
-                })}
+                className={cn(styles.component, className)}
                 {...attributes.popper}
             >
                 <div className={cn(styles.inner, popperClassName)} ref={innerRef}>
@@ -388,3 +397,5 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         );
     },
 );
+
+Popover.displayName = 'Popover';

package/src/index.module.css

@@ -52,14 +52,6 @@
     }
 }
 
-.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 {
@@ -72,14 +64,6 @@
     }
 }
 
-.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 {
@@ -92,14 +76,6 @@
     }
 }
 
-.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 {
@@ -112,14 +88,6 @@
     }
 }
 
-.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);