@vkontakte/vkui 5.1.2 → 5.2.1

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Modifier } from 'react-popper';
-import { HasRef } from '../../types';
-export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
+import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
+import type { HasRef } from '../../types';
 export interface PopperRenderContentProps {
     className: string;
 }
@@ -9,7 +8,7 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
-    placement?: Placement;
+    placement?: PlacementWithAuto;
     /**
      * Отступ по вспомогательной оси
      */
@@ -31,13 +30,14 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     sameWidth?: boolean;
     forcePortal?: boolean;
-    onPlacementChange?: (data: {
-        placement?: Placement;
-    }) => void;
+    /**
+     * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
+     */
+    autoUpdateOnTargetResize?: boolean;
     /**
      * Массив кастомных модификаторов для Popper (необходимо мемоизировать)
      */
-    customModifiers?: Array<Modifier<string>>;
+    customMiddlewares?: UseFloatingMiddleware[];
     /**
      * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.
      *
@@ -46,6 +46,9 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      * > ⚠️ Параметр `children` будет проигнорирован.
      */
     renderContent?(props: PopperRenderContentProps): React.ReactNode;
+    onPlacementChange?(data: {
+        placement?: Placement;
+    }): void;
 }
 export interface PopperProps extends PopperCommonProps {
     targetRef: React.RefObject<HTMLElement>;
@@ -53,4 +56,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, style: compStyles, customModifiers, renderContent, className, ...restProps }: PopperProps) => JSX.Element;
+export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => JSX.Element;

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

@@ -9,146 +9,119 @@ exports.Popper = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _reactPopper = require("react-popper");
+var _vkjs = require("@vkontakte/vkjs");
+var _useExternRef = require("../../hooks/useExternRef");
+var _floating = require("../../lib/floating");
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
 var _PopperArrow = require("../PopperArrow/PopperArrow");
-var _usePlatform = require("../../hooks/usePlatform");
-var _getPlatformClassName = require("../../helpers/getPlatformClassName");
-var _useExternRef = require("../../hooks/useExternRef");
-var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _vkjs = require("@vkontakte/vkjs");
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent", "className"];
-var ARROW_PADDING = 8;
-var ARROW_WIDTH = 20;
-var ARROW_HEIGHT = 8;
-var preventOverflowModifier = {
-  name: 'preventOverflow',
-  options: {
-    mainAxis: false
-  }
-};
-var flipModifier = {
-  name: 'flip'
-};
-var arrowModifier = {
-  name: 'arrow',
-  options: {
-    padding: ARROW_PADDING
-  }
-};
-var sameWidthModifier = {
-  name: 'sameWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: function fn(_ref) {
-    var state = _ref.state;
-    state.styles.popper.width = "".concat(state.rects.reference.width, "px");
-  },
-  effect: function effect(_ref2) {
-    var state = _ref2.state;
-    state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
-  }
-};
-
+var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "autoUpdateOnTargetResize", "style", "customMiddlewares", "renderContent", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-var Popper = function Popper(_ref3) {
-  var _targetRef$current3;
-  var targetRef = _ref3.targetRef,
-    children = _ref3.children,
-    getRef = _ref3.getRef,
-    _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? 'bottom-start' : _ref3$placement,
-    onPlacementChange = _ref3.onPlacementChange,
-    arrow = _ref3.arrow,
-    arrowClassName = _ref3.arrowClassName,
-    sameWidth = _ref3.sameWidth,
-    _ref3$offsetDistance = _ref3.offsetDistance,
-    offsetDistance = _ref3$offsetDistance === void 0 ? 8 : _ref3$offsetDistance,
-    _ref3$offsetSkidding = _ref3.offsetSkidding,
-    offsetSkidding = _ref3$offsetSkidding === void 0 ? 0 : _ref3$offsetSkidding,
-    _ref3$forcePortal = _ref3.forcePortal,
-    forcePortal = _ref3$forcePortal === void 0 ? true : _ref3$forcePortal,
-    compStyles = _ref3.style,
-    customModifiers = _ref3.customModifiers,
-    renderContent = _ref3.renderContent,
-    className = _ref3.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var _React$useState = React.useState(null),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    popperNode = _React$useState2[0],
-    setPopperNode = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    smallTargetOffsetSkidding = _React$useState4[0],
-    setSmallTargetOffsetSkidding = _React$useState4[1];
-  var platform = (0, _usePlatform.usePlatform)();
-  var setExternalRef = (0, _useExternRef.useExternRef)(getRef, setPopperNode);
-  var modifiers = React.useMemo(function () {
-    var modifiers = [preventOverflowModifier, {
-      name: 'offset',
-      options: {
-        offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
-      }
-    }, flipModifier];
-    if (arrow) {
-      modifiers.push(arrowModifier);
+var Popper = function Popper(_ref) {
+  var targetRef = _ref.targetRef,
+    children = _ref.children,
+    getRef = _ref.getRef,
+    _ref$placement = _ref.placement,
+    placementProp = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    onPlacementChange = _ref.onPlacementChange,
+    arrow = _ref.arrow,
+    arrowClassName = _ref.arrowClassName,
+    sameWidth = _ref.sameWidth,
+    _ref$offsetDistance = _ref.offsetDistance,
+    offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
+    _ref$offsetSkidding = _ref.offsetSkidding,
+    offsetSkidding = _ref$offsetSkidding === void 0 ? 0 : _ref$offsetSkidding,
+    _ref$forcePortal = _ref.forcePortal,
+    forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
+    _ref$autoUpdateOnTarg = _ref.autoUpdateOnTargetResize,
+    autoUpdateOnTargetResize = _ref$autoUpdateOnTarg === void 0 ? false : _ref$autoUpdateOnTarg,
+    styleProp = _ref.style,
+    customMiddlewares = _ref.customMiddlewares,
+    renderContent = _ref.renderContent,
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var arrowRef = React.useRef(null);
+  var isNotAutoPlacement = (0, _floating.checkIsNotAutoPlacement)(placementProp);
+  var memoizedMiddlewares = React.useMemo(function () {
+    var middlewares = [(0, _floating.offsetMiddleware)({
+      crossAxis: offsetSkidding,
+      mainAxis: arrow ? offsetDistance + _PopperArrow.ARROW_HEIGHT : offsetDistance
+    })];
+
+    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+    if (isNotAutoPlacement) {
+      middlewares.push((0, _floating.flipMiddleware)());
+    } else {
+      middlewares.push((0, _floating.autoPlacementMiddleware)({
+        alignment: (0, _floating.getAutoPlacementAlign)(placementProp)
+      }));
     }
+    middlewares.push((0, _floating.shiftMiddleware)());
     if (sameWidth) {
-      modifiers.push(sameWidthModifier);
+      middlewares.push((0, _floating.sizeMiddleware)({
+        apply: function apply(_ref2) {
+          var rects = _ref2.rects,
+            elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            width: "".concat(rects.reference.width, "px")
+          });
+        }
+      }));
     }
-    if (customModifiers) {
-      modifiers.push.apply(modifiers, (0, _toConsumableArray2.default)(customModifiers));
+    if (customMiddlewares) {
+      middlewares.push.apply(middlewares, (0, _toConsumableArray2.default)(customMiddlewares));
     }
-    return modifiers;
-  }, [arrow, sameWidth, smallTargetOffsetSkidding, offsetSkidding, offsetDistance, customModifiers]);
-  var _usePopper = (0, _reactPopper.usePopper)(targetRef.current, popperNode, {
-      placement: placement,
-      modifiers: modifiers
-    }),
-    popperStyles = _usePopper.styles,
-    state = _usePopper.state,
-    attributes = _usePopper.attributes;
-  var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
-  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю
 
-  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
-  // таргета из-за маленьких размеров последнего
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (arrow && isEdgePlacement) {
-      var _ref4, _targetRef$current, _targetRef$current2;
-      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('bottom') || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
-      var arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
-      var targetSize = (_ref4 = placementDirection === 'vertical' ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
-      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
-        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
-      }
-    } else {
-      setSmallTargetOffsetSkidding(0);
+    // см. https://floating-ui.com/docs/arrow#order
+    if (arrow) {
+      middlewares.push((0, _floating.arrowMiddleware)({
+        element: arrowRef,
+        padding: _PopperArrow.ARROW_PADDING
+      }));
     }
-  }, [arrow, isEdgePlacement]);
+    return middlewares;
+  }, [arrow, sameWidth, offsetSkidding, offsetDistance, customMiddlewares, placementProp, isNotAutoPlacement]);
+  var _useFloating = (0, _floating.useFloating)({
+      placement: isNotAutoPlacement ? placementProp : undefined,
+      middleware: memoizedMiddlewares,
+      whileElementsMounted: function whileElementsMounted() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return _floating.autoUpdateFloatingElement.apply(void 0, args.concat([{
+          elementResize: autoUpdateOnTargetResize
+        }]));
+      }
+    }),
+    floatingDataX = _useFloating.x,
+    floatingDataY = _useFloating.y,
+    floatingPositionStrategy = _useFloating.strategy,
+    resolvedPlacement = _useFloating.placement,
+    refs = _useFloating.refs,
+    arrowCoords = _useFloating.middlewareData.arrow;
+  var handleRootRef = (0, _useExternRef.useExternRef)(refs.setFloating, getRef);
+  React.useEffect(function () {
+    refs.setReference(targetRef.current);
+  }, [refs, targetRef]);
   React.useEffect(function () {
-    if (resolvedPlacement) {
-      onPlacementChange && onPlacementChange({
+    if (resolvedPlacement && onPlacementChange) {
+      onPlacementChange({
         placement: resolvedPlacement
       });
     }
   }, [onPlacementChange, resolvedPlacement]);
-  var dropdown = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, attributes.popper, {
-    className: (0, _vkjs.classNames)("vkuiPopper", (0, _getPlatformClassName.getPlatformClassName)("vkuiPopper", platform), className),
-    ref: setExternalRef,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, compStyles), popperStyles.popper), {}, {
-      minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined
-    })
+  var dropdown = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
+    className: (0, _vkjs.classNames)("vkuiPopper", className),
+    ref: handleRootRef,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styleProp), (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
   }), arrow && /*#__PURE__*/React.createElement(_PopperArrow.PopperArrow, {
-    attributes: attributes.arrow,
-    style: popperStyles.arrow,
-    arrowClassName: arrowClassName
+    coords: arrowCoords,
+    placement: resolvedPlacement,
+    arrowClassName: arrowClassName,
+    getRootRef: arrowRef
   }), renderContent ? renderContent({
     className: "vkuiPopper__content"
   }) : /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","className","restProps","React","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","usePlatform","setExternalRef","useExternRef","modifiers","useMemo","offset","push","usePopper","current","popperStyles","attributes","resolvedPlacement","isEdgePlacement","includes","useIsomorphicLayoutEffect","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","classNames","getPlatformClassName","minWidth","scrollWidth","undefined"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopper, Modifier } from 'react-popper';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { PopperArrow } from '../PopperArrow/PopperArrow';\nimport { HasRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right';\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?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: 'preventOverflow',\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: 'flip',\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: 'arrow',\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(null);\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: 'offset',\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const {\n    styles: popperStyles,\n    state,\n    attributes,\n  } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith('bottom') || resolvedPlacement?.startsWith('top')\n          ? 'vertical'\n          : 'horizontal';\n\n      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === 'vertical'\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      className={classNames(\n        styles['Popper'],\n        getPlatformClassName(styles['Popper'], platform),\n        className,\n      )}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...popperStyles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={popperStyles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popper.js","names":["Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","styleProp","style","customMiddlewares","renderContent","className","restProps","arrowRef","React","useRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","ARROW_HEIGHT","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","ARROW_PADDING","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","floatingDataX","x","floatingDataY","y","floatingPositionStrategy","strategy","resolvedPlacement","refs","arrowCoords","middlewareData","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","classNames","convertFloatingDataToReactCSSProperties"],"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 { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } 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   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\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  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(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 + ARROW_HEIGHT : 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: ARROW_PADDING,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    sameWidth,\n    offsetSkidding,\n    offsetDistance,\n    customMiddlewares,\n    placementProp,\n    isNotAutoPlacement,\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={arrowRef}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,17 @@
-import * as React from 'react';
-export interface PopperArrowProps {
-    style?: React.CSSProperties;
-    attributes?: React.HTMLAttributes<HTMLDivElement> | null;
+/// <reference types="react" />
+import type { Placement } from '../../lib/floating';
+import type { HasRootRef } from '../../types';
+export declare const ARROW_PADDING = 10;
+export declare const ARROW_WIDTH = 20;
+export declare const ARROW_HEIGHT = 8;
+declare type Coords = {
+    x?: number;
+    y?: number;
+};
+export interface PopperArrowProps extends HasRootRef<HTMLDivElement> {
+    coords?: Coords;
+    placement: Placement;
     arrowClassName?: string;
 }
-export declare const PopperArrow: ({ style, attributes, arrowClassName }: PopperArrowProps) => JSX.Element;
+export declare const PopperArrow: ({ coords, arrowClassName, placement, getRootRef, }: PopperArrowProps) => JSX.Element;
+export {};

package/dist/cjs/components/PopperArrow/PopperArrow.js

@@ -1,29 +1,56 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopperArrow = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports.PopperArrow = exports.ARROW_WIDTH = exports.ARROW_PADDING = exports.ARROW_HEIGHT = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _excluded = ["className"];
+var ARROW_PADDING = 10;
+exports.ARROW_PADDING = ARROW_PADDING;
+var ARROW_WIDTH = 20;
+exports.ARROW_WIDTH = ARROW_WIDTH;
+var ARROW_HEIGHT = 8;
+exports.ARROW_HEIGHT = ARROW_HEIGHT;
+function getPositionsStylesByCoords(placement) {
+  var coords = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    x: 0,
+    y: 0
+  };
+  if (placement.startsWith('top')) {
+    return {
+      top: '100%',
+      left: coords.x
+    };
+  } else if (placement.startsWith('right')) {
+    return {
+      top: coords.y,
+      right: 'calc(100% - 6px)'
+    };
+  } else if (placement.startsWith('bottom')) {
+    return {
+      bottom: '100%',
+      left: coords.x
+    };
+  } else {
+    return {
+      top: coords.y,
+      left: 'calc(100% - 6px)'
+    };
+  }
+}
 var PopperArrow = function PopperArrow(_ref) {
-  var style = _ref.style,
-    attributes = _ref.attributes,
-    arrowClassName = _ref.arrowClassName;
-  var _ref2 = attributes !== null && attributes !== void 0 ? attributes : {},
-    arrowWrapperClassName = _ref2.className,
-    restAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    style: style
-  }, restAttributes, {
-    className: (0, _vkjs.classNames)("vkuiPopperArrow", arrowWrapperClassName),
-    "data-popper-arrow": true
-  }), /*#__PURE__*/React.createElement("svg", {
+  var coords = _ref.coords,
+    arrowClassName = _ref.arrowClassName,
+    placement = _ref.placement,
+    getRootRef = _ref.getRootRef;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: getRootRef,
+    style: getPositionsStylesByCoords(placement, coords),
+    className: "vkuiPopperArrow",
+    "data-placement": placement
+  }, /*#__PURE__*/React.createElement("svg", {
     className: (0, _vkjs.classNames)("vkuiPopperArrow__in", arrowClassName),
     width: "20",
     height: "8",

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

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["PopperArrow","style","attributes","arrowClassName","arrowWrapperClassName","className","restAttributes","classNames"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PopperArrow.module.css';\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({ style, attributes, arrowClassName }: PopperArrowProps) => {\n  const { className: arrowWrapperClassName, ...restAttributes } = attributes ?? {};\n  return (\n    <div\n      style={style}\n      {...restAttributes}\n      className={classNames(styles['PopperArrow'], arrowWrapperClassName)}\n      data-popper-arrow={true}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAStC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAgE;EAAA,IAA1DC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,cAAc,QAAdA,cAAc;EAC7D,YAAgED,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAC;IAA7DE,qBAAqB,SAAhCC,SAAS;IAA4BC,cAAc;EAC3D,oBACE;IACE,KAAK,EAAEL;EAAM,GACTK,cAAc;IAClB,SAAS,EAAE,IAAAC,gBAAU,qBAAwBH,qBAAqB,CAAE;IACpE,qBAAmB;EAAK,iBAExB;IACE,SAAS,EAAE,IAAAG,gBAAU,yBAA4BJ,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"file":"PopperArrow.js","names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","PopperArrow","arrowClassName","getRootRef","classNames"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport styles from './PopperArrow.module.css';\n\nexport const ARROW_PADDING = 10;\nexport const ARROW_WIDTH = 20;\nexport const ARROW_HEIGHT = 8;\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nfunction getPositionsStylesByCoords(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): React.CSSProperties {\n  if (placement.startsWith('top')) {\n    return {\n      top: '100%',\n      left: coords.x,\n    };\n  } else if (placement.startsWith('right')) {\n    return {\n      top: coords.y,\n      right: 'calc(100% - 6px)',\n    };\n  } else if (placement.startsWith('bottom')) {\n    return {\n      bottom: '100%',\n      left: coords.x,\n    };\n  } else {\n    return {\n      top: coords.y,\n      left: 'calc(100% - 6px)',\n    };\n  }\n}\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n}: PopperArrowProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={getPositionsStylesByCoords(placement, coords)}\n      className={styles['PopperArrow']}\n      data-placement={placement}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAKO,IAAMA,aAAa,GAAG,EAAE;AAAC;AACzB,IAAMC,WAAW,GAAG,EAAE;AAAC;AACvB,IAAMC,YAAY,GAAG,CAAC;AAAC;AAO9B,SAASC,0BAA0B,CACjCC,SAAoB,EAEC;EAAA,IADrBC,MAAc,uEAAG;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC;EAE/B,IAAIH,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC,EAAE;IAC/B,OAAO;MACLC,GAAG,EAAE,MAAM;MACXC,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM,IAAIF,SAAS,CAACI,UAAU,CAAC,OAAO,CAAC,EAAE;IACxC,OAAO;MACLC,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbI,KAAK,EAAE;IACT,CAAC;EACH,CAAC,MAAM,IAAIP,SAAS,CAACI,UAAU,CAAC,QAAQ,CAAC,EAAE;IACzC,OAAO;MACLI,MAAM,EAAE,MAAM;MACdF,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM;IACL,OAAO;MACLG,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbG,IAAI,EAAE;IACR,CAAC;EACH;AACF;AAQO,IAAMG,WAAW,GAAG,SAAdA,WAAW,OAKA;EAAA,IAJtBR,MAAM,QAANA,MAAM;IACNS,cAAc,QAAdA,cAAc;IACdV,SAAS,QAATA,SAAS;IACTW,UAAU,QAAVA,UAAU;EAEV,oBACE;IACE,GAAG,EAAEA,UAAW;IAChB,KAAK,EAAEZ,0BAA0B,CAACC,SAAS,EAAEC,MAAM,CAAE;IACrD,SAAS,mBAAwB;IACjC,kBAAgBD;EAAU,gBAE1B;IACE,SAAS,EAAE,IAAAY,gBAAU,yBAA4BF,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC;AAAC"}

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

@@ -9,8 +9,8 @@ exports.Progress = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _math = require("../../helpers/math");
 var _vkjs = require("@vkontakte/vkjs");
+var _math = require("../../helpers/math");
 var _excluded = ["value", "getRootRef", "className"];
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","clamp","title","classNames","width"],"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: 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 = ({ value = 0, getRootRef, className, ...restProps }: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(styles['Progress'], className)}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA6C;AAU7C,IAAMA,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAA0E;EAAA,sBAApEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvE,IAAMC,QAAQ,GAAG,IAAAC,WAAK,EAACL,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EACrE,IAAMQ,KAAK,aAAMF,QAAQ,gBAAMN,kBAAkB,CAAE;EAEnD,oBACE;IACE,iBAAeE,KAAM;IACrB,KAAK,EAAEM;EAAM,GACTH,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAE,IAAAM,gBAAU,kBAAqBL,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEM,KAAK,YAAKJ,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC;AAAC"}
+{"version":3,"file":"Progress.js","names":["PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","clamp","title","classNames","width"],"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\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: 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 = ({ value = 0, getRootRef, className, ...restProps }: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(styles['Progress'], className)}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA2C;AAU3C,IAAMA,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAA0E;EAAA,sBAApEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvE,IAAMC,QAAQ,GAAG,IAAAC,WAAK,EAACL,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EACrE,IAAMQ,KAAK,aAAMF,QAAQ,gBAAMN,kBAAkB,CAAE;EAEnD,oBACE;IACE,iBAAeE,KAAM;IACrB,KAAK,EAAEM;EAAM,GACTH,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAE,IAAAM,gBAAU,kBAAqBL,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEM,KAAK,YAAKJ,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC;AAAC"}

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

@@ -12,11 +12,11 @@ var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
+var _vkjs = require("@vkontakte/vkjs");
 var _Button = require("../Button/Button");
-var _SimpleCell = require("../SimpleCell/SimpleCell");
 var _Image = require("../Image/Image");
+var _SimpleCell = require("../SimpleCell/SimpleCell");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _excluded = ["bannerData", "onClose", "isCloseButtonHidden", "className"];
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"PromoBanner.js","names":["PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","classNames","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { Button } from '../Button/Button';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Image } from '../Image/Image';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\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/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\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 className={styles['PromoBanner__label']}>\n          {bannerData.advertisingLabel || 'Advertisement'}\n        </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"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAuC3D;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,2BALtBC,UAAU;IAAVA,UAAU,gCAAG,CAAC,CAAC;IACfC,OAAO,QAAPA,OAAO;IACPC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,sBAAwCC,KAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;IAAA;IAAnDC,YAAY;IAAEC,eAAe;EAEpC,IAAMC,WAAW,GAAGJ,KAAK,CAACK,OAAO,CAC/B;IAAA,OACGV,UAAU,CAACW,UAAU,GAClBX,UAAU,CAACW,UAAU,CAACC,MAAM,CAAC,UAACC,GAAG,EAAEC,IAAI;MAAA,mEAAWD,GAAG,yCAAGC,IAAI,CAACC,IAAI,EAAGD,IAAI,CAACE,GAAG;IAAA,CAAG,EAAE,CAAC,CAAC,CAAC,GACpF,CAAC,CAAC;EAAA,CAAqC,EAC7C,CAAChB,UAAU,CAACW,UAAU,CAAC,CACxB;EAED,IAAMM,OAAO,GAAGZ,KAAK,CAACa,WAAW,CAC/B;IAAA,OAAMV,eAAe,CAACC,WAAW,CAACU,KAAK,IAAI,EAAE,CAAC;EAAA,GAC9C,CAACV,WAAW,CAACU,KAAK,CAAC,CACpB;EAEDd,KAAK,CAACe,SAAS,CAAC,YAAM;IACpB,IAAIX,WAAW,CAACY,eAAe,EAAE;MAC/Bb,eAAe,CAACC,WAAW,CAACY,eAAe,CAAC;IAC9C;EACF,CAAC,EAAE,CAACZ,WAAW,CAACY,eAAe,CAAC,CAAC;EAEjC,oBACE;IAAK,SAAS,EAAE,IAAAC,gBAAU,qBAAwBnB,SAAS;EAAE,GAAKC,SAAS,gBACzE;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAC/CJ,UAAU,CAACuB,gBAAgB,IAAI,eAAe,CACtC,EACVvB,UAAU,CAACwB,eAAe,iBACzB,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAAExB,UAAU,CAACwB,eAAe,CAC7E,EAEA,CAACtB,mBAAmB,iBACnB;IAAK,SAAS,0BAA+B;IAAC,OAAO,EAAED;EAAQ,gBAC7D,oBAAC,oBAAa,OAAG,CAEpB,CACG,eACN,oBAAC,sBAAU;IACT,IAAI,EAAED,UAAU,CAACyB,YAAa;IAC9B,OAAO,EAAER,OAAQ;IACjB,GAAG,EAAC,8BAA8B;IAClC,MAAM,EAAC,QAAQ;IACf,MAAM,EACJjB,UAAU,CAAC0B,QAAQ,iBACjB,oBAAC,YAAK;MACJ,IAAI,EAAE,EAAG;MACT,GAAG,EAAE1B,UAAU,CAAC0B,QAAS;MACzB,GAAG,EAAE1B,UAAU,CAAC2B,KAAM;MACtB,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAGC;IAAU,EAGzE;IACD,KAAK,EACH/B,UAAU,CAACgC,OAAO,iBAChB,oBAAC,cAAM;MACL,IAAI,EAAC,SAAS;MACd,eAAaJ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,gBAAgB,GAAGC;IAAU,GAE3E/B,UAAU,CAACgC,OAAO,CAGxB;IACD,QAAQ,EAAEhC,UAAU,CAACiC;EAAO,GAE3BjC,UAAU,CAAC2B,KAAK,CACN,EAEZpB,YAAY,CAAC2B,MAAM,GAAG,CAAC,iBACtB;IAAK,SAAS;EAAgC,gBAC5C;IAAK,GAAG,EAAE3B,YAAa;IAAC,GAAG,EAAC;EAAE,EAAG,CAEpC,CACG;AAEV,CAAC;AAAC"}
+{"version":3,"file":"PromoBanner.js","names":["PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","classNames","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\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\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/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\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 className={styles['PromoBanner__label']}>\n          {bannerData.advertisingLabel || 'Advertisement'}\n        </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"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAuC3D;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,2BALtBC,UAAU;IAAVA,UAAU,gCAAG,CAAC,CAAC;IACfC,OAAO,QAAPA,OAAO;IACPC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,sBAAwCC,KAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;IAAA;IAAnDC,YAAY;IAAEC,eAAe;EAEpC,IAAMC,WAAW,GAAGJ,KAAK,CAACK,OAAO,CAC/B;IAAA,OACGV,UAAU,CAACW,UAAU,GAClBX,UAAU,CAACW,UAAU,CAACC,MAAM,CAAC,UAACC,GAAG,EAAEC,IAAI;MAAA,mEAAWD,GAAG,yCAAGC,IAAI,CAACC,IAAI,EAAGD,IAAI,CAACE,GAAG;IAAA,CAAG,EAAE,CAAC,CAAC,CAAC,GACpF,CAAC,CAAC;EAAA,CAAqC,EAC7C,CAAChB,UAAU,CAACW,UAAU,CAAC,CACxB;EAED,IAAMM,OAAO,GAAGZ,KAAK,CAACa,WAAW,CAC/B;IAAA,OAAMV,eAAe,CAACC,WAAW,CAACU,KAAK,IAAI,EAAE,CAAC;EAAA,GAC9C,CAACV,WAAW,CAACU,KAAK,CAAC,CACpB;EAEDd,KAAK,CAACe,SAAS,CAAC,YAAM;IACpB,IAAIX,WAAW,CAACY,eAAe,EAAE;MAC/Bb,eAAe,CAACC,WAAW,CAACY,eAAe,CAAC;IAC9C;EACF,CAAC,EAAE,CAACZ,WAAW,CAACY,eAAe,CAAC,CAAC;EAEjC,oBACE;IAAK,SAAS,EAAE,IAAAC,gBAAU,qBAAwBnB,SAAS;EAAE,GAAKC,SAAS,gBACzE;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAC/CJ,UAAU,CAACuB,gBAAgB,IAAI,eAAe,CACtC,EACVvB,UAAU,CAACwB,eAAe,iBACzB,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAAExB,UAAU,CAACwB,eAAe,CAC7E,EAEA,CAACtB,mBAAmB,iBACnB;IAAK,SAAS,0BAA+B;IAAC,OAAO,EAAED;EAAQ,gBAC7D,oBAAC,oBAAa,OAAG,CAEpB,CACG,eACN,oBAAC,sBAAU;IACT,IAAI,EAAED,UAAU,CAACyB,YAAa;IAC9B,OAAO,EAAER,OAAQ;IACjB,GAAG,EAAC,8BAA8B;IAClC,MAAM,EAAC,QAAQ;IACf,MAAM,EACJjB,UAAU,CAAC0B,QAAQ,iBACjB,oBAAC,YAAK;MACJ,IAAI,EAAE,EAAG;MACT,GAAG,EAAE1B,UAAU,CAAC0B,QAAS;MACzB,GAAG,EAAE1B,UAAU,CAAC2B,KAAM;MACtB,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAGC;IAAU,EAGzE;IACD,KAAK,EACH/B,UAAU,CAACgC,OAAO,iBAChB,oBAAC,cAAM;MACL,IAAI,EAAC,SAAS;MACd,eAAaJ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,gBAAgB,GAAGC;IAAU,GAE3E/B,UAAU,CAACgC,OAAO,CAGxB;IACD,QAAQ,EAAEhC,UAAU,CAACiC;EAAO,GAE3BjC,UAAU,CAAC2B,KAAK,CACN,EAEZpB,YAAY,CAAC2B,MAAM,GAAG,CAAC,iBACtB;IAAK,SAAS;EAAgC,gBAC5C;IAAK,GAAG,EAAE3B,YAAa;IAAC,GAAG,EAAC;EAAE,EAAG,CAEpC,CACG;AAEV,CAAC;AAAC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AnyFunction } from '../../types';
 import { DOMProps } from '../../lib/dom';
+import { AnyFunction } from '../../types';
 import { ScrollContextInterface } from '../AppRoot/ScrollContext';
 import { TouchProps } from '../Touch/Touch';
 export interface PullToRefreshProps extends DOMProps, TouchProps {

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

@@ -10,21 +10,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _dom = require("../../lib/dom");
 var _vkjs = require("@vkontakte/vkjs");
+var _math = require("../../helpers/math");
+var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+var _usePlatform = require("../../hooks/usePlatform");
+var _usePrevious = require("../../hooks/usePrevious");
+var _useTimeout2 = require("../../hooks/useTimeout");
+var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
 var _taptic = require("../../lib/taptic");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _usePlatform = require("../../hooks/usePlatform");
-var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _ScrollContext = require("../AppRoot/ScrollContext");
-var _Touch = require("../Touch/Touch");
 var _FixedLayout = require("../FixedLayout/FixedLayout");
-var _PullToRefreshSpinner = require("./PullToRefreshSpinner");
+var _Touch = require("../Touch/Touch");
 var _TouchContext = _interopRequireDefault(require("../Touch/TouchContext"));
-var _usePrevious = require("../../hooks/usePrevious");
-var _useTimeout2 = require("../../hooks/useTimeout");
-var _math = require("../../helpers/math");
+var _PullToRefreshSpinner = require("./PullToRefreshSpinner");
 var _excluded = ["children", "isFetching", "onRefresh", "className"];
 function cancelEvent(event) {
   if (!event) {