@vkontakte/vkui 5.4.2 → 5.5.0

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
 import type { HasRef } from '../../types';
+import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
 export interface PopperRenderContentProps {
     className: string;
 }
@@ -22,14 +23,42 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     arrow?: boolean;
     /**
-     * Стиль стрелки
+     * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.
+     */
+    arrowHeight?: number;
+    /**
+     * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
+     */
+    arrowPadding?: number;
+    /**
+     * Стиль стрелки.
      */
     arrowClassName?: string;
+    /**
+     * Пользовательская SVG иконка.
+     *
+     * Требования:
+     *
+     * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
+     * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
+     *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
+     *    (см. https://github.com/VKCOM/VKUI/pull/4496).
+     * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.
+     * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.
+     * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
+     */
+    ArrowIcon?: PopperArrowProps['Icon'];
     /**
      * Выставлять ширину равной target элементу
      */
     sameWidth?: boolean;
     forcePortal?: boolean;
+    /**
+     * Кастомный root-элемент портала.
+     * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`
+     * из контекста `AppRoot`.
+     */
+    portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
     /**
      * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
      */
@@ -56,4 +85,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => JSX.Element;
+export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowHeight, arrowPadding, arrowClassName, ArrowIcon, sameWidth, offsetDistance, offsetSkidding, forcePortal, portalRoot, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => React.JSX.Element;

package/dist/cssm/components/Popper/Popper.js

@@ -3,18 +3,19 @@ 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 { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from '../PopperArrow/DefaultIcon';
+import { PopperArrow } from '../PopperArrow/PopperArrow';
 import styles from './Popper.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
- */ export const Popper = ({ targetRef , children , getRef , placement: placementProp = 'bottom-start' , onPlacementChange , arrow , arrowClassName , sameWidth , offsetDistance =8 , offsetSkidding =0 , forcePortal =true , autoUpdateOnTargetResize =false , style: styleProp , customMiddlewares , renderContent , className , ...restProps })=>{
-    const arrowRef = React.useRef(null);
+ */ export const Popper = ({ targetRef , children , getRef , placement: placementProp = 'bottom-start' , onPlacementChange , arrow , arrowHeight =DEFAULT_ARROW_HEIGHT , arrowPadding =DEFAULT_ARROW_PADDING , arrowClassName , ArrowIcon =DefaultIcon , sameWidth , offsetDistance =8 , offsetSkidding =0 , forcePortal =true , portalRoot , autoUpdateOnTargetResize =false , style: styleProp , customMiddlewares , renderContent , className , ...restProps })=>{
+    const [arrowRef, setArrowRef] = React.useState(null);
     const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
     const memoizedMiddlewares = React.useMemo(()=>{
         const middlewares = [
             offsetMiddleware({
                 crossAxis: offsetSkidding,
-                mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance
+                mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance
             })
         ];
         // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
@@ -42,18 +43,21 @@ import styles from './Popper.module.css';
         if (arrow) {
             middlewares.push(arrowMiddleware({
                 element: arrowRef,
-                padding: ARROW_PADDING
+                padding: arrowPadding
             }));
         }
         return middlewares;
     }, [
-        arrow,
-        sameWidth,
         offsetSkidding,
+        arrowRef,
+        arrow,
+        arrowHeight,
+        arrowPadding,
         offsetDistance,
+        isNotAutoPlacement,
+        sameWidth,
         customMiddlewares,
-        placementProp,
-        isNotAutoPlacement
+        placementProp
     ]);
     const { x: floatingDataX , y: floatingDataY , strategy: floatingPositionStrategy , placement: resolvedPlacement , refs , middlewareData: { arrow: arrowCoords  }  } = useFloating({
         placement: isNotAutoPlacement ? placementProp : undefined,
@@ -93,12 +97,14 @@ import styles from './Popper.module.css';
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: arrowClassName,
-        getRootRef: arrowRef
+        getRootRef: setArrowRef,
+        Icon: ArrowIcon
     }), renderContent ? renderContent({
         className: ''
     }) : children);
     return /*#__PURE__*/ React.createElement(AppRootPortal, {
-        forcePortal: forcePortal
+        forcePortal: forcePortal,
+        portalRoot: portalRoot
     }, dropdown);
 };
 

package/dist/cssm/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":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","ARROW_HEIGHT","ARROW_PADDING","PopperArrow","styles","Popper","targetRef","children","getRef","placement","placementProp","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","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","undefined","middleware","whileElementsMounted","args","elementResize","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef"],"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":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PopperArrow","styles","Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowHeight","arrowPadding","arrowClassName","ArrowIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","arrowRef","setArrowRef","useState","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","undefined","middleware","whileElementsMounted","args","elementResize","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef","Icon"],"mappings":"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"}

package/dist/cssm/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/cssm/components/PopperArrow/DefaultIcon.js

@@ -0,0 +1,32 @@
+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 const DEFAULT_ARROW_WIDTH = 20;
+export const DEFAULT_ARROW_HEIGHT = 8;
+export const DEFAULT_ARROW_PADDING = 10;
+const PLATFORM_HEIGHT = 1;
+const ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
+export const DefaultIcon = (props)=>{
+    return /*#__PURE__*/ React.createElement("svg", {
+        width: DEFAULT_ARROW_WIDTH,
+        height: ARROW_HEIGHT_WITH_WHITE_SPACE,
+        viewBox: `0 0 ${DEFAULT_ARROW_WIDTH} ${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/cssm/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":["React","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","DefaultIcon","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B;;;;;;;;;;;;CAYC,GAED,OAAO,MAAMC,sBAAsB,GAAG;AACtC,OAAO,MAAMC,uBAAuB,EAAE;AACtC,OAAO,MAAMC,wBAAwB,GAAG;AAExC,MAAMC,kBAAkB;AACxB,MAAMC,gCAAgCH,uBAAuBE;AAE7D,OAAO,MAAME,cAAc,CAACC;IAC1B,qBACE,oBAACC;QACCC,OAAOR;QACPS,QAAQL;QACRM,SAAS,CAAC,IAAI,EAAEV,oBAAoB,CAAC,EAAEI,8BAA8B,CAAC;QACtEO,OAAM;QACL,GAAGL,KAAK;qBAET,oBAACM;QAAKC,GAAE;QAA6CC,MAAK;;AAGhE,EAAE"}

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

@@ -1,67 +1,59 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { DefaultIcon } from './DefaultIcon';
 import styles from './PopperArrow.module.css';
-export const ARROW_PADDING = 10;
-export const ARROW_WIDTH = 20;
-export const ARROW_HEIGHT = 8;
-function getPositionsStylesByCoords(placement, coords = {
+const placementClassNames = {
+    right: styles['PopperArrow--placement-right'],
+    bottom: styles['PopperArrow--placement-bottom'],
+    left: styles['PopperArrow--placement-left']
+};
+export const PopperArrow = ({ coords , arrowClassName , placement , getRootRef , Icon =DefaultIcon  })=>{
+    const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: getRootRef,
+        style: arrowStyles,
+        className: classNames(styles['PopperArrow'], arrowPlacement && placementClassNames[arrowPlacement])
+    }, /*#__PURE__*/ React.createElement(Icon, {
+        className: classNames(styles['PopperArrow__in'], arrowClassName)
+    }));
+};
+function getArrowPositionData(placement, coords = {
     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
+            }
+        ];
     }
 }
-const DEFAULT_ARROW_WIDTH = 20;
-const DEFAULT_ARROW_HEIGHT = 8;
-/**
- * Примечание 1.
- *
- * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа
- * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при
- * изменении масштаба страницы.
- *
- * Чтобы исправление сработало нужно:
- * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.
- * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
- *
- * https://github.com/VKCOM/VKUI/issues/2123
- */ const PLATFORM_HEIGHT = 1;
-const ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
-export const PopperArrow = ({ coords , arrowClassName , placement , getRootRef  })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        ref: getRootRef,
-        style: getPositionsStylesByCoords(placement, coords),
-        className: styles['PopperArrow'],
-        "data-placement": placement
-    }, /*#__PURE__*/ React.createElement("svg", {
-        className: classNames(styles['PopperArrow__in'], arrowClassName),
-        width: DEFAULT_ARROW_WIDTH,
-        height: ARROW_HEIGHT_WITH_WHITE_SPACE,
-        viewBox: `0 0 ${DEFAULT_ARROW_WIDTH} ${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/cssm/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":["React","classNames","styles","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;AAG7C,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,gBAAgB,GAAG;AAChC,OAAO,MAAMC,cAAc,GAAG;AAC9B,OAAO,MAAMC,eAAe,EAAE;AAO9B,SAASC,2BACPC,SAAoB,EACpBC,SAAiB;IAAEC,GAAG;IAAGC,GAAG;AAAE,CAAC,EACV;IACrB,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,MAAMG,sBAAsB;AAC5B,MAAMC,uBAAuB;AAE7B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAkB;AACxB,MAAMC,gCAAgCF,uBAAuBC;AAE7D,OAAO,MAAME,cAAc,CAAC,EAC1BZ,OAAM,EACNa,eAAc,EACdd,UAAS,EACTe,WAAU,EACO,GAAK;IACtB,qBACE,oBAACC;QACCC,KAAKF;QACLG,OAAOnB,2BAA2BC,WAAWC;QAC7CkB,WAAWxB,MAAM,CAAC,cAAc;QAChCyB,kBAAgBpB;qBAEhB,oBAACqB;QACCF,WAAWzB,WAAWC,MAAM,CAAC,kBAAkB,EAAEmB;QACjDQ,OAAOb;QACPc,QAAQX;QACRY,SAAS,CAAC,IAAI,EAAEf,oBAAoB,CAAC,EAAEG,8BAA8B,CAAC;QACtEa,OAAM;qBAEN,oBAACC;QAAKC,GAAE;QAA6CC,MAAK;;AAIlE,EAAE"}
+{"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":["React","classNames","DefaultIcon","styles","placementClassNames","right","bottom","left","PopperArrow","coords","arrowClassName","placement","getRootRef","Icon","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","x","y","startsWith","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,2BAA2B;AAO9C,MAAMC,sBAAsB;IAC1BC,OAAOF,MAAM,CAAC,+BAA+B;IAC7CG,QAAQH,MAAM,CAAC,gCAAgC;IAC/CI,MAAMJ,MAAM,CAAC,8BAA8B;AAC7C;AASA,OAAO,MAAMK,cAAc,CAAC,EAC1BC,OAAM,EACNC,eAAc,EACdC,UAAS,EACTC,WAAU,EACVC,MAAOX,YAAW,EACD;IACjB,MAAM,CAACY,gBAAgBC,YAAY,GAAGC,qBAAqBL,WAAWF;IAEtE,qBACE,oBAACQ;QACCC,KAAKN;QACLO,OAAOJ;QACPK,WAAWnB,WACTE,MAAM,CAAC,cAAc,EACrBW,kBAAkBV,mBAAmB,CAACU,eAAe;qBAGvD,oBAACD;QAAKO,WAAWnB,WAAWE,MAAM,CAAC,kBAAkB,EAAEO;;AAG7D,EAAE;AAEF,SAASM,qBACPL,SAAoB,EACpBF,SAAiB;IAAEY,GAAG;IAAGC,GAAG;AAAE,CAAC;IAE/B,IAAIX,UAAUY,WAAW,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY;YACf;SACD;IACH,OAAO,IAAIV,UAAUY,WAAW,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa;gBACZf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,WAAW,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY;YACf;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa;gBACZjB,OAAO;YACT;SACD;IACH;AACF"}

package/dist/cssm/components/PopperArrow/PopperArrow.module.css

@@ -6,18 +6,20 @@
   content: '';
   display: block;
 
-  /* См. Примечание 1 в PopperArrow.tsx. Для кейса с `.PopperArrow[data-placement^='bottom']`. */
+  /* см. Примечание 1 в PopperArrow.tsx. */
   transform: translateY(1px);
 }
 
-.PopperArrow[data-placement^='top'] .PopperArrow__in {
-  transform: rotate(180deg) translateY(1px); /* см. Примечание 1 в PopperArrow.tsx */
+.PopperArrow--placement-right {
+  transform: rotate(90deg) translate(50%, -50%);
+  transform-origin: right;
 }
 
-.PopperArrow[data-placement^='left'] .PopperArrow__in {
-  transform: rotate(90deg) translateY(1px); /* см. Примечание 1 в PopperArrow.tsx */
+.PopperArrow--placement-bottom {
+  transform: rotate(180deg);
 }
 
-.PopperArrow[data-placement^='right'] .PopperArrow__in {
-  transform: rotate(270deg) translateY(1px); /* см. Примечание 1 в PopperArrow.tsx */
+.PopperArrow--placement-left {
+  transform: rotate(-90deg) translate(-50%, -50%);
+  transform-origin: left;
 }

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

@@ -6,7 +6,7 @@ const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
- */ export const Progress = ({ value =0 , getRootRef , className , ...restProps })=>{
+ */ export const Progress = ({ value =0 , getRootRef , className , appearance ='accent' , ...restProps })=>{
     const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
     return /*#__PURE__*/ React.createElement("div", {
@@ -17,7 +17,11 @@ const PROGRESS_MAX_VALUE = 100;
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
         ref: getRootRef,
-        className: classNames(styles['Progress'], className)
+        className: classNames(styles['Progress'], {
+            accent: styles['Progress--appearance-accent'],
+            positive: styles['Progress--appearance-positive'],
+            negative: styles['Progress--appearance-negative']
+        }[appearance], className)
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Progress__in'],
         style: {

package/dist/cssm/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":["React","classNames","clamp","styles","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;AAE3C,OAAOC,YAAY,wBAAwB;AAQ3C,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EAAEC,OAAQ,EAAC,EAAEC,WAAU,EAAEC,UAAS,EAAE,GAAGC,WAA0B,GAAK;IAC7F,MAAMC,WAAWT,MAAMK,OAAOH,oBAAoBC;IAClD,MAAMO,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEN,mBAAmB,CAAC;IAEnD,qBACE,oBAACQ;QACCC,iBAAeP;QACfK,OAAOA;QACN,GAAGF,SAAS;QACbK,MAAK;QACLC,iBAAeZ;QACfa,iBAAeZ;QACfa,KAAKV;QACLC,WAAWR,WAAWE,MAAM,CAAC,WAAW,EAAEM;qBAE1C,oBAACI;QAAIJ,WAAWN,MAAM,CAAC,eAAe;QAAEgB,OAAO;YAAEC,OAAO,CAAC,EAAET,SAAS,CAAC,CAAC;QAAC;;AAG7E,EAAE"}
+{"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":["React","classNames","clamp","styles","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","appearance","restProps","progress","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","accent","positive","negative","style","width"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,OAAOC,YAAY,wBAAwB;AAY3C,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAQ,EAAC,EACTC,WAAU,EACVC,UAAS,EACTC,YAAa,SAAQ,EACrB,GAAGC,WACW;IACd,MAAMC,WAAWV,MAAMK,OAAOH,oBAAoBC;IAClD,MAAMQ,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEP,mBAAmB,CAAC;IAEnD,qBACE,oBAACS;QACCC,iBAAeR;QACfM,OAAOA;QACN,GAAGF,SAAS;QACbK,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKX;QACLC,WAAWR,WACTE,MAAM,CAAC,WAAW,EAClB;YACEiB,QAAQjB,MAAM,CAAC,8BAA8B;YAC7CkB,UAAUlB,MAAM,CAAC,gCAAgC;YACjDmB,UAAUnB,MAAM,CAAC,gCAAgC;QACnD,CAAC,CAACO,WAAW,EACbD;qBAGF,oBAACK;QAAIL,WAAWN,MAAM,CAAC,eAAe;QAAEoB,OAAO;YAAEC,OAAO,CAAC,EAAEZ,SAAS,CAAC,CAAC;QAAC;;AAG7E,EAAE"}

package/dist/cssm/components/Progress/Progress.module.css

@@ -8,5 +8,16 @@
   height: 100%;
   border-radius: inherit;
   transition: width 0.2s ease;
+}
+
+.Progress--appearance-accent .Progress__in {
   background: var(--vkui--color_stroke_accent);
 }
+
+.Progress--appearance-positive .Progress__in {
+  background: var(--vkui--color_stroke_positive);
+}
+
+.Progress--appearance-negative .Progress__in {
+  background: var(--vkui--color_stroke_negative);
+}

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Dismiss","classNames","warnOnce","Button","Image","SimpleCell","Footnote","styles","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","currentPixel","setCurrentPixel","useState","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAON,SAAS;AAsCtB,gCAAgC;AAEhC;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,YAAa,CAAC,EAAC,EACfC,QAAO,EACPC,oBAAmB,EACnBC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KACE;IAEJ,CAAC;IAED,MAAM,CAACU,cAAcC,gBAAgB,GAAGpB,MAAMqB,QAAQ,CAAC;IAEvD,MAAMC,cAActB,MAAMuB,OAAO,CAC/B,IACGZ,WAAWa,UAAU,GAClBb,WAAWa,UAAU,CAACC,MAAM,CAAC,CAACC,KAAKC,OAAU,CAAA;gBAAE,GAAGD,GAAG;gBAAE,CAACC,KAAKC,IAAI,CAAC,EAAED,KAAKE,GAAG;YAAC,CAAA,GAAI,CAAC,KAClF,CAAC,CAAC,EACR;QAAClB,WAAWa,UAAU;KAAC;IAGzB,MAAMM,UAAU9B,MAAM+B,WAAW,CAC/B,IAAMX,gBAAgBE,YAAYU,KAAK,IAAI,KAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrBhC,MAAMiC,SAAS,CAAC,IAAM;QACpB,IAAIX,YAAYY,eAAe,EAAE;YAC/Bd,gBAAgBE,YAAYY,eAAe;QAC7C,CAAC;IACH,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAACC;QAAIrB,WAAWZ,WAAWM,MAAM,CAAC,cAAc,EAAEM;QAAa,GAAGC,SAAS;qBACzE,oBAACoB;QAAIrB,WAAWN,MAAM,CAAC,oBAAoB;qBACzC,oBAACD,gBAAUI,WAAWyB,gBAAgB,IAAI,kBACzCzB,WAAW0B,eAAe,kBACzB,oBAAC9B;QAASO,WAAWN,MAAM,CAAC,mBAAmB;OAAGG,WAAW0B,eAAe,GAG7E,CAACxB,qCACA,oBAACsB;QAAIrB,WAAWN,MAAM,CAAC,qBAAqB;QAAEsB,SAASlB;qBACrD,oBAACX,sCAIP,oBAACK;QACCgC,MAAM3B,WAAW4B,YAAY;QAC7BT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE/B,WAAWgC,QAAQ,kBACjB,oBAACtC;YACCuC,MAAM;YACNC,KAAKlC,WAAWgC,QAAQ;YACxBG,KAAKnC,WAAWoC,KAAK;YACrBC,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAW+B,SAAS;;QAIzEC,OACEvC,WAAWwC,OAAO,kBAChB,oBAAC/C;YACCgD,MAAK;YACLJ,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmB+B,SAAS;WAE1EtC,WAAWwC,OAAO;QAIzBE,UAAU1C,WAAW2C,MAAM;OAE1B3C,WAAWoC,KAAK,GAGlB5B,aAAaoC,MAAM,GAAG,mBACrB,oBAACpB;QAAIrB,WAAWN,MAAM,CAAC,sBAAsB;qBAC3C,oBAACgD;QAAIX,KAAK1B;QAAc2B,KAAI;;AAKtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Dismiss","classNames","warnOnce","Button","Image","SimpleCell","Footnote","styles","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","currentPixel","setCurrentPixel","useState","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAON,SAAS;AAsCtB,gCAAgC;AAEhC;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,YAAa,CAAC,EAAC,EACfC,QAAO,EACPC,oBAAmB,EACnBC,UAAS,EACT,GAAGC,WACc;IACjB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1CT,KACE;IAEJ;IAEA,MAAM,CAACU,cAAcC,gBAAgB,GAAGpB,MAAMqB,SAAS;IAEvD,MAAMC,cAActB,MAAMuB,QACxB,IACGZ,WAAWa,aACRb,WAAWa,WAAWC,OAAO,CAACC,KAAKC,OAAU,CAAA;gBAAE,GAAGD,GAAG;gBAAE,CAACC,KAAKC,KAAK,EAAED,KAAKE;YAAI,CAAA,GAAI,CAAC,KAClF,CAAC,GACP;QAAClB,WAAWa;KAAW;IAGzB,MAAMM,UAAU9B,MAAM+B,YACpB,IAAMX,gBAAgBE,YAAYU,SAAS,KAC3C;QAACV,YAAYU;KAAM;IAGrBhC,MAAMiC,UAAU;QACd,IAAIX,YAAYY,iBAAiB;YAC/Bd,gBAAgBE,YAAYY;QAC9B;IACF,GAAG;QAACZ,YAAYY;KAAgB;IAEhC,qBACE,oBAACC;QAAIrB,WAAWZ,WAAWM,MAAM,CAAC,cAAc,EAAEM;QAAa,GAAGC,SAAS;qBACzE,oBAACoB;QAAIrB,WAAWN,MAAM,CAAC,oBAAoB;qBACzC,oBAACD,gBAAUI,WAAWyB,oBAAoB,kBACzCzB,WAAW0B,iCACV,oBAAC9B;QAASO,WAAWN,MAAM,CAAC,mBAAmB;OAAGG,WAAW0B,kBAG9D,CAACxB,qCACA,oBAACsB;QAAIrB,WAAWN,MAAM,CAAC,qBAAqB;QAAEsB,SAASlB;qBACrD,oBAACX,sCAIP,oBAACK;QACCgC,MAAM3B,WAAW4B;QACjBT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE/B,WAAWgC,0BACT,oBAACtC;YACCuC,MAAM;YACNC,KAAKlC,WAAWgC;YAChBG,KAAKnC,WAAWoC;YAChBC,eAAahC,QAAQC,IAAIC,aAAa,SAAS,WAAW+B;;QAIhEC,OACEvC,WAAWwC,yBACT,oBAAC/C;YACCgD,MAAK;YACLJ,eAAahC,QAAQC,IAAIC,aAAa,SAAS,mBAAmB+B;WAEjEtC,WAAWwC;QAIlBE,UAAU1C,WAAW2C;OAEpB3C,WAAWoC,QAGb5B,aAAaoC,SAAS,mBACrB,oBAACpB;QAAIrB,WAAWN,MAAM,CAAC,sBAAsB;qBAC3C,oBAACgD;QAAIX,KAAK1B;QAAc2B,KAAI;;AAKtC,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { DOMProps } from '../../lib/dom';
 import { AnyFunction, HasChildren } from '../../types';
 import { ScrollContextInterface } from '../AppRoot/ScrollContext';
@@ -18,4 +18,4 @@ export interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {
 /**
  * @see https://vkcom.github.io/VKUI/#/PullToRefresh
  */
-export declare const PullToRefresh: ({ children, isFetching, onRefresh, className, ...restProps }: PullToRefreshProps) => JSX.Element;
+export declare const PullToRefresh: ({ children, isFetching, onRefresh, className, ...restProps }: PullToRefreshProps) => React.JSX.Element;