@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -8,6 +8,7 @@ import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './PromoBanner.module.css';
 const warn = warnOnce('PromoBanner');
+// TODO [>=6]: Удалить компонент
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
  * @deprecated v5.3.1

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

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

@@ -1 +1,39 @@
-.vkuiPromoBanner{background:#fff;background:var(--vkui--color_background_content);box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);outline:1px solid rgba(0,0,0,.12);outline:var(--vkui_internal--thin_border) solid var(--vkui--color_separator_primary_alpha);padding-bottom:10px;position:relative;width:100%}.vkuiPromoBanner__head{color:#818c99;color:var(--vkui--color_text_secondary);display:flex;padding:14px 16px 10px;padding:14px var(--vkui--size_base_padding_horizontal--regular) 10px}.vkuiPromoBanner__age{margin-left:6px}.vkuiPromoBanner__close{align-items:center;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;height:48px;justify-content:center;position:absolute;right:0;top:0;width:48px}.vkuiPromoBanner__close:active{opacity:.7}.vkuiPromoBanner__pixels{display:none}
+.PromoBanner {
+  width: 100%;
+  box-sizing: border-box;
+  outline: var(--vkui_internal--thin_border) solid var(--vkui--color_separator_primary_alpha);
+  color: var(--vkui--color_text_primary);
+  background: var(--vkui--color_background_content);
+  padding-bottom: 10px;
+  position: relative;
+}
+
+.PromoBanner__head {
+  display: flex;
+  color: var(--vkui--color_text_secondary);
+  padding: 14px var(--vkui--size_base_padding_horizontal--regular) 10px;
+}
+
+.PromoBanner__age {
+  margin-left: 6px;
+}
+
+.PromoBanner__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 48px;
+  height: 48px;
+  color: var(--vkui--color_icon_secondary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.PromoBanner__close:active {
+  opacity: 0.7;
+}
+
+.PromoBanner__pixels {
+  display: none;
+}

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { DOMProps } from '../../lib/dom';
-import { AnyFunction } from '../../types';
+import { AnyFunction, HasChildren } from '../../types';
 import { ScrollContextInterface } from '../AppRoot/ScrollContext';
 import { TouchProps } from '../Touch/Touch';
-export interface PullToRefreshProps extends DOMProps, TouchProps {
+export interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {
     /**
      * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)
      */
@@ -14,7 +14,6 @@ export interface PullToRefreshProps extends DOMProps, TouchProps {
     isFetching?: boolean;
     /** @ignore */
     scroll?: ScrollContextInterface;
-    children?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/PullToRefresh

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 } 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 {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n  children?: React.ReactNode;\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']}>\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","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']}>\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","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}

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

@@ -1 +1,101 @@
-.vkuiPullToRefresh{flex-grow:1}.vkuiPullToRefresh--refreshing{pointer-events:none;touch-action:none}.vkuiPullToRefresh__controls{pointer-events:none;width:100%;z-index:1;z-index:var(--vkui_internal--z_index_pull_to_refresh)}.vkuiPullToRefresh__spinner{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;height:40px;justify-content:center;margin:auto;opacity:0;transition:transform .3s cubic-bezier(.1,0,.25,1),opacity .22s ease-out;width:40px}.vkuiPullToRefresh--ios .vkuiPullToRefresh__spinner{background:none;border-radius:0;box-shadow:none;color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner{transition:opacity .22s ease-out}.vkuiPullToRefresh__spinner-self{stroke:currentColor}.vkuiPullToRefresh--ios.vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-self{animation:vkui-PullToRefreshToRefreshing .38s ease-out}.vkuiPullToRefresh__spinner-path{transform:rotate(-90deg);transform-origin:center center;transition:stroke-dashoffset 167ms ease-out}.vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-path,.vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner-path{transition:none}.vkuiPullToRefresh__spinner--on .vkuiPullToRefresh__spinner-path{animation:vkui-rotator .7s linear infinite;animation:vkui-rotator var(--vkui_internal--duration) linear infinite}.vkuiPullToRefresh__content{overflow:hidden;transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiPullToRefresh--watching .vkuiPullToRefresh__content{transition:none}@keyframes vkui-PullToRefreshToRefreshing{0%{transform:scale(1)}30%{transform:scale(.6)}90%{transform:scale(1.1)}to{transform:scale(1)}}
+.PullToRefresh {
+  flex-grow: 1;
+}
+
+.PullToRefresh--refreshing {
+  touch-action: none;
+  pointer-events: none;
+}
+
+.PullToRefresh__controls {
+  width: 100%;
+  pointer-events: none;
+  z-index: var(--vkui_internal--z_index_pull_to_refresh);
+}
+
+.PullToRefresh__spinner {
+  display: flex;
+  margin: auto;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1), opacity 220ms ease-out;
+  opacity: 0;
+  background: var(--vkui--color_background_modal);
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  color: var(--vkui--color_icon_accent);
+}
+
+.PullToRefresh--ios .PullToRefresh__spinner {
+  border-radius: 0;
+  box-shadow: none;
+  background: none;
+  color: var(--vkui--color_icon_medium);
+}
+
+.PullToRefresh--watching .PullToRefresh__spinner {
+  transition: opacity 220ms ease-out;
+}
+
+.PullToRefresh__spinner-self {
+  stroke: currentColor;
+}
+
+.PullToRefresh--ios.PullToRefresh--refreshing .PullToRefresh__spinner-self {
+  animation: vkui-PullToRefreshToRefreshing 380ms ease-out;
+}
+
+.PullToRefresh__spinner-path {
+  transform: rotate(-90deg);
+  transform-origin: center center;
+  transition: stroke-dashoffset 167ms ease-out;
+}
+
+.PullToRefresh--watching .PullToRefresh__spinner-path,
+.PullToRefresh--refreshing .PullToRefresh__spinner-path {
+  transition: none;
+}
+
+.PullToRefresh__spinner--on .PullToRefresh__spinner-path {
+  animation: vkui-ptr-rotator var(--vkui_internal--duration) linear infinite;
+}
+
+.PullToRefresh__content {
+  overflow: hidden;
+  transition: transform 400ms var(--vkui--animation_easing_platform);
+}
+
+.PullToRefresh--watching .PullToRefresh__content {
+  transition: none;
+}
+
+@keyframes vkui-PullToRefreshToRefreshing {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(0.6);
+  }
+
+  90% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes vkui-ptr-rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { HasRef, HasRootRef } from '../../types';
 export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLLabelElement> {
     description?: React.ReactNode;
+    titleAfter?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Radio
  */
-export declare const Radio: ({ children, description, style, className, getRootRef, ...restProps }: RadioProps) => JSX.Element;
+export declare const Radio: ({ children, description, style, className, getRootRef, titleAfter, getRef, ...restProps }: RadioProps) => JSX.Element;

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

@@ -6,7 +6,7 @@ import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Radio.module.css';
 const sizeYClassNames = {
     none: styles['Radio--sizeY-none'],
@@ -35,7 +35,7 @@ const RadioIcon = (props)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Radio
- */ export const Radio = ({ children , description , style , className , getRootRef , ...restProps })=>{
+ */ export const Radio = ({ children , description , style , className , getRootRef , titleAfter , getRef , ...restProps })=>{
     const platform = usePlatform();
     const { sizeY ='none'  } = useAdaptivity();
     return /*#__PURE__*/ React.createElement(Tappable, {
@@ -45,10 +45,12 @@ const RadioIcon = (props)=>{
         activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
         disabled: restProps.disabled,
         getRootRef: getRootRef
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
         ...restProps,
-        className: styles['Radio__input'],
-        type: "radio"
+        Component: "input",
+        type: "radio",
+        getRootRef: getRef,
+        className: styles['Radio__input']
     }), /*#__PURE__*/ React.createElement("div", {
         className: styles['Radio__container']
     }, /*#__PURE__*/ React.createElement(RadioIcon, {
@@ -56,8 +58,10 @@ const RadioIcon = (props)=>{
     }), /*#__PURE__*/ React.createElement("div", {
         className: styles['Radio__content']
     }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Radio__children']
-    }, children), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['Radio__title']
+    }, /*#__PURE__*/ React.createElement("span", null, children), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Radio__titleAfter']
+    }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Radio__description']
     }, description))));
 };

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 { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\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}\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  ...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      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</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","VisuallyHiddenInput","styles","sizeYClassNames","none","COMPACT","RadioIcon","props","svg","xmlns","viewBox","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","Radio","children","description","style","getRootRef","restProps","platform","sizeY","Component","REGULAR","activeEffectDelay","IOS","disabled","type","div"],"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,mBAAmB,QAAQ,6CAA6C;AACjF,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,QAAyC;IAC1D,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA,IAAW;QAAE,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;AASA;;CAEC,GACD,OAAO,MAAME,QAAQ,CAAC,EACpBC,SAAQ,EACRC,YAAW,EACXC,MAAK,EACLJ,UAAS,EACTK,WAAU,EACV,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAW/B;IACjB,MAAM,EAAEgC,OAAQ,OAAM,EAAE,GAAGjC;IAE3B,qBACE,oBAACK;QACC6B,WAAU;QACVL,OAAOA;QACPJ,WAAW3B,WACTU,MAAM,CAAC,QAAQ,EACfyB,UAAU/B,SAASiC,OAAO,IAAI1B,eAAe,CAACwB,MAAM,EACpDR;QAEFW,mBAAmBJ,aAAa7B,SAASkC,GAAG,GAAG,MAAMjC,mBAAmB;QACxEkC,UAAUP,UAAUO,QAAQ;QAC5BR,YAAYA;qBAEZ,oBAACvB;QAAqB,GAAGwB,SAAS;QAAEN,WAAWjB,MAAM,CAAC,eAAe;QAAE+B,MAAK;sBAC5E,oBAACC;QAAIf,WAAWjB,MAAM,CAAC,mBAAmB;qBACxC,oBAACI;QAAUa,WAAWjB,MAAM,CAAC,cAAc;sBAC3C,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,iBAAiB;qBACtC,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,kBAAkB;OAAGmB,WAC3C5B,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,QAAyC;IAC1D,qBACE,oBAACC;QAAIC,OAAM;QAA6BC,SAAQ;QAAYC,eAAAA,IAAW;QAAE,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,GAAK;IAChB,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,OAAO,IAAI5B,eAAe,CAAC0B,MAAM,EACpDV;QAEFa,mBAAmBJ,aAAa/B,SAASoC,GAAG,GAAG,MAAMnC,mBAAmB;QACxEoC,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"}

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

@@ -1 +1,140 @@
-.vkuiRadio{display:block;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);padding:0 16px;padding:0 var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem .vkuiRadio{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiRadio__container{align-items:center;display:flex;justify-content:flex-start}.vkuiRadio__input:disabled~.vkuiRadio__container{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiRadio__icon{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);flex-shrink:0;height:22px;margin-right:14px;transition:color .15s cubic-bezier(.4,0,.2,1);transition:color .15s var(--vkui--animation_easing_platform);width:22px}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiRadio__icon .vkuiRadio__pin{transform:scale(0);transform-origin:12px 12px;transition:transform .15s cubic-bezier(.4,0,.2,1);transition:transform .15s var(--vkui--animation_easing_platform)}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon .vkuiRadio__pin{transform:none}.vkuiRadio__content{color:#000;color:var(--vkui--color_text_primary);display:block;flex-grow:1;max-width:100%}.vkuiRadio__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin-bottom:12px;margin-top:2px}.vkuiRadio__children{margin-top:12px}.vkuiRadio__children:last-child{margin-bottom:12px}.vkuiRadio--sizeY-compact .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-compact .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-compact .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-compact .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-compact .vkuiRadio__icon:after{height:12px;width:12px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRadio--sizeY-none .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-none .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-none .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-none .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-none .vkuiRadio__icon:after{height:12px;width:12px}}.vkuiInternalRadioGroup .vkuiRadio{box-sizing:border-box;flex:1;margin:0}
+.Radio {
+  display: block;
+  padding: 0 var(--vkui--size_base_padding_horizontal--regular);
+  font-family: var(--vkui--font_family_base);
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem) .Radio {
+  width: 100%;
+  box-sizing: content-box;
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+.Radio__container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.Radio__input:disabled ~ .Radio__container {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.Radio__icon {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  margin-right: 14px;
+  color: var(--vkui--color_icon_tertiary);
+  transition: color 0.15s var(--vkui--animation_easing_platform);
+}
+
+.Radio__input:checked ~ .Radio__container .Radio__icon {
+  color: var(--vkui--color_icon_accent);
+}
+
+.Radio__icon .Radio__pin {
+  transform-origin: 12px 12px;
+  transform: scale(0);
+  transition: transform 0.15s var(--vkui--animation_easing_platform);
+}
+
+.Radio__input:checked ~ .Radio__container .Radio__icon .Radio__pin {
+  transform: none;
+}
+
+.Radio__content {
+  display: block;
+  flex-grow: 1;
+  max-width: 100%;
+  color: var(--vkui--color_text_primary);
+}
+
+.Radio__description {
+  display: block;
+  color: var(--vkui--color_text_secondary);
+  margin-bottom: 12px;
+  margin-top: 2px;
+}
+
+.Radio__title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.Radio__title:last-child {
+  margin-bottom: 12px;
+}
+
+.Radio__titleAfter {
+  margin-left: 4px;
+  color: var(--vkui--color_icon_tertiary);
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.Radio--sizeY-compact .Radio__title {
+  margin-top: 8px;
+}
+
+.Radio--sizeY-compact .Radio__title:last-child {
+  margin-bottom: 8px;
+}
+
+.Radio--sizeY-compact .Radio__description {
+  margin-bottom: 7px;
+}
+
+.Radio--sizeY-compact .Radio__icon {
+  width: 18px;
+  height: 18px;
+}
+
+.Radio--sizeY-compact .Radio__icon::after {
+  width: 12px;
+  height: 12px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Radio--sizeY-none .Radio__title {
+    margin-top: 8px;
+  }
+
+  .Radio--sizeY-none .Radio__title:last-child {
+    margin-bottom: 8px;
+  }
+
+  .Radio--sizeY-none .Radio__description {
+    margin-bottom: 7px;
+  }
+
+  .Radio--sizeY-none .Radio__icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .Radio--sizeY-none .Radio__icon::after {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/**
+ * CMP:
+ * RadioGroup
+ */
+
+:global(.vkuiInternalRadioGroup) .Radio {
+  flex: 1;
+  margin: 0;
+  box-sizing: border-box;
+}

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

@@ -1 +1,13 @@
-.vkuiRadioGroup--mode-horizontal{display:flex}.vkuiInternalFormItem .vkuiRadioGroup{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}
+.RadioGroup--mode-horizontal {
+  display: flex;
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem) .RadioGroup {
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+  box-sizing: content-box;
+}

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

@@ -10,14 +10,19 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
 }
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
     /**
      * Расположение кнопки удаления.
      */
     align?: 'start' | 'center';
+    /**
+     * Скрывает кнопку, но оставляет отступ.
+     * @since 5.4.0
+     */
+    indent?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, ...restProps }: RemovableOwnProps) => JSX.Element;
+export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, indent, ...restProps }: RemovableOwnProps) => JSX.Element;
 export {};

package/dist/cssm/components/Removable/Removable.js

@@ -73,7 +73,7 @@ import styles from './Removable.module.css';
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
- */ export const Removable = ({ getRootRef , children , onRemove =noop , removePlaceholder ='Удалить' , align ='center' , className , ...restProps })=>{
+ */ export const Removable = ({ getRootRef , children , onRemove =noop , removePlaceholder ='Удалить' , align ='center' , className , indent =false , ...restProps })=>{
     const platform = usePlatform();
     const ref = useExternRef(getRootRef);
     const onRemoveClick = (e)=>{
@@ -84,7 +84,7 @@ import styles from './Removable.module.css';
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
         ref: ref,
-        className: classNames(platform === Platform.IOS && styles['Removable--ios'], align === 'start' && styles['Removable--align-start'], className)
+        className: classNames(platform === Platform.IOS && styles['Removable--ios'], align === 'start' && styles['Removable--align-start'], indent && styles['Removable--indent'], className)
     }, platform !== Platform.IOS && /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')
     }, children, /*#__PURE__*/ React.createElement(IconButton, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"mappings":"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"}