@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/cssm/components/PopoutRoot/PopoutRoot.js

@@ -4,19 +4,19 @@ import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJS
 import { blurActiveElement, useDOM } from '../../lib/dom';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import styles from './PopoutRoot.module.css';
-const PopoutRootPopout = ({ children  })=>{
-    const { isDesktop  } = useAdaptivityWithJSMediaQueries();
+const PopoutRootPopout = ({ children })=>{
+    const { isDesktop } = useAdaptivityWithJSMediaQueries();
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['PopoutRoot__popout'], isDesktop && styles['PopoutRoot__popout--absolute'])
     }, children);
 };
-const PopoutRootModal = ({ children  })=>{
+const PopoutRootModal = ({ children })=>{
     return /*#__PURE__*/ React.createElement("div", {
         className: styles['PopoutRoot__modal']
     }, children);
 };
-export const PopoutRoot = ({ popout , modal , children , getRootRef , className , ...restProps })=>{
-    const { document  } = useDOM();
+export const PopoutRoot = ({ popout, modal, children, getRootRef, className, ...restProps })=>{
+    const { document } = useDOM();
     React.useEffect(()=>{
         popout && blurActiveElement(document);
     }, [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","styles","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAAC,EAAEC,SAAQ,EAAyB;IAC3D,MAAM,EAAEC,UAAS,EAAE,GAAGP;IAEtB,qBACE,oBAACQ;QACCC,WAAWV,WACTK,MAAM,CAAC,qBAAqB,EAC5BG,aAAaH,MAAM,CAAC,+BAA+B;OAGpDE;AAGP;AAMA,MAAMI,kBAAkB,CAAC,EAAEJ,SAAQ,EAAwB;IACzD,qBAAO,oBAACE;QAAIC,WAAWL,MAAM,CAAC,oBAAoB;OAAGE;AACvD;AASA,OAAO,MAAMK,aAAa,CAAC,EACzBC,OAAM,EACNC,MAAK,EACLP,SAAQ,EACRQ,WAAU,EACVL,UAAS,EACT,GAAGM,WACa;IAChB,MAAM,EAAEC,SAAQ,EAAE,GAAGd;IAErBJ,MAAMmB,UAAU;QACdL,UAAUX,kBAAkBe;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ;QAAK,GAAGO,SAAS;QAAEN,WAAWV,WAAWK,MAAM,CAAC,aAAa,EAAEK;QAAYS,KAAKJ;OAC9ER,wBACD,oBAACH,qBACE,CAAC,CAACS,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","styles","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGP;IAEtB,qBACE,oBAACQ;QACCC,WAAWV,WACTK,MAAM,CAAC,qBAAqB,EAC5BG,aAAaH,MAAM,CAAC,+BAA+B;OAGpDE;AAGP;AAMA,MAAMI,kBAAkB,CAAC,EAAEJ,QAAQ,EAAwB;IACzD,qBAAO,oBAACE;QAAIC,WAAWL,MAAM,CAAC,oBAAoB;OAAGE;AACvD;AASA,OAAO,MAAMK,aAAa,CAAC,EACzBC,MAAM,EACNC,KAAK,EACLP,QAAQ,EACRQ,UAAU,EACVL,SAAS,EACT,GAAGM,WACa;IAChB,MAAM,EAAEC,QAAQ,EAAE,GAAGd;IAErBJ,MAAMmB,SAAS,CAAC;QACdL,UAAUX,kBAAkBe;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ;QAAK,GAAGO,SAAS;QAAEN,WAAWV,WAAWK,MAAM,CAAC,aAAa,EAAEK;QAAYS,KAAKJ;OAC9ER,wBACD,oBAACH,qBACE,CAAC,CAACS,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}

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

@@ -8,7 +8,7 @@ import { Platform } from '../../lib/platform';
 import styles from './PopoutWrapper.module.css';
 /**
  * @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, className, ...restProps })=>{
     const platform = usePlatform();
     const [opened, setOpened] = React.useState(!hasMask);
     const elRef = React.useRef(null);
@@ -24,7 +24,7 @@ import styles from './PopoutWrapper.module.css';
         animationFinishFallback,
         opened
     ]);
-    const { window  } = useDOM();
+    const { window } = useDOM();
     useGlobalEventListener(window, 'touchmove', (e)=>e.preventDefault(), {
         passive: false
     });

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,QAAS,SAAQ,EACjBC,QAAS,SAAQ,EACjBC,SAAU,MAAK,EACfC,SAAU,KAAI,EACdC,OAAQ,KAAI,EACZC,SAAQ,EACRC,QAAO,EACPC,UAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,WAAWf;IACjB,MAAM,CAACgB,QAAQC,UAAU,GAAGpB,MAAMqB,SAAS,CAACT;IAC5C,MAAMU,QAAQtB,MAAMuB,OAAuB;IAE3C,MAAMC,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,kBAAkBnB,MAAM,CAAC,8BAA8B,EAAE;YACnEa,UAAU;QACZ;IACF;IACA,MAAMO,0BAA0BvB,WAAWoB,aAAaN,aAAaZ,SAASsB,MAAM,MAAM;IAC1F5B,MAAM6B,UAAU;QACd,CAACV,UAAUQ,wBAAwBG;IACrC,GAAG;QAACH;QAAyBR;KAAO;IAEpC,MAAM,EAAEY,OAAM,EAAE,GAAG1B;IACnBH,uBAAuB6B,QAAQ,aAAa,CAACN,IAAMA,EAAEO,kBAAkB;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 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"}

package/dist/cssm/components/Popover/Popover.js

@@ -11,8 +11,8 @@ import { Popper } from '../Popper/Popper';
 import styles from './Popover.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
- */ export const Popover = ({ action ='click' , shown: shownProp , showDelay =150 , hideDelay =150 , offsetDistance =8 , content , children , style: styleProp , className , getRef , onShownChange , restoreFocus =true , ...restProps })=>{
-    const { document  } = useDOM();
+ */ export const Popover = ({ action = 'click', shown: shownProp, showDelay = 150, hideDelay = 150, offsetDistance = 8, content, children, style: styleProp, className, getRef, onShownChange, restoreFocus = true, ...restProps })=>{
+    const { document } = useDOM();
     const hoverable = action === 'hover';
     const hovered = React.useRef(false);
     const [computedShown, setComputedShown] = React.useState(shownProp || false);
@@ -98,7 +98,7 @@ import styles from './Popover.module.css';
             ...styleProp,
             '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`
         },
-        renderContent: ({ className: wrapperClassName  })=>/*#__PURE__*/ React.createElement(FocusTrap, {
+        renderContent: ({ className: wrapperClassName })=>/*#__PURE__*/ React.createElement(FocusTrap, {
                 className: wrapperClassName,
                 onClose: handleContentKeyDownEscape,
                 restoreFocus: restoreFocus

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","styles","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","computedShown","setComputedShown","useState","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","styles","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","computedShown","setComputedShown","useState","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ 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 , 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, className, ...restProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
     const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
     const memoizedMiddlewares = React.useMemo(()=>{
@@ -29,7 +29,7 @@ import styles from './Popper.module.css';
         middlewares.push(shiftMiddleware());
         if (sameWidth) {
             middlewares.push(sizeMiddleware({
-                apply ({ rects , elements  }) {
+                apply ({ rects, elements }) {
                     Object.assign(elements.floating.style, {
                         width: `${rects.reference.width}px`
                     });
@@ -59,7 +59,7 @@ import styles from './Popper.module.css';
         customMiddlewares,
         placementProp
     ]);
-    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 } } = useFloating({
         placement: isNotAutoPlacement ? placementProp : undefined,
         middleware: memoizedMiddlewares,
         whileElementsMounted (...args) {

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 { 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/PopperArrow.js

@@ -7,7 +7,7 @@ const placementClassNames = {
     bottom: styles['PopperArrow--placement-bottom'],
     left: styles['PopperArrow--placement-left']
 };
-export const PopperArrow = ({ coords , arrowClassName , placement , getRootRef , Icon =DefaultIcon  })=>{
+export const PopperArrow = ({ coords, arrowClassName, placement, getRootRef, Icon = DefaultIcon })=>{
     const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);
     return /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,

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 { 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"}
+{"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,MAAM,EACNC,cAAc,EACdC,SAAS,EACTC,UAAU,EACVC,OAAOX,WAAW,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,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO,IAAIV,UAAUY,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa,CAAC;gBACbf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa,CAAC;gBACbjB,OAAO;YACT;SACD;IACH;AACF"}

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 , appearance ='accent' , ...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", {

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  /**\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"}
+{"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,QAAQ,CAAC,EACTC,UAAU,EACVC,SAAS,EACTC,aAAa,QAAQ,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/PromoBanner/PromoBanner.js

@@ -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, className, ...restProps })=>{
     if (process.env.NODE_ENV === 'development') {
         warn('Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners');
     }

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;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"}
+{"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"}

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

@@ -36,10 +36,10 @@ const TOUCH_MOVE_EVENT_PARAMS = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PullToRefresh
- */ export const PullToRefresh = ({ children , isFetching , onRefresh , className , ...restProps })=>{
+ */ export const PullToRefresh = ({ children, isFetching, onRefresh, className, ...restProps })=>{
     const platform = usePlatform();
     const scroll = useScroll();
-    const { document  } = useDOM();
+    const { document } = useDOM();
     const prevIsFetching = usePrevious(isFetching);
     const initParams = React.useMemo(()=>({
             start: platform === Platform.IOS ? -10 : -45,
@@ -84,7 +84,7 @@ const TOUCH_MOVE_EVENT_PARAMS = {
         touchDown,
         resetRefreshingState
     ]);
-    const { set: setWaitFetchingTimeout , clear: clearWaitFetchingTimeout  } = useTimeout(onRefreshingFinish, 1000);
+    const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(onRefreshingFinish, 1000);
     useIsomorphicLayoutEffect(()=>{
         if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {
             onRefreshingFinish();
@@ -152,12 +152,12 @@ const TOUCH_MOVE_EVENT_PARAMS = {
         setTouchDown(true);
     };
     const onTouchMove = (e)=>{
-        const { isY , shiftY  } = e;
-        const { start , max  } = initParams;
+        const { isY, shiftY } = e;
+        const { start, max } = initParams;
         const pageYOffset = scroll?.getScroll().y;
         if (watching && touchDown) {
             cancelEvent(e);
-            const { positionMultiplier , maxY  } = initParams;
+            const { positionMultiplier, maxY } = initParams;
             const shift = Math.max(0, shiftY - touchY.current);
             const currentY = clamp(start + shift * positionMultiplier, start, maxY);
             const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      onRefresh();\n      runTapticImpactOccurred('light');\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","useGlobalEventListener","usePlatform","usePrevious","useTimeout","useDOM","Platform","runTapticImpactOccurred","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","styles","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","document","prevIsFetching","initParams","useMemo","start","IOS","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","resetRefreshingState","useCallback","onRefreshingFinish","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","undefined","runRefreshing","prevSpinnerY","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","progress","abs","onTouchEnd","spinnerTransform","contentTransform","Provider","value","onStart","onMove","onEnd","useParentWidth","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { runTapticImpactOccurred } from '../../lib/taptic';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nfunction cancelEvent(event: any) {\n  if (!event) {\n    return false;\n  }\n  while (event.originalEvent) {\n    event = event.originalEvent;\n  }\n  if (event.preventDefault && event.cancelable) {\n    event.preventDefault();\n  }\n  if (event.stopPropagation) {\n    event.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\nconst TOUCH_MOVE_EVENT_PARAMS = {\n  cancelable: true,\n  passive: false,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps) => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { document } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === Platform.IOS ? -10 : -45,\n      max: platform === Platform.IOS ? 50 : 80,\n      maxY: platform === Platform.IOS ? 400 : 80,\n      refreshing: platform === Platform.IOS ? 36 : 50,\n      positionMultiplier: platform === Platform.IOS ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const onWindowTouchMove = (event: Event) => {\n    if (refreshing) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const { set: setWaitFetchingTimeout, clear: clearWaitFetchingTimeout } = useTimeout(\n    onRefreshingFinish,\n    1000,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearWaitFetchingTimeout();\n    }\n  }, [isFetching, prevIsFetching, clearWaitFetchingTimeout]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      setWaitFetchingTimeout();\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) =>\n        platform === Platform.IOS ? prevSpinnerY : initParams.refreshing,\n      );\n\n      onRefresh();\n      runTapticImpactOccurred('light');\n    }\n  }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  const onTouchStart = (e: TouchEvent) => {\n    if (refreshing) {\n      cancelEvent(e);\n    }\n    setTouchDown(true);\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    const { isY, shiftY } = e;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(e);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      if (progress > 85 && !refreshing && platform === Platform.IOS) {\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(e);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === Platform.IOS && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === Platform.IOS && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === Platform.IOS && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              WebkitTransform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n            WebkitTransform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","useGlobalEventListener","usePlatform","usePrevious","useTimeout","useDOM","Platform","runTapticImpactOccurred","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","styles","cancelEvent","event","originalEvent","preventDefault","cancelable","stopPropagation","TOUCH_MOVE_EVENT_PARAMS","passive","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","document","prevIsFetching","initParams","useMemo","start","IOS","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","onWindowTouchMove","resetRefreshingState","useCallback","onRefreshingFinish","set","setWaitFetchingTimeout","clear","clearWaitFetchingTimeout","undefined","runRefreshing","prevSpinnerY","onTouchStart","e","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","current","currentY","progress","abs","onTouchEnd","spinnerTransform","contentTransform","Provider","value","onStart","onMove","onEnd","useParentWidth","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ 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, style, progress = 0, 'aria-label': ariaLabel = 'Пожалуйста, подождите...' })=>{
     const radius = 0.5 * size - 0.5 * strokeWidth;
     const dasharray = 2 * Math.PI * radius;
     const circleCenter = 0.5 * size;

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,KAAKH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUA,OAAO,MAAMG,uBAAuB,CAAC,EACnCC,IAAK,KAAI,EACTC,MAAO,GAAE,EACTC,aAAc,IAAG,EACjBC,MAAK,EACLP,UAAW,EAAC,EACZ,cAAcQ,YAAY,0BAA0B,CAAA,EAC1B;IAC1B,MAAMT,SAAS,MAAMM,OAAO,MAAMC;IAClC,MAAMG,YAAY,IAAIR,KAAKC,KAAKH;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 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"}

package/dist/cssm/components/Radio/Radio.js

@@ -35,9 +35,9 @@ const RadioIcon = (props)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Radio
- */ export const Radio = ({ children , description , style , className , getRootRef , titleAfter , getRef , ...restProps })=>{
+ */ export const Radio = ({ children, description, style, className, getRootRef, titleAfter, getRef, ...restProps })=>{
     const platform = usePlatform();
-    const { sizeY ='none'  } = useAdaptivity();
+    const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement(Tappable, {
         Component: "label",
         style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACN,SAASS,QAAQ,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AAEA,MAAMI,YAAY,CAACC;IACjB,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;QAAa,GAAGJ,KAAK;qBAC/E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,WAAWjB,MAAM,CAAC,aAAa;QAAEgB,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,SAAQ,EACRC,YAAW,EACXC,MAAK,EACLJ,UAAS,EACTK,WAAU,EACVC,WAAU,EACVC,OAAM,EACN,GAAGC,WACQ;IACX,MAAMC,WAAWjC;IACjB,MAAM,EAAEkC,OAAQ,OAAM,EAAE,GAAGnC;IAE3B,qBACE,oBAACK;QACC+B,WAAU;QACVP,OAAOA;QACPJ,WAAW3B,WACTU,MAAM,CAAC,QAAQ,EACf2B,UAAUjC,SAASmC,WAAW5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa/B,SAASoC,MAAM,MAAMnC;QACrDoC,UAAUP,UAAUO;QACpBV,YAAYA;qBAEZ,oBAACvB;QACE,GAAG0B,SAAS;QACbG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,WAAWjB,MAAM,CAAC,eAAe;sBAEnC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,eAAe;qBACpC,oBAACmC,cAAMhB,yBACP,oBAACe;QAAIjB,WAAWjB,MAAM,CAAC,oBAAoB;OAAGuB,cAE/ChC,aAAa6B,8BACZ,oBAACtB;QAASmB,WAAWjB,MAAM,CAAC,qBAAqB;OAAGoB;AAMhE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Radio.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Radio--sizeY-none'],\n  [SizeType.COMPACT]: styles['Radio--sizeY-compact'],\n};\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(\n        styles['Radio'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        getRootRef={getRef}\n        className={styles['Radio__input']}\n      />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__title']}>\n            <span>{children}</span>\n            <div className={styles['Radio__titleAfter']}>{titleAfter}</div>\n          </div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","titleAfter","getRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,uBAAuB;AACrE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;AACpD;AAEA,MAAMI,YAAY,CAACC;IACjB,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA;QAAa,GAAGJ,KAAK;qBAC/E,oBAACK;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAKC,QAAO;QAAeC,aAAY;QAAIC,MAAK;sBAC1E,oBAACN;QAAOC,IAAG;QAAKC,IAAG;QAAKC,GAAE;QAAMI,WAAWjB,MAAM,CAAC,aAAa;QAAEgB,MAAK;;AAG5E;AAUA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLJ,SAAS,EACTK,UAAU,EACVC,UAAU,EACVC,MAAM,EACN,GAAGC,WACQ;IACX,MAAMC,WAAWjC;IACjB,MAAM,EAAEkC,QAAQ,MAAM,EAAE,GAAGnC;IAE3B,qBACE,oBAACK;QACC+B,WAAU;QACVP,OAAOA;QACPJ,WAAW3B,WACTU,MAAM,CAAC,QAAQ,EACf2B,UAAUjC,SAASmC,OAAO,IAAI5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa/B,SAASoC,GAAG,GAAG,MAAMnC;QACrDoC,UAAUP,UAAUO,QAAQ;QAC5BV,YAAYA;qBAEZ,oBAACvB;QACE,GAAG0B,SAAS;QACbG,WAAU;QACVK,MAAK;QACLX,YAAYE;QACZP,WAAWjB,MAAM,CAAC,eAAe;sBAEnC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACkC;QAAIjB,WAAWjB,MAAM,CAAC,eAAe;qBACpC,oBAACmC,cAAMhB,yBACP,oBAACe;QAAIjB,WAAWjB,MAAM,CAAC,oBAAoB;OAAGuB,cAE/ChC,aAAa6B,8BACZ,oBAACtB;QAASmB,WAAWjB,MAAM,CAAC,qBAAqB;OAAGoB;AAMhE,EAAE"}