@alfalab/core-components 48.30.0 → 48.31.0

package/plate/modern/components/base-plate/index.js

@@ -3,7 +3,7 @@ import 'react';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../icon-button/modern';
-import '../../warning-38287dd5.js';
+import '../../warning-5cbf2b68.js';
 import 'detect-browser';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';

package/plate/modern/desktop/Component.desktop.js

@@ -3,14 +3,14 @@ import { BasePlate } from '../components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../warning-38287dd5.js';
+import '../warning-5cbf2b68.js';
 import 'detect-browser';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '../components/button-list/component.js';
 
-const styles = {"bold":"plate__bold_x50qh","description":"plate__description_x50qh","footer":"plate__footer_x50qh","rounded":"plate__rounded_x50qh","shadow":"plate__shadow_x50qh"};
+const styles = {"bold":"plate__bold_3jgii","description":"plate__description_3jgii","footer":"plate__footer_3jgii","rounded":"plate__rounded_3jgii","shadow":"plate__shadow_3jgii"};
 require('./desktop.css');
 
 const PlateDesktop = forwardRef((restProps, ref) => (React.createElement(BasePlate, { ...restProps, styles: styles, ref: ref })));

package/plate/modern/desktop/desktop.css

@@ -33,17 +33,17 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --plate-rounded-border-radius-desktop: var(--border-radius-12);
     --plate-rounded-shadow-border-radius-desktop: var(--border-radius-12);
-} .plate__bold_x50qh {
+} .plate__bold_3jgii {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
     padding: 5px var(--gap-12) 5px var(--gap-4);
-} .plate__description_x50qh {
+} .plate__description_3jgii {
     padding: var(--gap-0) var(--gap-12) var(--gap-4) var(--gap-4);
-} .plate__footer_x50qh {
+} .plate__footer_3jgii {
     padding: var(--gap-8) var(--gap-0) var(--gap-4) var(--gap-4);
-} .plate__rounded_x50qh {
+} .plate__rounded_3jgii {
     border-radius: var(--plate-rounded-border-radius-desktop)
-} .plate__rounded_x50qh.plate__shadow_x50qh:after {
+} .plate__rounded_3jgii.plate__shadow_3jgii:after {
         border-radius: var(--plate-rounded-shadow-border-radius-desktop);
     }

package/plate/modern/desktop/index.js

@@ -4,7 +4,7 @@ import '../components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../warning-38287dd5.js';
+import '../warning-5cbf2b68.js';
 import 'detect-browser';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';

package/plate/modern/index-785a2fbf.d.ts

@@ -126,7 +126,7 @@ type ColorValue = WithThemeColorValue | WithoutThemeColorValue;
 declare const translateColors: (colorName: string) => ColorValue;
 export { createPaddingStyle, easingFns, maskUtils, isObject, hasOwnProperty, hooks, dom, exhaustiveCheck, isFn, isMaskitoMask, getColorVar, modifyColor, WithThemeColorValue, WithoutThemeColorValue, ColorValue, translateColors };
 export { useIsMounted } from "./useIsMounted-edf8408d";
-export * from "./warning-38287dd5";
-export { PortalContext } from "./warning-38287dd5";
+export * from "./warning-5cbf2b68";
+export { PortalContext } from "./warning-5cbf2b68";
 export * from "./isClient-22e50762";
 export * from "./fnUtils-edf8408d";

package/plate/modern/index.js

@@ -6,7 +6,7 @@ import './components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../icon-button/modern';
-import './warning-38287dd5.js';
+import './warning-5cbf2b68.js';
 import 'detect-browser';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';

package/plate/modern/mobile/Component.mobile.js

@@ -3,14 +3,14 @@ import { BasePlate } from '../components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../warning-38287dd5.js';
+import '../warning-5cbf2b68.js';
 import 'detect-browser';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '../components/button-list/component.js';
 
-const styles = {"bold":"plate__bold_j3a3l","description":"plate__description_j3a3l","footer":"plate__footer_j3a3l","rounded":"plate__rounded_j3a3l","shadow":"plate__shadow_j3a3l"};
+const styles = {"bold":"plate__bold_l2osw","description":"plate__description_l2osw","footer":"plate__footer_l2osw","rounded":"plate__rounded_l2osw","shadow":"plate__shadow_l2osw"};
 require('./mobile.css');
 
 const PlateMobile = forwardRef((restProps, ref) => (React.createElement(BasePlate, { ...restProps, styles: styles, ref: ref })));

package/plate/modern/mobile/index.js

@@ -4,7 +4,7 @@ import '../components/base-plate/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../icon-button/modern';
-import '../warning-38287dd5.js';
+import '../warning-5cbf2b68.js';
 import 'detect-browser';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownMIcon';

package/plate/modern/mobile/mobile.css

@@ -33,17 +33,17 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --plate-rounded-border-radius-mobile: var(--border-radius-12);
     --plate-rounded-shadow-border-radius-mobile: var(--border-radius-12);
-} .plate__bold_j3a3l {
+} .plate__bold_l2osw {
     font-size: 16px;
     line-height: 20px;
     font-weight: 600;
     padding: 6px var(--gap-12) 6px var(--gap-4);
-} .plate__description_j3a3l {
+} .plate__description_l2osw {
     padding: var(--gap-0) var(--gap-12) var(--gap-4) var(--gap-4);
-} .plate__footer_j3a3l {
+} .plate__footer_l2osw {
     padding: var(--gap-8) var(--gap-0) var(--gap-4) var(--gap-4);
-} .plate__rounded_j3a3l {
+} .plate__rounded_l2osw {
     border-radius: var(--plate-rounded-border-radius-mobile)
-} .plate__rounded_j3a3l.plate__shadow_j3a3l:after {
+} .plate__rounded_l2osw.plate__shadow_l2osw:after {
         border-radius: var(--plate-rounded-shadow-border-radius-mobile);
     }

package/plate/modern/shared/index.js

@@ -1,5 +1,5 @@
 export { getPlateTestIds } from '../utils.js';
-import '../warning-38287dd5.js';
+import '../warning-5cbf2b68.js';
 import 'detect-browser';
 import 'react';
 import '@alfalab/hooks';

package/plate/modern/utils.js

@@ -1,4 +1,4 @@
-import { g as getDataTestId } from './warning-38287dd5.js';
+import { g as getDataTestId } from './warning-5cbf2b68.js';
 import 'react';
 import '@alfalab/hooks';
 import 'detect-browser';

package/plate/utils.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var warning = require('./warning-738000e6.js');
+var warning = require('./warning-0c9ae6f0.js');
 require('react');
 require('@alfalab/hooks');
 

package/popover/Component.d.ts

@@ -33,9 +33,9 @@ type PopoverProps = {
      */
     preventOverflow?: boolean;
     /**
-     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
      */
-    availableHeight?: boolean;
+    availableHeight?: boolean | (() => Element | null | undefined);
     /**
      * Если `true`, будет отрисована стрелочка
      */
@@ -96,6 +96,10 @@ type PopoverProps = {
      * Контент
      */
     children?: ReactNode;
+    /**
+     * Класс для скролл контейнера
+     */
+    scrollableContentClassName?: string;
 };
 declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };

package/popover/Component.js

@@ -9,6 +9,7 @@ var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var maxSize = require('popper-max-size-modifier');
 var coreComponentsPortal = require('../portal');
+var coreComponentsShared = require('../shared');
 var coreComponentsStack = require('../stack');
 var hooks = require('@alfalab/hooks');
 var stackContext = require('@alfalab/stack-context');
@@ -20,7 +21,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
 
-var styles = {"component":"popover__component_a46z7","inner":"popover__inner_a46z7","scrollableContent":"popover__scrollableContent_a46z7","arrow":"popover__arrow_a46z7","enter":"popover__enter_a46z7","enterActive":"popover__enterActive_a46z7","exit":"popover__exit_a46z7","exitActive":"popover__exitActive_a46z7"};
+var styles = {"component":"popover__component_aairy","inner":"popover__inner_aairy","scrollableContent":"popover__scrollableContent_aairy","arrow":"popover__arrow_aairy","enter":"popover__enter_aairy","enterActive":"popover__enterActive_aairy","exit":"popover__exit_aairy","exitActive":"popover__exitActive_aairy"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {
@@ -32,20 +33,6 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
-var availableHieghtModifier = {
-    name: 'availableHeight',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['maxSize'],
-    fn: function (_a) {
-        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
-        var height = modifiersData.maxSize.height;
-        var content = popper.querySelector(".".concat(styles.scrollableContent));
-        if (content && !content.style.maxHeight) {
-            content.style.maxHeight = "".concat(height, "px");
-        }
-    },
-};
 var DEFAULT_OFFSET = [0, 0];
 // Минимальное расстояние стрелки до края поповера
 var MIN_DISTANCE_TO_EDGE = 24;
@@ -66,10 +53,11 @@ function getArrowPadding(_a) {
     return 0;
 }
 var Popover = React.forwardRef(function (_a, ref) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k, scrollableContentClassName = _a.scrollableContentClassName;
     var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
     var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
     var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
+    var _p = React.useState(function () { return ({}); }), maxSizeOptions = _p[0], setMaxSizeOptions = _p[1];
     var updatePopperRef = React.useRef();
     var popperRef = React.useRef(null);
     var innerRef = React.useRef(null);
@@ -93,9 +81,8 @@ var Popover = React.forwardRef(function (_a, ref) {
         if (preventOverflow) {
             modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
-        if (availableHeight) {
-            modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
-            modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
+        if (coreComponentsShared.isFn(availableHeight) || availableHeight) {
+            modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: maxSizeOptions }));
         }
         return modifiers;
     }, [
@@ -106,14 +93,22 @@ var Popover = React.forwardRef(function (_a, ref) {
         preventOverflow,
         availableHeight,
         arrowElement,
+        maxSizeOptions,
     ]);
-    var _p = reactPopper.usePopper(referenceElement, popperElement, {
+    var _q = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: popperModifiers,
-    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
+    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update, state = _q.state;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        var _a;
+        var nextBoundry = coreComponentsShared.isFn(availableHeight) ? (_a = availableHeight()) !== null && _a !== void 0 ? _a : undefined : undefined;
+        if (!(maxSizeOptions.boundary === nextBoundry)) {
+            setMaxSizeOptions({ boundary: nextBoundry });
+        }
+    });
     hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -144,10 +139,16 @@ var Popover = React.forwardRef(function (_a, ref) {
     }, [anchorElement, useAnchorWidth]);
     var renderContent = function (computedZIndex) {
         var _a;
-        var _b;
+        var _b, _c;
         return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className) }, attributes.popper),
-            React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef },
-                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
+            React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef, style: {
+                    maxHeight: coreComponentsShared.isFn(availableHeight) || availableHeight
+                        ? (_c = state === null || state === void 0 ? void 0 : state.modifiersData.maxSize) === null || _c === void 0 ? void 0 : _c.height
+                        : undefined,
+                } },
+                React__default.default.createElement("div", { className: cn__default.default(scrollableContentClassName, (_a = {},
+                        _a[styles.scrollableContent] = coreComponentsShared.isFn(availableHeight) || availableHeight,
+                        _a)) }, children),
                 withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles.arrow, arrowClassName) })))));
     };
     return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {

package/popover/cssm/Component.d.ts

@@ -33,9 +33,9 @@ type PopoverProps = {
      */
     preventOverflow?: boolean;
     /**
-     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
      */
-    availableHeight?: boolean;
+    availableHeight?: boolean | (() => Element | null | undefined);
     /**
      * Если `true`, будет отрисована стрелочка
      */
@@ -96,6 +96,10 @@ type PopoverProps = {
      * Контент
      */
     children?: ReactNode;
+    /**
+     * Класс для скролл контейнера
+     */
+    scrollableContentClassName?: string;
 };
 declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };

package/popover/cssm/Component.js

@@ -9,6 +9,7 @@ var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var maxSize = require('popper-max-size-modifier');
 var coreComponentsPortal = require('../../portal/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 var coreComponentsStack = require('../../stack/cssm');
 var hooks = require('@alfalab/hooks');
 var stackContext = require('@alfalab/stack-context');
@@ -31,20 +32,6 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles__default.default.exit,
     exitActive: styles__default.default.exitActive,
 };
-var availableHieghtModifier = {
-    name: 'availableHeight',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['maxSize'],
-    fn: function (_a) {
-        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
-        var height = modifiersData.maxSize.height;
-        var content = popper.querySelector(".".concat(styles__default.default.scrollableContent));
-        if (content && !content.style.maxHeight) {
-            content.style.maxHeight = "".concat(height, "px");
-        }
-    },
-};
 var DEFAULT_OFFSET = [0, 0];
 // Минимальное расстояние стрелки до края поповера
 var MIN_DISTANCE_TO_EDGE = 24;
@@ -65,10 +52,11 @@ function getArrowPadding(_a) {
     return 0;
 }
 var Popover = React.forwardRef(function (_a, ref) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k, scrollableContentClassName = _a.scrollableContentClassName;
     var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
     var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
     var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
+    var _p = React.useState(function () { return ({}); }), maxSizeOptions = _p[0], setMaxSizeOptions = _p[1];
     var updatePopperRef = React.useRef();
     var popperRef = React.useRef(null);
     var innerRef = React.useRef(null);
@@ -92,9 +80,8 @@ var Popover = React.forwardRef(function (_a, ref) {
         if (preventOverflow) {
             modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
-        if (availableHeight) {
-            modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
-            modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
+        if (coreComponentsShared.isFn(availableHeight) || availableHeight) {
+            modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: maxSizeOptions }));
         }
         return modifiers;
     }, [
@@ -105,14 +92,22 @@ var Popover = React.forwardRef(function (_a, ref) {
         preventOverflow,
         availableHeight,
         arrowElement,
+        maxSizeOptions,
     ]);
-    var _p = reactPopper.usePopper(referenceElement, popperElement, {
+    var _q = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: popperModifiers,
-    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
+    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update, state = _q.state;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        var _a;
+        var nextBoundry = coreComponentsShared.isFn(availableHeight) ? (_a = availableHeight()) !== null && _a !== void 0 ? _a : undefined : undefined;
+        if (!(maxSizeOptions.boundary === nextBoundry)) {
+            setMaxSizeOptions({ boundary: nextBoundry });
+        }
+    });
     hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -143,10 +138,16 @@ var Popover = React.forwardRef(function (_a, ref) {
     }, [anchorElement, useAnchorWidth]);
     var renderContent = function (computedZIndex) {
         var _a;
-        var _b;
+        var _b, _c;
         return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className) }, attributes.popper),
-            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
-                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles__default.default.scrollableContent] = availableHeight, _a)) }, children),
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef, style: {
+                    maxHeight: coreComponentsShared.isFn(availableHeight) || availableHeight
+                        ? (_c = state === null || state === void 0 ? void 0 : state.modifiersData.maxSize) === null || _c === void 0 ? void 0 : _c.height
+                        : undefined,
+                } },
+                React__default.default.createElement("div", { className: cn__default.default(scrollableContentClassName, (_a = {},
+                        _a[styles__default.default.scrollableContent] = coreComponentsShared.isFn(availableHeight) || availableHeight,
+                        _a)) }, children),
                 withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
     };
     return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {

package/popover/esm/Component.d.ts

@@ -33,9 +33,9 @@ type PopoverProps = {
      */
     preventOverflow?: boolean;
     /**
-     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
      */
-    availableHeight?: boolean;
+    availableHeight?: boolean | (() => Element | null | undefined);
     /**
      * Если `true`, будет отрисована стрелочка
      */
@@ -96,6 +96,10 @@ type PopoverProps = {
      * Контент
      */
     children?: ReactNode;
+    /**
+     * Класс для скролл контейнера
+     */
+    scrollableContentClassName?: string;
 };
 declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };

package/popover/esm/Component.js

@@ -7,11 +7,12 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import maxSize from 'popper-max-size-modifier';
 import { Portal } from '../../portal/esm';
+import { isFn } from '../../shared/esm';
 import { Stack } from '../../stack/esm';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { stackingOrder } from '@alfalab/stack-context';
 
-var styles = {"component":"popover__component_a46z7","inner":"popover__inner_a46z7","scrollableContent":"popover__scrollableContent_a46z7","arrow":"popover__arrow_a46z7","enter":"popover__enter_a46z7","enterActive":"popover__enterActive_a46z7","exit":"popover__exit_a46z7","exitActive":"popover__exitActive_a46z7"};
+var styles = {"component":"popover__component_aairy","inner":"popover__inner_aairy","scrollableContent":"popover__scrollableContent_aairy","arrow":"popover__arrow_aairy","enter":"popover__enter_aairy","enterActive":"popover__enterActive_aairy","exit":"popover__exit_aairy","exitActive":"popover__exitActive_aairy"};
 require('./index.css');
 
 var DEFAULT_TRANSITION = {
@@ -23,20 +24,6 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
-var availableHieghtModifier = {
-    name: 'availableHeight',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['maxSize'],
-    fn: function (_a) {
-        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
-        var height = modifiersData.maxSize.height;
-        var content = popper.querySelector(".".concat(styles.scrollableContent));
-        if (content && !content.style.maxHeight) {
-            content.style.maxHeight = "".concat(height, "px");
-        }
-    },
-};
 var DEFAULT_OFFSET = [0, 0];
 // Минимальное расстояние стрелки до края поповера
 var MIN_DISTANCE_TO_EDGE = 24;
@@ -57,10 +44,11 @@ function getArrowPadding(_a) {
     return 0;
 }
 var Popover = forwardRef(function (_a, ref) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k, scrollableContentClassName = _a.scrollableContentClassName;
     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(function () { return ({}); }), maxSizeOptions = _p[0], setMaxSizeOptions = _p[1];
     var updatePopperRef = useRef();
     var popperRef = useRef(null);
     var innerRef = useRef(null);
@@ -84,9 +72,8 @@ var Popover = forwardRef(function (_a, ref) {
         if (preventOverflow) {
             modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
-        if (availableHeight) {
-            modifiers.push(__assign(__assign({}, maxSize), { options: {} }));
-            modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
+        if (isFn(availableHeight) || availableHeight) {
+            modifiers.push(__assign(__assign({}, maxSize), { options: maxSizeOptions }));
         }
         return modifiers;
     }, [
@@ -97,14 +84,22 @@ var Popover = forwardRef(function (_a, ref) {
         preventOverflow,
         availableHeight,
         arrowElement,
+        maxSizeOptions,
     ]);
-    var _p = usePopper(referenceElement, popperElement, {
+    var _q = usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: popperModifiers,
-    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
+    }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update, state = _q.state;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
+    useLayoutEffect_SAFE_FOR_SSR(function () {
+        var _a;
+        var nextBoundry = isFn(availableHeight) ? (_a = availableHeight()) !== null && _a !== void 0 ? _a : undefined : undefined;
+        if (!(maxSizeOptions.boundary === nextBoundry)) {
+            setMaxSizeOptions({ boundary: nextBoundry });
+        }
+    });
     useLayoutEffect_SAFE_FOR_SSR(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -135,10 +130,16 @@ var Popover = forwardRef(function (_a, ref) {
     }, [anchorElement, useAnchorWidth]);
     var renderContent = function (computedZIndex) {
         var _a;
-        var _b;
+        var _b, _c;
         return (React.createElement("div", __assign({ ref: mergeRefs([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
-            React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
-                React.createElement("div", { className: cn((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
+            React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef, style: {
+                    maxHeight: isFn(availableHeight) || availableHeight
+                        ? (_c = state === null || state === void 0 ? void 0 : state.modifiersData.maxSize) === null || _c === void 0 ? void 0 : _c.height
+                        : undefined,
+                } },
+                React.createElement("div", { className: cn(scrollableContentClassName, (_a = {},
+                        _a[styles.scrollableContent] = isFn(availableHeight) || availableHeight,
+                        _a)) }, children),
                 withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
     };
     return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {