@vkontakte/vkui 5.4.2 → 5.5.0

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

@@ -8,43 +8,49 @@ Object.defineProperty(exports, "Popper", {
         return Popper;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _toConsumableArray = require("@swc/helpers/lib/_to_consumable_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _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 _AppRootPortal = require("../AppRoot/AppRootPortal");
+var _DefaultIcon = require("../PopperArrow/DefaultIcon");
+var _PopperArrow = require("../PopperArrow/PopperArrow");
 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 = _objectWithoutProperties(_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, _param_arrowHeight = _param.arrowHeight, arrowHeight = _param_arrowHeight === void 0 ? _DefaultIcon.DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? _DefaultIcon.DEFAULT_ARROW_PADDING : _param_arrowPadding, arrowClassName = _param.arrowClassName, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? _DefaultIcon.DefaultIcon : _param_ArrowIcon, 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, portalRoot = _param.portalRoot, _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",
+        "arrowHeight",
+        "arrowPadding",
         "arrowClassName",
+        "ArrowIcon",
         "sameWidth",
         "offsetDistance",
         "offsetSkidding",
         "forcePortal",
+        "portalRoot",
         "autoUpdateOnTargetResize",
         "style",
         "customMiddlewares",
         "renderContent",
         "className"
     ]);
-    var arrowRef = _react.useRef(null);
+    var _React_useState = _sliced_to_array._(_react.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
     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
+                mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance
             })
         ];
         // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
@@ -68,24 +74,27 @@ var Popper = function(_param) {
         }
         if (customMiddlewares) {
             var _middlewares;
-            (_middlewares = middlewares).push.apply(_middlewares, _toConsumableArray(customMiddlewares));
+            (_middlewares = middlewares).push.apply(_middlewares, _to_consumable_array._(customMiddlewares));
         }
         // см. https://floating-ui.com/docs/arrow#order
         if (arrow) {
             middlewares.push((0, _floating.arrowMiddleware)({
                 element: arrowRef,
-                padding: _popperArrow.ARROW_PADDING
+                padding: arrowPadding
             }));
         }
         return middlewares;
     }, [
-        arrow,
-        sameWidth,
         offsetSkidding,
+        arrowRef,
+        arrow,
+        arrowHeight,
+        arrowPadding,
         offsetDistance,
+        isNotAutoPlacement,
+        sameWidth,
         customMiddlewares,
-        placementProp,
-        isNotAutoPlacement
+        placementProp
     ]);
     var _useFloating = (0, _floating.useFloating)({
         placement: isNotAutoPlacement ? placementProp : undefined,
@@ -94,7 +103,7 @@ var Popper = function(_param) {
             for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
                 args[_key] = arguments[_key];
             }
-            return _floating.autoUpdateFloatingElement.apply(void 0, _toConsumableArray(args).concat([
+            return _floating.autoUpdateFloatingElement.apply(void 0, _to_consumable_array._(args).concat([
                 {
                     elementResize: autoUpdateOnTargetResize
                 }
@@ -118,20 +127,22 @@ var Popper = function(_param) {
         onPlacementChange,
         resolvedPlacement
     ]);
-    var dropdown = /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    var dropdown = /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiPopper", className),
         ref: handleRootRef,
-        style: _objectSpread({}, styleProp, (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
-    }), arrow && /*#__PURE__*/ _react.createElement(_popperArrow.PopperArrow, {
+        style: _object_spread._({}, styleProp, (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
+    }), arrow && /*#__PURE__*/ _react.createElement(_PopperArrow.PopperArrow, {
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: arrowClassName,
-        getRootRef: arrowRef
+        getRootRef: setArrowRef,
+        Icon: ArrowIcon
     }), renderContent ? renderContent({
         className: ""
     }) : children);
-    return /*#__PURE__*/ _react.createElement(_appRootPortal.AppRootPortal, {
-        forcePortal: forcePortal
+    return /*#__PURE__*/ _react.createElement(_AppRootPortal.AppRootPortal, {
+        forcePortal: forcePortal,
+        portalRoot: portalRoot
     }, dropdown);
 };
 

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

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

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Примечание 1.
+ *
+ * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа
+ * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при
+ * изменении масштаба страницы.
+ *
+ * Чтобы исправление сработало нужно:
+ * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.
+ * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
+ *
+ * https://github.com/VKCOM/VKUI/issues/2123
+ */
+export declare const DEFAULT_ARROW_WIDTH = 20;
+export declare const DEFAULT_ARROW_HEIGHT = 8;
+export declare const DEFAULT_ARROW_PADDING = 10;
+export declare const DefaultIcon: (props: React.SVGAttributes<SVGSVGElement>) => React.JSX.Element;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEFAULT_ARROW_WIDTH: function() {
+        return DEFAULT_ARROW_WIDTH;
+    },
+    DEFAULT_ARROW_HEIGHT: function() {
+        return DEFAULT_ARROW_HEIGHT;
+    },
+    DEFAULT_ARROW_PADDING: function() {
+        return DEFAULT_ARROW_PADDING;
+    },
+    DefaultIcon: function() {
+        return DefaultIcon;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var DEFAULT_ARROW_WIDTH = 20;
+var DEFAULT_ARROW_HEIGHT = 8;
+var DEFAULT_ARROW_PADDING = 10;
+var PLATFORM_HEIGHT = 1;
+var ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
+var DefaultIcon = function(props) {
+    return /*#__PURE__*/ _react.createElement("svg", _object_spread._({
+        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"
+    }, props), /*#__PURE__*/ _react.createElement("path", {
+        d: "M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z",
+        fill: "currentColor"
+    }));
+};
+
+//# sourceMappingURL=DefaultIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/PopperArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\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 */\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\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      {...props}\n    >\n      <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;;;;;;;;;IAgBaA,mBAAmB;eAAnBA;;IACAC,oBAAoB;eAApBA;;IACAC,qBAAqB;eAArBA;;IAKAC,WAAW;eAAXA;;;;;+DAvBU;AAgBhB,IAAMH,sBAAsB;AAC5B,IAAMC,uBAAuB;AAC7B,IAAMC,wBAAwB;AAErC,IAAME,kBAAkB;AACxB,IAAMC,gCAAgCJ,uBAAuBG;AAEtD,IAAMD,cAAc,SAACG;IAC1B,qBACE,qBAACC;QACCC,OAAOR;QACPS,QAAQJ;QACRK,SAAS,AAAC,OAA6BL,OAAvBL,qBAAoB,KAAiC,OAA9BK;QACvCM,OAAM;OACFL,sBAEJ,qBAACM;QAAKC,GAAE;QAA6CC,MAAK;;AAGhE"}

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

@@ -1,9 +1,6 @@
-/// <reference types="react" />
+import * as React from '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;
 type Coords = {
     x?: number;
     y?: number;
@@ -12,6 +9,7 @@ export interface PopperArrowProps extends HasRootRef<HTMLDivElement> {
     coords?: Coords;
     placement: Placement;
     arrowClassName?: string;
+    Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
 }
-export declare const PopperArrow: ({ coords, arrowClassName, placement, getRootRef, }: PopperArrowProps) => JSX.Element;
+export declare const PopperArrow: ({ coords, arrowClassName, placement, getRootRef, Icon, }: PopperArrowProps) => React.JSX.Element;
 export {};

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

@@ -2,92 +2,71 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    ARROW_PADDING: function() {
-        return ARROW_PADDING;
-    },
-    ARROW_WIDTH: function() {
-        return ARROW_WIDTH;
-    },
-    ARROW_HEIGHT: function() {
-        return ARROW_HEIGHT;
-    },
-    PopperArrow: function() {
+Object.defineProperty(exports, "PopperArrow", {
+    enumerable: true,
+    get: function() {
         return PopperArrow;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var ARROW_PADDING = 10;
-var ARROW_WIDTH = 20;
-var ARROW_HEIGHT = 8;
-function getPositionsStylesByCoords(placement) {
+var _DefaultIcon = require("./DefaultIcon");
+var placementClassNames = {
+    right: "vkuiPopperArrow--placement-right",
+    bottom: "vkuiPopperArrow--placement-bottom",
+    left: "vkuiPopperArrow--placement-left"
+};
+var PopperArrow = function(param) {
+    var coords = param.coords, arrowClassName = param.arrowClassName, placement = param.placement, getRootRef = param.getRootRef, _param_Icon = param.Icon, Icon = _param_Icon === void 0 ? _DefaultIcon.DefaultIcon : _param_Icon;
+    var _getArrowPositionData = _sliced_to_array._(getArrowPositionData(placement, coords), 2), arrowPlacement = _getArrowPositionData[0], arrowStyles = _getArrowPositionData[1];
+    return /*#__PURE__*/ _react.createElement("div", {
+        ref: getRootRef,
+        style: arrowStyles,
+        className: (0, _vkjs.classNames)("vkuiPopperArrow", arrowPlacement && placementClassNames[arrowPlacement])
+    }, /*#__PURE__*/ _react.createElement(Icon, {
+        className: (0, _vkjs.classNames)("vkuiPopperArrow__in", arrowClassName)
+    }));
+};
+function getArrowPositionData(placement) {
     var coords = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
         x: 0,
         y: 0
     };
     if (placement.startsWith("top")) {
-        return {
-            top: "100%",
-            left: coords.x
-        };
+        return [
+            "bottom",
+            {
+                top: "100%",
+                left: coords.x
+            }
+        ];
     } else if (placement.startsWith("right")) {
-        return {
-            top: coords.y,
-            right: "calc(100% - 6px)"
-        };
+        return [
+            "left",
+            {
+                top: coords.y,
+                left: 0
+            }
+        ];
     } else if (placement.startsWith("bottom")) {
-        return {
-            bottom: "100%",
-            left: coords.x
-        };
+        return [
+            undefined,
+            {
+                bottom: "100%",
+                left: coords.x
+            }
+        ];
     } else {
-        return {
-            top: coords.y,
-            left: "calc(100% - 6px)"
-        };
+        return [
+            "right",
+            {
+                top: coords.y,
+                right: 0
+            }
+        ];
     }
 }
-var DEFAULT_ARROW_WIDTH = 20;
-var DEFAULT_ARROW_HEIGHT = 8;
-/**
- * Примечание 1.
- *
- * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа
- * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при
- * изменении масштаба страницы.
- *
- * Чтобы исправление сработало нужно:
- * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.
- * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
- *
- * https://github.com/VKCOM/VKUI/issues/2123
- */ var PLATFORM_HEIGHT = 1;
-var ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
-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: (0, _vkjs.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/cjs/components/PopperArrow/PopperArrow.js.map

@@ -1 +1 @@
-{"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":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","PopperArrow","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","arrowClassName","getRootRef","div","ref","style","className","data-placement","svg","classNames","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;;;;;;;;;IAMaA,aAAa;eAAbA;;IACAC,WAAW;eAAXA;;IACAC,YAAY;eAAZA;;IA2DAC,WAAW;eAAXA;;;;2DAnEU;oBACI;AAKpB,IAAMH,gBAAgB;AACtB,IAAMC,cAAc;AACpB,IAAMC,eAAe;AAO5B,SAASE,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;AAEtD,IAAMb,cAAc,gBAKH;QAJtBG,eAAAA,QACAY,uBAAAA,gBACAb,kBAAAA,WACAc,mBAAAA;IAEA,qBACE,qBAACC;QACCC,KAAKF;QACLG,OAAOlB,2BAA2BC,WAAWC;QAC7CiB,SAAS;QACTC,kBAAgBnB;qBAEhB,qBAACoB;QACCF,WAAWG,IAAAA,gBAAU,yBAA4BR;QACjDS,OAAOb;QACPc,QAAQX;QACRY,SAAS,AAAC,OAA6BZ,OAAvBH,qBAAoB,KAAiC,OAA9BG;QACvCa,OAAM;qBAEN,qBAACC;QAAKC,GAAE;QAA6CC,MAAK;;AAIlE"}
+{"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 { DefaultIcon } from './DefaultIcon';\nimport styles from './PopperArrow.module.css';\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['PopperArrow--placement-right'],\n  bottom: styles['PopperArrow--placement-bottom'],\n  left: styles['PopperArrow--placement-left'],\n};\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n  Icon = DefaultIcon,\n}: PopperArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['PopperArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n    >\n      <Icon className={classNames(styles['PopperArrow__in'], arrowClassName)} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: coords.x,\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: coords.y,\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: coords.x,\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: coords.y,\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["PopperArrow","placementClassNames","right","bottom","left","coords","arrowClassName","placement","getRootRef","Icon","DefaultIcon","getArrowPositionData","arrowPlacement","arrowStyles","div","ref","style","className","classNames","x","y","startsWith","top","undefined"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;+DAzBU;oBACI;2BAGC;AAQ5B,IAAMC,sBAAsB;IAC1BC,KAAK;IACLC,MAAM;IACNC,IAAI;AACN;AASO,IAAMJ,cAAc;QACzBK,eAAAA,QACAC,uBAAAA,gBACAC,kBAAAA,WACAC,mBAAAA,gCACAC,MAAAA,gCAAOC;IAEP,IAAsCC,2CAAAA,qBAAqBJ,WAAWF,aAA/DO,iBAA+BD,0BAAfE,cAAeF;IAEtC,qBACE,qBAACG;QACCC,KAAKP;QACLQ,OAAOH;QACPI,WAAWC,IAAAA,qCAETN,kBAAkBX,mBAAmB,CAACW,eAAe;qBAGvD,qBAACH;QAAKQ,WAAWC,IAAAA,yCAAsCZ;;AAG7D;AAEA,SAASK,qBACPJ,SAAoB;QACpBF,SAAAA,iEAAiB;QAAEc,GAAG;QAAGC,GAAG;IAAE;IAE9B,IAAIb,UAAUc,WAAW,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLlB,MAAMC,OAAOc;YACf;SACD;IACH,OAAO,IAAIZ,UAAUc,WAAW,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKjB,OAAOe;gBACZhB,MAAM;YACR;SACD;IACH,OAAO,IAAIG,UAAUc,WAAW,WAAW;QACzC,OAAO;YACLE;YACA;gBACEpB,QAAQ;gBACRC,MAAMC,OAAOc;YACf;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKjB,OAAOe;gBACZlB,OAAO;YACT;SACD;IACH;AACF"}

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

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

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

@@ -8,24 +8,25 @@ Object.defineProperty(exports, "Progress", {
         return Progress;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;
 var Progress = function(_param) {
-    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, getRootRef = _param.getRootRef, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, getRootRef = _param.getRootRef, className = _param.className, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, restProps = _object_without_properties._(_param, [
         "value",
         "getRootRef",
-        "className"
+        "className",
+        "appearance"
     ]);
     var progress = (0, _math.clamp)(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({
         "aria-valuenow": value,
         title: title
     }, restProps), {
@@ -33,7 +34,11 @@ var Progress = function(_param) {
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
         ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiProgress", className)
+        className: (0, _vkjs.classNames)("vkuiProgress", {
+            accent: "vkuiProgress--appearance-accent",
+            positive: "vkuiProgress--appearance-positive",
+            negative: "vkuiProgress--appearance-negative"
+        }[appearance], className)
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiProgress__in",
         style: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\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":["Progress","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","getRootRef","className","restProps","progress","clamp","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","classNames","style","width"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;2DAlBU;oBACI;oBACL;AAUtB,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMF,WAAW,iBAAuE;8BAApEG,OAAAA,kCAAQ,kBAAGC,oBAAAA,YAAYC,mBAAAA,WAAcC;QAArCH;QAAWC;QAAYC;;IAChD,IAAME,WAAWC,IAAAA,WAAK,EAACL,OAAOF,oBAAoBC;IAClD,IAAMO,QAAQ,AAAC,GAAgBP,OAAdK,UAAS,OAAwB,OAAnBL;IAE/B,qBACE,qBAACQ;QACCC,iBAAeR;QACfM,OAAOA;OACHH;QACJM,MAAK;QACLC,iBAAeZ;QACfa,iBAAeZ;QACfa,KAAKX;QACLC,WAAWW,IAAAA,gBAAU,kBAAqBX;sBAE1C,qBAACK;QAAIL,SAAS;QAA0BY,OAAO;YAAEC,OAAO,AAAC,GAAW,OAATX,UAAS;QAAG;;AAG7E"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  ...restProps\n}: 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(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["Progress","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","value","getRootRef","className","appearance","restProps","progress","clamp","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","classNames","accent","positive","negative","style","width"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;+DAtBU;oBACI;oBACL;AActB,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAKpB,IAAMF,WAAW;8BACtBG,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,aAAMN,OAAOF,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdM,UAAS,OAAwB,OAAnBN;IAE/B,qBACE,qBAACS;QACCC,iBAAeT;QACfO,OAAOA;OACHH;QACJM,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKZ;QACLC,WAAWY,IAAAA,kCAET;YACEC,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACd,WAAW,EACbD;sBAGF,qBAACM;QAAIN,SAAS;QAA0BgB,OAAO;YAAEC,OAAO,AAAC,GAAW,OAATd,UAAS;QAAG;;AAG7E"}

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

@@ -39,5 +39,5 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
  */
-export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, className, ...restProps }: PromoBannerProps) => JSX.Element;
+export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, className, ...restProps }: PromoBannerProps) => React.JSX.Element;
 export {};