@vkontakte/vkui 5.8.1 → 5.8.2

package/dist/components.js.tmp

@@ -12150,21 +12150,6 @@ function _unsupported_iterable_to_array(o, minLen) {
         imgRef,
         loaded
     ]);
-    var sizeClassName = function() {
-        switch(size){
-            case 28:
-                return "vkuiImageBase--size-28";
-            case 32:
-                return "vkuiImageBase--size-32";
-            case 40:
-                return "vkuiImageBase--size-40";
-            case 48:
-                return "vkuiImageBase--size-48";
-            case 72:
-                return "vkuiImageBase--size-72";
-        }
-        return null;
-    }();
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context__WEBPACK_IMPORTED_MODULE_4__.ImageBaseContext.Provider, {
         value: {
             size: size
@@ -12174,7 +12159,7 @@ function _unsupported_iterable_to_array(o, minLen) {
             width: size,
             height: size
         }),
-        baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiImageBase", sizeClassName, loaded && "vkuiImageBase--loaded"),
+        baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiImageBase", loaded && "vkuiImageBase--loaded"),
         role: hasSrc ? "img" : "presentation",
         "aria-label": ariaLabel,
         onClick: onClick
@@ -45700,6 +45685,7 @@ var ArrowIcon = function(param) {
     ]);
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_7__.RootComponent, _object_spread({
         Component: "button",
+        type: "button",
         baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiScrollArrow", stylesSize[size], stylesDirection[direction])
     }, restProps), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
         className: "vkuiScrollArrow__icon",
@@ -46226,13 +46212,12 @@ function _object_without_properties_loose(source, excluded) {
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
  * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
- 
+
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */ function AspectRatio(_param) {
-    var ratio = _param.ratio, children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, styleProp = _param.style, props = _object_without_properties(_param, [
+    var ratio = _param.ratio, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, styleProp = _param.style, props = _object_without_properties(_param, [
         "ratio",
-        "children",
         "mode",
         "style"
     ]);
@@ -47928,14 +47913,18 @@ var warn = (0,_lib_warnOnce__WEBPACK_IMPORTED_MODULE_3__.warnOnce)("ActionSheet"
         onClose: onClose,
         className: isDesktop ? className : undefined,
         style: isDesktop ? style : undefined
-    }), (header || text) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("header", {
+    }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+        className: "vkuiActionSheet__content-wrapper"
+    }, (header || text) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("header", {
         className: "vkuiActionSheet__header"
     }, header && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Footnote_Footnote__WEBPACK_IMPORTED_MODULE_13__.Footnote, {
         weight: "2",
         className: "vkuiActionSheet__title"
     }, header), text && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Footnote_Footnote__WEBPACK_IMPORTED_MODULE_13__.Footnote, {
         className: "vkuiActionSheet__text"
-    }, text)), children, platform === _lib_platform__WEBPACK_IMPORTED_MODULE_7__.Platform.IOS && !isDesktop && (iosCloseItem !== null && iosCloseItem !== void 0 ? iosCloseItem : /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ActionSheetDefaultIosCloseItem__WEBPACK_IMPORTED_MODULE_14__.ActionSheetDefaultIosCloseItem, null))));
+    }, text)), children), platform === _lib_platform__WEBPACK_IMPORTED_MODULE_7__.Platform.IOS && !isDesktop && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+        className: "vkuiActionSheet__close-item-wrapper--ios"
+    }, iosCloseItem !== null && iosCloseItem !== void 0 ? iosCloseItem : /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ActionSheetDefaultIosCloseItem__WEBPACK_IMPORTED_MODULE_14__.ActionSheetDefaultIosCloseItem, null))));
     if (isDesktop) {
         return actionSheet;
     }
@@ -48187,10 +48176,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib_floating__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(243);
 /* harmony import */ var _lib_floating__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(245);
 /* harmony import */ var _lib_floating__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(248);
-/* harmony import */ var _AppRoot_AppRootPortal__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(185);
+/* harmony import */ var _lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(64);
+/* harmony import */ var _AppRoot_AppRootPortal__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(185);
 /* harmony import */ var _PopperArrow_DefaultIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(241);
-/* harmony import */ var _PopperArrow_PopperArrow__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(249);
-/* harmony import */ var _RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(81);
+/* harmony import */ var _PopperArrow_PopperArrow__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(249);
+/* harmony import */ var _RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(81);
 /* harmony import */ var _Popper_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(240);
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -48337,6 +48327,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */ var Popper = function(_param) {
@@ -48436,13 +48427,13 @@ function _unsupported_iterable_to_array(o, minLen) {
     }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, floatingPositionStrategy = _useFloating.strategy, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow, hide = _useFloating_middlewareData.hide;
     // TODO [>=6]: убрать getRef
     var handleRootRef = (0,_hooks_useExternRef__WEBPACK_IMPORTED_MODULE_7__.useExternRef)(refs.setFloating, getRef, getRootRef);
-    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function() {
+    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_8__.useIsomorphicLayoutEffect)(function() {
         refs.setReference(targetRef.current);
     }, [
         refs,
         targetRef
     ]);
-    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function() {
+    (0,_lib_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_8__.useIsomorphicLayoutEffect)(function() {
         if (resolvedPlacement && onPlacementChange) {
             onPlacementChange({
                 placement: resolvedPlacement
@@ -48452,13 +48443,13 @@ function _unsupported_iterable_to_array(o, minLen) {
         onPlacementChange,
         resolvedPlacement
     ]);
-    var dropdown = /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_8__.RootComponent, _object_spread_props(_object_spread({}, restProps), {
+    var dropdown = /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_9__.RootComponent, _object_spread_props(_object_spread({}, restProps), {
         baseClassName: "vkuiPopper",
         getRootRef: handleRootRef,
         style: _object_spread({}, styleProp, (0,_lib_floating__WEBPACK_IMPORTED_MODULE_3__.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined), ((_hide = hide) === null || _hide === void 0 ? void 0 : _hide.referenceHidden) && {
             visibility: "hidden"
         })
-    }), arrow && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopperArrow_PopperArrow__WEBPACK_IMPORTED_MODULE_9__.PopperArrow, {
+    }), arrow && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PopperArrow_PopperArrow__WEBPACK_IMPORTED_MODULE_10__.PopperArrow, {
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: arrowClassName,
@@ -48467,7 +48458,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     }), renderContent ? renderContent({
         className: ""
     }) : children);
-    return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_AppRoot_AppRootPortal__WEBPACK_IMPORTED_MODULE_10__.AppRootPortal, {
+    return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_AppRoot_AppRootPortal__WEBPACK_IMPORTED_MODULE_11__.AppRootPortal, {
         forcePortal: forcePortal,
         portalRoot: portalRoot
     }, dropdown);
@@ -52280,7 +52271,6 @@ var ModalRootDesktop = function(param) {
         });
     };
     var openModal = function() {
-        var _enteringState;
         if (!enteringModal || !prevProps) {
             return;
         }
@@ -52295,15 +52285,22 @@ var ModalRootDesktop = function(param) {
                         return onEntered(enteringModal);
                     }, timeout);
                     animateModalOpacity(enteringState, true);
+                    if (enteringState) {
+                        setMaskOpacity(enteringState, 1);
+                    }
                 }
             });
             return;
         }
         // Переход между модальными окнами без анимации
-        if ((_enteringState = enteringState) === null || _enteringState === void 0 ? void 0 : _enteringState.innerElement) {
-            enteringState.innerElement.style.transition = "none";
-            enteringState.innerElement.style.opacity = "1";
-        }
+        requestAnimationFrame(function() {
+            var _enteringState;
+            if ((_enteringState = enteringState) === null || _enteringState === void 0 ? void 0 : _enteringState.innerElement) {
+                enteringState.innerElement.style.transition = "none";
+                enteringState.innerElement.style.opacity = "1";
+                setMaskOpacity(enteringState, 1);
+            }
+        });
         onEntered(enteringModal);
     };
     var closeModal = function(id) {
@@ -53135,6 +53132,7 @@ var ModalRootTouchComponent = /*#__PURE__*/ function(_React_Component) {
                     if ((_enteringState = enteringState) === null || _enteringState === void 0 ? void 0 : _enteringState.innerElement) {
                         enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
                         this.animateTranslate(enteringState, enteringState.translateY);
+                        this.setMaskOpacity(enteringState, 1);
                     }
                 }
                 // focus restoration
@@ -53463,6 +53461,7 @@ var ModalRootTouchComponent = /*#__PURE__*/ function(_React_Component) {
                         var _modalState_translateY = modalState.translateY, translateY = _modalState_translateY === void 0 ? 0 : _modalState_translateY, _modalState_translateYCurrent = modalState.translateYCurrent, translateYCurrent = _modalState_translateYCurrent === void 0 ? 0 : _modalState_translateYCurrent;
                         var opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
                         _this.maskElementRef.current.style.opacity = (0,_helpers_math__WEBPACK_IMPORTED_MODULE_4__.clamp)(opacity, 0, 100).toString();
+                        _this.maskElementRef.current.style.transitionDelay = opacity && _this.props.delayEnter ? "".concat(_this.timeout, "ms") : "";
                     }
                 });
             }
@@ -56179,7 +56178,9 @@ var warn = (0,_lib_warnOnce__WEBPACK_IMPORTED_MODULE_5__.warnOnce)("Group");
     }, restProps), {
         tabIndex: tabIndex,
         baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiInternalGroup", "vkuiGroup", isInsideModal && "vkuiGroup--inside-modal", platform === _lib_platform__WEBPACK_IMPORTED_MODULE_10__.Platform.IOS && "vkuiGroup--ios", sizeX !== _lib_adaptivity__WEBPACK_IMPORTED_MODULE_3__.SizeType.REGULAR && sizeXClassNames[sizeX], mode && stylesMode[mode], stylesPadding[padding])
-    }), header, children, (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(description) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Footnote_Footnote__WEBPACK_IMPORTED_MODULE_11__.Footnote, {
+    }), (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(header) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+        className: "vkuiGroup__header"
+    }, header), children, (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(description) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Footnote_Footnote__WEBPACK_IMPORTED_MODULE_11__.Footnote, {
         className: "vkuiGroup__description"
     }, description)), separator !== "hide" && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Spacing_Spacing__WEBPACK_IMPORTED_MODULE_12__.Spacing, {
         className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiGroup__separator", "vkuiGroup__separator--spacing"),
@@ -57430,15 +57431,9 @@ function _object_without_properties_loose(source, excluded) {
 
 
 var warn = (0,_lib_warnOnce__WEBPACK_IMPORTED_MODULE_3__.warnOnce)("SimpleCell");
-var platformClassNames = {
-    ios: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiSimpleCell--ios", "vkuiInternalSimpleCell--ios"),
-    android: "vkuiSimpleCell--android",
-    vkcom: "vkuiSimpleCell--vkcom"
-};
-var _obj;
-var sizeYClassNames = (_obj = {
-    none: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiSimpleCell--sizeY-none", "vkuiInternalSimpleCell--sizeY-none")
-}, _define_property(_obj, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_4__.SizeType.COMPACT, (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiSimpleCell--sizeY-compact", "vkuiInternalSimpleCell--sizeY-compact")), _define_property(_obj, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_4__.SizeType.REGULAR, "vkuiSimpleCell--sizeY-regular"), _obj);
+var sizeYClassNames = _define_property({
+    none: "vkuiSimpleCell--sizeY-none"
+}, _lib_adaptivity__WEBPACK_IMPORTED_MODULE_4__.SizeType.COMPACT, "vkuiSimpleCell--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */ var SimpleCell = function(_param) {
@@ -57468,9 +57463,11 @@ var sizeYClassNames = (_obj = {
     var hasAfter = (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(after) || hasChevron;
     var _useAdaptivity = (0,_hooks_useAdaptivity__WEBPACK_IMPORTED_MODULE_7__.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tappable_Tappable__WEBPACK_IMPORTED_MODULE_8__.Tappable, _object_spread_props(_object_spread({}, restProps), {
-        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiSimpleCell", "vkuiInternalSimpleCell", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, sizeYClassNames[sizeY], multiline && "vkuiSimpleCell--mult", className)
-    }), before, /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
-        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiSimpleCell__main", "vkuiInternalSimpleCell__main")
+        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiSimpleCell", sizeY !== _lib_adaptivity__WEBPACK_IMPORTED_MODULE_4__.SizeType.REGULAR && sizeYClassNames[sizeY], multiline && "vkuiSimpleCell--mult", className)
+    }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+        className: "vkuiSimpleCell__before"
+    }, before), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+        className: "vkuiSimpleCell__middle"
     }, subhead && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Subhead_Subhead__WEBPACK_IMPORTED_MODULE_9__.Subhead, {
         Component: "span",
         className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiSimpleCell__text", "vkuiSimpleCell__subhead")
@@ -63249,10 +63246,6 @@ function _object_without_properties_loose(source, excluded) {
 
 
 
-var stylesSize = {
-    s: "vkuiBanner--size-s",
-    m: "vkuiBanner--size-m"
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */ var Banner = function(_param) {
@@ -63299,7 +63292,7 @@ var stylesSize = {
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_RootComponent_RootComponent__WEBPACK_IMPORTED_MODULE_10__.RootComponent, _object_spread_props(_object_spread({
         Component: "section"
     }, restProps), {
-        baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === _lib_platform__WEBPACK_IMPORTED_MODULE_11__.Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", stylesSize[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted")
+        baseClassName: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === _lib_platform__WEBPACK_IMPORTED_MODULE_11__.Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", size === "m" && "vkuiBanner--size-m", mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted")
     }), asideMode === "expand" ? /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Tappable_Tappable__WEBPACK_IMPORTED_MODULE_12__.Tappable, {
         className: "vkuiBanner__in",
         activeMode: platform === _lib_platform__WEBPACK_IMPORTED_MODULE_11__.Platform.IOS ? "opacity" : "background",
@@ -75652,7 +75645,7 @@ function _object_without_properties_loose(source, excluded) {
 
 
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */ var PanelHeaderClose = function(_param) {
     var _param_children = _param.children, children = _param_children === void 0 ? "Отмена" : _param_children, restProps = _object_without_properties(_param, [
         "children"
@@ -75788,7 +75781,7 @@ function _object_without_properties_loose(source, excluded) {
 
 
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */ var PanelHeaderBack = function(_param) {
     var label = _param.label, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Назад" : tmp, className = _param.className, restProps = _object_without_properties(_param, [
         "label",
@@ -75939,7 +75932,7 @@ function _object_without_properties_loose(source, excluded) {
 
 
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */ var PanelHeaderSubmit = function(_param) {
     var _param_children = _param.children, children = _param_children === void 0 ? "Готово" : _param_children, restProps = _object_without_properties(_param, [
         "children"
@@ -76043,7 +76036,7 @@ function _object_without_properties_loose(source, excluded) {
 
 
 /**
- * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
+ * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */ var PanelHeaderEdit = function(_param) {
     var _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_editLabel = _param.editLabel, editLabel = _param_editLabel === void 0 ? "Редактировать" : _param_editLabel, _param_doneLabel = _param.doneLabel, doneLabel = _param_doneLabel === void 0 ? "Готово" : _param_doneLabel, restProps = _object_without_properties(_param, [
         "isActive",

package/dist/cssm/components/ActionSheet/ActionSheet.js

@@ -80,6 +80,8 @@ const warn = warnOnce('ActionSheet');
         onClose: onClose,
         className: isDesktop ? className : undefined,
         style: isDesktop ? style : undefined
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['ActionSheet__content-wrapper']
     }, (header || text) && /*#__PURE__*/ React.createElement("header", {
         className: styles['ActionSheet__header']
     }, header && /*#__PURE__*/ React.createElement(Footnote, {
@@ -87,7 +89,9 @@ const warn = warnOnce('ActionSheet');
         className: styles['ActionSheet__title']
     }, header), text && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['ActionSheet__text']
-    }, text)), children, platform === Platform.IOS && !isDesktop && (iosCloseItem ?? /*#__PURE__*/ React.createElement(ActionSheetDefaultIosCloseItem, null))));
+    }, text)), children), platform === Platform.IOS && !isDesktop && /*#__PURE__*/ React.createElement("div", {
+        className: styles['ActionSheet__close-item-wrapper--ios']
+    }, iosCloseItem ?? /*#__PURE__*/ React.createElement(ActionSheetDefaultIosCloseItem, null))));
     if (isDesktop) {
         return actionSheet;
     }

package/dist/cssm/components/ActionSheet/ActionSheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'\n    >,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose(options: ActionSheetOnCloseOptions): void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection,\n  popupOffsetDistance,\n  placement,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  if (process.env.NODE_ENV === 'development' && popupDirection) {\n    // TODO [>=6]: popupDirection\n    warn('Свойство \"popupDirection\" будет удалено в v6. Используйте свойство \"placement\"');\n  }\n\n  popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS &&\n          !isDesktop &&\n          (iosCloseItem ?? <ActionSheetDefaultIosCloseItem />)}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","warnOnce","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","warn","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","closingBy","setClosingBy","useState","undefined","onClose","_action","useRef","afterClose","closedBy","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","process","env","NODE_ENV","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'\n    >,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose(options: ActionSheetOnCloseOptions): void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection,\n  popupOffsetDistance,\n  placement,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  if (process.env.NODE_ENV === 'development' && popupDirection) {\n    // TODO [>=6]: popupDirection\n    warn('Свойство \"popupDirection\" будет удалено в v6. Используйте свойство \"placement\"');\n  }\n\n  popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        <div className={styles['ActionSheet__content-wrapper']}>\n          {(header || text) && (\n            <header className={styles['ActionSheet__header']}>\n              {header && (\n                <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                  {header}\n                </Footnote>\n              )}\n              {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n            </header>\n          )}\n          {children}\n        </div>\n        {platform === Platform.IOS && !isDesktop && (\n          <div className={styles['ActionSheet__close-item-wrapper--ios']}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","warnOnce","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","warn","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","closingBy","setClosingBy","useState","undefined","onClose","_action","useRef","afterClose","closedBy","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","process","env","NODE_ENV","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","div","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}

package/dist/cssm/components/ActionSheet/ActionSheet.module.css

@@ -1,16 +1,16 @@
 .ActionSheet {
-  overflow: hidden;
-  box-shadow: var(--vkui--elevation3);
-  width: calc(100% - 20px);
+  width: 100%;
   max-width: var(--vkui--size_popup_small--regular);
-  align-items: stretch;
-  display: flex;
-  flex-direction: column;
+  padding: 10px;
   box-sizing: border-box;
   animation: animation-actionsheet-intro 0.2s var(--vkui--animation_easing_platform);
+}
+
+.ActionSheet__content-wrapper {
   padding: 8px 0;
-  margin: 10px;
+  overflow: hidden;
   border-radius: 12px;
+  box-shadow: var(--vkui--elevation3);
   background: var(--vkui--color_background_modal);
 }
 
@@ -33,13 +33,25 @@
  */
 
 .ActionSheet--ios {
-  width: 100%;
-  animation: animation-actionsheet-intro 0.3s var(--vkui--animation_easing_platform);
   padding: 8px;
-  margin: unset;
+  animation: animation-actionsheet-intro 0.3s var(--vkui--animation_easing_platform);
   background: transparent;
 }
 
+.ActionSheet--ios .ActionSheet__content-wrapper {
+  border-radius: 14px;
+  padding: 0;
+}
+
+.ActionSheet__close-item-wrapper--ios {
+  margin-top: 8px;
+  margin-bottom: var(--vkui_internal--safe_area_inset_bottom);
+  overflow: hidden;
+  border-radius: 14px;
+  box-shadow: var(--vkui--elevation3);
+  background: var(--vkui--color_background_modal);
+}
+
 .ActionSheet--ios.ActionSheet--closing {
   transform: translateY(100%);
   transition: transform 0.3s var(--vkui--animation_easing_platform);
@@ -47,8 +59,6 @@
 
 .ActionSheet--ios .ActionSheet__header {
   position: relative;
-  overflow: hidden;
-  border-radius: 14px 14px 0 0;
   text-align: center;
 }
 
@@ -86,11 +96,11 @@
   width: auto;
   height: auto;
   animation: none;
-  margin: 0;
+  padding: 0;
   max-width: 100%;
 }
 
-.ActionSheet--desktop.ActionSheet--ios {
+.ActionSheet--desktop.ActionSheet--ios .ActionSheet__content-wrapper {
   border-radius: 14px;
   padding: 0;
 }

package/dist/cssm/components/ActionSheetItem/ActionSheetItem.module.css

@@ -7,7 +7,6 @@
   color: var(--vkui--color_text_primary);
   padding: 0 20px;
   min-height: 48px;
-  border-radius: 0;
   box-sizing: border-box;
 }
 
@@ -109,7 +108,6 @@
 .ActionSheetItem--ios {
   padding: 14px 18px;
   min-height: 56px;
-  border-radius: 0;
   color: var(--vkui--color_text_accent_themed);
   background: var(--vkui--color_background_modal);
 }
@@ -126,17 +124,6 @@
   color: var(--vkui--color_text_negative);
 }
 
-.ActionSheetItem--ios:first-child {
-  border-top-left-radius: 14px;
-  border-top-right-radius: 14px;
-}
-
-.ActionSheetItem--ios:not(.ActionSheetItem--desktop):nth-last-child(2),
-.ActionSheetItem--ios:last-child {
-  border-bottom-left-radius: 14px;
-  border-bottom-right-radius: 14px;
-}
-
 .ActionSheetItem--ios::before {
   position: absolute;
   left: 0;
@@ -193,9 +180,6 @@
 }
 
 .ActionSheetItem--mode-cancel {
-  margin-top: 8px;
-  margin-bottom: var(--vkui_internal--safe_area_inset_bottom);
-  border-radius: 14px;
   min-height: 52px;
 }
 

package/dist/cssm/components/AspectRatio/AspectRatio.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     className?: string;
@@ -6,7 +6,6 @@ export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivEleme
      * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
      */
     mode?: 'stretch' | 'none';
-    children: React.ReactNode;
     /**
      * Например 16 / 9, 4 / 3, 1920 / 1080
      */
@@ -15,8 +14,8 @@ export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivEleme
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
  * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
- 
+
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */
-export declare function AspectRatio({ ratio, children, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;
+export declare function AspectRatio({ ratio, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;

package/dist/cssm/components/AspectRatio/AspectRatio.js

@@ -5,10 +5,10 @@ import styles from './AspectRatio.module.css';
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
  * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
- 
+
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
- */ export function AspectRatio({ ratio, children, mode = 'stretch', style: styleProp, ...props }) {
+ */ export function AspectRatio({ ratio, mode = 'stretch', style: styleProp, ...props }) {
     const style = {
         ['--vkui_internal--aspect_ratio']: String(ratio)
     };

package/dist/cssm/components/AspectRatio/AspectRatio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  children: React.ReactNode;\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n \n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  children,\n  mode = 'stretch',\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    ['--vkui_internal--aspect_ratio']: String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n      )}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","children","mode","style","styleProp","props","String","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAe9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,OAAOC,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMF,QAAmD;QACvD,CAAC,gCAAgC,EAAEG,OAAON;IAC5C;IAEA,qBACE,oBAACH;QACCU,eAAeX,WACbE,OAAOC,WAAW,EAClBG,SAAS,aAAaJ,MAAM,CAAC,4BAA4B;QAE3DK,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;QAC/B,GAAGE,KAAK;;AAGf"}
+{"version":3,"sources":["../../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  className?: string;\n  /**\n   * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.\n   */\n  mode?: 'stretch' | 'none';\n  /**\n   * Например 16 / 9, 4 / 3, 1920 / 1080\n   */\n  ratio: number;\n}\n\n/**\n * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.\n * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.\n\n * @since 5.5.0\n * @see https://vkcom.github.io/VKUI/#/AspectRatio\n */\nexport function AspectRatio({\n  ratio,\n  mode = 'stretch',\n  style: styleProp,\n  ...props\n}: AspectRatioProps): JSX.Element {\n  const style: React.CSSProperties & CSSCustomProperties = {\n    ['--vkui_internal--aspect_ratio']: String(ratio),\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n      )}\n      style={{ ...styleProp, ...style }}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","RootComponent","styles","AspectRatio","ratio","mode","style","styleProp","props","String","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAc9C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,OAAO,SAAS,EAChBC,OAAOC,SAAS,EAChB,GAAGC,OACc;IACjB,MAAMF,QAAmD;QACvD,CAAC,gCAAgC,EAAEG,OAAOL;IAC5C;IAEA,qBACE,oBAACH;QACCS,eAAeV,WACbE,OAAOC,WAAW,EAClBE,SAAS,aAAaH,MAAM,CAAC,4BAA4B;QAE3DI,OAAO;YAAE,GAAGC,SAAS;YAAE,GAAGD,KAAK;QAAC;QAC/B,GAAGE,KAAK;;AAGf"}

package/dist/cssm/components/Banner/Banner.js

@@ -11,10 +11,6 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './Banner.module.css';
-const stylesSize = {
-    s: styles['Banner--size-s'],
-    m: styles['Banner--size-m']
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */ export const Banner = ({ mode = 'tint', imageTheme = 'dark', size = 's', before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel = 'Скрыть', noPadding, ...restProps })=>{
@@ -45,7 +41,7 @@ const stylesSize = {
     return /*#__PURE__*/ React.createElement(RootComponent, {
         Component: "section",
         ...restProps,
-        baseClassName: classNames(styles['Banner'], !noPadding && styles['Banner--withPadding'], platform === Platform.IOS && styles['Banner--ios'], mode === 'image' && styles['Banner--mode-image'], stylesSize[size], mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'])
+        baseClassName: classNames(styles['Banner'], !noPadding && styles['Banner--withPadding'], platform === Platform.IOS && styles['Banner--ios'], mode === 'image' && styles['Banner--mode-image'], size === 'm' && styles['Banner--size-m'], mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'])
     }, asideMode === 'expand' ? /*#__PURE__*/ React.createElement(Tappable, {
         className: styles['Banner__in'],
         activeMode: platform === Platform.IOS ? 'opacity' : 'background',

package/dist/cssm/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nconst stylesSize = {\n  s: styles['Banner--size-s'],\n  m: styles['Banner--size-m'],\n};\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  noPadding,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        !noPadding && styles['Banner--withPadding'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        stylesSize[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","Platform","IconButton","RootComponent","Tappable","Headline","Subhead","Text","Title","styles","stylesSize","s","m","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","noPadding","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","className","Component","weight","level","Children","count","baseClassName","IOS","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  noPadding,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        !noPadding && styles['Banner--withPadding'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        size === 'm' && styles['Banner--size-m'],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","Platform","IconButton","RootComponent","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","noPadding","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","className","Component","weight","level","Children","count","baseClassName","IOS","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"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"}