@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     hasMask?: boolean;
     fixed?: boolean;
     alignY?: 'top' | 'center' | 'bottom';
@@ -9,4 +10,4 @@ export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */
-export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, className, ...restProps }: PopoutWrapperProps) => React.JSX.Element;
+export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, ...restProps }: PopoutWrapperProps) => React.JSX.Element;

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js

@@ -5,15 +5,25 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { useTimeout } from '../../hooks/useTimeout';
 import { useDOM } from '../../lib/dom';
 import { Platform } from '../../lib/platform';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutWrapper.module.css';
+const stylesAlignX = {
+    center: styles['PopoutWrapper--alignX-center'],
+    left: styles['PopoutWrapper--alignX-left'],
+    right: styles['PopoutWrapper--alignX-right']
+};
+const stylesAlignY = {
+    center: styles['PopoutWrapper--alignY-center'],
+    top: styles['PopoutWrapper--alignY-top'],
+    bottom: styles['PopoutWrapper--alignY-bottom']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
- */ export const PopoutWrapper = ({ alignY = 'center', alignX = 'center', closing = false, hasMask = true, fixed = true, children, onClick, className, ...restProps })=>{
+ */ export const PopoutWrapper = ({ alignY = 'center', alignX = 'center', closing = false, hasMask = true, fixed = true, children, onClick, ...restProps })=>{
     const platform = usePlatform();
     const [opened, setOpened] = React.useState(!hasMask);
-    const elRef = React.useRef(null);
     const onFadeInEnd = (e)=>{
-        if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {
+        if (!e || e.animationName === styles['animation-full-fade-in']) {
             setOpened(true);
         }
     };
@@ -28,19 +38,10 @@ import styles from './PopoutWrapper.module.css';
     useGlobalEventListener(window, 'touchmove', (e)=>e.preventDefault(), {
         passive: false
     });
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['PopoutWrapper'], {
-            center: styles['PopoutWrapper--alignY-center'],
-            top: styles['PopoutWrapper--alignY-top'],
-            bottom: styles['PopoutWrapper--alignY-bottom']
-        }[alignY], {
-            center: styles['PopoutWrapper--alignX-center'],
-            left: styles['PopoutWrapper--alignX-left'],
-            right: styles['PopoutWrapper--alignX-right']
-        }[alignX], closing && styles['PopoutWrapper--closing'], opened && styles['PopoutWrapper--opened'], fixed && styles['PopoutWrapper--fixed'], hasMask && styles['PopoutWrapper--masked'], className),
-        onAnimationEnd: opened ? undefined : onFadeInEnd,
-        ref: elRef
+        baseClassName: classNames(styles['PopoutWrapper'], stylesAlignY[alignY], stylesAlignX[alignX], closing && styles['PopoutWrapper--closing'], opened && styles['PopoutWrapper--opened'], fixed && styles['PopoutWrapper--fixed'], hasMask && styles['PopoutWrapper--masked']),
+        onAnimationEnd: opened ? undefined : onFadeInEnd
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['PopoutWrapper__container']
     }, /*#__PURE__*/ React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","styles","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","opened","setOpened","useState","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,6BAA6B;AAUhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,UAAU,IAAI,EACdC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,WAAWf;IACjB,MAAM,CAACgB,QAAQC,UAAU,GAAGpB,MAAMqB,QAAQ,CAAC,CAACT;IAC5C,MAAMU,QAAQtB,MAAMuB,MAAM,CAAiB;IAE3C,MAAMC,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAKnB,MAAM,CAAC,8BAA8B,EAAE;YACnEa,UAAU;QACZ;IACF;IACA,MAAMO,0BAA0BvB,WAAWoB,aAAaN,aAAaZ,SAASsB,GAAG,GAAG,MAAM;IAC1F5B,MAAM6B,SAAS,CAAC;QACd,CAACV,UAAUQ,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBR;KAAO;IAEpC,MAAM,EAAEY,MAAM,EAAE,GAAG1B;IACnBH,uBAAuB6B,QAAQ,aAAa,CAACN,IAAMA,EAAEO,cAAc,IAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC;QACE,GAAGjB,SAAS;QACbD,WAAWf,WACTM,MAAM,CAAC,gBAAgB,EACvB;YACE4B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C6B,KAAK7B,MAAM,CAAC,4BAA4B;YACxC8B,QAAQ9B,MAAM,CAAC,+BAA+B;QAChD,CAAC,CAACE,OAAO,EACT;YACE0B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C+B,MAAM/B,MAAM,CAAC,6BAA6B;YAC1CgC,OAAOhC,MAAM,CAAC,8BAA8B;QAC9C,CAAC,CAACG,OAAO,EACTC,WAAWJ,MAAM,CAAC,yBAAyB,EAC3CY,UAAUZ,MAAM,CAAC,wBAAwB,EACzCM,SAASN,MAAM,CAAC,uBAAuB,EACvCK,WAAWL,MAAM,CAAC,wBAAwB,EAC1CS;QAEFwB,gBAAgBrB,SAASsB,YAAYjB;QACrCkB,KAAKpB;qBAEL,oBAACY;QAAIlB,WAAWT,MAAM,CAAC,2BAA2B;qBAChD,oBAAC2B;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;QAAEQ,SAASA;sBAC3D,oBAACmB;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;OAAGO;AAI3D,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles['PopoutWrapper--alignX-center'],\n  left: styles['PopoutWrapper--alignX-left'],\n  right: styles['PopoutWrapper--alignX-right'],\n};\n\nconst stylesAlignY = {\n  center: styles['PopoutWrapper--alignY-center'],\n  top: styles['PopoutWrapper--alignY-top'],\n  bottom: styles['PopoutWrapper--alignY-bottom'],\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PopoutWrapper'],\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","RootComponent","styles","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","restProps","platform","opened","setOpened","useState","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","baseClassName","onAnimationEnd","undefined","div","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,MAAM,CAAC,+BAA+B;IAC9CG,MAAMH,MAAM,CAAC,6BAA6B;IAC1CI,OAAOJ,MAAM,CAAC,8BAA8B;AAC9C;AAEA,MAAMK,eAAe;IACnBH,QAAQF,MAAM,CAAC,+BAA+B;IAC9CM,KAAKN,MAAM,CAAC,4BAA4B;IACxCO,QAAQP,MAAM,CAAC,+BAA+B;AAChD;AAUA;;CAEC,GACD,OAAO,MAAMQ,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,UAAU,IAAI,EACdC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACP,GAAGC,WACgB;IACnB,MAAMC,WAAWtB;IACjB,MAAM,CAACuB,QAAQC,UAAU,GAAG3B,MAAM4B,QAAQ,CAAC,CAACR;IAE5C,MAAMS,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAKvB,MAAM,CAAC,yBAAyB,EAAE;YAC9DmB,UAAU;QACZ;IACF;IACA,MAAMK,0BAA0B5B,WAAWyB,aAAaJ,aAAanB,SAAS2B,GAAG,GAAG,MAAM;IAC1FjC,MAAMkC,SAAS,CAAC;QACd,CAACR,UAAUM,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBN;KAAO;IAEpC,MAAM,EAAEU,MAAM,EAAE,GAAG/B;IACnBH,uBAAuBkC,QAAQ,aAAa,CAACN,IAAMA,EAAEO,cAAc,IAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAAC/B;QACE,GAAGiB,SAAS;QACbe,eAAetC,WACbO,MAAM,CAAC,gBAAgB,EACvBK,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,WAAWX,MAAM,CAAC,yBAAyB,EAC3CkB,UAAUlB,MAAM,CAAC,wBAAwB,EACzCa,SAASb,MAAM,CAAC,uBAAuB,EACvCY,WAAWZ,MAAM,CAAC,wBAAwB;QAE5CgC,gBAAgBd,SAASe,YAAYZ;qBAErC,oBAACa;QAAIC,WAAWnC,MAAM,CAAC,2BAA2B;qBAChD,oBAACkC;QAAIC,WAAWnC,MAAM,CAAC,yBAAyB;QAAEe,SAASA;sBAC3D,oBAACmB;QAAIC,WAAWnC,MAAM,CAAC,yBAAyB;OAAGc;AAI3D,EAAE"}

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

@@ -26,7 +26,7 @@
   width: 100%;
   height: 100%;
   opacity: 1;
-  animation: vkui-animation-full-fade-in var(--vkui--animation_duration_m) ease;
+  animation: animation-full-fade-in var(--vkui--animation_duration_m) ease;
 }
 
 .PopoutWrapper--closing .PopoutWrapper__overlay {
@@ -58,6 +58,8 @@
   position: relative;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .PopoutWrapper__content > * {
   pointer-events: auto;
 }
@@ -86,7 +88,7 @@
   justify-content: flex-end;
 }
 
-@keyframes vkui-animation-full-fade-in {
+@keyframes animation-full-fade-in {
   from {
     opacity: 0;
   }

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

@@ -1,6 +1,6 @@
 .Popover {
   position: relative;
-  animation: vkui-popover-fadein 0.2s ease;
+  animation: popover-fade-in 0.2s ease;
   background: var(--vkui--color_background_modal);
   border-radius: var(--vkui--size_border_radius--regular);
   box-shadow: var(--vkui--elevation3);
@@ -21,7 +21,7 @@
   position: relative;
 }
 
-@keyframes vkui-popover-fadein {
+@keyframes popover-fade-in {
   from {
     opacity: 0;
   }

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
-import type { HasRef } from '../../types';
+import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
 import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
 export interface PopperRenderContentProps {
     className: string;
 }
-export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
+export interface PopperCommonProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
@@ -78,6 +78,10 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
     onPlacementChange?(data: {
         placement?: Placement;
     }): void;
+    /**
+     * Принудительно скрывает компонет если целевой элемент исчез
+     */
+    hideWhenReferenceHidden?: boolean;
 }
 export interface PopperProps extends PopperCommonProps {
     targetRef: React.RefObject<HTMLElement>;
@@ -85,4 +89,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-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;
+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, getRootRef, hideWhenReferenceHidden, ...restProps }: PopperProps) => React.JSX.Element;

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
-import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from '../../lib/floating';
+import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, hideMiddleware, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from '../../lib/floating';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from '../PopperArrow/DefaultIcon';
 import { PopperArrow } from '../PopperArrow/PopperArrow';
+import { RootComponent } from '../RootComponent/RootComponent';
 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, 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 })=>{
+ */ 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, getRootRef, hideWhenReferenceHidden, ...restProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
     const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
     const memoizedMiddlewares = React.useMemo(()=>{
@@ -46,6 +46,9 @@ import styles from './Popper.module.css';
                 padding: arrowPadding
             }));
         }
+        if (hideWhenReferenceHidden) {
+            middlewares.push(hideMiddleware());
+        }
         return middlewares;
     }, [
         offsetSkidding,
@@ -57,9 +60,10 @@ import styles from './Popper.module.css';
         isNotAutoPlacement,
         sameWidth,
         customMiddlewares,
-        placementProp
+        placementProp,
+        hideWhenReferenceHidden
     ]);
-    const { x: floatingDataX, y: floatingDataY, strategy: floatingPositionStrategy, placement: resolvedPlacement, refs, middlewareData: { arrow: arrowCoords } } = useFloating({
+    const { x: floatingDataX, y: floatingDataY, strategy: floatingPositionStrategy, placement: resolvedPlacement, refs, middlewareData: { arrow: arrowCoords, hide } } = useFloating({
         placement: isNotAutoPlacement ? placementProp : undefined,
         middleware: memoizedMiddlewares,
         whileElementsMounted (...args) {
@@ -68,7 +72,8 @@ import styles from './Popper.module.css';
             });
         }
     });
-    const handleRootRef = useExternRef(refs.setFloating, getRef);
+    // TODO [>=6]: убрать getRef
+    const handleRootRef = useExternRef(refs.setFloating, getRef, getRootRef);
     React.useEffect(()=>{
         refs.setReference(targetRef.current);
     }, [
@@ -85,13 +90,16 @@ import styles from './Popper.module.css';
         onPlacementChange,
         resolvedPlacement
     ]);
-    const dropdown = /*#__PURE__*/ React.createElement("div", {
+    const dropdown = /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['Popper'], className),
-        ref: handleRootRef,
+        baseClassName: styles['Popper'],
+        getRootRef: handleRootRef,
         style: {
             ...styleProp,
-            ...convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined)
+            ...convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined),
+            ...hide?.referenceHidden && {
+                visibility: 'hidden'
+            }
         }
     }, arrow && /*#__PURE__*/ React.createElement(PopperArrow, {
         coords: arrowCoords,

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

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

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

package/dist/cssm/components/Progress/Progress.js

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Progress.module.css';
+const stylesAppearance = {
+    accent: styles['Progress--appearance-accent'],
+    positive: styles['Progress--appearance-positive'],
+    negative: styles['Progress--appearance-negative']
+};
 function progressCustomHeightStyle(height) {
     return height ? {
         height,
@@ -20,11 +26,11 @@ const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
- */ export const Progress = ({ value = 0, getRootRef, className, appearance = 'accent', height, style: styleProps, ...restProps })=>{
+ */ export const Progress = ({ value = 0, appearance = 'accent', height, style: styleProps, ...restProps })=>{
     const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
     const style = progressStyle(height, styleProps);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         "aria-valuenow": value,
         title: title,
         style: style,
@@ -32,12 +38,7 @@ const PROGRESS_MAX_VALUE = 100;
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
-        ref: getRootRef,
-        className: classNames(styles['Progress'], {
-            accent: styles['Progress--appearance-accent'],
-            positive: styles['Progress--appearance-positive'],
-            negative: styles['Progress--appearance-negative']
-        }[appearance], className)
+        baseClassName: classNames(styles['Progress'], stylesAppearance[appearance])
     }, /*#__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\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["React","classNames","clamp","styles","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","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","width"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,MAAMC,cAAcN,0BAA0BC;IAC9C,MAAMM,QAAQD,cAAc;QAAE,GAAGD,UAAU;QAAE,GAAGC,WAAW;IAAC,IAAID;IAEhE,OAAOE;AACT;AAgBA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTC,UAAU,EACVC,SAAS,EACTC,aAAa,QAAQ,EACrBb,MAAM,EACNM,OAAOF,UAAU,EACjB,GAAGU,WACW;IACd,MAAMC,WAAWlB,MAAMa,OAAOH,oBAAoBC;IAClD,MAAMQ,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEP,mBAAmB,CAAC;IAEnD,MAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,oBAACa;QACCC,iBAAeR;QACfM,OAAOA;QACPV,OAAOA;QACN,GAAGQ,SAAS;QACbK,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKX;QACLC,WAAWhB,WACTE,MAAM,CAAC,WAAW,EAClB;YACEyB,QAAQzB,MAAM,CAAC,8BAA8B;YAC7C0B,UAAU1B,MAAM,CAAC,gCAAgC;YACjD2B,UAAU3B,MAAM,CAAC,gCAAgC;QACnD,CAAC,CAACe,WAAW,EACbD;qBAGF,oBAACK;QAAIL,WAAWd,MAAM,CAAC,eAAe;QAAEQ,OAAO;YAAEoB,OAAO,CAAC,EAAEX,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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Progress.module.css';\n\nconst stylesAppearance = {\n  accent: styles['Progress--appearance-accent'],\n  positive: styles['Progress--appearance-positive'],\n  negative: styles['Progress--appearance-negative'],\n};\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <RootComponent\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      baseClassName={classNames(styles['Progress'], stylesAppearance[appearance])}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","clamp","RootComponent","styles","stylesAppearance","accent","positive","negative","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","appearance","restProps","progress","title","aria-valuenow","role","aria-valuemin","aria-valuemax","baseClassName","div","className","width"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,8BAA8B;IAC7CG,UAAUH,MAAM,CAAC,gCAAgC;IACjDI,UAAUJ,MAAM,CAAC,gCAAgC;AACnD;AAEA,SAASK,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,MAAMC,cAAcN,0BAA0BC;IAC9C,MAAMM,QAAQD,cAAc;QAAE,GAAGD,UAAU;QAAE,GAAGC,WAAW;IAAC,IAAID;IAEhE,OAAOE;AACT;AAcA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTC,aAAa,QAAQ,EACrBX,MAAM,EACNM,OAAOF,UAAU,EACjB,GAAGQ,WACW;IACd,MAAMC,WAAWrB,MAAMkB,OAAOH,oBAAoBC;IAClD,MAAMM,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEL,mBAAmB,CAAC;IAEnD,MAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,oBAACX;QACCsB,iBAAeL;QACfI,OAAOA;QACPR,OAAOA;QACN,GAAGM,SAAS;QACbI,MAAK;QACLC,iBAAeV;QACfW,iBAAeV;QACfW,eAAe5B,WAAWG,MAAM,CAAC,WAAW,EAAEC,gBAAgB,CAACgB,WAAW;qBAE1E,oBAACS;QAAIC,WAAW3B,MAAM,CAAC,eAAe;QAAEY,OAAO;YAAEgB,OAAO,CAAC,EAAET,SAAS,CAAC,CAAC;QAAC;;AAG7E,EAAE"}

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

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

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Icon24Dismiss } from '@vkontakte/icons';
-import { classNames } from '@vkontakte/vkjs';
 import { warnOnce } from '../../lib/warnOnce';
 import { Button } from '../Button/Button';
 import { Image } from '../Image/Image';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './PromoBanner.module.css';
@@ -14,7 +14,7 @@ const warn = warnOnce('PromoBanner');
  * @deprecated v5.3.1
  *
  * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
- */ export const PromoBanner = ({ bannerData = {}, onClose, isCloseButtonHidden, className, ...restProps })=>{
+ */ export const PromoBanner = ({ bannerData = {}, onClose, isCloseButtonHidden, ...restProps })=>{
     if (process.env.NODE_ENV === 'development') {
         warn('Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners');
     }
@@ -35,8 +35,8 @@ const warn = warnOnce('PromoBanner');
     }, [
         statsPixels.playbackStarted
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['PromoBanner'], className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['PromoBanner'],
         ...restProps
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['PromoBanner__head']

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,aAAa,CAAC,CAAC,EACfC,OAAO,EACPC,mBAAmB,EACnBC,SAAS,EACT,GAAGC,WACc;IACjB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KACE;IAEJ;IAEA,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,GACP;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;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bd,gBAAgBE,YAAYY,eAAe;QAC7C;IACF,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;;QAIhEC,OACEvC,WAAWwC,OAAO,kBAChB,oBAAC/C;YACCgD,MAAK;YACLJ,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmB+B;WAEjEtC,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 { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <RootComponent baseClassName={styles['PromoBanner']} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Dismiss","warnOnce","Button","Image","RootComponent","SimpleCell","Footnote","styles","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","restProps","process","env","NODE_ENV","currentPixel","setCurrentPixel","useState","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","baseClassName","div","className","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,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOP,SAAS;AAsCtB,gCAAgC;AAEhC;;;;;CAKC,GACD,OAAO,MAAMQ,cAAc,CAAC,EAC1BC,aAAa,CAAC,CAAC,EACfC,OAAO,EACPC,mBAAmB,EACnB,GAAGC,WACc;IACjB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CR,KACE;IAEJ;IAEA,MAAM,CAACS,cAAcC,gBAAgB,GAAGnB,MAAMoB,QAAQ,CAAC;IAEvD,MAAMC,cAAcrB,MAAMsB,OAAO,CAC/B,IACGX,WAAWY,UAAU,GAClBZ,WAAWY,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,GACP;QAACjB,WAAWY,UAAU;KAAC;IAGzB,MAAMM,UAAU7B,MAAM8B,WAAW,CAC/B,IAAMX,gBAAgBE,YAAYU,KAAK,IAAI,KAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrB/B,MAAMgC,SAAS,CAAC;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bd,gBAAgBE,YAAYY,eAAe;QAC7C;IACF,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAAC5B;QAAc6B,eAAe1B,MAAM,CAAC,cAAc;QAAG,GAAGM,SAAS;qBAChE,oBAACqB;QAAIC,WAAW5B,MAAM,CAAC,oBAAoB;qBACzC,oBAACD,gBAAUI,WAAW0B,gBAAgB,IAAI,kBACzC1B,WAAW2B,eAAe,kBACzB,oBAAC/B;QAAS6B,WAAW5B,MAAM,CAAC,mBAAmB;OAAGG,WAAW2B,eAAe,GAG7E,CAACzB,qCACA,oBAACsB;QAAIC,WAAW5B,MAAM,CAAC,qBAAqB;QAAEqB,SAASjB;qBACrD,oBAACX,sCAIP,oBAACK;QACCiC,MAAM5B,WAAW6B,YAAY;QAC7BX,SAASA;QACTY,KAAI;QACJC,QAAO;QACPC,QACEhC,WAAWiC,QAAQ,kBACjB,oBAACxC;YACCyC,MAAM;YACNC,KAAKnC,WAAWiC,QAAQ;YACxBG,KAAKpC,WAAWqC,KAAK;YACrBC,eAAalC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWiC;;QAIhEC,OACExC,WAAWyC,OAAO,kBAChB,oBAACjD;YACCkD,MAAK;YACLJ,eAAalC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBiC;WAEjEvC,WAAWyC,OAAO;QAIzBE,UAAU3C,WAAW4C,MAAM;OAE1B5C,WAAWqC,KAAK,GAGlB9B,aAAasC,MAAM,GAAG,mBACrB,oBAACrB;QAAIC,WAAW5B,MAAM,CAAC,sBAAsB;qBAC3C,oBAACiD;QAAIX,KAAK5B;QAAc6B,KAAI;;AAKtC,EAAE"}

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

@@ -48,7 +48,7 @@
 }
 
 .PullToRefresh--ios.PullToRefresh--refreshing .PullToRefresh__spinner-self {
-  animation: vkui-PullToRefreshToRefreshing 380ms ease-out;
+  animation: pull-to-refresh-to-refreshing 380ms ease-out;
 }
 
 .PullToRefresh__spinner-path {
@@ -63,7 +63,7 @@
 }
 
 .PullToRefresh__spinner--on .PullToRefresh__spinner-path {
-  animation: vkui-ptr-rotator var(--vkui_internal--duration) linear infinite;
+  animation: ptr-rotator var(--vkui_internal--duration) linear infinite;
 }
 
 .PullToRefresh__content {
@@ -75,7 +75,7 @@
   transition: none;
 }
 
-@keyframes vkui-PullToRefreshToRefreshing {
+@keyframes pull-to-refresh-to-refreshing {
   0% {
     transform: scale(1);
   }
@@ -93,7 +93,7 @@
   }
 }
 
-@keyframes vkui-ptr-rotator {
+@keyframes ptr-rotator {
   0% {
     transform: rotate(0deg);
   }

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

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

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

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PullToRefresh.module.css';
 function calcStrokeDashOffset(value, radius) {
     const progress = value / 100;
     return 2 * Math.PI * radius * (1 - progress);
 }
-export const PullToRefreshSpinner = ({ on = true, size = 24, strokeWidth = 2.5, style, progress = 0, 'aria-label': ariaLabel = 'Пожалуйста, подождите...' })=>{
+export const PullToRefreshSpinner = ({ on = true, size = 24, strokeWidth = 2.5, progress = 0, 'aria-label': ariaLabel = 'Пожалуйста, подождите...', ...restProps })=>{
     const radius = 0.5 * size - 0.5 * strokeWidth;
     const dasharray = 2 * Math.PI * radius;
     const circleCenter = 0.5 * size;
     const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['PullToRefresh__spinner'], on && styles['PullToRefresh__spinner--on']),
-        style: style,
-        "aria-label": on ? ariaLabel : undefined
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: classNames(styles['PullToRefresh__spinner'], on && styles['PullToRefresh__spinner--on']),
+        "aria-label": on ? ariaLabel : undefined,
+        ...restProps
     }, /*#__PURE__*/ React.createElement("svg", {
         role: "presentation",
         className: styles['PullToRefresh__spinner-self'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","div","className","aria-label","undefined","svg","role","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,6BAA6B;AAEhD,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,MAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUA,OAAO,MAAMG,uBAAuB,CAAC,EACnCC,KAAK,IAAI,EACTC,OAAO,EAAE,EACTC,cAAc,GAAG,EACjBC,KAAK,EACLP,WAAW,CAAC,EACZ,cAAcQ,YAAY,0BAA0B,EAC1B;IAC1B,MAAMT,SAAS,MAAMM,OAAO,MAAMC;IAClC,MAAMG,YAAY,IAAIR,KAAKC,EAAE,GAAGH;IAChC,MAAMW,eAAe,MAAML;IAE3B,MAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,UAAUD;IAE5D,qBACE,oBAACa;QACCC,WAAWlB,WACTC,MAAM,CAAC,yBAAyB,EAChCQ,MAAMR,MAAM,CAAC,6BAA6B;QAE5CW,OAAOA;QACPO,cAAYV,KAAKI,YAAYO;qBAE7B,oBAACC;QACCC,MAAK;QACLJ,WAAWjB,MAAM,CAAC,8BAA8B;QAChDW,OAAO;YACLW,OAAOb;YACPc,QAAQd;QACV;QACAe,SAAS,CAAC,IAAI,EAAEf,KAAK,CAAC,EAAEA,KAAK,CAAC;QAC9BgB,OAAM;qBAEN,oBAACC;QACCf,OAAO;YACLW,OAAOb;YACPc,QAAQd;YACRkB,iBAAiB,CAAC,EAAEb,aAAa,GAAG,EAAEA,aAAa,EAAE,CAAC;QACxD;qBAEA,oBAACc;QACCX,WAAWjB,MAAM,CAAC,8BAA8B;QAChD6B,MAAK;QACLC,iBAAiBjB;QACjBkB,kBAAkBhB;QAClBL,aAAaA;QACbsB,eAAc;QACdC,IAAInB;QACJoB,IAAIpB;QACJqB,GAAGhC;;AAMf,EAAE"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size?: number;\n  strokeWidth?: number;\n  on?: boolean;\n  progress?: number;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  ...restProps\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      aria-label={on ? ariaLabel : undefined}\n      {...restProps}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","ariaLabel","restProps","dasharray","circleCenter","dashoffset","baseClassName","aria-label","undefined","svg","role","className","style","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,MAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AASA,OAAO,MAAMG,uBAAuB,CAAC,EACnCC,KAAK,IAAI,EACTC,OAAO,EAAE,EACTC,cAAc,GAAG,EACjBN,WAAW,CAAC,EACZ,cAAcO,YAAY,0BAA0B,EACpD,GAAGC,WACuB;IAC1B,MAAMT,SAAS,MAAMM,OAAO,MAAMC;IAClC,MAAMG,YAAY,IAAIR,KAAKC,EAAE,GAAGH;IAChC,MAAMW,eAAe,MAAML;IAE3B,MAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,UAAUD;IAE5D,qBACE,oBAACJ;QACCiB,eAAelB,WACbE,MAAM,CAAC,yBAAyB,EAChCQ,MAAMR,MAAM,CAAC,6BAA6B;QAE5CiB,cAAYT,KAAKG,YAAYO;QAC5B,GAAGN,SAAS;qBAEb,oBAACO;QACCC,MAAK;QACLC,WAAWrB,MAAM,CAAC,8BAA8B;QAChDsB,OAAO;YACLC,OAAOd;YACPe,QAAQf;QACV;QACAgB,SAAS,CAAC,IAAI,EAAEhB,KAAK,CAAC,EAAEA,KAAK,CAAC;QAC9BiB,OAAM;qBAEN,oBAACC;QACCL,OAAO;YACLC,OAAOd;YACPe,QAAQf;YACRmB,iBAAiB,CAAC,EAAEd,aAAa,GAAG,EAAEA,aAAa,EAAE,CAAC;QACxD;qBAEA,oBAACe;QACCR,WAAWrB,MAAM,CAAC,8BAA8B;QAChD8B,MAAK;QACLC,iBAAiBlB;QACjBmB,kBAAkBjB;QAClBL,aAAaA;QACbuB,eAAc;QACdC,IAAIpB;QACJqB,IAAIrB;QACJsB,GAAGjC;;AAMf,EAAE"}