@alfalab/core-components 23.12.0 → 23.13.0

package/popover/esm/Component.js

@@ -35,7 +35,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_octid","inner":"popover__inner_octid","scrollableContent":"popover__scrollableContent_octid","arrow":"popover__arrow_octid","enter":"popover__enter_octid","enterActive":"popover__enterActive_octid","exit":"popover__exit_octid","exitActive":"popover__exitActive_octid"};
+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 = {
@@ -61,11 +61,17 @@ var availableHieghtModifier = {
         }
     },
 };
+/**
+ * Минимальный размер anchorElement,
+ * при котором возможно смещение стрелочки относительно центра
+ */
+var MIN_ARROW_SHIFT_SIZE = 75;
 var Popover = forwardRef(function (_a, ref) {
     var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _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 getModifiers = useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -95,10 +101,10 @@ var Popover = forwardRef(function (_a, ref) {
         availableHeight,
         arrowElement,
     ]);
-    var _p = usePopper(referenceElement, popperElement, {
+    var _q = usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: getModifiers(),
-    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
+    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
@@ -133,12 +139,27 @@ var Popover = forwardRef(function (_a, ref) {
         }
         return function () { return ({}); };
     }, [anchorElement, updatePopoverWidth, 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, style) {
-        return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), 
-            // ref={setPopperElement}
-            style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
+        var _a, _b;
+        return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
+                _a[styles.arrowShift] = arrowShift,
+                _a)) }, attributes.popper),
             React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
-                React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
+                React.createElement("div", { className: cn((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
                 withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
     };
     return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));

package/popover/esm/index.css

@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_octid {
+.popover__component_dvtgo {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_octid {
+.popover__inner_dvtgo {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__scrollableContent_octid {
+.popover__scrollableContent_dvtgo {
     position: relative;
     z-index: 2;
     overflow-y: auto;
 }
-.popover__arrow_octid {
+.popover__arrow_dvtgo {
     z-index: 1;
 }
-.popover__arrow_octid:after {
+.popover__arrow_dvtgo:after {
     content: '';
     display: block;
     position: absolute;
@@ -48,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_octid[data-popper-placement='left'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo {
     right: 5px
 }
-.popover__component_octid[data-popper-placement='left'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -7px;
 }
-.popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -5px;
 }
-.popover__component_octid[data-popper-placement='right'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo {
     left: -7px
 }
-.popover__component_octid[data-popper-placement='right'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -7px;
 }
-.popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -5px;
 }
-.popover__component_octid[data-popper-placement='top'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo {
     bottom: 5px
 }
-.popover__component_octid[data-popper-placement='top'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: -17px;
 }
-.popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: 5px;
 }
-.popover__component_octid[data-popper-placement='bottom'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo {
     top: -7px
 }
-.popover__component_octid[data-popper-placement='bottom'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: -17px;
 }
-.popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: 5px;
 }
-.popover__enter_octid .popover__inner_octid {
+.popover__enter_dvtgo .popover__inner_dvtgo {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_octid .popover__inner_octid {
+.popover__enterActive_dvtgo .popover__inner_dvtgo {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_octid .popover__inner_octid {
+.popover__exit_dvtgo .popover__inner_dvtgo {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_octid .popover__inner_octid {
+.popover__exitActive_dvtgo .popover__inner_dvtgo {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/index.css

@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_octid {
+.popover__component_dvtgo {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_octid {
+.popover__inner_dvtgo {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__scrollableContent_octid {
+.popover__scrollableContent_dvtgo {
     position: relative;
     z-index: 2;
     overflow-y: auto;
 }
-.popover__arrow_octid {
+.popover__arrow_dvtgo {
     z-index: 1;
 }
-.popover__arrow_octid:after {
+.popover__arrow_dvtgo:after {
     content: '';
     display: block;
     position: absolute;
@@ -48,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_octid[data-popper-placement='left'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo {
     right: 5px
 }
-.popover__component_octid[data-popper-placement='left'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -7px;
 }
-.popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -5px;
 }
-.popover__component_octid[data-popper-placement='right'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo {
     left: -7px
 }
-.popover__component_octid[data-popper-placement='right'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -7px;
 }
-.popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -5px;
 }
-.popover__component_octid[data-popper-placement='top'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo {
     bottom: 5px
 }
-.popover__component_octid[data-popper-placement='top'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: -17px;
 }
-.popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: 5px;
 }
-.popover__component_octid[data-popper-placement='bottom'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo {
     top: -7px
 }
-.popover__component_octid[data-popper-placement='bottom'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: -17px;
 }
-.popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: 5px;
 }
-.popover__enter_octid .popover__inner_octid {
+.popover__enter_dvtgo .popover__inner_dvtgo {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_octid .popover__inner_octid {
+.popover__enterActive_dvtgo .popover__inner_dvtgo {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_octid .popover__inner_octid {
+.popover__exit_dvtgo .popover__inner_dvtgo {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_octid .popover__inner_octid {
+.popover__exitActive_dvtgo .popover__inner_dvtgo {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/modern/Component.js

@@ -8,7 +8,7 @@ import { ResizeObserver } from 'resize-observer';
 import { stackingOrder, Stack } from '../../stack/modern';
 import { Portal } from '../../portal/modern';
 
-var styles = {"component":"popover__component_octid","inner":"popover__inner_octid","scrollableContent":"popover__scrollableContent_octid","arrow":"popover__arrow_octid","enter":"popover__enter_octid","enterActive":"popover__enterActive_octid","exit":"popover__exit_octid","exitActive":"popover__exitActive_octid"};
+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');
 
 const DEFAULT_TRANSITION = {
@@ -33,10 +33,16 @@ 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 [referenceElement, setReferenceElement] = useState(anchorElement);
     const [popperElement, setPopperElement] = useState(null);
     const [arrowElement, setArrowElement] = useState(null);
+    const [arrowShift, setArrowShift] = useState(false);
     const updatePopperRef = useRef();
     const getModifiers = useCallback(() => {
         const modifiers = [{ name: 'offset', options: { offset } }];
@@ -104,16 +110,30 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
         }
         return () => ({});
     }, [anchorElement, updatePopoverWidth, 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, style) => {
-        return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]), 
-            // ref={setPopperElement}
-            style: {
+        return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]), style: {
                 zIndex: computedZIndex,
                 width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
                 ...popperStyles.popper,
-            }, "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
+            }, "data-test-id": dataTestId, className: cn(styles.component, className, {
+                [styles.arrowShift]: arrowShift,
+            }) }, attributes.popper),
             React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
-                React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
+                React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
                 withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
     };
     return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, Object.assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));

package/popover/modern/index.css

@@ -15,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_octid {
+.popover__component_dvtgo {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_octid {
+.popover__inner_dvtgo {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__scrollableContent_octid {
+.popover__scrollableContent_dvtgo {
     position: relative;
     z-index: 2;
     overflow-y: auto;
 }
-.popover__arrow_octid {
+.popover__arrow_dvtgo {
     z-index: 1;
 }
-.popover__arrow_octid:after {
+.popover__arrow_dvtgo:after {
     content: '';
     display: block;
     position: absolute;
@@ -48,83 +48,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_octid[data-popper-placement='left'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo {
     right: 5px
 }
-.popover__component_octid[data-popper-placement='left'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_octid[data-popper-placement='left-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -7px;
 }
-.popover__component_octid[data-popper-placement='left-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='left-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -5px;
 }
-.popover__component_octid[data-popper-placement='right'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo {
     left: -7px
 }
-.popover__component_octid[data-popper-placement='right'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_octid[data-popper-placement='right-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -7px;
 }
-.popover__component_octid[data-popper-placement='right-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='right-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     top: -5px;
 }
-.popover__component_octid[data-popper-placement='top'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo {
     bottom: 5px
 }
-.popover__component_octid[data-popper-placement='top'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_octid[data-popper-placement='top-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: -17px;
 }
-.popover__component_octid[data-popper-placement='top-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='top-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: 5px;
 }
-.popover__component_octid[data-popper-placement='bottom'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid,
-.popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid {
+.popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo,
+.popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo {
     top: -7px
 }
-.popover__component_octid[data-popper-placement='bottom'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid:after, .popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_octid[data-popper-placement='bottom-start'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: -17px;
 }
-.popover__component_octid[data-popper-placement='bottom-end'] .popover__arrow_octid:after {
+.popover__component_dvtgo[data-popper-placement='bottom-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
     left: 5px;
 }
-.popover__enter_octid .popover__inner_octid {
+.popover__enter_dvtgo .popover__inner_dvtgo {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_octid .popover__inner_octid {
+.popover__enterActive_dvtgo .popover__inner_dvtgo {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_octid .popover__inner_octid {
+.popover__exit_dvtgo .popover__inner_dvtgo {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_octid .popover__inner_octid {
+.popover__exitActive_dvtgo .popover__inner_dvtgo {
     opacity: 0;
     transform: scale(0.98);
 }

package/progress-bar/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"container":"progress-bar__container_g1ajz","filled":"progress-bar__filled_g1ajz","positive":"progress-bar__positive_g1ajz","negative":"progress-bar__negative_g1ajz"};
+var styles = {"container":"progress-bar__container_6c9lb","filled":"progress-bar__filled_6c9lb","positive":"progress-bar__positive_6c9lb","negative":"progress-bar__negative_6c9lb"};
 require('./index.css');
 
 var ProgressBar = React__default['default'].forwardRef(function (_a, ref) {

package/progress-bar/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"container":"progress-bar__container_g1ajz","filled":"progress-bar__filled_g1ajz","positive":"progress-bar__positive_g1ajz","negative":"progress-bar__negative_g1ajz"};
+var styles = {"container":"progress-bar__container_6c9lb","filled":"progress-bar__filled_6c9lb","positive":"progress-bar__positive_6c9lb","negative":"progress-bar__negative_6c9lb"};
 require('./index.css');
 
 var ProgressBar = React.forwardRef(function (_a, ref) {

package/progress-bar/esm/index.css

@@ -25,21 +25,21 @@
     /* negative */
     --progressbar-negative-color: var(--color-light-graphic-negative);
 }
-.progress-bar__container_g1ajz {
+.progress-bar__container_6c9lb {
     background: var(--progressbar-bg-color);
     border-radius: var(--border-radius-s);
     display: flex;
     height: 6px;
     overflow: hidden;
 }
-.progress-bar__filled_g1ajz {
+.progress-bar__filled_6c9lb {
     border-radius: inherit;
     width: 100%;
     transition: transform 0.4s ease
 }
-.progress-bar__filled_g1ajz.progress-bar__positive_g1ajz {
+.progress-bar__filled_6c9lb.progress-bar__positive_6c9lb {
         background: var(--progressbar-positive-color);
     }
-.progress-bar__filled_g1ajz.progress-bar__negative_g1ajz {
+.progress-bar__filled_6c9lb.progress-bar__negative_6c9lb {
         background: var(--progressbar-negative-color);
     }