@vkontakte/vkui 5.7.2 → 5.8.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Стиль стрелки.\n   */\n  arrowClassName?: string;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowClassName,\n  ArrowIcon = DefaultIcon,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  portalRoot,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} portalRoot={portalRoot}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"names":["Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","DEFAULT_ARROW_HEIGHT","arrowPadding","DEFAULT_ARROW_PADDING","arrowClassName","ArrowIcon","DefaultIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","React","useState","arrowRef","setArrowRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","div","classNames","ref","convertFloatingDataToReactCSSProperties","PopperArrow","coords","getRootRef","Icon","AppRootPortal"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  hideMiddleware,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Стиль стрелки.\n   */\n  arrowClassName?: string;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n  /**\n   * Принудительно скрывает компонет если целевой элемент исчез\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowClassName,\n  ArrowIcon = DefaultIcon,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  portalRoot,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  getRootRef,\n  hideWhenReferenceHidden,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n    hideWhenReferenceHidden,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords, hide },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  // TODO [>=6]: убрать getRef\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef, getRootRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles['Popper']}\n      getRootRef={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n        ...(hide?.referenceHidden && {\n          visibility: 'hidden',\n        }),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </RootComponent>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} portalRoot={portalRoot}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"names":["Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","DEFAULT_ARROW_HEIGHT","arrowPadding","DEFAULT_ARROW_PADDING","arrowClassName","ArrowIcon","DefaultIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","getRootRef","hideWhenReferenceHidden","restProps","hide","React","useState","arrowRef","setArrowRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","hideMiddleware","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","RootComponent","baseClassName","convertFloatingDataToReactCSSProperties","referenceHidden","visibility","PopperArrow","coords","Icon","className","AppRootPortal"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Стиль отображения прогрессбара
      */
@@ -14,4 +14,4 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
-export declare const Progress: ({ value, getRootRef, className, appearance, height, style: styleProps, ...restProps }: ProgressProps) => React.JSX.Element;
+export declare const Progress: ({ value, appearance, height, style: styleProps, ...restProps }: ProgressProps) => React.JSX.Element;

package/dist/cjs/components/Progress/Progress.js

@@ -15,6 +15,12 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
+var _RootComponent = require("../RootComponent/RootComponent");
+var stylesAppearance = {
+    accent: "vkuiProgress--appearance-accent",
+    positive: "vkuiProgress--appearance-positive",
+    negative: "vkuiProgress--appearance-negative"
+};
 function progressCustomHeightStyle(height) {
     return height ? {
         height: height,
@@ -29,10 +35,8 @@ function progressStyle(height, styleProps) {
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;
 var Progress = function(_param) {
-    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, getRootRef = _param.getRootRef, className = _param.className, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, height = _param.height, styleProps = _param.style, restProps = _object_without_properties._(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, height = _param.height, styleProps = _param.style, restProps = _object_without_properties._(_param, [
         "value",
-        "getRootRef",
-        "className",
         "appearance",
         "height",
         "style"
@@ -40,7 +44,7 @@ var Progress = function(_param) {
     var progress = (0, _math.clamp)(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
     var style = progressStyle(height, styleProps);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         "aria-valuenow": value,
         title: title,
         style: style
@@ -48,12 +52,7 @@ var Progress = function(_param) {
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiProgress", {
-            accent: "vkuiProgress--appearance-accent",
-            positive: "vkuiProgress--appearance-positive",
-            negative: "vkuiProgress--appearance-negative"
-        }[appearance], className)
+        baseClassName: (0, _vkjs.classNames)("vkuiProgress", stylesAppearance[appearance])
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiProgress__in",
         style: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["Progress","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","getRootRef","className","appearance","restProps","progress","clamp","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","classNames","accent","positive","negative","width"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;;+DA1CU;oBACI;oBACL;AAItB,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA,QAAAA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,IAAMC,cAAcN,0BAA0BC;IAC9C,IAAMM,QAAQD,cAAc,qBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAgBA,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMV,WAAW;8BACtBW,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACbZ,gBAAAA,QACAM,AAAOF,oBAAPE,OACGO;QANHJ;QACAC;QACAC;QACAC;QACAZ;QACAM;;IAGA,IAAMQ,WAAWC,IAAAA,WAAK,EAACN,OAAOF,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdM,UAAS,OAAwB,OAAnBN;IAE/B,IAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,qBAACa;QACCC,iBAAeT;QACfO,OAAOA;QACPV,OAAOA;OACHO;QACJM,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKZ;QACLC,WAAWY,IAAAA,gBAAU,kBAEnB;YACEC,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACd,WAAW,EACbD;sBAGF,qBAACM;QAAIN,SAAS;QAA0BL,OAAO;YAAEqB,OAAO,AAAC,GAAW,OAATb,UAAS;QAAG;;AAG7E"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Progress.module.css';\n\nconst stylesAppearance = {\n  accent: styles['Progress--appearance-accent'],\n  positive: styles['Progress--appearance-positive'],\n  negative: styles['Progress--appearance-negative'],\n};\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <RootComponent\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      baseClassName={classNames(styles['Progress'], stylesAppearance[appearance])}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </RootComponent>\n  );\n};\n"],"names":["Progress","stylesAppearance","accent","positive","negative","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","appearance","restProps","progress","clamp","title","RootComponent","aria-valuenow","role","aria-valuemin","aria-valuemax","baseClassName","classNames","div","className","width"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;+DA/CU;oBACI;oBACL;6BAEQ;AAG9B,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,QAAQ;IACRC,QAAQ;AACV;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA,QAAAA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,IAAMC,cAAcN,0BAA0BC;IAC9C,IAAMM,QAAQD,cAAc,qBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAcA,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMd,WAAW;8BACtBe,OAAAA,kCAAQ,6CACRC,YAAAA,4CAAa,8BACbV,gBAAAA,QACAM,AAAOF,oBAAPE,OACGK;QAJHF;QACAC;QACAV;QACAM;;IAGA,IAAMM,WAAWC,IAAAA,WAAK,EAACJ,OAAOF,oBAAoBC;IAClD,IAAMM,QAAQ,AAAC,GAAgBN,OAAdI,UAAS,OAAwB,OAAnBJ;IAE/B,IAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,qBAACW,4BAAa;QACZC,iBAAeP;QACfK,OAAOA;QACPR,OAAOA;OACHK;QACJM,MAAK;QACLC,iBAAeX;QACfY,iBAAeX;QACfY,eAAeC,IAAAA,gBAAU,kBAAqB1B,gBAAgB,CAACe,WAAW;sBAE1E,qBAACY;QAAIC,SAAS;QAA0BjB,OAAO;YAAEkB,OAAO,AAAC,GAAW,OAATZ,UAAS;QAAG;;AAG7E"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 type StatsType = 'playbackStarted' | 'click';
 type BannerData = {
     title?: string;
@@ -25,7 +26,7 @@ type BannerData = {
     description?: string;
     ageRestrictions?: string;
 };
-export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PromoBannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /** Данные рекламного баннера, полученные из VKWebAppGetAds */
     bannerData: BannerData;
     /** Флаг скрытия кнопки закрытия рекламы */
@@ -39,5 +40,5 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
  */
-export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, className, ...restProps }: PromoBannerProps) => React.JSX.Element;
+export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, ...restProps }: PromoBannerProps) => React.JSX.Element;
 export {};

package/dist/cjs/components/PromoBanner/PromoBanner.js

@@ -16,19 +16,18 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
-var _vkjs = require("@vkontakte/vkjs");
 var _warnOnce = require("../../lib/warnOnce");
 var _Button = require("../Button/Button");
 var _Image = require("../Image/Image");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _SimpleCell = require("../SimpleCell/SimpleCell");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var warn = (0, _warnOnce.warnOnce)("PromoBanner");
 var PromoBanner = function(_param) {
-    var _param_bannerData = _param.bannerData, bannerData = _param_bannerData === void 0 ? {} : _param_bannerData, onClose = _param.onClose, isCloseButtonHidden = _param.isCloseButtonHidden, className = _param.className, restProps = _object_without_properties._(_param, [
+    var _param_bannerData = _param.bannerData, bannerData = _param_bannerData === void 0 ? {} : _param_bannerData, onClose = _param.onClose, isCloseButtonHidden = _param.isCloseButtonHidden, restProps = _object_without_properties._(_param, [
         "bannerData",
         "onClose",
-        "isCloseButtonHidden",
-        "className"
+        "isCloseButtonHidden"
     ]);
     if (process.env.NODE_ENV === "development") {
         warn("Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners");
@@ -53,8 +52,8 @@ var PromoBanner = function(_param) {
     }, [
         statsPixels.playbackStarted
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiPromoBanner", className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: "vkuiPromoBanner"
     }, restProps), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiPromoBanner__head"
     }, /*#__PURE__*/ _react.createElement(_Footnote.Footnote, null, bannerData.advertisingLabel || "Advertisement"), bannerData.ageRestrictions && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PromoBanner","warn","warnOnce","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","classNames","Footnote","advertisingLabel","ageRestrictions","Icon24Dismiss","SimpleCell","href","trackingLink","rel","target","before","iconLink","Image","size","src","alt","title","data-testid","undefined","after","ctaText","Button","mode","subtitle","domain","length","img"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;;+DAxDU;qBACO;oBACH;wBACF;sBACF;qBACD;0BACK;wBACF;AAGzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AA8Cf,IAAMF,cAAc;mCACzBG,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KACE;IAEJ;IAEA,IAAwCU,qCAAAA,OAAMC,QAAQ,CAAC,SAAhDC,eAAiCF,oBAAnBG,kBAAmBH;IAExC,IAAMI,cAAcJ,OAAMK,OAAO,CAC/B;eACGb,WAAWc,UAAU,GAClBd,WAAWc,UAAU,CAACC,MAAM,CAAC,SAACC,KAAKC;mBAAU,4CAAKD,MAAK,uBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC;OACP;QAACnB,WAAWc,UAAU;KAAC;IAGzB,IAAMM,UAAUZ,OAAMa,WAAW,CAC/B;eAAMV,gBAAgBC,YAAYU,KAAK,IAAI;OAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrBd,OAAMe,SAAS,CAAC;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C;IACF,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,qBAACC;QAAItB,WAAWuB,IAAAA,gBAAU,qBAAwBvB;OAAgBC,0BAChE,qBAACqB;QAAItB,SAAS;qBACZ,qBAACwB,kBAAQ,QAAE3B,WAAW4B,gBAAgB,IAAI,kBACzC5B,WAAW6B,eAAe,kBACzB,qBAACF,kBAAQ;QAACxB,SAAS;OAA+BH,WAAW6B,eAAe,GAG7E,CAAC3B,qCACA,qBAACuB;QAAItB,SAAS;QAAgCiB,SAASnB;qBACrD,qBAAC6B,oBAAa,yBAIpB,qBAACC,sBAAU;QACTC,MAAMhC,WAAWiC,YAAY;QAC7Bb,SAASA;QACTc,KAAI;QACJC,QAAO;QACPC,QACEpC,WAAWqC,QAAQ,kBACjB,qBAACC,YAAK;YACJC,MAAM;YACNC,KAAKxC,WAAWqC,QAAQ;YACxBI,KAAKzC,WAAW0C,KAAK;YACrBC,eAAatC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWqC;;QAIhEC,OACE7C,WAAW8C,OAAO,kBAChB,qBAACC,cAAM;YACLC,MAAK;YACLL,eAAatC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBqC;WAEjE5C,WAAW8C,OAAO;QAIzBG,UAAUjD,WAAWkD,MAAM;OAE1BlD,WAAW0C,KAAK,GAGlBhC,aAAayC,MAAM,GAAG,mBACrB,qBAAC1B;QAAItB,SAAS;qBACZ,qBAACiD;QAAIZ,KAAK9B;QAAc+B,KAAI;;AAKtC"}
+{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <RootComponent baseClassName={styles['PromoBanner']} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["PromoBanner","warn","warnOnce","bannerData","onClose","isCloseButtonHidden","restProps","process","env","NODE_ENV","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","RootComponent","baseClassName","div","className","Footnote","advertisingLabel","ageRestrictions","Icon24Dismiss","SimpleCell","href","trackingLink","rel","target","before","iconLink","Image","size","src","alt","title","data-testid","undefined","after","ctaText","Button","mode","subtitle","domain","length","img"],"mappings":";;;;+BAyDaA;;;eAAAA;;;;;;;;;+DAzDU;qBACO;wBACL;sBAEF;qBACD;6BACQ;0BACH;wBACF;AAGzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AA8Cf,IAAMF,cAAc;mCACzBG,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACGC;QAHHH;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CR,KACE;IAEJ;IAEA,IAAwCS,qCAAAA,OAAMC,QAAQ,CAAC,SAAhDC,eAAiCF,oBAAnBG,kBAAmBH;IAExC,IAAMI,cAAcJ,OAAMK,OAAO,CAC/B;eACGZ,WAAWa,UAAU,GAClBb,WAAWa,UAAU,CAACC,MAAM,CAAC,SAACC,KAAKC;mBAAU,4CAAKD,MAAK,uBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC;OACP;QAAClB,WAAWa,UAAU;KAAC;IAGzB,IAAMM,UAAUZ,OAAMa,WAAW,CAC/B;eAAMV,gBAAgBC,YAAYU,KAAK,IAAI;OAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrBd,OAAMe,SAAS,CAAC;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C;IACF,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,qBAACC,4BAAa;QAACC,aAAa;OAA6BtB,0BACvD,qBAACuB;QAAIC,SAAS;qBACZ,qBAACC,kBAAQ,QAAE5B,WAAW6B,gBAAgB,IAAI,kBACzC7B,WAAW8B,eAAe,kBACzB,qBAACF,kBAAQ;QAACD,SAAS;OAA+B3B,WAAW8B,eAAe,GAG7E,CAAC5B,qCACA,qBAACwB;QAAIC,SAAS;QAAgCR,SAASlB;qBACrD,qBAAC8B,oBAAa,yBAIpB,qBAACC,sBAAU;QACTC,MAAMjC,WAAWkC,YAAY;QAC7Bf,SAASA;QACTgB,KAAI;QACJC,QAAO;QACPC,QACErC,WAAWsC,QAAQ,kBACjB,qBAACC,YAAK;YACJC,MAAM;YACNC,KAAKzC,WAAWsC,QAAQ;YACxBI,KAAK1C,WAAW2C,KAAK;YACrBC,eAAaxC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWuC;;QAIhEC,OACE9C,WAAW+C,OAAO,kBAChB,qBAACC,cAAM;YACLC,MAAK;YACLL,eAAaxC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBuC;WAEjE7C,WAAW+C,OAAO;QAIzBG,UAAUlD,WAAWmD,MAAM;OAE1BnD,WAAW2C,KAAK,GAGlBlC,aAAa2C,MAAM,GAAG,mBACrB,qBAAC1B;QAAIC,SAAS;qBACZ,qBAAC0B;QAAIZ,KAAKhC;QAAciC,KAAI;;AAKtC"}

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

@@ -6,6 +6,31 @@ import { TouchProps } from '../Touch/Touch';
 export interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {
     /**
      * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)
+     *
+     * > ⚠️ **Для разработчиков VK Mini Apps**
+     * >
+     * > Сейчас метод под конец выполнения вызывает `runTapticImpactOccurred()`.
+     * >
+     * > В **v6** нужно будет самостоятельно вызывать эту функцию в вашем обработчике `onRefresh()`.
+     * > (см. https://github.com/VKCOM/VKUI/issues/5049). Функцию можете импортировать её из
+     * > бибилиотеки `@vkontakte/vk-bridge-react`.
+     * >
+     * > Чтобы подготовить ваше мини-приложение к обновлению до **v6**, в рамках **v5** вы уже можете
+     * > вызывать `runTapticImpactOccurred()`, но с одним условием: вы должны вернуть результат
+     * > выполнения функции, чтобы исключить двойной вызов. Результат функции — `boolean`. Если
+     * > вернётся `true`, значит, вызывать `runTapticImpactOccurred()` снова со стороны **VKUI** —
+     * > не нужно.
+     * >
+     * > ```jsx
+     * > const onRefresh = React.useCallback(() => {
+     * >  // ...
+     * >  return runTapticImpactOccurred();
+     * > }, []);
+     * >
+     * > // <PullToRefresh onRefresh={onRefresh} />
+     * > ```
+     * >
+     * > Соответственно, в **v6** ничего возвращать уже не потребуется.
      */
     onRefresh: AnyFunction;
     /**

package/dist/cjs/components/PullToRefresh/PullToRefresh.js

@@ -132,8 +132,11 @@ var PullToRefresh = function(_param) {
             setSpinnerY(function(prevSpinnerY) {
                 return platform === _platform.Platform.IOS ? prevSpinnerY : initParams.refreshing;
             });
-            onRefresh();
-            (0, _taptic.runTapticImpactOccurred)("light");
+            var runTapticImpactOccurredCalled = onRefresh();
+            // TODO [>=6]: удалить блок кода (#5049)
+            if (!runTapticImpactOccurredCalled) {
+                (0, _taptic.runTapticImpactOccurred)("light");
+            }
         }
     }, [
         refreshing,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      onRefresh();\n      runTapticImpactOccurred('light');\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["PullToRefresh","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","document","useDOM","prevIsFetching","usePrevious","initParams","React","useMemo","start","Platform","IOS","max","maxY","refreshing","positionMultiplier","useState","spinnerY","setSpinnerY","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","useGlobalEventListener","resetRefreshingState","useCallback","onRefreshingFinish","useTimeout","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","useIsomorphicLayoutEffect","undefined","runRefreshing","prevSpinnerY","runTapticImpactOccurred","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","clamp","progress","abs","onTouchEnd","spinnerTransform","contentTransform","TouchRootContext","Provider","value","Touch","onStart","onMove","onEnd","classNames","FixedLayout","useParentWidth","PullToRefreshSpinner","style","transform","WebkitTransform","opacity","on","div"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;;+DAxDU;oBACI;oBACL;sCACiB;2BACX;2BACA;0BACD;mBACM;wBACR;sBACe;yCACE;6BAEQ;2BACtB;qBACkB;qEACjB;oCACQ;AAGrC,SAASC,YAAYC,KAAU;IAC7B,IAAI,CAACA,OAAO;QACV,OAAO;IACT;IACA,MAAOA,MAAMC,aAAa,CAAE;QAC1BD,QAAQA,MAAMC,aAAa;IAC7B;IACA,IAAID,MAAME,cAAc,IAAIF,MAAMG,UAAU,EAAE;QAC5CH,MAAME,cAAc;IACtB;IACA,IAAIF,MAAMI,eAAe,EAAE;QACzBJ,MAAMI,eAAe;IACvB;IACA,OAAO;AACT;AAeA,IAAMC,0BAA0B;IAC9BF,YAAY;IACZG,SAAS;AACX;AAKO,IAAMR,gBAAgB;QAC3BS,kBAAAA,UACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,SAASC,IAAAA,wBAAS;IACxB,IAAM,AAAEC,WAAaC,IAAAA,WAAM,IAAnBD;IACR,IAAME,iBAAiBC,IAAAA,wBAAW,EAACX;IAEnC,IAAMY,aAAaC,OAAMC,OAAO,CAC9B;eAAO;YACLC,OAAOX,aAAaY,kBAAQ,CAACC,GAAG,GAAG,CAAC,KAAK,CAAC;YAC1CC,KAAKd,aAAaY,kBAAQ,CAACC,GAAG,GAAG,KAAK;YACtCE,MAAMf,aAAaY,kBAAQ,CAACC,GAAG,GAAG,MAAM;YACxCG,YAAYhB,aAAaY,kBAAQ,CAACC,GAAG,GAAG,KAAK;YAC7CI,oBAAoBjB,aAAaY,kBAAQ,CAACC,GAAG,GAAG,OAAO;QACzD;OACA;QAACb;KAAS;IAGZ,IAAgCS,qCAAAA,OAAMS,QAAQ,CAACV,WAAWG,KAAK,OAAxDQ,WAAyBV,oBAAfW,cAAeX;IAChC,IAAgCA,sCAAAA,OAAMS,QAAQ,CAAC,YAAxCG,WAAyBZ,qBAAfa,cAAeb;IAChC,IAAoCA,sCAAAA,OAAMS,QAAQ,CAAC,YAA5CF,aAA6BP,qBAAjBc,gBAAiBd;IACpC,IAAoCA,sCAAAA,OAAMS,QAAQ,CAAC,YAA5CM,aAA6Bf,qBAAjBgB,gBAAiBhB;IACpC,IAAkCA,sCAAAA,OAAMS,QAAQ,CAAC,YAA1CQ,YAA2BjB,qBAAhBkB,eAAgBlB;IAClC,IAAMmB,gBAAgBrB,IAAAA,wBAAW,EAACmB;IAElC,IAAMG,SAASpB,OAAMqB,MAAM,CAAC;IAC5B,IAAwCrB,sCAAAA,OAAMS,QAAQ,CAAC,QAAhDa,eAAiCtB,qBAAnBuB,kBAAmBvB;IACxC,IAA8CA,sCAAAA,OAAMS,QAAQ,CAAC,QAAtDe,kBAAuCxB,qBAAtByB,qBAAsBzB;IAE9C,IAAM0B,oBAAoB,SAAC/C;QACzB,IAAI4B,YAAY;YACd5B,MAAME,cAAc;YACpBF,MAAMI,eAAe;QACvB;IACF;IAEA4C,IAAAA,8CAAsB,EAAChC,UAAU,aAAa+B,mBAAmB1C;IAEjE,IAAM4C,uBAAuB5B,OAAM6B,WAAW,CAAC;QAC7ChB,YAAY;QACZG,cAAc;QACdF,cAAc;QACdH,YAAYZ,WAAWG,KAAK;QAC5BuB,mBAAmB;QACnBF,gBAAgB;IAClB,GAAG;QAACxB;KAAW;IAEf,IAAM+B,qBAAqB9B,OAAM6B,WAAW,CAAC;QAC3C,IAAI,CAACZ,WAAW;YACdW;QACF;IACF,GAAG;QAACX;QAAWW;KAAqB;IAEpC,IAAyEG,eAAAA,IAAAA,sBAAU,EACjFD,oBACA,OAFME,AAAKC,yBAA4DF,aAAjEC,KAA6BE,AAAOC,2BAA6BJ,aAApCG;IAKrCE,IAAAA,oDAAyB,EAAC;QACxB,IAAIvC,mBAAmBwC,aAAaxC,kBAAkB,CAACV,YAAY;YACjE2C;QACF;IACF,GAAG;QAACjC;QAAgBV;QAAY2C;KAAmB;IAEnDM,IAAAA,oDAAyB,EAAC;QACxB,IAAIvC,mBAAmBwC,aAAa,CAACxC,kBAAkBV,YAAY;YACjEgD;QACF;IACF,GAAG;QAAChD;QAAYU;QAAgBsC;KAAyB;IAEzD,IAAMG,gBAAgBtC,OAAM6B,WAAW,CAAC;QACtC,IAAI,CAACtB,cAAcnB,WAAW;YAC5B,wDAAwD;YACxD6C;YAEAnB,cAAc;YACdH,YAAY,SAAC4B;uBACXhD,aAAaY,kBAAQ,CAACC,GAAG,GAAGmC,eAAexC,WAAWQ,UAAU;;YAGlEnB;YACAoD,IAAAA,+BAAuB,EAAC;QAC1B;IACF,GAAG;QAACjC;QAAYnB;QAAW6C;QAAwB1C;QAAUQ,WAAWQ,UAAU;KAAC;IAEnF6B,IAAAA,oDAAyB,EAAC;QACxB,IAAIjB,kBAAkBkB,aAAalB,iBAAiB,CAACF,WAAW;YAC9D,IAAI,CAACV,cAAcQ,YAAY;gBAC7BuB;YACF,OAAO,IAAI/B,cAAc,CAACpB,YAAY;gBACpC,gDAAgD;gBAChDyC;YACF,OAAO;gBACL,gDAAgD;gBAChD,4DAA4D;gBAC5DjB,YAAYJ,aAAaR,WAAWQ,UAAU,GAAGR,WAAWG,KAAK;gBACjEuB,mBAAmB;gBACnBF,gBAAgB;YAClB;QACF;IACF,GAAG;QACDxB;QACAF;QACAV;QACA2C;QACAX;QACAF;QACAV;QACAQ;QACAuB;KACD;IAED,IAAMG,eAAe,SAACC;QACpB,IAAInC,YAAY;YACd7B,YAAYgE;QACd;QACAxB,aAAa;IACf;IAEA,IAAMyB,cAAc,SAACD;YAGCjD;QAFpB,IAAQmD,MAAgBF,EAAhBE,KAAKC,SAAWH,EAAXG;QACb,IAAQ3C,QAAeH,WAAfG,OAAOG,MAAQN,WAARM;QACf,IAAMyC,eAAcrD,UAAAA,oBAAAA,8BAAAA,QAAQsD,SAAS,GAAGC,CAAC;QAEzC,IAAIpC,YAAYK,WAAW;YACzBvC,YAAYgE;YAEZ,IAAQlC,qBAA6BT,WAA7BS,oBAAoBF,OAASP,WAATO;YAE5B,IAAM2C,QAAQC,KAAK7C,GAAG,CAAC,GAAGwC,SAASzB,OAAO+B,OAAO;YAEjD,IAAMC,WAAWC,IAAAA,WAAK,EAACnD,QAAQ+C,QAAQzC,oBAAoBN,OAAOI;YAClE,IAAMgD,WAAWF,WAAW,CAAC,KAAKF,KAAKK,GAAG,CAAC,AAACH,CAAAA,WAAW,EAAC,IAAK/C,OAAO,KAAK;YAEzEM,YAAYyC;YACZ3B,mBAAmB4B,IAAAA,WAAK,EAACC,UAAU,GAAG;YACtCtC,cAAcsC,WAAW;YACzB/B,gBAAgB,AAAC6B,CAAAA,WAAW,EAAC,IAAK;YAElC,IAAIE,WAAW,MAAM,CAAC/C,cAAchB,aAAaY,kBAAQ,CAACC,GAAG,EAAE;gBAC7DkC;YACF;QACF,OAAO,IAAIM,OAAOE,gBAAgB,KAAKD,SAAS,KAAK,CAACtC,cAAcU,WAAW;YAC7EvC,YAAYgE;YAEZtB,OAAO+B,OAAO,GAAGN;YACjBhC,YAAY;YACZF,YAAYT;YACZuB,mBAAmB;QACrB;IACF;IAEA,IAAM+B,aAAa;QACjB3C,YAAY;QACZK,aAAa;IACf;IAEA,IAAMuC,mBAAmB,AAAC,kBAA0B,OAAT/C,UAAS;IACpD,IAAIgD,mBAAmB;IAEvB,IAAInE,aAAaY,kBAAQ,CAACC,GAAG,IAAIG,cAAc,CAACU,WAAW;QACzDyC,mBAAmB;IACrB,OAAO,IAAInE,aAAaY,kBAAQ,CAACC,GAAG,IAAKkB,CAAAA,gBAAgBf,UAAS,GAAI;QACpEmD,mBAAmB,AAAC,kBAA8B,OAAbpC,cAAa;IACpD;IAEA,qBACE,qBAACqC,qBAAgB,CAACC,QAAQ;QAACC,OAAO;qBAChC,qBAACC,YAAK,8CACAxE;QACJyE,SAAStB;QACTuB,QAAQrB;QACRsB,OAAOT;QACPnE,WAAW6E,IAAAA,gBAAU,uBAEnB3E,aAAaY,kBAAQ,CAACC,GAAG,8BACzBQ,2CACAL,+CACAlB;sBAGF,qBAAC8E,wBAAW;QAAC9E,SAAS;QAAqC+E,gBAAAA;qBACzD,qBAACC,0CAAoB;QACnBC,OAAO;YACLC,WAAWd;YACXe,iBAAiBf;YACjBgB,SAAS7D,YAAYL,cAAcQ,aAAa,IAAI;QACtD;QACA2D,IAAInE;QACJ+C,UAAU/C,aAAa8B,YAAYb;uBAIvC,qBAACmD;QACCtF,SAAS;QACTiF,OAAO;YACLC,WAAWb;YACXc,iBAAiBd;QACnB;OAECxE;AAKX"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   *\n   * > ⚠️ **Для разработчиков VK Mini Apps**\n   * >\n   * > Сейчас метод под конец выполнения вызывает `runTapticImpactOccurred()`.\n   * >\n   * > В **v6** нужно будет самостоятельно вызывать эту функцию в вашем обработчике `onRefresh()`.\n   * > (см. https://github.com/VKCOM/VKUI/issues/5049). Функцию можете импортировать её из\n   * > бибилиотеки `@vkontakte/vk-bridge-react`.\n   * >\n   * > Чтобы подготовить ваше мини-приложение к обновлению до **v6**, в рамках **v5** вы уже можете\n   * > вызывать `runTapticImpactOccurred()`, но с одним условием: вы должны вернуть результат\n   * > выполнения функции, чтобы исключить двойной вызов. Результат функции — `boolean`. Если\n   * > вернётся `true`, значит, вызывать `runTapticImpactOccurred()` снова со стороны **VKUI** —\n   * > не нужно.\n   * >\n   * > ```jsx\n   * > const onRefresh = React.useCallback(() => {\n   * >  // ...\n   * >  return runTapticImpactOccurred();\n   * > }, []);\n   * >\n   * > // <PullToRefresh onRefresh={onRefresh} />\n   * > ```\n   * >\n   * > Соответственно, в **v6** ничего возвращать уже не потребуется.\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      const runTapticImpactOccurredCalled = onRefresh();\n      // TODO [>=6]: удалить блок кода (#5049)\n      if (!runTapticImpactOccurredCalled) {\n        runTapticImpactOccurred('light');\n      }\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["PullToRefresh","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","document","useDOM","prevIsFetching","usePrevious","initParams","React","useMemo","start","Platform","IOS","max","maxY","refreshing","positionMultiplier","useState","spinnerY","setSpinnerY","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","useGlobalEventListener","resetRefreshingState","useCallback","onRefreshingFinish","useTimeout","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","useIsomorphicLayoutEffect","undefined","runRefreshing","prevSpinnerY","runTapticImpactOccurredCalled","runTapticImpactOccurred","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","clamp","progress","abs","onTouchEnd","spinnerTransform","contentTransform","TouchRootContext","Provider","value","Touch","onStart","onMove","onEnd","classNames","FixedLayout","useParentWidth","PullToRefreshSpinner","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}

package/dist/cjs/components/PullToRefresh/PullToRefreshSpinner.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-export interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-    'size'?: number;
-    'strokeWidth'?: number;
-    'on'?: boolean;
-    'progress'?: number;
-    'aria-label'?: string;
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PullToRefreshSpinnerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    size?: number;
+    strokeWidth?: number;
+    on?: boolean;
+    progress?: number;
 }
-export declare const PullToRefreshSpinner: ({ on, size, strokeWidth, style, progress, "aria-label": ariaLabel, }: PullToRefreshSpinnerProps) => React.JSX.Element;
+export declare const PullToRefreshSpinner: ({ on, size, strokeWidth, progress, "aria-label": ariaLabel, ...restProps }: PullToRefreshSpinnerProps) => React.JSX.Element;

package/dist/cjs/components/PullToRefresh/PullToRefreshSpinner.js

@@ -9,23 +9,31 @@ Object.defineProperty(exports, "PullToRefreshSpinner", {
     }
 });
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+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 calcStrokeDashOffset(value, radius) {
     var progress = value / 100;
     return 2 * Math.PI * radius * (1 - progress);
 }
-var PullToRefreshSpinner = function(param) {
-    var _param_on = param.on, on = _param_on === void 0 ? true : _param_on, _param_size = param.size, size = _param_size === void 0 ? 24 : _param_size, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 2.5 : _param_strokeWidth, style = param.style, _param_progress = param.progress, progress = _param_progress === void 0 ? 0 : _param_progress, tmp = param["aria-label"], ariaLabel = tmp === void 0 ? "Пожалуйста, подождите..." : tmp;
+var PullToRefreshSpinner = function(_param) {
+    var _param_on = _param.on, on = _param_on === void 0 ? true : _param_on, _param_size = _param.size, size = _param_size === void 0 ? 24 : _param_size, _param_strokeWidth = _param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 2.5 : _param_strokeWidth, _param_progress = _param.progress, progress = _param_progress === void 0 ? 0 : _param_progress, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Пожалуйста, подождите..." : tmp, restProps = _object_without_properties._(_param, [
+        "on",
+        "size",
+        "strokeWidth",
+        "progress",
+        "aria-label"
+    ]);
     var radius = 0.5 * size - 0.5 * strokeWidth;
     var dasharray = 2 * Math.PI * radius;
     var circleCenter = 0.5 * size;
     var dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
-        style: style,
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: (0, _vkjs.classNames)("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
         "aria-label": on ? ariaLabel : undefined
-    }, /*#__PURE__*/ _react.createElement("svg", {
+    }, restProps), /*#__PURE__*/ _react.createElement("svg", {
         role: "presentation",
         className: "vkuiPullToRefresh__spinner-self",
         style: {

package/dist/cjs/components/PullToRefresh/PullToRefreshSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"names":["PullToRefreshSpinner","calcStrokeDashOffset","value","radius","progress","Math","PI","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","div","className","classNames","aria-label","undefined","svg","role","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;+DAjBU;oBACI;AAG3B,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,IAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUO,IAAMJ,uBAAuB;0BAClCO,IAAAA,4BAAK,sCACLC,MAAAA,gCAAO,6CACPC,aAAAA,8CAAc,0BACdC,cAAAA,+BACAN,UAAAA,wCAAW,qBACGO,YAAd,eAAcA,YAAAA,iBAAY,6BAAZA;IAEd,IAAMR,SAAS,MAAMK,OAAO,MAAMC;IAClC,IAAMG,YAAY,IAAIP,KAAKC,EAAE,GAAGH;IAChC,IAAMU,eAAe,MAAML;IAE3B,IAAMM,aAAab,qBAAqBM,KAAK,KAAKH,UAAUD;IAE5D,qBACE,qBAACY;QACCC,WAAWC,IAAAA,gBAAU,gCAEnBV;QAEFG,OAAOA;QACPQ,cAAYX,KAAKI,YAAYQ;qBAE7B,qBAACC;QACCC,MAAK;QACLL,SAAS;QACTN,OAAO;YACLY,OAAOd;YACPe,QAAQf;QACV;QACAgB,SAAS,AAAC,OAAchB,OAARA,MAAK,KAAQ,OAALA;QACxBiB,OAAM;qBAEN,qBAACC;QACChB,OAAO;YACLY,OAAOd;YACPe,QAAQf;YACRmB,iBAAiB,AAAC,GAAoBd,OAAlBA,cAAa,OAAkB,OAAbA,cAAa;QACrD;qBAEA,qBAACe;QACCZ,SAAS;QACTa,MAAK;QACLC,iBAAiBlB;QACjBmB,kBAAkBjB;QAClBL,aAAaA;QACbuB,eAAc;QACdC,IAAIpB;QACJqB,IAAIrB;QACJsB,GAAGhC;;AAMf"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size?: number;\n  strokeWidth?: number;\n  on?: boolean;\n  progress?: number;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  ...restProps\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      aria-label={on ? ariaLabel : undefined}\n      {...restProps}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </RootComponent>\n  );\n};\n"],"names":["PullToRefreshSpinner","calcStrokeDashOffset","value","radius","progress","Math","PI","on","size","strokeWidth","ariaLabel","restProps","dasharray","circleCenter","dashoffset","RootComponent","baseClassName","classNames","aria-label","undefined","svg","role","className","style","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;+DAlBU;oBACI;6BAEG;AAG9B,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,IAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AASO,IAAMJ,uBAAuB;2BAClCO,IAAAA,4BAAK,uCACLC,MAAAA,gCAAO,8CACPC,aAAAA,8CAAc,mDACdL,UAAAA,wCAAW,qBACGM,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACXC;QALHJ;QACAC;QACAC;QACAL;QACA;;IAGA,IAAMD,SAAS,MAAMK,OAAO,MAAMC;IAClC,IAAMG,YAAY,IAAIP,KAAKC,EAAE,GAAGH;IAChC,IAAMU,eAAe,MAAML;IAE3B,IAAMM,aAAab,qBAAqBM,KAAK,KAAKH,UAAUD;IAE5D,qBACE,qBAACY,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,gCAEvBV;QAEFW,cAAYX,KAAKG,YAAYS;OACzBR,0BAEJ,qBAACS;QACCC,MAAK;QACLC,SAAS;QACTC,OAAO;YACLC,OAAOhB;YACPiB,QAAQjB;QACV;QACAkB,SAAS,AAAC,OAAclB,OAARA,MAAK,KAAQ,OAALA;QACxBmB,OAAM;qBAEN,qBAACC;QACCL,OAAO;YACLC,OAAOhB;YACPiB,QAAQjB;YACRqB,iBAAiB,AAAC,GAAoBhB,OAAlBA,cAAa,OAAkB,OAAbA,cAAa;QACrD;qBAEA,qBAACiB;QACCR,SAAS;QACTS,MAAK;QACLC,iBAAiBpB;QACjBqB,kBAAkBnB;QAClBL,aAAaA;QACbyB,eAAc;QACdC,IAAItB;QACJuB,IAAIvB;QACJwB,GAAGlC;;AAMf"}

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'vertical' | 'horizontal';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
-export declare const RadioGroup: ({ mode, children, className, ...restProps }: RadioGroupProps) => React.JSX.Element;
+export declare const RadioGroup: ({ mode, ...restProps }: RadioGroupProps) => React.JSX.Element;

package/dist/cjs/components/RadioGroup/RadioGroup.js

@@ -13,15 +13,14 @@ 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 RadioGroup = function(_param) /*#__PURE__*/ {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "vertical" : _param_mode, children = _param.children, className = _param.className, restProps = _object_without_properties._(_param, [
-        "mode",
-        "children",
-        "className"
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "vertical" : _param_mode, restProps = _object_without_properties._(_param, [
+        "mode"
     ]);
-    return _react.createElement("div", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiRadioGroup", "vkuiInternalRadioGroup", mode === "horizontal" && "vkuiRadioGroup--mode-horizontal", className)
-    }, restProps), children);
+    return _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: (0, _vkjs.classNames)("vkuiRadioGroup", "vkuiInternalRadioGroup", mode === "horizontal" && "vkuiRadioGroup--mode-horizontal")
+    }, restProps));
 };
 
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n      className,\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"names":["RadioGroup","mode","children","className","restProps","div","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;+DAXU;oBACI;AAUpB,IAAMA,aAAa;6BACxBC,MAAAA,gCAAO,0BACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;WAGA,qBAACE;QACCF,WAAWG,IAAAA,gBAAU,oBAEnB,0BACAL,SAAS,mDACTE;OAEEC,YAEHF;AACE"}
+{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({ mode = 'vertical', ...restProps }: RadioGroupProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n    )}\n    {...restProps}\n  />\n);\n"],"names":["RadioGroup","mode","restProps","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;+DAbU;oBACI;6BAEG;AAUvB,IAAMA,aAAa;6BAAGC,MAAAA,gCAAO,0BAAeC;QAAtBD;;WAC3B,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,oBAEvB,0BACAJ,SAAS;OAEPC;AACL"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 export interface RemovableProps {
     /**
      * iOS only. Текст в выезжающей кнопке для удаления ячейки.
@@ -10,7 +10,7 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
 }
-interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps extends HTMLAttributesWithRootRef<HTMLDivElement>, RemovableProps {
     /**
      * Расположение кнопки удаления.
      */
@@ -24,5 +24,5 @@ interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, Remova
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, indent, ...restProps }: RemovableOwnProps) => React.JSX.Element;
+export declare const Removable: ({ children, onRemove, removePlaceholder, align, indent, ...restProps }: RemovableOwnProps) => React.JSX.Element;
 export {};

package/dist/cjs/components/Removable/Removable.js

@@ -16,13 +16,13 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _useExternRef = require("../../hooks/useExternRef");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePlatform = require("../../hooks/usePlatform");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
 var _utils = require("../../lib/utils");
 var _IconButton = require("../IconButton/IconButton");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Tappable = require("../Tappable/Tappable");
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
@@ -88,25 +88,21 @@ var _Tappable = require("../Tappable/Tappable");
     }, removePlaceholder)));
 };
 var Removable = function(_param) {
-    var getRootRef = _param.getRootRef, children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, className = _param.className, _param_indent = _param.indent, indent = _param_indent === void 0 ? false : _param_indent, restProps = _object_without_properties._(_param, [
-        "getRootRef",
+    var children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, _param_indent = _param.indent, indent = _param_indent === void 0 ? false : _param_indent, restProps = _object_without_properties._(_param, [
         "children",
         "onRemove",
         "removePlaceholder",
         "align",
-        "className",
         "indent"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var ref = (0, _useExternRef.useExternRef)(getRootRef);
     var onRemoveClick = function(e) {
         e.preventDefault();
         onRemove(e);
     };
     var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        ref: ref,
-        className: (0, _vkjs.classNames)(platform === _platform.Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", indent && "vkuiRemovable--indent", className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)(platform === _platform.Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", indent && "vkuiRemovable--indent")
     }), platform !== _platform.Platform.IOS && /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiRemovable__content", "vkuiInternalRemovable__content")
     }, children, /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {