@alfalab/core-components 19.11.1 → 20.2.0

package/plate/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: y93vg */
+/* hash: 1he7j */
 :root {
     --color-static-status-green: #13a463;
     --color-static-status-grey: #6d7986;
@@ -12,9 +12,6 @@
     --color-light-bg-secondary: #f3f4f5;
     --color-light-border-link: #007aff;
     --color-light-text-primary: #0b1f35;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 
@@ -49,7 +46,7 @@
     --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_y93vg {
+.plate__component_1he7j {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -62,51 +59,51 @@
     outline: none;
     cursor: pointer;
 }
-.plate__component_y93vg * {
+.plate__component_1he7j * {
     box-sizing: border-box;
 }
-.plate__focused_y93vg {
+.plate__focused_1he7j {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_y93vg {
+.plate__inner_1he7j {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__common_y93vg {
+.plate__common_1he7j {
     background-color: var(--color-light-bg-secondary);
     border-color: var(--color-static-status-grey);
 }
-.plate__negative_y93vg {
+.plate__negative_1he7j {
     background-color: var(--color-light-bg-negative-muted);
     border-color: var(--color-static-status-red);
 }
-.plate__positive_y93vg {
+.plate__positive_1he7j {
     background-color: var(--color-light-bg-positive-muted);
     border-color: var(--color-static-status-green);
 }
-.plate__attention_y93vg {
+.plate__attention_1he7j {
     background-color: var(--color-light-bg-attention-muted);
     border-color: var(--color-static-status-orange);
 }
-.plate__isHidden_y93vg {
+.plate__isHidden_1he7j {
     display: none;
 }
-.plate__leftAddons_y93vg {
+.plate__leftAddons_1he7j {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-s);
 }
-.plate__title_y93vg {
+.plate__title_1he7j {
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
 
     word-break: break-word;
 }
-.plate__content_y93vg {
+.plate__content_1he7j {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -118,23 +115,23 @@
     margin: var(--gap-2xs-neg);
     cursor: default
 }
-.plate__content_y93vg.plate__isFolded_y93vg {
+.plate__content_1he7j.plate__isFolded_1he7j {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_y93vg {
+.plate__contentContainer_1he7j {
     flex: 1;
     max-width: 586px;
     margin-right: auto
 }
-.plate__contentContainer_y93vg.plate__withoutTitle_y93vg {
+.plate__contentContainer_1he7j.plate__withoutTitle_1he7j {
         padding-top: var(--gap-3xs);
     }
-.plate__title_y93vg + .plate__content_y93vg > .plate__contentInner_y93vg {
+.plate__title_1he7j + .plate__content_1he7j > .plate__contentInner_1he7j {
     padding-top: var(--gap-xs);
 }
-.plate__closer_y93vg,
-.plate__folder_y93vg {
+.plate__closer_1he7j,
+.plate__folder_1he7j {
     display: block;
     height: 24px;
     width: 24px;
@@ -143,29 +140,29 @@
     cursor: pointer;
     margin-left: var(--gap-m)
 }
-.plate__closer_y93vg:hover, .plate__folder_y93vg:hover {
+.plate__closer_1he7j:hover, .plate__folder_1he7j:hover {
         opacity: 0.7;
     }
-.plate__closer_y93vg:active, .plate__folder_y93vg:active {
+.plate__closer_1he7j:active, .plate__folder_1he7j:active {
         opacity: 0.5;
     }
-.plate__closer_y93vg {
+.plate__closer_1he7j {
     background: var(--plate-closer-icon) center no-repeat;
 }
-.plate__folder_y93vg {
+.plate__folder_1he7j {
     background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_y93vg.plate__isFolded_y93vg {
+.plate__folder_1he7j.plate__isFolded_1he7j {
         transform: rotate(0deg);
     }
-.plate__buttons_y93vg {
+.plate__buttons_1he7j {
     margin-top: var(--gap-xl);
 }
-.plate__button_y93vg {
+.plate__button_1he7j {
     margin-right: var(--gap-s)
 }
-.plate__button_y93vg:last-child {
+.plate__button_1he7j:last-child {
         margin-right: 0;
     }

package/popover/Component.d.ts

@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */

package/popover/Component.js

@@ -5,6 +5,7 @@ var cn = require('classnames');
 var reactTransitionGroup = require('react-transition-group');
 var reactPopper = require('react-popper');
 var mergeRefs = require('react-merge-refs');
+var resizeObserver = require('resize-observer');
 var coreComponentsStack = require('../stack');
 var coreComponentsPortal = require('../portal');
 
@@ -41,7 +42,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_pqi91","inner":"popover__inner_pqi91","arrow":"popover__arrow_pqi91","enter":"popover__enter_pqi91","enterActive":"popover__enterActive_pqi91","exit":"popover__exit_pqi91","exitActive":"popover__exitActive_pqi91"};
+var styles = {"component":"popover__component_1x604","inner":"popover__inner_1x604","arrow":"popover__arrow_1x604","enter":"popover__enter_1x604","enterActive":"popover__enterActive_1x604","exit":"popover__exit_1x604","exitActive":"popover__exitActive_1x604"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {
@@ -54,10 +55,11 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exitActive: styles.exitActive,
 };
 var Popover = React.forwardRef(function (_a, ref) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
     var _k = React.useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
     var _l = React.useState(null), popperElement = _l[0], setPopperElement = _l[1];
     var _m = React.useState(null), arrowElement = _m[0], setArrowElement = _m[1];
+    var updatePopperRef = React.useRef();
     var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
@@ -78,6 +80,14 @@ var Popover = React.forwardRef(function (_a, ref) {
         placement: position,
         modifiers: getModifiers(),
     }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -92,10 +102,22 @@ var Popover = React.forwardRef(function (_a, ref) {
             update.current = updatePopper;
         }
     });
+    React.useEffect(function () {
+        if (useAnchorWidth) {
+            var observer_1 = new resizeObserver.ResizeObserver(updatePopoverWidth);
+            if (anchorElement) {
+                observer_1.observe(anchorElement);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+        return function () { return ({}); };
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     var renderContent = function (computedZIndex, style) {
         return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), 
             // ref={setPopperElement}
-            style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className) }, attributes.popper),
+            style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className) }, attributes.popper),
             React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
                 children,
                 withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles.arrow, arrowClassName) })))));

package/popover/esm/Component.d.ts

@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */

package/popover/esm/Component.js

@@ -1,8 +1,9 @@
-import React, { forwardRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { usePopper } from 'react-popper';
 import mergeRefs from 'react-merge-refs';
+import { ResizeObserver } from 'resize-observer';
 import { stackingOrder, Stack } from '../../stack/esm';
 import { Portal } from '../../portal/esm';
 
@@ -33,7 +34,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"popover__component_pqi91","inner":"popover__inner_pqi91","arrow":"popover__arrow_pqi91","enter":"popover__enter_pqi91","enterActive":"popover__enterActive_pqi91","exit":"popover__exit_pqi91","exitActive":"popover__exitActive_pqi91"};
+var styles = {"component":"popover__component_1x604","inner":"popover__inner_1x604","arrow":"popover__arrow_1x604","enter":"popover__enter_1x604","enterActive":"popover__enterActive_1x604","exit":"popover__exit_1x604","exitActive":"popover__exitActive_1x604"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {
@@ -46,10 +47,11 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exitActive: styles.exitActive,
 };
 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, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
     var _k = useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
     var _l = useState(null), popperElement = _l[0], setPopperElement = _l[1];
     var _m = useState(null), arrowElement = _m[0], setArrowElement = _m[1];
+    var updatePopperRef = useRef();
     var getModifiers = useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
@@ -70,6 +72,14 @@ var Popover = forwardRef(function (_a, ref) {
         placement: position,
         modifiers: getModifiers(),
     }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -84,10 +94,22 @@ var Popover = forwardRef(function (_a, ref) {
             update.current = updatePopper;
         }
     });
+    useEffect(function () {
+        if (useAnchorWidth) {
+            var observer_1 = new ResizeObserver(updatePopoverWidth);
+            if (anchorElement) {
+                observer_1.observe(anchorElement);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+        return function () { return ({}); };
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     var renderContent = function (computedZIndex, style) {
         return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), 
             // ref={setPopperElement}
-            style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
+            style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
             React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
                 children,
                 withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));

package/popover/esm/index.css

@@ -1,10 +1,7 @@
-/* hash: pqi91 */
+/* hash: 1x604 */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-text-primary: #0b1f35;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
     --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
@@ -18,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_pqi91 {
+.popover__component_1x604 {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_pqi91 {
+.popover__inner_1x604 {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -32,7 +29,7 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__arrow_pqi91:after {
+.popover__arrow_1x604:after {
     content: '';
     display: block;
     position: absolute;
@@ -43,83 +40,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='left'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='left-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='left-end'] .popover__arrow_1x604 {
     right: 5px
 }
-.popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='left'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='left-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='left-end'] .popover__arrow_1x604:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='left-start'] .popover__arrow_1x604:after {
     top: -7px;
 }
-.popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='left-end'] .popover__arrow_1x604:after {
     top: -5px;
 }
-.popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='right'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='right-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='right-end'] .popover__arrow_1x604 {
     left: -7px
 }
-.popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='right'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='right-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='right-end'] .popover__arrow_1x604:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='right-start'] .popover__arrow_1x604:after {
     top: -7px;
 }
-.popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='right-end'] .popover__arrow_1x604:after {
     top: -5px;
 }
-.popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='top'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='top-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='top-end'] .popover__arrow_1x604 {
     bottom: 5px
 }
-.popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='top'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='top-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='top-end'] .popover__arrow_1x604:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='top-start'] .popover__arrow_1x604:after {
     left: -17px;
 }
-.popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='top-end'] .popover__arrow_1x604:after {
     left: 5px;
 }
-.popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='bottom'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='bottom-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='bottom-end'] .popover__arrow_1x604 {
     top: -7px
 }
-.popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='bottom'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='bottom-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='bottom-end'] .popover__arrow_1x604:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='bottom-start'] .popover__arrow_1x604:after {
     left: -17px;
 }
-.popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='bottom-end'] .popover__arrow_1x604:after {
     left: 5px;
 }
-.popover__enter_pqi91 .popover__inner_pqi91 {
+.popover__enter_1x604 .popover__inner_1x604 {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_pqi91 .popover__inner_pqi91 {
+.popover__enterActive_1x604 .popover__inner_1x604 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_pqi91 .popover__inner_pqi91 {
+.popover__exit_1x604 .popover__inner_1x604 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_pqi91 .popover__inner_pqi91 {
+.popover__exitActive_1x604 .popover__inner_1x604 {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/esm/index.js

@@ -3,6 +3,7 @@ import 'classnames';
 import 'react-transition-group';
 import 'react-popper';
 import 'react-merge-refs';
+import 'resize-observer';
 import '../../stack/esm';
 import '../../portal/esm';
 export { Popover } from './Component.js';

package/popover/index.css

@@ -1,10 +1,7 @@
-/* hash: pqi91 */
+/* hash: 1x604 */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-text-primary: #0b1f35;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
     --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
@@ -18,11 +15,11 @@
 :root {
     --popover-border-color: transparent;
 }
-.popover__component_pqi91 {
+.popover__component_1x604 {
     background-color: transparent;
     color: var(--color-light-text-primary);
 }
-.popover__inner_pqi91 {
+.popover__inner_1x604 {
     position: relative;
     background-color: var(--color-light-bg-primary);
     box-shadow: var(--shadow-m);
@@ -32,7 +29,7 @@
     box-sizing: border-box;
     will-change: transform;
 }
-.popover__arrow_pqi91:after {
+.popover__arrow_1x604:after {
     content: '';
     display: block;
     position: absolute;
@@ -43,83 +40,83 @@
     box-sizing: border-box;
     transform: rotate(45deg);
 }
-.popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='left'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='left-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='left-end'] .popover__arrow_1x604 {
     right: 5px
 }
-.popover__component_pqi91[data-popper-placement='left'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='left'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='left-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='left-end'] .popover__arrow_1x604:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
     }
-.popover__component_pqi91[data-popper-placement='left-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='left-start'] .popover__arrow_1x604:after {
     top: -7px;
 }
-.popover__component_pqi91[data-popper-placement='left-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='left-end'] .popover__arrow_1x604:after {
     top: -5px;
 }
-.popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='right'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='right-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='right-end'] .popover__arrow_1x604 {
     left: -7px
 }
-.popover__component_pqi91[data-popper-placement='right'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='right'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='right-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='right-end'] .popover__arrow_1x604:after {
         top: -6px;
         border-top: none;
         border-right: none;
     }
-.popover__component_pqi91[data-popper-placement='right-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='right-start'] .popover__arrow_1x604:after {
     top: -7px;
 }
-.popover__component_pqi91[data-popper-placement='right-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='right-end'] .popover__arrow_1x604:after {
     top: -5px;
 }
-.popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='top'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='top-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='top-end'] .popover__arrow_1x604 {
     bottom: 5px
 }
-.popover__component_pqi91[data-popper-placement='top'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='top'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='top-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='top-end'] .popover__arrow_1x604:after {
         left: -6px;
         border-top: none;
         border-left: none;
     }
-.popover__component_pqi91[data-popper-placement='top-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='top-start'] .popover__arrow_1x604:after {
     left: -17px;
 }
-.popover__component_pqi91[data-popper-placement='top-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='top-end'] .popover__arrow_1x604:after {
     left: 5px;
 }
-.popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91,
-.popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91 {
+.popover__component_1x604[data-popper-placement='bottom'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='bottom-start'] .popover__arrow_1x604,
+.popover__component_1x604[data-popper-placement='bottom-end'] .popover__arrow_1x604 {
     top: -7px
 }
-.popover__component_pqi91[data-popper-placement='bottom'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after, .popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='bottom'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='bottom-start'] .popover__arrow_1x604:after, .popover__component_1x604[data-popper-placement='bottom-end'] .popover__arrow_1x604:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
     }
-.popover__component_pqi91[data-popper-placement='bottom-start'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='bottom-start'] .popover__arrow_1x604:after {
     left: -17px;
 }
-.popover__component_pqi91[data-popper-placement='bottom-end'] .popover__arrow_pqi91:after {
+.popover__component_1x604[data-popper-placement='bottom-end'] .popover__arrow_1x604:after {
     left: 5px;
 }
-.popover__enter_pqi91 .popover__inner_pqi91 {
+.popover__enter_1x604 .popover__inner_1x604 {
     opacity: 0;
     transform: scale(0.98);
 }
-.popover__enterActive_pqi91 .popover__inner_pqi91 {
+.popover__enterActive_1x604 .popover__inner_1x604 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exit_pqi91 .popover__inner_pqi91 {
+.popover__exit_1x604 .popover__inner_1x604 {
     opacity: 1;
     transform: scale(1);
 }
-.popover__exitActive_pqi91 .popover__inner_pqi91 {
+.popover__exitActive_1x604 .popover__inner_1x604 {
     opacity: 0;
     transform: scale(0.98);
 }

package/popover/index.js

@@ -6,6 +6,7 @@ require('classnames');
 require('react-transition-group');
 require('react-popper');
 require('react-merge-refs');
+require('resize-observer');
 require('../stack');
 require('../portal');
 

package/popover/modern/Component.d.ts

@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */