@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/Popper/Popper.js

@@ -1,127 +1,129 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "autoUpdateOnTargetResize", "style", "customMiddlewares", "renderContent", "className"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
-import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from '../../lib/floating';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from '../PopperArrow/PopperArrow';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useExternRef } from "../../hooks/useExternRef";
+import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from "../../lib/floating";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from "../PopperArrow/PopperArrow";
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
- */
-export 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 = _objectWithoutProperties(_ref, _excluded);
-  var arrowRef = React.useRef(null);
-  var isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
-  var memoizedMiddlewares = React.useMemo(function () {
-    var middlewares = [offsetMiddleware({
-      crossAxis: offsetSkidding,
-      mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance
-    })];
-
-    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
-    if (isNotAutoPlacement) {
-      middlewares.push(flipMiddleware());
-    } else {
-      middlewares.push(autoPlacementMiddleware({
-        alignment: getAutoPlacementAlign(placementProp)
-      }));
-    }
-    middlewares.push(shiftMiddleware());
-    if (sameWidth) {
-      middlewares.push(sizeMiddleware({
-        apply: function apply(_ref2) {
-          var rects = _ref2.rects,
-            elements = _ref2.elements;
-          Object.assign(elements.floating.style, {
-            width: "".concat(rects.reference.width, "px")
-          });
+ */ export var Popper = function(_param) {
+    var targetRef = _param.targetRef, children = _param.children, getRef = _param.getRef, tmp = _param.placement, placementProp = tmp === void 0 ? "bottom-start" : tmp, onPlacementChange = _param.onPlacementChange, arrow = _param.arrow, arrowClassName = _param.arrowClassName, sameWidth = _param.sameWidth, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, _param_offsetSkidding = _param.offsetSkidding, offsetSkidding = _param_offsetSkidding === void 0 ? 0 : _param_offsetSkidding, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, _param_autoUpdateOnTargetResize = _param.autoUpdateOnTargetResize, autoUpdateOnTargetResize = _param_autoUpdateOnTargetResize === void 0 ? false : _param_autoUpdateOnTargetResize, styleProp = _param.style, customMiddlewares = _param.customMiddlewares, renderContent = _param.renderContent, className = _param.className, restProps = _object_without_properties(_param, [
+        "targetRef",
+        "children",
+        "getRef",
+        "placement",
+        "onPlacementChange",
+        "arrow",
+        "arrowClassName",
+        "sameWidth",
+        "offsetDistance",
+        "offsetSkidding",
+        "forcePortal",
+        "autoUpdateOnTargetResize",
+        "style",
+        "customMiddlewares",
+        "renderContent",
+        "className"
+    ]);
+    var arrowRef = React.useRef(null);
+    var isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
+    var memoizedMiddlewares = React.useMemo(function() {
+        var middlewares = [
+            offsetMiddleware({
+                crossAxis: offsetSkidding,
+                mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance
+            })
+        ];
+        // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+        if (isNotAutoPlacement) {
+            middlewares.push(flipMiddleware());
+        } else {
+            middlewares.push(autoPlacementMiddleware({
+                alignment: getAutoPlacementAlign(placementProp)
+            }));
         }
-      }));
-    }
-    if (customMiddlewares) {
-      middlewares.push.apply(middlewares, _toConsumableArray(customMiddlewares));
-    }
-
-    // см. https://floating-ui.com/docs/arrow#order
-    if (arrow) {
-      middlewares.push(arrowMiddleware({
-        element: arrowRef,
-        padding: ARROW_PADDING
-      }));
-    }
-    return middlewares;
-  }, [arrow, sameWidth, offsetSkidding, offsetDistance, customMiddlewares, placementProp, isNotAutoPlacement]);
-  var _useFloating = 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];
+        middlewares.push(shiftMiddleware());
+        if (sameWidth) {
+            middlewares.push(sizeMiddleware({
+                apply: function apply(param) {
+                    var rects = param.rects, elements = param.elements;
+                    Object.assign(elements.floating.style, {
+                        width: "".concat(rects.reference.width, "px")
+                    });
+                }
+            }));
+        }
+        if (customMiddlewares) {
+            var _middlewares;
+            (_middlewares = middlewares).push.apply(_middlewares, _to_consumable_array(customMiddlewares));
+        }
+        // см. https://floating-ui.com/docs/arrow#order
+        if (arrow) {
+            middlewares.push(arrowMiddleware({
+                element: arrowRef,
+                padding: ARROW_PADDING
+            }));
         }
-        return 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 = useExternRef(refs.setFloating, getRef);
-  React.useEffect(function () {
-    refs.setReference(targetRef.current);
-  }, [refs, targetRef]);
-  React.useEffect(function () {
-    if (resolvedPlacement && onPlacementChange) {
-      onPlacementChange({
-        placement: resolvedPlacement
-      });
-    }
-  }, [onPlacementChange, resolvedPlacement]);
-  var dropdown = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiPopper", className),
-    ref: handleRootRef,
-    style: _objectSpread(_objectSpread({}, styleProp), convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
-  }), arrow && /*#__PURE__*/React.createElement(PopperArrow, {
-    coords: arrowCoords,
-    placement: resolvedPlacement,
-    arrowClassName: arrowClassName,
-    getRootRef: arrowRef
-  }), renderContent ? renderContent({
-    className: "vkuiPopper__content"
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPopper__content"
-  }, children));
-  return /*#__PURE__*/React.createElement(AppRootPortal, {
-    forcePortal: forcePortal,
-    className: "vkuiPopperPortal"
-  }, dropdown);
+        return middlewares;
+    }, [
+        arrow,
+        sameWidth,
+        offsetSkidding,
+        offsetDistance,
+        customMiddlewares,
+        placementProp,
+        isNotAutoPlacement
+    ]);
+    var _useFloating = 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 autoUpdateFloatingElement.apply(void 0, _to_consumable_array(args).concat([
+                {
+                    elementResize: autoUpdateOnTargetResize
+                }
+            ]));
+        }
+    }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, floatingPositionStrategy = _useFloating.strategy, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow;
+    var handleRootRef = useExternRef(refs.setFloating, getRef);
+    React.useEffect(function() {
+        refs.setReference(targetRef.current);
+    }, [
+        refs,
+        targetRef
+    ]);
+    React.useEffect(function() {
+        if (resolvedPlacement && onPlacementChange) {
+            onPlacementChange({
+                placement: resolvedPlacement
+            });
+        }
+    }, [
+        onPlacementChange,
+        resolvedPlacement
+    ]);
+    var dropdown = /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        className: classNames("vkuiPopper", className),
+        ref: handleRootRef,
+        style: _object_spread({}, styleProp, convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
+    }), arrow && /*#__PURE__*/ React.createElement(PopperArrow, {
+        coords: arrowCoords,
+        placement: resolvedPlacement,
+        arrowClassName: arrowClassName,
+        getRootRef: arrowRef
+    }), renderContent ? renderContent({
+        className: ""
+    }) : children);
+    return /*#__PURE__*/ React.createElement(AppRootPortal, {
+        forcePortal: forcePortal
+    }, dropdown);
 };
+
 //# sourceMappingURL=Popper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","ARROW_HEIGHT","ARROW_PADDING","PopperArrow","Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","styleProp","style","customMiddlewares","renderContent","className","restProps","arrowRef","useRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","floatingDataX","x","floatingDataY","y","floatingPositionStrategy","strategy","resolvedPlacement","refs","arrowCoords","middlewareData","handleRootRef","setFloating","useEffect","setReference","current","dropdown"],"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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"}
+{"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 { 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 ? renderContent({ className: '' }) : children}\n    </div>\n  );\n\n  return <AppRootPortal forcePortal={forcePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","ARROW_HEIGHT","ARROW_PADDING","PopperArrow","Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","arrowRef","useRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ 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 = {
+type Coords = {
     x?: number;
     y?: number;
 };

package/dist/components/PopperArrow/PopperArrow.js

@@ -1,38 +1,37 @@
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
 export var ARROW_PADDING = 10;
 export var ARROW_WIDTH = 20;
 export var ARROW_HEIGHT = 8;
 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
+    var coords = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+        x: 0,
+        y: 0
     };
-  } 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)'
-    };
-  }
+    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 DEFAULT_ARROW_WIDTH = 20;
 var DEFAULT_ARROW_HEIGHT = 8;
-
 /**
  * Примечание 1.
  *
@@ -45,28 +44,25 @@ var DEFAULT_ARROW_HEIGHT = 8;
  * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
  *
  * https://github.com/VKCOM/VKUI/issues/2123
- */
-var PLATFORM_HEIGHT = 1;
+ */ var PLATFORM_HEIGHT = 1;
 var ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
-export var PopperArrow = function PopperArrow(_ref) {
-  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: classNames("vkuiPopperArrow__in", arrowClassName),
-    width: DEFAULT_ARROW_WIDTH,
-    height: ARROW_HEIGHT_WITH_WHITE_SPACE,
-    viewBox: "0 0 ".concat(DEFAULT_ARROW_WIDTH, " ").concat(ARROW_HEIGHT_WITH_WHITE_SPACE),
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z",
-    fill: "currentColor"
-  })));
+export var PopperArrow = function(param) {
+    var coords = param.coords, arrowClassName = param.arrowClassName, placement = param.placement, getRootRef = param.getRootRef;
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: getRootRef,
+        style: getPositionsStylesByCoords(placement, coords),
+        className: "vkuiPopperArrow",
+        "data-placement": placement
+    }, /*#__PURE__*/ React.createElement("svg", {
+        className: classNames("vkuiPopperArrow__in", arrowClassName),
+        width: DEFAULT_ARROW_WIDTH,
+        height: ARROW_HEIGHT_WITH_WHITE_SPACE,
+        viewBox: "0 0 ".concat(DEFAULT_ARROW_WIDTH, " ").concat(ARROW_HEIGHT_WITH_WHITE_SPACE),
+        xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z",
+        fill: "currentColor"
+    })));
 };
+
 //# sourceMappingURL=PopperArrow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["React","classNames","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","PopperArrow","arrowClassName","getRootRef"],"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\nconst DEFAULT_ARROW_WIDTH = 20;\nconst DEFAULT_ARROW_HEIGHT = 8;\n\n/**\n * Примечание 1.\n *\n * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n *\n * Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n *\n * https://github.com/VKCOM/VKUI/issues/2123\n */\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\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={DEFAULT_ARROW_WIDTH}\n        height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n        viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAK5C,OAAO,IAAMC,aAAa,GAAG,EAAE;AAC/B,OAAO,IAAMC,WAAW,GAAG,EAAE;AAC7B,OAAO,IAAMC,YAAY,GAAG,CAAC;AAO7B,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;AAQA,IAAMG,mBAAmB,GAAG,EAAE;AAC9B,IAAMC,oBAAoB,GAAG,CAAC;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,eAAe,GAAG,CAAC;AACzB,IAAMC,6BAA6B,GAAGF,oBAAoB,GAAGC,eAAe;AAE5E,OAAO,IAAME,WAAW,GAAG,SAAdA,WAAW,OAKA;EAAA,IAJtBZ,MAAM,QAANA,MAAM;IACNa,cAAc,QAAdA,cAAc;IACdd,SAAS,QAATA,SAAS;IACTe,UAAU,QAAVA,UAAU;EAEV,oBACE;IACE,GAAG,EAAEA,UAAW;IAChB,KAAK,EAAEhB,0BAA0B,CAACC,SAAS,EAAEC,MAAM,CAAE;IACrD,SAAS,mBAAwB;IACjC,kBAAgBD;EAAU,gBAE1B;IACE,SAAS,EAAEL,UAAU,wBAA4BmB,cAAc,CAAE;IACjE,KAAK,EAAEL,mBAAoB;IAC3B,MAAM,EAAEG,6BAA8B;IACtC,OAAO,gBAASH,mBAAmB,cAAIG,6BAA6B,CAAG;IACvE,KAAK,EAAC;EAA4B,gBAElC;IAAM,CAAC,EAAC,4CAA4C;IAAC,IAAI,EAAC;EAAc,EAAG,CACvE,CACF;AAEV,CAAC"}
+{"version":3,"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\nconst DEFAULT_ARROW_WIDTH = 20;\nconst DEFAULT_ARROW_HEIGHT = 8;\n\n/**\n * Примечание 1.\n *\n * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n *\n * Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n *\n * https://github.com/VKCOM/VKUI/issues/2123\n */\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\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={DEFAULT_ARROW_WIDTH}\n        height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n        viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n      </svg>\n    </div>\n  );\n};\n"],"names":["React","classNames","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","PopperArrow","arrowClassName","getRootRef","div","ref","style","className","data-placement","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAK7C,OAAO,IAAMC,gBAAgB,GAAG;AAChC,OAAO,IAAMC,cAAc,GAAG;AAC9B,OAAO,IAAMC,eAAe,EAAE;AAO9B,SAASC,2BACPC,SAAoB,EAEC;QADrBC,SAAAA,iEAAiB;QAAEC,GAAG;QAAGC,GAAG;IAAE,CAAC;IAE/B,IAAIH,UAAUI,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACLC,KAAK;YACLC,MAAML,OAAOC,CAAC;QAChB;IACF,OAAO,IAAIF,UAAUI,UAAU,CAAC,UAAU;QACxC,OAAO;YACLC,KAAKJ,OAAOE,CAAC;YACbI,OAAO;QACT;IACF,OAAO,IAAIP,UAAUI,UAAU,CAAC,WAAW;QACzC,OAAO;YACLI,QAAQ;YACRF,MAAML,OAAOC,CAAC;QAChB;IACF,OAAO;QACL,OAAO;YACLG,KAAKJ,OAAOE,CAAC;YACbG,MAAM;QACR;IACF,CAAC;AACH;AAQA,IAAMG,sBAAsB;AAC5B,IAAMC,uBAAuB;AAE7B;;;;;;;;;;;;CAYC,GACD,IAAMC,kBAAkB;AACxB,IAAMC,gCAAgCF,uBAAuBC;AAE7D,OAAO,IAAME,cAAc,gBAKH;QAJtBZ,eAAAA,QACAa,uBAAAA,gBACAd,kBAAAA,WACAe,mBAAAA;IAEA,qBACE,oBAACC;QACCC,KAAKF;QACLG,OAAOnB,2BAA2BC,WAAWC;QAC7CkB,SAAS;QACTC,kBAAgBpB;qBAEhB,oBAACqB;QACCF,WAAWxB,kCAAsCmB;QACjDQ,OAAOb;QACPc,QAAQX;QACRY,SAAS,AAAC,OAA6BZ,OAAvBH,qBAAoB,KAAiC,OAA9BG;QACvCa,OAAM;qBAEN,oBAACC;QAAKC,GAAE;QAA6CC,MAAK;;AAIlE,EAAE"}

package/dist/components/Progress/Progress.js

@@ -1,37 +1,36 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "getRootRef", "className"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { clamp } from '../../helpers/math';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { clamp } from "../../helpers/math";
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
- */
-export var Progress = function Progress(_ref) {
-  var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? 0 : _ref$value,
-    getRootRef = _ref.getRootRef,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
-  var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    "aria-valuenow": value,
-    title: title
-  }, restProps, {
-    role: "progressbar",
-    "aria-valuemin": PROGRESS_MIN_VALUE,
-    "aria-valuemax": PROGRESS_MAX_VALUE,
-    ref: getRootRef,
-    className: classNames("vkuiProgress", className)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiProgress__in",
-    style: {
-      width: "".concat(progress, "%")
-    }
-  }));
+ */ export var Progress = function(_param) {
+    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties(_param, [
+        "value",
+        "getRootRef",
+        "className"
+    ]);
+    var progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
+    var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
+        "aria-valuenow": value,
+        title: title
+    }, restProps), {
+        role: "progressbar",
+        "aria-valuemin": PROGRESS_MIN_VALUE,
+        "aria-valuemax": PROGRESS_MAX_VALUE,
+        ref: getRootRef,
+        className: classNames("vkuiProgress", className)
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiProgress__in",
+        style: {
+            width: "".concat(progress, "%")
+        }
+    }));
 };
+
 //# sourceMappingURL=Progress.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["React","classNames","clamp","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","title","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,KAAK,QAAQ,oBAAoB;AAU1C,IAAMC,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACA,OAAO,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,GAAGR,KAAK,CAACI,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EACrE,IAAMO,KAAK,aAAMD,QAAQ,gBAAMN,kBAAkB,CAAE;EAEnD,oBACE;IACE,iBAAeE,KAAM;IACrB,KAAK,EAAEK;EAAM,GACTF,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAEN,UAAU,iBAAqBO,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEI,KAAK,YAAKF,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC"}
+{"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\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"],"names":["React","classNames","clamp","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","style","width"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAU3C,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAAuE;8BAApEC,OAAAA,kCAAQ,kBAAGC,oBAAAA,YAAYC,mBAAAA,WAAcC;QAArCH;QAAWC;QAAYC;;IAChD,IAAME,WAAWR,MAAMI,OAAOH,oBAAoBC;IAClD,IAAMO,QAAQ,AAAC,GAAgBP,OAAdM,UAAS,OAAwB,OAAnBN;IAE/B,qBACE,oBAACQ;QACCC,iBAAeP;QACfK,OAAOA;OACHF;QACJK,MAAK;QACLC,iBAAeZ;QACfa,iBAAeZ;QACfa,KAAKV;QACLC,WAAWP,2BAA+BO;sBAE1C,oBAACI;QAAIJ,SAAS;QAA0BU,OAAO;YAAEC,OAAO,AAAC,GAAW,OAATT,UAAS;QAAG;;AAG7E,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-declare type StatsType = 'playbackStarted' | 'click';
-declare type BannerData = {
+type StatsType = 'playbackStarted' | 'click';
+type BannerData = {
     title?: string;
     url_types?: string;
     bannerID?: string;
@@ -35,6 +35,9 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
+ * @deprecated v5.3.1
+ *
+ * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
  */
 export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, className, ...restProps }: PromoBannerProps) => JSX.Element;
 export {};