@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/cjs/components/AppRoot/AppRoot.js

@@ -15,7 +15,6 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useAppearance = require("../../hooks/useAppearance");
@@ -32,16 +31,32 @@ var warn = (0, _warnOnce.warnOnce)("AppRoot");
 var vkuiSizeXClassNames = _define_property._({
     none: "vkui--sizeX-none"
 }, _adaptivity.SizeType.REGULAR, "vkui--sizeX-regular");
+var vkuiLayoutClassNames = {
+    card: "vkui--layout-card",
+    plain: "vkui--layout-plain"
+};
+function containerClassNames(layout, sizeX) {
+    var classNames = [];
+    if (layout) {
+        classNames.push(vkuiLayoutClassNames[layout]);
+    }
+    if (sizeX !== _adaptivity.SizeType.COMPACT) {
+        classNames.push(vkuiSizeXClassNames[sizeX]);
+    }
+    return classNames;
+}
 var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
 var AppRoot = function(_param) {
-    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "full" : _param_mode, _param_scroll = _param.scroll, scroll = _param_scroll === void 0 ? "global" : _param_scroll, tmp = _param.portalRoot, portalRootProp = tmp === void 0 ? null : tmp, disablePortal = _param.disablePortal, className = _param.className, safeAreaInsets = _param.safeAreaInsets, props = _object_without_properties._(_param, [
+    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "full" : _param_mode, _param_scroll = _param.scroll, scroll = _param_scroll === void 0 ? "global" : _param_scroll, tmp = _param.portalRoot, portalRootProp = tmp === void 0 ? null : tmp, disablePortal = _param.disablePortal, disableParentTransformForPositionFixedElements = _param.disableParentTransformForPositionFixedElements, className = _param.className, safeAreaInsets = _param.safeAreaInsets, layout = _param.layout, props = _object_without_properties._(_param, [
         "children",
         "mode",
         "scroll",
         "portalRoot",
         "disablePortal",
+        "disableParentTransformForPositionFixedElements",
         "className",
-        "safeAreaInsets"
+        "safeAreaInsets",
+        "layout"
     ]);
     var isKeyboardInputActive = (0, _useKeyboardInputTracker.useKeyboardInputTracker)();
     var rootRef = _react.useRef(null);
@@ -83,8 +98,7 @@ var AppRoot = function(_param) {
     ]);
     // setup root classes
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
-        var _parent_classList;
-        var _rootRef_current, _parent;
+        var _rootRef_current;
         if (mode === "partial") {
             return _vkjs.noop;
         }
@@ -92,13 +106,25 @@ var AppRoot = function(_param) {
         var classes = [
             "vkui__root"
         ].concat(mode === "embedded" ? "vkui__root--embedded" : []);
-        (_parent = parent) === null || _parent === void 0 ? void 0 : (_parent_classList = _parent.classList).add.apply(_parent_classList, _to_consumable_array._(classes));
-        return function() {
+        if (parent) {
             var _parent_classList;
-            var _parent;
-            (_parent = parent) === null || _parent === void 0 ? void 0 : (_parent_classList = _parent.classList).remove.apply(_parent_classList, _to_consumable_array._(classes));
+            if (mode === "embedded" && !disableParentTransformForPositionFixedElements) {
+                parent.style.transform = "translate3d(0, 0, 0)";
+            }
+            (_parent_classList = parent.classList).add.apply(_parent_classList, _to_consumable_array._(classes));
+        }
+        return function() {
+            if (parent) {
+                var _parent_classList;
+                if (mode === "embedded" && !disableParentTransformForPositionFixedElements) {
+                    parent.style.transform = "";
+                }
+                (_parent_classList = parent.classList).remove.apply(_parent_classList, _to_consumable_array._(classes));
+            }
         };
-    }, []);
+    }, [
+        disableParentTransformForPositionFixedElements
+    ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
         if (mode === "full") {
             document.documentElement.classList.add("vkui");
@@ -141,21 +167,24 @@ var AppRoot = function(_param) {
     ]);
     // adaptivity handler
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+        var _container_classList;
         var _rootRef_current;
         if (mode === "partial") {
             return _vkjs.noop;
         }
-        var className = sizeX !== _adaptivity.SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;
+        var _$classNames = containerClassNames(layout, sizeX);
         var container = mode === "embedded" ? (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.parentElement : document.body;
-        if (className === null || !container) {
+        if (!_$classNames.length || !container) {
             return _vkjs.noop;
         }
-        container.classList.add(className);
+        (_container_classList = container.classList).add.apply(_container_classList, _to_consumable_array._(_$classNames));
         return function() {
-            container.classList.remove(className);
+            var _container_classList;
+            (_container_classList = container.classList).remove.apply(_container_classList, _to_consumable_array._(_$classNames));
         };
     }, [
-        sizeX
+        sizeX,
+        layout
     ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
         if (mode !== "full" || appearance === undefined) {
@@ -180,13 +209,12 @@ var AppRoot = function(_param) {
             embedded: mode === "embedded",
             keyboardInput: isKeyboardInputActive,
             mode: mode,
-            disablePortal: disablePortal
+            disablePortal: disablePortal,
+            layout: layout
         }
     }, /*#__PURE__*/ _react.createElement(ScrollController, {
         elRef: rootRef
-    }, /*#__PURE__*/ _react.createElement(_icons.IconSettingsProvider, {
-        classPrefix: "vkui"
-    }, children)));
+    }, children));
     return mode === "partial" ? content : /*#__PURE__*/ _react.createElement("div", _object_spread._({
         ref: rootRef,
         className: (0, _vkjs.classNames)("vkuiAppRoot", hasPointer === undefined ? "vkuiAppRoot--pointer-none" : !hasPointer && "vkuiAppRoot--pointer-has-not", className)

package/dist/cjs/components/AppRoot/AppRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  safeAreaInsets,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","warn","warnOnce","vkuiSizeXClassNames","none","SizeType","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","safeAreaInsets","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","document","useDOM","deprecatedInsets","useInsets","insets","appearance","useAppearance","useAdaptivity","hasPointer","sizeX","process","env","NODE_ENVIRONMENT","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","parent","noop","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","IconSettingsProvider","classPrefix","div","ref","classNames"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst vkuiLayoutClassNames = {\n  card: 'vkui--layout-card',\n  plain: 'vkui--layout-plain',\n};\n\nfunction containerClassNames(layout: AppRootProps['layout'], sizeX: SizeType | 'none'): string[] {\n  const classNames: string[] = [];\n\n  if (layout) {\n    classNames.push(vkuiLayoutClassNames[layout]);\n  }\n\n  if (sizeX !== SizeType.COMPACT) {\n    classNames.push(vkuiSizeXClassNames[sizeX]);\n  }\n\n  return classNames;\n}\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  layout?: 'card' | 'plain';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets,\n  layout,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    if (parent) {\n      if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n        parent.style.transform = 'translate3d(0, 0, 0)';\n      }\n      parent.classList.add(...classes);\n    }\n\n    return () => {\n      if (parent) {\n        if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n          parent.style.transform = '';\n        }\n        parent.classList.remove(...classes);\n      }\n    };\n  }, [disableParentTransformForPositionFixedElements]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const classNames = containerClassNames(layout, sizeX);\n\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (!classNames.length || !container) {\n      return noop;\n    }\n\n    container.classList.add(...classNames);\n    return () => {\n      container.classList.remove(...classNames);\n    };\n  }, [sizeX, layout]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n        layout,\n      }}\n    >\n      <ScrollController elRef={rootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","warn","warnOnce","vkuiSizeXClassNames","none","SizeType","REGULAR","vkuiLayoutClassNames","card","plain","containerClassNames","layout","sizeX","classNames","push","COMPACT","INSET_CUSTOM_PROPERTY_PREFIX","children","mode","scroll","portalRootProp","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","document","useDOM","deprecatedInsets","useInsets","insets","appearance","useAppearance","useAdaptivity","hasPointer","process","env","NODE_ENVIRONMENT","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","noop","parent","classes","concat","style","transform","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","setProperty","removeProperty","container","length","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref"],"mappings":";;;;+BAgFaA;;;eAAAA;;;;;;;;;+DAhFU;oBACU;6BACH;6BACA;yBACJ;uCACc;0BACf;mBACF;2BACK;yCACc;wBACjB;8BACM;6BACiC;AAGhE,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAStB,IAAMC,sBAEJ;IADAC,MAAM;GACLC,oBAAQ,CAACC,OAAO,EAAG;AAGtB,IAAMC,uBAAuB;IAC3BC,MAAM;IACNC,OAAO;AACT;AAEA,SAASC,oBAAoBC,MAA8B,EAAEC,KAAwB;IACnF,IAAMC,aAAuB,EAAE;IAE/B,IAAIF,QAAQ;QACVE,WAAWC,IAAI,CAACP,oBAAoB,CAACI,OAAO;IAC9C;IAEA,IAAIC,UAAUP,oBAAQ,CAACU,OAAO,EAAE;QAC9BF,WAAWC,IAAI,CAACX,mBAAmB,CAACS,MAAM;IAC5C;IAEA,OAAOC;AACT;AAEA,IAAMG,+BAAgC;AAgC/B,IAAMhB,UAAU;QACrBiB,kBAAAA,+BACAC,MAAAA,gCAAO,6CACPC,QAAAA,oCAAS,0BACGC,aAAZC,YAAYD,iBAAAA,iBAAiB,OAAjBA,KACZE,uBAAAA,eACAC,wDAAAA,gDACAC,mBAAAA,WACAC,wBAAAA,gBACAd,gBAAAA,QACGe;QATHT;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAd;;IAGA,IAAMgB,wBAAwBC,IAAAA,gDAAuB;IACrD,IAAMC,UAAUC,OAAMC,MAAM,CAAwB;IACpD,IAAoCD,qCAAAA,OAAME,QAAQ,CAAqB,WAAhEX,aAA6BS,oBAAjBG,gBAAiBH;IACpC,IAAM,AAAEI,WAAaC,IAAAA,WAAM,IAAnBD;IACR,IAAME,mBAAmBC,IAAAA,oBAAS,EAAC,CAACZ;IACpC,IAAMa,SAASb,iBAAiBA,iBAAiBW;IACjD,IAAMG,aAAaC,IAAAA,4BAAa;IAEhC,IAAuCC,kBAAAA,IAAAA,4BAAa,KAA5CC,aAA+BD,gBAA/BC,mCAA+BD,gBAAnB7B,OAAAA,0CAAQ;IAE5B,IAAI+B,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,IAAI,CAACpB,gBAAgB;YACnB,2BAA2B;YAC3BxB,KAAK,+PAA+P,kBAAkB;QACxR;IACF;IAEA,eAAe;IACf6C,IAAAA,oDAAyB,EAAC;QACxB,IAAIC,SAA6B;QACjC,IAAI3B,gBAAgB;YAClB,IAAI4B,IAAAA,wBAAW,EAAC5B,iBAAiB;gBAC/B2B,SAAS3B,eAAe6B,OAAO;YACjC,OAAO;gBACLF,SAAS3B;YACX;QACF;QACA,IAAI,CAAC2B,QAAQ;YACXA,SAASb,SAAUgB,aAAa,CAAC;YACjChB,SAAUiB,IAAI,CAACC,WAAW,CAACL;QAC7B;QACAd,cAAcc;QACd,OAAO;YACL,IAAI,CAAC3B,gBAAgB;oBACnB2B,uBAAAA;iBAAAA,UAAAA,oBAAAA,+BAAAA,wBAAAA,QAAQM,aAAa,cAArBN,4CAAAA,sBAAuBO,WAAW,CAACP;YACrC;QACF;IACF,GAAG;QAAC3B;KAAe;IAEnB,qBAAqB;IACrB0B,IAAAA,oDAAyB,EAAC;YAKTjB;QAJf,IAAIX,SAAS,WAAW;YACtB,OAAOqC,UAAI;QACb;QAEA,IAAMC,UAAS3B,mBAAAA,QAAQoB,OAAO,cAAfpB,uCAAAA,iBAAiBwB,aAAa;QAC7C,IAAMI,UAAU;YAAC;SAAa,CAACC,MAAM,CAACxC,SAAS,aAAa,yBAAyB,EAAE;QACvF,IAAIsC,QAAQ;gBAIVA;YAHA,IAAItC,SAAS,cAAc,CAACK,gDAAgD;gBAC1EiC,OAAOG,KAAK,CAACC,SAAS,GAAG;YAC3B;YACAJ,CAAAA,oBAAAA,OAAOK,SAAS,EAACC,GAAG,CAApBN,MAAAA,mBAAqB,uBAAGC;QAC1B;QAEA,OAAO;YACL,IAAID,QAAQ;oBAIVA;gBAHA,IAAItC,SAAS,cAAc,CAACK,gDAAgD;oBAC1EiC,OAAOG,KAAK,CAACC,SAAS,GAAG;gBAC3B;gBACAJ,CAAAA,oBAAAA,OAAOK,SAAS,EAACE,MAAM,CAAvBP,MAAAA,mBAAwB,uBAAGC;YAC7B;QACF;IACF,GAAG;QAAClC;KAA+C;IAEnDuB,IAAAA,oDAAyB,EAAC;QACxB,IAAI5B,SAAS,QAAQ;YACnBgB,SAAU8B,eAAe,CAACH,SAAS,CAACC,GAAG,CAAC;YAExC,OAAO;gBACL5B,SAAU8B,eAAe,CAACH,SAAS,CAACE,MAAM,CAAC;YAC7C;QACF;QAEA,OAAOE;IACT,GAAG;QAAC/B;QAAUhB;KAAK;IAEnB,eAAe;IACf4B,IAAAA,oDAAyB,EAAC;YACGjB;QAA3B,IAAIX,SAAS,aAAa,GAACW,mBAAAA,QAAQoB,OAAO,cAAfpB,uCAAAA,iBAAiBwB,aAAa,GAAE;YACzD,OAAOE,UAAI;QACb;QAEA,IAAMC,SAAS3B,QAAQoB,OAAO,CAACI,aAAa;QAE5C,IAAIa;QACJ,IAAKA,OAAO5B,OAAQ;YAClB,IAAIA,OAAO6B,cAAc,CAACD,QAAQ,OAAO5B,MAAM,CAAC4B,IAAI,KAAK,UAAU;gBACjE,IAAME,QAAQ9B,MAAM,CAAC4B,IAAI;gBACzBV,OAAOG,KAAK,CAACU,WAAW,CAACrD,+BAA+BkD,KAAK,AAAC,GAAQ,OAANE,OAAM;gBACtE/C,cACEA,WAAWsC,KAAK,CAACU,WAAW,CAACrD,+BAA+BkD,KAAK,AAAC,GAAQ,OAANE,OAAM;YAC9E;QACF;QAEA,OAAO;YACL,IAAIF;YACJ,IAAKA,OAAO5B,OAAQ;gBAClB,IAAIA,OAAO6B,cAAc,CAACD,MAAM;oBAC9BV,OAAOG,KAAK,CAACW,cAAc,CAACtD,+BAA+BkD;oBAC3D7C,cAAcA,WAAWsC,KAAK,CAACW,cAAc,CAACtD,+BAA+BkD;gBAC/E;YACF;QACF;IACF,GAAG;QAAC5B;QAAQjB;KAAW;IAEvB,qBAAqB;IACrByB,IAAAA,oDAAyB,EAAC;YAaxByB;YANwC1C;QANxC,IAAIX,SAAS,WAAW;YACtB,OAAOqC,UAAI;QACb;QAEA,IAAM1C,eAAaH,oBAAoBC,QAAQC;QAE/C,IAAM2D,YAAYrD,SAAS,cAAaW,mBAAAA,QAAQoB,OAAO,cAAfpB,uCAAAA,iBAAiBwB,aAAa,GAAGnB,SAAUiB,IAAI;QAEvF,IAAI,CAACtC,aAAW2D,MAAM,IAAI,CAACD,WAAW;YACpC,OAAOhB,UAAI;QACb;QAEAgB,CAAAA,uBAAAA,UAAUV,SAAS,EAACC,GAAG,CAAvBS,MAAAA,sBAAwB,uBAAG1D;QAC3B,OAAO;gBACL0D;YAAAA,CAAAA,uBAAAA,UAAUV,SAAS,EAACE,MAAM,CAA1BQ,MAAAA,sBAA2B,uBAAG1D;QAChC;IACF,GAAG;QAACD;QAAOD;KAAO;IAElBmC,IAAAA,oDAAyB,EAAC;QACxB,IAAI5B,SAAS,UAAUqB,eAAe0B,WAAW;YAC/C,OAAOV,UAAI;QACb;QACArB,SAAU8B,eAAe,CAACL,KAAK,CAACU,WAAW,CAAC,gBAAgB9B;QAE5D,OAAO;mBAAML,SAAU8B,eAAe,CAACL,KAAK,CAACW,cAAc,CAAC;;IAC9D,GAAG;QAAC/B;KAAW;IAEf,IAAMkC,mBAAmB3C,OAAM4C,OAAO,CACpC;eAAOvD,WAAW,YAAYwD,sCAAuB,GAAGC,qCAAsB;OAC9E;QAACzD;KAAO;IAGV,IAAM0D,wBACJ,qBAACC,8BAAc,CAACC,QAAQ;QACtBC,OAAO;YACLC,SAASpD;YACTR,YAAAA;YACA6D,UAAUhE,SAAS;YACnBiE,eAAexD;YACfT,MAAAA;YACAI,eAAAA;YACAX,QAAAA;QACF;qBAEA,qBAAC8D;QAAiBW,OAAOvD;OAAUZ;IAIvC,OAAOC,SAAS,YACd2D,wBAEA,qBAACQ;QACCC,KAAKzD;QACLL,WAAWX,IAAAA,gBAAU,iBAEnB6B,eAAeuB,0CAEX,CAACvB,8CACLlB;OAEEE,QAEHmD;AAGP"}

package/dist/cjs/components/AppRoot/AppRootContext.d.ts

@@ -6,5 +6,6 @@ export interface AppRootContextInterface {
     mode?: 'partial' | 'embedded' | 'full';
     keyboardInput?: boolean;
     disablePortal?: boolean;
+    layout?: 'card' | 'plain';
 }
 export declare const AppRootContext: React.Context<AppRootContextInterface>;

package/dist/cjs/components/AppRoot/AppRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["AppRootContext","React","createContext","portalRoot"],"mappings":";;;;+BAWaA;;;eAAAA;;;;+DAXU;AAWhB,IAAMA,iBAAiBC,OAAMC,aAAa,CAA0B;IACzEC,YAAY;AACd"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n  layout?: 'card' | 'plain';\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["AppRootContext","React","createContext","portalRoot"],"mappings":";;;;+BAYaA;;;eAAAA;;;;+DAZU;AAYhB,IAAMA,iBAAiBC,OAAMC,aAAa,CAA0B;IACzEC,YAAY;AACd"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface AspectRatioProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     className?: string;
     /**
      * По умолчанию, вложенный контент будет растягиваться и заполнять весь блок.
@@ -19,4 +19,4 @@ export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>,
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */
-export declare function AspectRatio({ ratio, children, mode, className, getRootRef, style: styleProp, ...props }: AspectRatioProps): JSX.Element;
+export declare function AspectRatio({ ratio, children, mode, style: styleProp, ...props }: AspectRatioProps): JSX.Element;

package/dist/cjs/components/AspectRatio/AspectRatio.js

@@ -14,21 +14,19 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 function AspectRatio(_param) {
-    var ratio = _param.ratio, children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "stretch" : _param_mode, className = _param.className, getRootRef = _param.getRootRef, styleProp = _param.style, props = _object_without_properties._(_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, [
         "ratio",
         "children",
         "mode",
-        "className",
-        "getRootRef",
         "style"
     ]);
     var style = _define_property._({}, "--vkui_internal--aspect_ratio", String(ratio));
-    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiAspectRatio", mode === "stretch" && "vkuiAspectRatio--mode-stretch", className),
-        style: _object_spread._({}, styleProp, style),
-        ref: getRootRef
-    }, props), children);
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: (0, _vkjs.classNames)("vkuiAspectRatio", mode === "stretch" && "vkuiAspectRatio--mode-stretch"),
+        style: _object_spread._({}, styleProp, style)
+    }, props));
 }
 
 //# sourceMappingURL=AspectRatio.js.map

package/dist/cjs/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, HasRootRef } from '../../types';\nimport styles from './AspectRatio.module.css';\n\nexport interface AspectRatioProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<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  className,\n  getRootRef,\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    <div\n      className={classNames(\n        styles.AspectRatio,\n        mode === 'stretch' && styles['AspectRatio--mode-stretch'],\n        className,\n      )}\n      style={{ ...styleProp, ...style }}\n      ref={getRootRef}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["AspectRatio","ratio","children","mode","className","getRootRef","style","styleProp","props","String","div","classNames","ref"],"mappings":";;;;+BA2BgBA;;;eAAAA;;;;;;;+DA3BO;oBACI;AA0BpB,SAASA,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,YAJ0B,OAI1BA,WACAC,aAL0B,OAK1BA,YACAC,AAAOC,YANmB,OAM1BD,OACGE,qCAPuB;QAC1BP;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,uBAAC,iCAAkCG,OAAOR;IAG5C,qBACE,qBAACS;QACCN,WAAWO,IAAAA,gBAAU,qBAEnBR,SAAS,8CACTC;QAEFE,OAAO,qBAAKC,WAAcD;QAC1BM,KAAKP;OACDG,QAEHN;AAGP"}
+{"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":["AspectRatio","ratio","children","mode","style","styleProp","props","String","RootComponent","baseClassName","classNames"],"mappings":";;;;+BA0BgBA;;;eAAAA;;;;;;;+DA1BO;oBACI;6BAEG;AAuBvB,SAASA,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,AAAOC,YAJmB,OAI1BD,OACGE,qCALuB;QAC1BL;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,uBAAC,iCAAkCG,OAAON;IAG5C,qBACE,qBAACO,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,qBAEvBP,SAAS;QAEXC,OAAO,qBAAKC,WAAcD;OACtBE;AAGV"}

package/dist/cjs/components/Badge/Badge.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface BadgeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     mode: 'new' | 'prominent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */
-export declare const Badge: ({ mode, className, ...restProps }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ mode, ...restProps }: BadgeProps) => React.JSX.Element;

package/dist/cjs/components/Badge/Badge.js

@@ -13,16 +13,18 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
+var stylesMode = {
+    new: "vkuiBadge--mode-new",
+    prominent: "vkuiBadge--mode-prominent"
+};
 var Badge = function(_param) /*#__PURE__*/ {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "new" : _param_mode, className = _param.className, restProps = _object_without_properties._(_param, [
-        "mode",
-        "className"
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "new" : _param_mode, restProps = _object_without_properties._(_param, [
+        "mode"
     ]);
-    return _react.createElement("span", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiBadge", {
-            new: "vkuiBadge--mode-new",
-            prominent: "vkuiBadge--mode-prominent"
-        }[mode], className)
+    return _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        Component: "span",
+        baseClassName: (0, _vkjs.classNames)("vkuiBadge", stylesMode[mode])
     }, restProps));
 };
 

package/dist/cjs/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Badge.module.css';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', className, ...restProps }: BadgeProps) => (\n  <span\n    className={classNames(\n      styles['Badge'],\n      {\n        new: styles['Badge--mode-new'],\n        prominent: styles['Badge--mode-prominent'],\n      }[mode],\n      className,\n    )}\n    {...restProps}\n  />\n);\n"],"names":["Badge","mode","className","restProps","span","classNames","new","prominent"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;+DAXU;oBACI;AAUpB,IAAMA,QAAQ;6BAAGC,MAAAA,gCAAO,qBAAOC,mBAAAA,WAAcC;QAA5BF;QAAcC;;WACpC,qBAACE;QACCF,WAAWG,IAAAA,gBAAU,eAEnB;YACEC,GAAG;YACHC,SAAS;QACX,CAAC,CAACN,KAAK,EACPC;OAEEC;AACL"}
+{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles['Badge--mode-new'],\n  prominent: styles['Badge--mode-prominent'],\n};\n\nexport interface BadgeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', ...restProps }: BadgeProps) => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles['Badge'], stylesMode[mode])}\n    {...restProps}\n  />\n);\n"],"names":["Badge","stylesMode","new","prominent","mode","restProps","RootComponent","Component","baseClassName","classNames"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;+DAlBU;oBACI;6BAEG;AAG9B,IAAMC,aAAa;IACjBC,GAAG;IACHC,SAAS;AACX;AASO,IAAMH,QAAQ;6BAAGI,MAAAA,gCAAO,qBAAUC;QAAjBD;;WACtB,qBAACE,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,eAAkBR,UAAU,CAACG,KAAK;OACvDC;AACL"}

package/dist/cjs/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Тип баннера.
      */
@@ -73,4 +73,4 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRo
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, className, getRootRef, noPadding, ...restProps }: BannerProps) => React.JSX.Element;
+export declare const Banner: ({ mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions, onDismiss, dismissLabel, noPadding, ...restProps }: BannerProps) => React.JSX.Element;

package/dist/cjs/components/Banner/Banner.js

@@ -18,13 +18,18 @@ var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _IconButton = require("../IconButton/IconButton");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Tappable = require("../Tappable/Tappable");
 var _Headline = require("../Typography/Headline/Headline");
 var _Subhead = require("../Typography/Subhead/Subhead");
 var _Text = require("../Typography/Text/Text");
 var _Title = require("../Typography/Title/Title");
+var stylesSize = {
+    s: "vkuiBanner--size-s",
+    m: "vkuiBanner--size-m"
+};
 var Banner = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_imageTheme = _param.imageTheme, imageTheme = _param_imageTheme === void 0 ? "dark" : _param_imageTheme, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, before = _param.before, asideMode = _param.asideMode, header = _param.header, subheader = _param.subheader, text = _param.text, children = _param.children, background = _param.background, actions = _param.actions, onDismiss = _param.onDismiss, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, className = _param.className, getRootRef = _param.getRootRef, noPadding = _param.noPadding, restProps = _object_without_properties._(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "tint" : _param_mode, _param_imageTheme = _param.imageTheme, imageTheme = _param_imageTheme === void 0 ? "dark" : _param_imageTheme, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, before = _param.before, asideMode = _param.asideMode, header = _param.header, subheader = _param.subheader, text = _param.text, children = _param.children, background = _param.background, actions = _param.actions, onDismiss = _param.onDismiss, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Скрыть" : _param_dismissLabel, noPadding = _param.noPadding, restProps = _object_without_properties._(_param, [
         "mode",
         "imageTheme",
         "size",
@@ -38,14 +43,12 @@ var Banner = function(_param) {
         "actions",
         "onDismiss",
         "dismissLabel",
-        "className",
-        "getRootRef",
         "noPadding"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var HeaderTypography = size === "m" ? _Title.Title : _Headline.Headline;
     var SubheaderTypography = size === "m" ? _Text.Text : _Subhead.Subhead;
-    var IconDismissIOS = mode === "image" ? _icons.Icon24DismissDark : _icons.Icon24DismissSubstract;
+    var IconDismissIOS = mode === "image" ? _icons.Icon24DismissDark : _icons.Icon24Dismiss;
     var content = /*#__PURE__*/ _react.createElement(_react.Fragment, null, mode === "image" && background && /*#__PURE__*/ _react.createElement("div", {
         "aria-hidden": true,
         className: "vkuiBanner__bg"
@@ -66,12 +69,10 @@ var Banner = function(_param) {
     }, text), (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__actions"
     }, actions)));
-    return /*#__PURE__*/ _react.createElement("section", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === _platform.Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", {
-            s: "vkuiBanner--size-s",
-            m: "vkuiBanner--size-m"
-        }[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted", className),
-        ref: getRootRef
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
+        Component: "section"
+    }, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === _platform.Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", stylesSize[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted")
     }), asideMode === "expand" ? /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
         className: "vkuiBanner__in",
         activeMode: platform === _platform.Platform.IOS ? "opacity" : "background",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\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 React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\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  className,\n  getRootRef,\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 : Icon24DismissSubstract;\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    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        !noPadding && styles['Banner--withPadding'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\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    </section>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","noPadding","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","div","aria-hidden","hasReactNode","Component","weight","level","React","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA6FaA;;;eAAAA;;;;;;;+DA7FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA6Ef,IAAMA,SAAS;6BACpBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAhBHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBjB,SAAS,MAAMkB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBpB,SAAS,MAAMqB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBzB,SAAS,UAAU0B,wBAAiB,GAAGC,6BAAsB;IAEpF,IAAMC,wBACJ,4CACG5B,SAAS,WAAWS,4BACnB,qBAACoB;QAAIC,eAAAA;QAAYjB,SAAS;OACvBJ,aAIJN,wBAAU,qBAAC0B;QAAIhB,SAAS;OAA6BV,uBAEtD,qBAAC0B;QAAIhB,SAAS;OACXkB,IAAAA,kBAAY,EAAC1B,yBACZ,qBAACc;QAAiBa,WAAU;QAAIC,QAAO;QAAIC,OAAOhC,SAAS,MAAM,MAAM;OACpEG,SAGJ0B,IAAAA,kBAAY,EAACzB,4BACZ,qBAACgB;QAAoBU,WAAU;QAAInB,SAAS;OACzCP,YAGJyB,IAAAA,kBAAY,EAACxB,uBACZ,qBAACgB,UAAI;QAACS,WAAU;QAAInB,SAAS;OAC1BN,OAGJwB,IAAAA,kBAAY,EAACrB,YAAYyB,OAAMC,QAAQ,CAACC,KAAK,CAAC3B,WAAW,mBACxD,qBAACmB;QAAIhB,SAAS;OAA8BH;IAMpD,qBACE,qBAAC4B,uDACKtB;QACJH,WAAW0B,IAAAA,gBAAU,gBAEnB,CAACxB,wCACDE,aAAauB,kBAAQ,CAACC,GAAG,uBACzBzC,SAAS,qCACT;YACE0C,CAAC;YACDC,CAAC;QACH,CAAC,CAACzC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF+B,KAAK9B;QAEJV,cAAc,yBACb,qBAACyC,kBAAQ;QACPhC,SAAS;QACTiC,YAAY7B,aAAauB,kBAAQ,CAACC,GAAG,GAAG,YAAY;QACpDM,MAAK;OAEJnB,uBAED,qBAACC;QAAIhB,SAAS;qBACZ,qBAACmC,oBAAa;QAACnC,SAAS;yBAI5B,qBAACgB;QAAIhB,SAAS;OACXe,SAEAxB,cAAc,2BACb,qBAACyB;QAAIhB,SAAS;qBACZ,qBAACoC,sBAAU;QACTC,cAAYtC;QACZC,SAAS;QACTsC,SAASxC;QACTyC,WAAU;QACVC,WAAW;OAEVpC,aAAauB,kBAAQ,CAACC,GAAG,iBAAG,qBAAChB,sCAAoB,qBAAC6B,mBAAY;AAQ/E"}
+{"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":["Banner","stylesSize","s","m","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","noPadding","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24Dismiss","content","div","aria-hidden","className","hasReactNode","Component","weight","level","React","Children","count","RootComponent","baseClassName","classNames","Platform","IOS","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA8FaA;;;eAAAA;;;;;;;+DA9FU;qBACuD;oBACrC;2BACb;wBACH;0BAEE;6BACG;wBACL;wBACA;uBACD;oBACH;qBACC;AAGtB,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AA4EO,IAAMH,SAAS;6BACpBI,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBf,SAAS,MAAMgB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBlB,SAAS,MAAMmB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBvB,SAAS,UAAUwB,wBAAiB,GAAGC,oBAAa;IAE3E,IAAMC,wBACJ,4CACG1B,SAAS,WAAWS,4BACnB,qBAACkB;QAAIC,eAAAA;QAAYC,SAAS;OACvBpB,aAIJN,wBAAU,qBAACwB;QAAIE,SAAS;OAA6B1B,uBAEtD,qBAACwB;QAAIE,SAAS;OACXC,IAAAA,kBAAY,EAACzB,yBACZ,qBAACY;QAAiBc,WAAU;QAAIC,QAAO;QAAIC,OAAO/B,SAAS,MAAM,MAAM;OACpEG,SAGJyB,IAAAA,kBAAY,EAACxB,4BACZ,qBAACc;QAAoBW,WAAU;QAAIF,SAAS;OACzCvB,YAGJwB,IAAAA,kBAAY,EAACvB,uBACZ,qBAACc,UAAI;QAACU,WAAU;QAAIF,SAAS;OAC1BtB,OAGJuB,IAAAA,kBAAY,EAACpB,YAAYwB,OAAMC,QAAQ,CAACC,KAAK,CAAC1B,WAAW,mBACxD,qBAACiB;QAAIE,SAAS;OAA8BnB;IAMpD,qBACE,qBAAC2B,4BAAa;QACZN,WAAU;OACNjB;QACJwB,eAAeC,IAAAA,gBAAU,gBAEvB,CAAC1B,wCACDE,aAAayB,kBAAQ,CAACC,GAAG,uBACzBzC,SAAS,qCACTH,UAAU,CAACK,KAAK,EAChBF,SAAS,WAAWC,eAAe;QAGpCG,cAAc,yBACb,qBAACsC,kBAAQ;QACPb,SAAS;QACTc,YAAY5B,aAAayB,kBAAQ,CAACC,GAAG,GAAG,YAAY;QACpDG,MAAK;OAEJlB,uBAED,qBAACC;QAAIE,SAAS;qBACZ,qBAACgB,oBAAa;QAAChB,SAAS;yBAI5B,qBAACF;QAAIE,SAAS;OACXH,SAEAtB,cAAc,2BACb,qBAACuB;QAAIE,SAAS;qBACZ,qBAACiB,sBAAU;QACTC,cAAYnC;QACZiB,SAAS;QACTmB,SAASrC;QACTsC,WAAU;QACVC,WAAW;OAEVnC,aAAayB,kBAAQ,CAACC,GAAG,iBAAG,qBAAClB,sCAAoB,qBAAC4B,mBAAY;AAQ/E"}

package/dist/cjs/components/BaseGallery/BaseGallery.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BaseGalleryProps } from './types';
-export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, className, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;

package/dist/cjs/components/BaseGallery/BaseGallery.js

@@ -20,6 +20,7 @@ var _useExternRef = require("../../hooks/useExternRef");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _dom = require("../../lib/dom");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _ScrollArrow = require("../ScrollArrow/ScrollArrow");
 var _Touch = require("../Touch/Touch");
 var _helpers = require("./helpers");
@@ -40,8 +41,12 @@ var SHIFT_DEFAULT_STATE = {
     deltaX: 0,
     indent: 0
 };
+var stylesBullets = {
+    dark: "vkuiBaseGallery__bullets--dark",
+    light: "vkuiBaseGallery__bullets--light"
+};
 var BaseGallery = function(_param) {
-    var _param_bullets = _param.bullets, bullets = _param_bullets === void 0 ? false : _param_bullets, getRootRef = _param.getRootRef, children = _param.children, _param_slideWidth = _param.slideWidth, slideWidth = _param_slideWidth === void 0 ? "100%" : _param_slideWidth, _param_slideIndex = _param.slideIndex, slideIndex = _param_slideIndex === void 0 ? 0 : _param_slideIndex, tmp = _param.isDraggable, isDraggableProp = tmp === void 0 ? true : tmp, onDragStart = _param.onDragStart, onDragEnd = _param.onDragEnd, onChange = _param.onChange, onPrevClick = _param.onPrevClick, onNextClick = _param.onNextClick, _param_align = _param.align, align = _param_align === void 0 ? "left" : _param_align, showArrows = _param.showArrows, getRef = _param.getRef, className = _param.className, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, restProps = _object_without_properties._(_param, [
+    var _param_bullets = _param.bullets, bullets = _param_bullets === void 0 ? false : _param_bullets, getRootRef = _param.getRootRef, children = _param.children, _param_slideWidth = _param.slideWidth, slideWidth = _param_slideWidth === void 0 ? "100%" : _param_slideWidth, _param_slideIndex = _param.slideIndex, slideIndex = _param_slideIndex === void 0 ? 0 : _param_slideIndex, tmp = _param.isDraggable, isDraggableProp = tmp === void 0 ? true : tmp, onDragStart = _param.onDragStart, onDragEnd = _param.onDragEnd, onChange = _param.onChange, onPrevClick = _param.onPrevClick, onNextClick = _param.onNextClick, _param_align = _param.align, align = _param_align === void 0 ? "left" : _param_align, showArrows = _param.showArrows, getRef = _param.getRef, _param_arrowSize = _param.arrowSize, arrowSize = _param_arrowSize === void 0 ? "l" : _param_arrowSize, restProps = _object_without_properties._(_param, [
         "bullets",
         "getRootRef",
         "children",
@@ -56,7 +61,6 @@ var BaseGallery = function(_param) {
         "align",
         "showArrows",
         "getRef",
-        "className",
         "arrowSize"
     ]);
     var slidesStore = _react.useRef({});
@@ -288,9 +292,9 @@ var BaseGallery = function(_param) {
     (align === "left" && layoutState.current.containerWidth - shiftState.shiftX < ((_layoutState_current_layerWidth = layoutState.current.layerWidth) !== null && _layoutState_current_layerWidth !== void 0 ? _layoutState_current_layerWidth : 0) || // otherwise we need to check current slide index (align = right or align = center)
     align !== "left" && slideIndex < layoutState.current.slides.length - 1);
     var isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiBaseGallery", align === "center" && "vkuiBaseGallery--align-center", slideWidth === "custom" && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable", className),
-        ref: rootRef
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiBaseGallery", align === "center" && "vkuiBaseGallery--align-center", slideWidth === "custom" && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable"),
+        getRootRef: rootRef
     }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
         className: "vkuiBaseGallery__viewport",
         onStartX: onStart,
@@ -314,10 +318,7 @@ var BaseGallery = function(_param) {
         }, item);
     }))), bullets && /*#__PURE__*/ _react.createElement("div", {
         "aria-hidden": true,
-        className: (0, _vkjs.classNames)("vkuiBaseGallery__bullets", {
-            dark: "vkuiBaseGallery__bullets--dark",
-            light: "vkuiBaseGallery__bullets--light"
-        }[bullets])
+        className: (0, _vkjs.classNames)("vkuiBaseGallery__bullets", stylesBullets[bullets])
     }, _react.Children.map(children, function(_item, index) {
         return /*#__PURE__*/ _react.createElement("div", {
             className: (0, _vkjs.classNames)("vkuiBaseGallery__bullet", index === slideIndex && "vkuiBaseGallery__bullet--active"),