@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/components/AdaptivityProvider/AdaptivityProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AdaptivityProvider/AdaptivityProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasMouse as _hasPointer } from '@vkontakte/vkjs';\nimport { BridgeAdaptivity, useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';\nimport { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';\n\nexport interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider\n */\nexport const AdaptivityProvider = ({\n  viewWidth,\n  viewHeight,\n  sizeX,\n  sizeY,\n  hasPointer,\n  hasHover,\n  children,\n}: AdaptivityProviderProps) => {\n  const bridge = useBridgeAdaptivity();\n  const adaptivity = React.useMemo(\n    () =>\n      calculateAdaptivity(\n        {\n          viewWidth,\n          viewHeight,\n          sizeX,\n          sizeY,\n          hasPointer,\n          hasHover,\n        },\n        bridge,\n      ),\n    [viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, bridge],\n  );\n\n  return <AdaptivityContext.Provider value={adaptivity}>{children}</AdaptivityContext.Provider>;\n};\n\nfunction calculateAdaptivity(\n  { viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }: AdaptivityProps,\n  bridge: BridgeAdaptivity,\n) {\n  if (bridge.type === 'adaptive') {\n    const { viewportWidth, viewportHeight } = bridge;\n\n    if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n      viewWidth = ViewWidth.DESKTOP;\n    } else if (viewportWidth >= BREAKPOINTS.TABLET) {\n      viewWidth = ViewWidth.TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n      viewWidth = ViewWidth.SMALL_TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.MOBILE) {\n      viewWidth = ViewWidth.MOBILE;\n    } else {\n      viewWidth = ViewWidth.SMALL_MOBILE;\n    }\n\n    if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n      viewHeight = ViewHeight.MEDIUM;\n    } else if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n      viewHeight = ViewHeight.SMALL;\n    } else {\n      viewHeight = ViewHeight.EXTRA_SMALL;\n    }\n\n    if (viewWidth <= ViewWidth.MOBILE) {\n      sizeX = SizeType.COMPACT;\n    } else {\n      sizeX = SizeType.REGULAR;\n    }\n\n    if (\n      (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n      viewHeight <= ViewHeight.EXTRA_SMALL\n    ) {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else if (bridge.type === 'force_mobile' || bridge.type === 'force_mobile_compact') {\n    viewWidth = ViewWidth.MOBILE;\n    sizeX = SizeType.COMPACT;\n\n    if (bridge.type === 'force_mobile_compact') {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else {\n    if (sizeX === undefined && viewWidth !== undefined) {\n      if (viewWidth <= ViewWidth.MOBILE) {\n        sizeX = SizeType.COMPACT;\n      } else {\n        sizeX = SizeType.REGULAR;\n      }\n    }\n    if (sizeY === undefined && viewWidth !== undefined && viewHeight !== undefined) {\n      if (\n        (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n        viewHeight <= ViewHeight.EXTRA_SMALL\n      ) {\n        sizeY = SizeType.COMPACT;\n      } else {\n        sizeY = SizeType.REGULAR;\n      }\n    }\n  }\n\n  return {\n    viewWidth,\n    viewHeight,\n    sizeX,\n    sizeY,\n    hasPointer,\n    hasHover,\n  };\n}\n"],"names":["React","hasMouse","_hasPointer","useBridgeAdaptivity","BREAKPOINTS","SizeType","ViewHeight","ViewWidth","AdaptivityContext","AdaptivityProvider","viewWidth","viewHeight","sizeX","sizeY","hasPointer","hasHover","children","bridge","adaptivity","useMemo","calculateAdaptivity","Provider","value","type","viewportWidth","viewportHeight","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","COMPACT","REGULAR","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/AdaptivityProvider/AdaptivityProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasMouse as _hasPointer } from '@vkontakte/vkjs';\nimport { BridgeAdaptivity, useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';\nimport { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';\n\nconst warn = warnOnce('AdaptivityProvider');\n\nexport interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider\n */\nexport const AdaptivityProvider = ({\n  viewWidth,\n  viewHeight,\n  sizeX,\n  sizeY,\n  hasPointer,\n  hasHover,\n  children,\n}: AdaptivityProviderProps) => {\n  // TODO [>=6]: удалить использование хука (#5049)\n  /* eslint-disable @typescript-eslint/naming-convention */\n  const LEGACY_isPerhapsPropsByBridgeTypeAdaptive =\n    viewWidth !== undefined && viewHeight !== undefined;\n  const LEGACY_isPerhapsPropsByBridgeTypeForceMobile =\n    viewWidth !== undefined && sizeX !== undefined && sizeY !== undefined;\n  const LEGACY_disableInternalUseBridgeAdaptivity =\n    LEGACY_isPerhapsPropsByBridgeTypeAdaptive || LEGACY_isPerhapsPropsByBridgeTypeForceMobile;\n  const LEGACY_bridge = useBridgeAdaptivity(LEGACY_disableInternalUseBridgeAdaptivity);\n  /* eslint-enable @typescript-eslint/naming-convention */\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    // TODO [>=6]: удалить warn\n    if (!LEGACY_disableInternalUseBridgeAdaptivity) {\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useAdaptivity()` из @vkontakte/vk-bridge-react и результат передайте в компонент (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  const adaptivity = React.useMemo(\n    () =>\n      calculateAdaptivity(\n        {\n          viewWidth,\n          viewHeight,\n          sizeX,\n          sizeY,\n          hasPointer,\n          hasHover,\n        },\n        LEGACY_bridge,\n      ),\n    [viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, LEGACY_bridge],\n  );\n\n  return <AdaptivityContext.Provider value={adaptivity}>{children}</AdaptivityContext.Provider>;\n};\n\nfunction calculateAdaptivity(\n  { viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }: AdaptivityProps,\n  LEGACY_bridge: BridgeAdaptivity, // eslint-disable-line @typescript-eslint/naming-convention\n) {\n  // TODO [>=6]: удалить блок кода c использованием LEGACY_bridge (#5049)\n  //  https://github.com/VKCOM/VKUI/blob/v5.5.5/packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.tsx#L46-L92\n  if (LEGACY_bridge.type === 'adaptive') {\n    const { viewportWidth, viewportHeight } = LEGACY_bridge;\n\n    if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n      viewWidth = ViewWidth.DESKTOP;\n    } else if (viewportWidth >= BREAKPOINTS.TABLET) {\n      viewWidth = ViewWidth.TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n      viewWidth = ViewWidth.SMALL_TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.MOBILE) {\n      viewWidth = ViewWidth.MOBILE;\n    } else {\n      viewWidth = ViewWidth.SMALL_MOBILE;\n    }\n\n    if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n      viewHeight = ViewHeight.MEDIUM;\n    } else if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n      viewHeight = ViewHeight.SMALL;\n    } else {\n      viewHeight = ViewHeight.EXTRA_SMALL;\n    }\n\n    if (viewWidth <= ViewWidth.MOBILE) {\n      sizeX = SizeType.COMPACT;\n    } else {\n      sizeX = SizeType.REGULAR;\n    }\n\n    if (\n      (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n      viewHeight <= ViewHeight.EXTRA_SMALL\n    ) {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else if (\n    LEGACY_bridge.type === 'force_mobile' ||\n    LEGACY_bridge.type === 'force_mobile_compact'\n  ) {\n    viewWidth = ViewWidth.MOBILE;\n    sizeX = SizeType.COMPACT;\n\n    if (LEGACY_bridge.type === 'force_mobile_compact') {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else {\n    if (sizeX === undefined && viewWidth !== undefined) {\n      if (viewWidth <= ViewWidth.MOBILE) {\n        sizeX = SizeType.COMPACT;\n      } else {\n        sizeX = SizeType.REGULAR;\n      }\n    }\n    if (sizeY === undefined && viewWidth !== undefined && viewHeight !== undefined) {\n      if (\n        (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n        viewHeight <= ViewHeight.EXTRA_SMALL\n      ) {\n        sizeY = SizeType.COMPACT;\n      } else {\n        sizeY = SizeType.REGULAR;\n      }\n    }\n  }\n\n  return {\n    viewWidth,\n    viewHeight,\n    sizeX,\n    sizeY,\n    hasPointer,\n    hasHover,\n  };\n}\n"],"names":["React","hasMouse","_hasPointer","useBridgeAdaptivity","BREAKPOINTS","SizeType","ViewHeight","ViewWidth","warnOnce","AdaptivityContext","warn","AdaptivityProvider","viewWidth","viewHeight","sizeX","sizeY","hasPointer","hasHover","children","LEGACY_isPerhapsPropsByBridgeTypeAdaptive","undefined","LEGACY_isPerhapsPropsByBridgeTypeForceMobile","LEGACY_disableInternalUseBridgeAdaptivity","LEGACY_bridge","process","env","NODE_ENVIRONMENT","adaptivity","useMemo","calculateAdaptivity","Provider","value","type","viewportWidth","viewportHeight","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","COMPACT","REGULAR"],"mappings":"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"}

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

@@ -1,17 +1,34 @@
 import * as React from 'react';
+export type SafeAreaInsets = {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
 export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Режим встраивания */
     mode?: 'partial' | 'embedded' | 'full';
     window?: Window;
     scroll?: 'global' | 'contain';
+    safeAreaInsets?: SafeAreaInsets;
     /**
      * Кастомный root-элемент портала
      */
     portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
-    /** Disable portal for components */
+    /**
+     * Отключает рендер всплывающих компонентов в отдельном контейнере
+     */
     disablePortal?: boolean;
+    /**
+     * По умолчанию, mode="embedded" переносит систему координат элементов с `position: fixed` на
+     * свой контейнер через `transform: translate3d(0, 0, 0)`.
+     *
+     * Это поведение можно отключить с помощью этого параметра.
+     */
+    disableParentTransformForPositionFixedElements?: boolean;
+    layout?: 'card' | 'plain';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, className, ...props }: AppRootProps) => React.JSX.Element;
+export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets, layout, ...props }: AppRootProps) => React.JSX.Element;

package/dist/components/AppRoot/AppRoot.js

@@ -4,7 +4,6 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import * as React from "react";
-import { IconSettingsProvider } from "@vkontakte/icons";
 import { classNames, noop } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useAppearance } from "../../hooks/useAppearance";
@@ -14,30 +13,56 @@ import { SizeType } from "../../lib/adaptivity";
 import { useDOM } from "../../lib/dom";
 import { isRefObject } from "../../lib/isRefObject";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { warnOnce } from "../../lib/warnOnce";
 import { AppRootContext } from "./AppRootContext";
 import { ElementScrollController, GlobalScrollController } from "./ScrollContext";
+var warn = warnOnce("AppRoot");
 var vkuiSizeXClassNames = _define_property({
     none: "vkui--sizeX-none"
 }, 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 !== SizeType.COMPACT) {
+        classNames.push(vkuiSizeXClassNames[sizeX]);
+    }
+    return classNames;
+}
 var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */ export 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, 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",
-        "className"
+        "disableParentTransformForPositionFixedElements",
+        "className",
+        "safeAreaInsets",
+        "layout"
     ]);
     var isKeyboardInputActive = useKeyboardInputTracker();
     var rootRef = React.useRef(null);
     var _React_useState = _sliced_to_array(React.useState(null), 2), portalRoot = _React_useState[0], setPortalRoot = _React_useState[1];
     var document = useDOM().document;
-    var insets = useInsets();
+    var deprecatedInsets = useInsets(!safeAreaInsets);
+    var insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;
     var appearance = useAppearance();
     var _useAdaptivity = useAdaptivity(), hasPointer = _useAdaptivity.hasPointer, _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
+    if (process.env.NODE_ENVIRONMENT === "development") {
+        if (!safeAreaInsets) {
+            // TODO [>=6]: удалить warn
+            warn("[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore
+        }
+    }
     // setup portal
     useIsomorphicLayoutEffect(function() {
         var portal = null;
@@ -64,8 +89,7 @@ var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
     ]);
     // setup root classes
     useIsomorphicLayoutEffect(function() {
-        var _parent_classList;
-        var _rootRef_current, _parent;
+        var _rootRef_current;
         if (mode === "partial") {
             return noop;
         }
@@ -73,13 +97,25 @@ var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
         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
+    ]);
     useIsomorphicLayoutEffect(function() {
         if (mode === "full") {
             document.documentElement.classList.add("vkui");
@@ -122,21 +158,24 @@ var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
     ]);
     // adaptivity handler
     useIsomorphicLayoutEffect(function() {
+        var _container_classList;
         var _rootRef_current;
         if (mode === "partial") {
             return noop;
         }
-        var className = sizeX !== 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 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
     ]);
     useIsomorphicLayoutEffect(function() {
         if (mode !== "full" || appearance === undefined) {
@@ -161,13 +200,12 @@ var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
             embedded: mode === "embedded",
             keyboardInput: isKeyboardInputActive,
             mode: mode,
-            disablePortal: disablePortal
+            disablePortal: disablePortal,
+            layout: layout
         }
     }, /*#__PURE__*/ React.createElement(ScrollController, {
         elRef: rootRef
-    }, /*#__PURE__*/ React.createElement(IconSettingsProvider, {
-        classPrefix: "vkui"
-    }, children)));
+    }, children));
     return mode === "partial" ? content : /*#__PURE__*/ React.createElement("div", _object_spread({
         ref: rootRef,
         className: classNames("vkuiAppRoot", hasPointer === undefined ? "vkuiAppRoot--pointer-none" : !hasPointer && "vkuiAppRoot--pointer-has-not", className)

package/dist/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 { Insets } from '@vkontakte/vk-bridge';\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 { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\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  /**\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  ...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 insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\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 Insets;\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 Insets;\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":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","AppRootContext","ElementScrollController","GlobalScrollController","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","insets","appearance","hasPointer","sizeX","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"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":["React","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","warnOnce","AppRootContext","ElementScrollController","GlobalScrollController","warn","vkuiSizeXClassNames","none","REGULAR","vkuiLayoutClassNames","card","plain","containerClassNames","layout","sizeX","push","COMPACT","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRootProp","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","deprecatedInsets","insets","appearance","hasPointer","process","env","NODE_ENVIRONMENT","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","style","transform","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","setProperty","removeProperty","container","length","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref"],"mappings":"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"}

package/dist/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/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":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,OAAO,IAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY;AACd,GAAG"}
+{"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":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAY/B,OAAO,IAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY;AACd,GAAG"}

package/dist/components/AppearanceProvider/AppearanceProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AppearanceType } from '@vkontakte/vk-bridge';
+import type { AppearanceType } from '../../lib/appearance';
 export interface AppearanceProviderProps {
     appearance: AppearanceType;
     children: React.ReactNode;

package/dist/components/AppearanceProvider/AppearanceProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppearanceType } from '@vkontakte/vk-bridge';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAAGC,mBAAAA,YAAYC,iBAAAA;IAC/C,IAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { AppearanceType } from '../../lib/appearance';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  appearance: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={appearance}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["React","usePlatform","TokensClassProvider","ConfigProviderOverride","AppearanceProvider","appearance","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAOlF;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAAGC,mBAAAA,YAAYC,iBAAAA;IAC/C,IAAMC,WAAWN;IAEjB,qBACE,oBAACE;QAAuBE,YAAYA;qBAClC,oBAACH;QAAoBK,UAAUA;QAAUF,YAAYA;OAClDC;AAIT,EAAE"}

package/dist/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/components/AspectRatio/AspectRatio.js

@@ -3,6 +3,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * `AspectRatio` позволяет поддерживать постоянное соотношение ширины и высоты.
  * Его можно использовать для отображения изображений, карт, видео и других медиафайлов.
@@ -10,20 +11,17 @@ import { classNames } from "@vkontakte/vkjs";
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */ export 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: classNames("vkuiAspectRatio", mode === "stretch" && "vkuiAspectRatio--mode-stretch", className),
-        style: _object_spread({}, styleProp, style),
-        ref: getRootRef
-    }, props), children);
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiAspectRatio", mode === "stretch" && "vkuiAspectRatio--mode-stretch"),
+        style: _object_spread({}, styleProp, style)
+    }, props));
 }
 
 //# sourceMappingURL=AspectRatio.js.map

package/dist/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":["React","classNames","AspectRatio","ratio","children","mode","className","getRootRef","style","styleProp","props","String","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAmB7C;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,YAJ0B,OAI1BA,WACAC,aAL0B,OAK1BA,YACAC,AAAOC,YANmB,OAM1BD,OACGE,mCAPuB;QAC1BP;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,qBAAC,iCAAkCG,OAAOR;IAG5C,qBACE,oBAACS;QACCN,WAAWL,8BAETI,SAAS,8CACTC;QAEFE,OAAO,mBAAKC,WAAcD;QAC1BK,KAAKN;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":["React","classNames","RootComponent","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;AAgB/D;;;;;;CAMC,GACD,OAAO,SAASC,YAAY;QAC1BC,QAD0B,OAC1BA,OACAC,WAF0B,OAE1BA,wBAF0B,OAG1BC,MAAAA,gCAAO,yBACPC,AAAOC,YAJmB,OAI1BD,OACGE,mCALuB;QAC1BL;QACAC;QACAC;QACAC;;IAGA,IAAMA,QACJ,qBAAC,iCAAkCG,OAAON;IAG5C,qBACE,oBAACF;QACCS,eAAeV,8BAEbK,SAAS;QAEXC,OAAO,mBAAKC,WAAcD;OACtBE;AAGV"}

package/dist/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/components/Badge/Badge.js

@@ -2,18 +2,20 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
+var stylesMode = {
+    new: "vkuiBadge--mode-new",
+    prominent: "vkuiBadge--mode-prominent"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Badge
  */ export 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: classNames("vkuiBadge", {
-            new: "vkuiBadge--mode-new",
-            prominent: "vkuiBadge--mode-prominent"
-        }[mode], className)
+    return React.createElement(RootComponent, _object_spread({
+        Component: "span",
+        baseClassName: classNames("vkuiBadge", stylesMode[mode])
     }, restProps));
 };
 

package/dist/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":["React","classNames","Badge","mode","className","restProps","span","new","prominent"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAO7C;;CAEC,GACD,OAAO,IAAMC,QAAQ;6BAAGC,MAAAA,gCAAO,qBAAOC,mBAAAA,WAAcC;QAA5BF;QAAcC;;WACpC,oBAACE;QACCF,WAAWH,wBAET;YACEM,GAAG;YACHC,SAAS;QACX,CAAC,CAACL,KAAK,EACPC;OAEEC;AACL,EACD"}
+{"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":["React","classNames","RootComponent","stylesMode","new","prominent","Badge","mode","restProps","Component","baseClassName"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,aAAa;IACjBC,GAAG;IACHC,SAAS;AACX;AAMA;;CAEC,GACD,OAAO,IAAMC,QAAQ;6BAAGC,MAAAA,gCAAO,qBAAUC;QAAjBD;;WACtB,oBAACL;QACCO,WAAU;QACVC,eAAeT,wBAA4BE,UAAU,CAACI,KAAK;OACvDC;AACL,EACD"}

package/dist/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/components/Banner/Banner.js

@@ -7,15 +7,20 @@ import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
 import { IconButton } from "../IconButton/IconButton";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
+var stylesSize = {
+    s: "vkuiBanner--size-s",
+    m: "vkuiBanner--size-m"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */ export 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",
@@ -29,8 +34,6 @@ import { Title } from "../Typography/Title/Title";
         "actions",
         "onDismiss",
         "dismissLabel",
-        "className",
-        "getRootRef",
         "noPadding"
     ]);
     var platform = usePlatform();
@@ -57,12 +60,10 @@ import { Title } from "../Typography/Title/Title";
     }, text), 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: classNames("vkuiBanner", !noPadding && "vkuiBanner--withPadding", 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, _object_spread_props(_object_spread({
+        Component: "section"
+    }, restProps), {
+        baseClassName: classNames("vkuiBanner", !noPadding && "vkuiBanner--withPadding", platform === Platform.IOS && "vkuiBanner--ios", mode === "image" && "vkuiBanner--mode-image", stylesSize[size], mode === "image" && imageTheme === "dark" && "vkuiBanner--inverted")
     }), asideMode === "expand" ? /*#__PURE__*/ React.createElement(Tappable, {
         className: "vkuiBanner__in",
         activeMode: platform === Platform.IOS ? "opacity" : "background",

package/dist/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 { 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 : 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    <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":["React","Icon24Cancel","Icon24Chevron","Icon24Dismiss","Icon24DismissDark","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","noPadding","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AA0ElD;;CAEC,GACD,OAAO,IAAMC,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,WAAW1B;IAEjB,IAAM2B,mBAAmBhB,SAAS,MAAMJ,QAAQH;IAChD,IAAMwB,sBAAsBjB,SAAS,MAAML,OAAOD;IAElD,IAAMwB,iBAAiBpB,SAAS,UAAUZ,oBAAoBD;IAE9D,IAAMkC,wBACJ,0CACGrB,SAAS,WAAWS,4BACnB,oBAACa;QAAIC,eAAAA;QAAYV,SAAS;OACvBJ,aAIJN,wBAAU,oBAACmB;QAAIT,SAAS;OAA6BV,uBAEtD,oBAACmB;QAAIT,SAAS;OACXvB,aAAae,yBACZ,oBAACa;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOxB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACa;QAAoBK,WAAU;QAAIX,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK2B,WAAU;QAAIX,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM2C,QAAQ,CAACC,KAAK,CAAClB,WAAW,mBACxD,oBAACY;QAAIT,SAAS;OAA8BH;IAMpD,qBACE,oBAACmB,mDACKb;QACJH,WAAWxB,yBAET,CAAC0B,wCACDE,aAAazB,SAASsC,GAAG,uBACzB9B,SAAS,qCACT;YACE+B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC9B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFoB,KAAKnB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACTqB,YAAYjB,aAAazB,SAASsC,GAAG,GAAG,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIT,SAAS;qBACZ,oBAAC3B;QAAc2B,SAAS;yBAI5B,oBAACS;QAAIT,SAAS;OACXQ,SAEAjB,cAAc,2BACb,oBAACkB;QAAIT,SAAS;qBACZ,oBAACpB;QACC2C,cAAYxB;QACZC,SAAS;QACTwB,SAAS1B;QACT2B,WAAU;QACVC,WAAW;OAEVtB,aAAazB,SAASsC,GAAG,iBAAG,oBAACV,sCAAoB,oBAACnC;AAQnE,EAAE"}
+{"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","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":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,mBAAmB;AACjG,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAyEA;;CAEC,GACD,OAAO,IAAMC,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,WACGC;QAdHd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAW5B;IAEjB,IAAM6B,mBAAmBd,SAAS,MAAMP,QAAQH;IAChD,IAAMyB,sBAAsBf,SAAS,MAAMR,OAAOD;IAElD,IAAMyB,iBAAiBlB,SAAS,UAAUhB,oBAAoBD;IAE9D,IAAMoC,wBACJ,0CACGnB,SAAS,WAAWS,4BACnB,oBAACW;QAAIC,eAAAA;QAAYC,SAAS;OACvBb,aAIJN,wBAAU,oBAACiB;QAAIE,SAAS;OAA6BnB,uBAEtD,oBAACiB;QAAIE,SAAS;OACXpC,aAAamB,yBACZ,oBAACW;QAAiBO,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJnB,aAAaoB,4BACZ,oBAACW;QAAoBM,WAAU;QAAID,SAAS;OACzChB,YAGJpB,aAAaqB,uBACZ,oBAACb;QAAK6B,WAAU;QAAID,SAAS;OAC1Bf,OAGJrB,aAAawB,YAAY9B,MAAM8C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,oBAACU;QAAIE,SAAS;OAA8BZ;IAMpD,qBACE,oBAACpB;QACCiC,WAAU;OACNT;QACJc,eAAe3C,yBAEb,CAAC4B,wCACDE,aAAa3B,SAASyC,GAAG,uBACzB7B,SAAS,qCACTJ,UAAU,CAACM,KAAK,EAChBF,SAAS,WAAWC,eAAe;QAGpCG,cAAc,yBACb,oBAACb;QACC+B,SAAS;QACTQ,YAAYf,aAAa3B,SAASyC,GAAG,GAAG,YAAY;QACpDE,MAAK;OAEJZ,uBAED,oBAACC;QAAIE,SAAS;qBACZ,oBAACxC;QAAcwC,SAAS;yBAI5B,oBAACF;QAAIE,SAAS;OACXH,SAEAf,cAAc,2BACb,oBAACgB;QAAIE,SAAS;qBACZ,oBAACjC;QACC2C,cAAYpB;QACZU,SAAS;QACTW,SAAStB;QACTuB,WAAU;QACVC,WAAW;OAEVpB,aAAa3B,SAASyC,GAAG,iBAAG,oBAACX,sCAAoB,oBAACrC;AAQnE,EAAE"}

package/dist/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;