@alfalab/core-components 35.0.0-beta.0 → 35.1.0

package/modal/esm/responsive.js

@@ -2,8 +2,8 @@ import 'react';
 import 'classnames';
 import '../../base-modal/esm';
 import './Context.js';
-import './Component-4f8e5bc1.js';
-import './tslib.es6-2731be2f.js';
+import './Component-5bc49f26.js';
+import './tslib.es6-028db3ce.js';
 import 'react-merge-refs';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
@@ -13,7 +13,7 @@ import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 import './components/header/Component.desktop.js';
-import './transitions.module-744e29e5.js';
+import './transitions.module-053bd5b2.js';
 import './Component.desktop.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/modal/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-873de6b9.js');
+require('./tslib.es6-5a073d46.js');
 require('react');
 require('react-merge-refs');
 require('classnames');
@@ -13,10 +13,10 @@ require('./components/content/Component.js');
 require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
-require('./Component-b91f670e.js');
+require('./Component-4316068c.js');
 require('./components/header/Component.desktop.js');
 require('./Component.desktop.js');
-require('./transitions.module-81b9146c.js');
+require('./transitions.module-b8ebf246.js');
 require('./components/content/Component.mobile.js');
 require('./components/footer/Component.mobile.js');
 require('@alfalab/icons-glyph/CrossMIcon');

package/modal/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-873de6b9.js');
+require('./tslib.es6-5a073d46.js');
 require('react');
 require('classnames');
 require('../base-modal');
@@ -10,8 +10,8 @@ require('./Context.js');
 require('./components/closer/Component.js');
 require('./components/content/Component.js');
 require('./components/footer/Component.js');
-require('./Component-b91f670e.js');
-require('./transitions.module-81b9146c.js');
+require('./Component-4316068c.js');
+require('./transitions.module-b8ebf246.js');
 require('./components/content/Component.mobile.js');
 require('./components/footer/Component.mobile.js');
 require('@alfalab/icons-glyph/CrossMIcon');

package/modal/modern/Component.desktop.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import { BaseModal } from '../../base-modal/modern';
 import './Context.js';
-import './Component-8b274bb3.js';
+import './Component-4974412a.js';
 import '../../icon-button/modern';
 import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
@@ -12,7 +12,7 @@ import { ContentDesktop } from './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import { FooterDesktop } from './components/footer/Component.desktop.js';
 import { HeaderDesktop } from './components/header/Component.desktop.js';
-import { t as transitions } from './transitions.module-744e29e5.js';
+import { t as transitions } from './transitions.module-053bd5b2.js';
 
 var styles = {"wrapper":"modal__wrapper_ctsqz","component":"modal__component_ctsqz","fullscreen":"modal__fullscreen_ctsqz","s":"modal__s_ctsqz","m":"modal__m_ctsqz","l":"modal__l_ctsqz","xl":"modal__xl_ctsqz"};
 require('./desktop.css');

package/modal/modern/Component.mobile.js

@@ -4,12 +4,12 @@ import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import { BaseModal } from '../../base-modal/modern';
 import './Context.js';
-import './Component-8b274bb3.js';
+import './Component-4974412a.js';
 import '../../icon-button/modern';
 import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import { t as transitions } from './transitions.module-744e29e5.js';
+import { t as transitions } from './transitions.module-053bd5b2.js';
 import { ContentMobile } from './components/content/Component.mobile.js';
 import { FooterMobile } from './components/footer/Component.mobile.js';
 import { HeaderMobile } from './components/header/Component.mobile.js';

package/modal/modern/Component.responsive.js

@@ -6,7 +6,7 @@ import '@alfalab/icons-glyph/CrossMIcon';
 import { useMedia } from '@alfalab/hooks';
 import '../../base-modal/modern';
 import './Context.js';
-import './Component-8b274bb3.js';
+import './Component-4974412a.js';
 import '../../icon-button/modern';
 import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
@@ -14,7 +14,7 @@ import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 import './components/header/Component.desktop.js';
-import './transitions.module-744e29e5.js';
+import './transitions.module-053bd5b2.js';
 import { ModalDesktop } from './Component.desktop.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/modal/modern/components/header/Component.desktop.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ModalDesktopProps } from "../../Component.desktop";
-import { HeaderProps } from "../../Component-8b274bb3";
+import { HeaderProps } from "../../Component-4974412a";
 type HeaderDesktopProps = Omit<HeaderProps, 'closer'> & {
     /**
      * Размер

package/modal/modern/components/header/Component.desktop.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '../../../../base-modal/modern';
 import '../../Context.js';
-import { H as Header, g as getDataTestId } from '../../Component-8b274bb3.js';
+import { H as Header, g as getDataTestId } from '../../Component-4974412a.js';
 import '../../../../icon-button/modern';
 import { Closer } from '../closer/Component.js';
 

package/modal/modern/components/header/Component.js

@@ -2,4 +2,4 @@ import 'react';
 import 'classnames';
 import '../../../../base-modal/modern';
 import '../../Context.js';
-export { H as Header } from '../../Component-8b274bb3.js';
+export { H as Header } from '../../Component-4974412a.js';

package/modal/modern/components/header/Component.mobile.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { HeaderProps } from "../../Component-8b274bb3";
+import { HeaderProps } from "../../Component-4974412a";
 type HeaderMobileProps = Omit<HeaderProps, 'closer'> & {
     /**
      * Наличие крестика

package/modal/modern/components/header/Component.mobile.js

@@ -4,7 +4,7 @@ import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import CrossMIcon from '@alfalab/icons-glyph/CrossMIcon';
 import '../../../../base-modal/modern';
 import '../../Context.js';
-import { H as Header, g as getDataTestId } from '../../Component-8b274bb3.js';
+import { H as Header, g as getDataTestId } from '../../Component-4974412a.js';
 import '../../../../icon-button/modern';
 import { Closer } from '../closer/Component.js';
 

package/modal/modern/desktop.js

@@ -4,7 +4,7 @@ import 'react-merge-refs';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '../../base-modal/modern';
 import './Context.js';
-import './Component-8b274bb3.js';
+import './Component-4974412a.js';
 import '../../icon-button/modern';
 import './components/closer/Component.js';
 import './components/content/Component.js';
@@ -12,5 +12,5 @@ import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 import './components/header/Component.desktop.js';
-import './transitions.module-744e29e5.js';
+import './transitions.module-053bd5b2.js';
 export { ModalDesktop } from './Component.desktop.js';

package/modal/modern/index.js

@@ -6,7 +6,7 @@ import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/hooks';
 import '../../base-modal/modern';
 export { ModalContext } from './Context.js';
-import './Component-8b274bb3.js';
+import './Component-4974412a.js';
 import '../../icon-button/modern';
 import './components/closer/Component.js';
 import './components/content/Component.js';
@@ -14,7 +14,7 @@ import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 import './components/header/Component.desktop.js';
-import './transitions.module-744e29e5.js';
+import './transitions.module-053bd5b2.js';
 import './Component.desktop.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/modal/modern/mobile.js

@@ -4,12 +4,12 @@ import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '../../base-modal/modern';
 import './Context.js';
-import './Component-8b274bb3.js';
+import './Component-4974412a.js';
 import '../../icon-button/modern';
 import './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import './transitions.module-744e29e5.js';
+import './transitions.module-053bd5b2.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';
 import './components/header/Component.mobile.js';

package/modal/modern/responsive.js

@@ -6,7 +6,7 @@ import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/hooks';
 import '../../base-modal/modern';
 import './Context.js';
-import './Component-8b274bb3.js';
+import './Component-4974412a.js';
 import '../../icon-button/modern';
 import './components/closer/Component.js';
 import './components/content/Component.js';
@@ -14,7 +14,7 @@ import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 import './components/header/Component.desktop.js';
-import './transitions.module-744e29e5.js';
+import './transitions.module-053bd5b2.js';
 import './Component.desktop.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/modal/responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-873de6b9.js');
+require('./tslib.es6-5a073d46.js');
 require('react');
 require('react-merge-refs');
 require('classnames');
@@ -13,10 +13,10 @@ require('./components/content/Component.js');
 require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
-require('./Component-b91f670e.js');
+require('./Component-4316068c.js');
 require('./components/header/Component.desktop.js');
 require('./Component.desktop.js');
-require('./transitions.module-81b9146c.js');
+require('./transitions.module-b8ebf246.js');
 require('./components/content/Component.mobile.js');
 require('./components/footer/Component.mobile.js');
 require('@alfalab/icons-glyph/CrossMIcon');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "35.0.0-beta.0",
+  "version": "35.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -62,7 +62,7 @@
     "@alfalab/icons-glyph": "^2.71.0",
     "@alfalab/icons-logotype": "^2.19.0",
     "@alfalab/stylelint-core-vars": "^1.4.0",
-    "@alfalab/utils": "^1.13.2",
+    "@alfalab/utils": "^1.13.3",
     "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.3.3",
     "classnames": "^2.3.1",
@@ -78,7 +78,7 @@
     "react-div-100vh": "^0.7.0",
     "react-focus-lock": "2.9.1",
     "react-merge-refs": "^1.1.0",
-    "react-popper": "^2.3.0",
+    "react-popper": "^2.2.5",
     "react-swipeable": "^5.5.1",
     "react-textarea-autosize": "^8.3.4",
     "react-transition-group": "^4.4.1",

package/picker-button/Component.d.ts

@@ -21,7 +21,7 @@ type PickerButtonDesktopProps = Omit<BaseSelectProps, 'Field' | 'placeholder' |
      */
     variant?: PickerButtonVariant;
 };
-declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
+declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "leftAddons" | "rightAddons" | "view" | "loading"> & {
     options: Array<OptionShape & {
         /**
          * Иконка, отображающаяся слева от текстового представления пункта

package/picker-button/Component.responsive.d.ts

@@ -11,7 +11,7 @@ type PickerButtonProps = PickerButtonDesktopProps & AdditionalMobileProps & {
      */
     breakpoint?: number;
 };
-declare const PickerButton: React.ForwardRefExoticComponent<Omit<import("../select").BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
+declare const PickerButton: React.ForwardRefExoticComponent<Omit<import("../select").BaseSelectProps, "size" | "hint" | "placeholder" | "onFocus" | "selected" | "multiple" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "leftAddons" | "rightAddons" | "view" | "loading"> & {
     options: (import("../select").OptionShape & {
         icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
     })[];

package/picker-button/cssm/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./Component.responsive";
-export { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";
+export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";

package/picker-button/esm/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./Component.responsive";
-export { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";
+export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";

package/picker-button/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./Component.responsive";
-export { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";
+export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";

package/picker-button/modern/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./Component.responsive";
-export { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";
+export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component";

package/picker-button/typings-56379e19.d.ts

@@ -124,7 +124,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" |
      */
     dataTestId?: string;
 };
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "value" | "enterKeyHint"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     block?: boolean | undefined;

package/popover/Component.js

@@ -82,7 +82,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     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 popperModifiers = React.useMemo(function () {
+    var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
             modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -112,11 +112,16 @@ var Popover = React.forwardRef(function (_a, ref) {
     ]);
     var _q = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
-        modifiers: popperModifiers,
+        modifiers: getModifiers(),
     }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -133,7 +138,6 @@ var Popover = React.forwardRef(function (_a, ref) {
     });
     React.useEffect(function () {
         if (useAnchorWidth) {
-            var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
             var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
             var observer_1 = new ResizeObserver_1(updatePopoverWidth);
             if (anchorElement) {
@@ -144,7 +148,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             };
         }
         return function () { return ({}); };
-    }, [anchorElement, useAnchorWidth]);
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     /**
      * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
      * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -161,8 +165,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     }, [referenceElement, position]);
     var renderContent = function (computedZIndex, style) {
         var _a, _b;
-        var _c;
-        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, 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) ? undefined : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className, (_a = {},
+        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className, (_a = {},
                 _a[styles.arrowShift] = arrowShift,
                 _a)) }, attributes.popper),
             React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },

package/popover/cssm/Component.js

@@ -81,7 +81,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     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 popperModifiers = React.useMemo(function () {
+    var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
             modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -111,11 +111,16 @@ var Popover = React.forwardRef(function (_a, ref) {
     ]);
     var _q = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
-        modifiers: popperModifiers,
+        modifiers: getModifiers(),
     }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -132,7 +137,6 @@ var Popover = React.forwardRef(function (_a, ref) {
     });
     React.useEffect(function () {
         if (useAnchorWidth) {
-            var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
             var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
             var observer_1 = new ResizeObserver_1(updatePopoverWidth);
             if (anchorElement) {
@@ -143,7 +147,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             };
         }
         return function () { return ({}); };
-    }, [anchorElement, useAnchorWidth]);
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     /**
      * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
      * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -160,8 +164,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     }, [referenceElement, position]);
     var renderContent = function (computedZIndex, style) {
         var _a, _b;
-        var _c;
-        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, 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) ? undefined : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className, (_a = {},
+        return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className, (_a = {},
                 _a[styles__default['default'].arrowShift] = arrowShift,
                 _a)) }, attributes.popper),
             React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].inner, popperClassName), style: style },

package/popover/esm/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
@@ -73,7 +73,7 @@ var Popover = forwardRef(function (_a, ref) {
     var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
     var _p = useState(false), arrowShift = _p[0], setArrowShift = _p[1];
     var updatePopperRef = useRef();
-    var popperModifiers = useMemo(function () {
+    var getModifiers = useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
             modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -103,11 +103,16 @@ var Popover = forwardRef(function (_a, ref) {
     ]);
     var _q = usePopper(referenceElement, popperElement, {
         placement: position,
-        modifiers: popperModifiers,
+        modifiers: getModifiers(),
     }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
+    var updatePopoverWidth = useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -124,7 +129,6 @@ var Popover = forwardRef(function (_a, ref) {
     });
     useEffect(function () {
         if (useAnchorWidth) {
-            var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
             var ResizeObserver_1 = window.ResizeObserver || ResizeObserver;
             var observer_1 = new ResizeObserver_1(updatePopoverWidth);
             if (anchorElement) {
@@ -135,7 +139,7 @@ var Popover = forwardRef(function (_a, ref) {
             };
         }
         return function () { return ({}); };
-    }, [anchorElement, useAnchorWidth]);
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     /**
      * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
      * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -152,8 +156,7 @@ var Popover = forwardRef(function (_a, ref) {
     }, [referenceElement, position]);
     var renderContent = function (computedZIndex, style) {
         var _a, _b;
-        var _c;
-        return (React.createElement("div", __assign({ ref: mergeRefs([ref, 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) ? undefined : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
+        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 },

package/popover/modern/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
@@ -44,7 +44,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
     const [arrowElement, setArrowElement] = useState(null);
     const [arrowShift, setArrowShift] = useState(false);
     const updatePopperRef = useRef();
-    const popperModifiers = useMemo(() => {
+    const getModifiers = useCallback(() => {
         const modifiers = [{ name: 'offset', options: { offset } }];
         if (withArrow) {
             modifiers.push({ name: 'arrow', options: { element: arrowElement } });
@@ -72,13 +72,18 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
         availableHeight,
         arrowElement,
     ]);
-    const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
+    const { styles: popperStyles, attributes, update: updatePopper } = usePopper(referenceElement, popperElement, {
         placement: position,
-        modifiers: popperModifiers,
+        modifiers: getModifiers(),
     });
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
+    const updatePopoverWidth = useCallback(() => {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     useEffect(() => {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -95,7 +100,6 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
     });
     useEffect(() => {
         if (useAnchorWidth) {
-            const updatePopoverWidth = () => updatePopperRef.current?.();
             const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
             const observer = new ResizeObserver$1(updatePopoverWidth);
             if (anchorElement) {
@@ -106,7 +110,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
             };
         }
         return () => ({});
-    }, [anchorElement, useAnchorWidth]);
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     /**
      * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
      * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
@@ -125,14 +129,13 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
             zIndex: computedZIndex,
             width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
             ...popperStyles.popper,
-            ...(popperStyles.popper?.transform ? undefined : { visibility: 'hidden' }),
         }, "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({ [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, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, ...transition, in: open }, renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));
+    return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, ...transition, in: open }, renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));
 });
 
 export { Popover };

package/pure-cell/{component-b2f74529.js → component-c04791cf.js}

@@ -1,10 +1,10 @@
-var tslib_es6 = require('./tslib.es6-19639de9.js');
+var tslib_es6 = require('./tslib.es6-d4614c2f.js');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsComment = require('../comment');
 var hooks = require('@alfalab/hooks');
-var getDataTestId = require('./getDataTestId-9248366d.js');
+var getDataTestId = require('./getDataTestId-36b0b09b.js');
 var components_addon_component = require('./components/addon/component.js');
 var coreComponentsTypography = require('../typography');
 var components_amount_component = require('./components/amount/component.js');