@vkontakte/vkui 5.5.2 → 5.5.4

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

@@ -9,18 +9,17 @@
   display: none;
 }
 
-.Group--sizeX-compact + .Group__separator--spacing + .Group__separator--separator,
-.Group--mode-plain + .Group__separator--spacing + .Group__separator--separator {
+.Group--mode-plain + * + .Group__separator--separator {
   display: block;
 }
 
 @media (max-width: 767.9px) {
-  .Group--sizeX-none + .Group__separator--spacing + .Group__separator--separator {
+  .Group--sizeX-none.Group--mode-none + * + .Group__separator--separator {
     display: block;
   }
 }
 
-.Group--sizeX-regular.Group--mode-none + .Group__separator--spacing {
+.Group--mode-card + .Group__separator--spacing {
   display: block;
 }
 
@@ -30,6 +29,21 @@
   }
 }
 
+.Group:last-of-type ~ .Group__separator {
+  display: none;
+}
+
+.Group:last-of-type ~ .Group__separator--force,
+.Group--mode-card:last-of-type + .Group__separator--spacing {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
+    display: block;
+  }
+}
+
 .Group--mode-card.Group--padding-s {
   padding: 4px;
 }
@@ -38,21 +52,28 @@
   padding: 8px;
 }
 
-.Group--sizeX-compact {
-  padding-left: 0;
-  padding-right: 0;
-}
-
 @media (min-width: 768px) {
-  .Group--sizeX-none.Group--padding-s {
+  .Group--sizeX-none.Group--mode-none.Group--padding-s {
     padding: 4px;
   }
 
-  .Group--sizeX-none.Group--padding-m {
+  .Group--sizeX-none.Group--mode-none.Group--padding-m {
     padding: 8px;
   }
 }
 
+.Group--sizeX-compact {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 .Group--mode-card {
   background: var(--vkui--color_background_content);
   border-radius: var(--vkui--size_border_radius_paper--regular);
@@ -60,7 +81,7 @@
 }
 
 @media (min-width: 768px) {
-  .Group--mode-none.Group--sizeX-none {
+  .Group--sizeX-none.Group--mode-none {
     background: var(--vkui--color_background_content);
     border-radius: var(--vkui--size_border_radius_paper--regular);
     position: relative;
@@ -80,7 +101,7 @@
 }
 
 @media (min-width: 768px) {
-  .Group--mode-none::after {
+  .Group--sizeX-none.Group--mode-none::after {
     content: '';
     left: 0;
     top: 0;
@@ -107,23 +128,6 @@
   }
 }
 
-.Group:last-of-type ~ .Group__separator {
-  display: none;
-}
-
-.Group:last-of-type ~ .Group__separator--force,
-.Group--sizeX-regular.Group--mode-none:last-of-type + .Group__separator--spacing,
-.Group--sizeX-regular.Group--mode-card:last-of-type + .Group__separator--spacing {
-  display: block;
-}
-
-@media (min-width: 768px) {
-  .Group--sizeX-none.Group--mode-card:last-of-type + .Group__separator--spacing,
-  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
-    display: block;
-  }
-}
-
 .Group__description {
   display: block;
   padding: 4px 16px 16px;

package/dist/cssm/components/Header/Header.js

@@ -81,12 +81,12 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
         mode: mode,
         size: size
     }, /*#__PURE__*/ React.createElement("span", {
-        className: classNames(styles['Header__content-in'], multiline && styles['Header__content-in--multiline'])
+        className: classNames(styles['Header__content-in'], multiline && styles['Header__content--multiline'])
     }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Header__indicator'],
         weight: "2"
     }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
-        className: styles['Header__subtitle'],
+        className: classNames(styles['Header__subtitle'], multiline && styles['Header__content--multiline']),
         Component: "span"
     }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(Paragraph, {
         className: styles['Header__aside'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAoBzC,MAAMC,gBAAgB,CAAC,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGC,WAA+B;IACrE,MAAMC,UAAUF,SAAS;IAEzB,MAAMG,WAAWb;IACjB,IAAIa,aAAaZ,SAASa,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACN;oBAAMS,OAAM;oBAAIC,QAAO;oBAAK,GAAGL,SAAS;mCAEzC,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;YAE7C,KAAK;gBACH,qBAAO,oBAACT;oBAASc,QAAO;oBAAIC,MAAAA;oBAAM,GAAGN,SAAS;;YAChD,KAAK;gBACH,qBAAO,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;QACpD;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACN;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGL,SAAS;+BAEzC,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;QAEtC,KAAK;YACH,qBAAO,oBAACT;gBAASc,QAAO;gBAAIC,MAAAA;gBAAM,GAAGN,SAAS;;QAChD,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;IAC7C;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMO,SAAS,CAAC,EACrBT,MAAO,UAAS,EAChBC,MAAO,UAAS,EAChBS,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,MAAK,EACLC,WAAU,EACVC,UAAS,EACTC,UAAS,EACT,GAAGd,WACS;IACZ,MAAME,WAAWb;IAEjB,qBACE,oBAAC0B;QACE,GAAGf,SAAS;QACbgB,KAAKJ;QACLE,WAAW5B,WACTU,MAAM,CAAC,SAAS,EAChBM,aAAaZ,SAASa,OAAOP,MAAM,CAAC,cAAc,EAClD;YACEqB,SAASrB,MAAM,CAAC,uBAAuB;YACvCsB,WAAWtB,MAAM,CAAC,yBAAyB;YAC3CuB,UAAUvB,MAAM,CAAC,wBAAwB;QAC3C,CAAC,CAACE,KAAK,EACPV,qBAAqBsB,cAAcd,MAAM,CAAC,aAAa,EACvDT,aAAasB,aAAab,MAAM,CAAC,wBAAwB,EACzDkB;qBAGF,oBAACM;QAAIN,WAAWlB,MAAM,CAAC,eAAe;qBACpC,oBAACC;QACCiB,WAAWlB,MAAM,CAAC,kBAAkB;QACpCyB,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW5B,WACTU,MAAM,CAAC,qBAAqB,EAC5BiB,aAAajB,MAAM,CAAC,gCAAgC;OAGrDY,WAEFrB,aAAauB,4BACZ,oBAACnB;QAASuB,WAAWlB,MAAM,CAAC,oBAAoB;QAAES,QAAO;OACtDK,aAKNvB,aAAasB,2BACZ,oBAACf;QAAQoB,WAAWlB,MAAM,CAAC,mBAAmB;QAAEyB,WAAU;OACvDZ,YAKNtB,aAAawB,wBACZ,oBAAClB;QAAUqB,WAAWlB,MAAM,CAAC,gBAAgB;QAAEyB,WAAU;OACtDV;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":"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"}

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

@@ -29,15 +29,11 @@
   overflow: hidden;
 }
 
-.Header__content-in--multiline {
+.Header__content--multiline {
   white-space: initial;
   word-break: break-word;
 }
 
-.Header--multiline {
-  white-space: normal;
-}
-
 .Header__subtitle {
   display: block;
   color: var(--vkui--color_text_secondary);
@@ -147,8 +143,9 @@
 }
 
 @media (max-width: 767.9px) {
-  :global(.vkuiInternalGroup--mode-none):not(:first-of-type) > .Header:first-child,
-  :global(.vkuiInternalGroup--mode-none):not(:first-of-type)
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
+    > .Header:first-child,
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none):not(:first-of-type)
     > :global(.vkuiInternalTappable):first-child
     > .Header {
     margin-top: -16px;
@@ -163,8 +160,9 @@
 }
 
 @media (min-width: 768px) {
-  :global(.vkuiInternalGroup--mode-none) > .Header:not(.Header--mode-tertiary):first-child,
-  :global(.vkuiInternalGroup--mode-none)
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
+    > .Header:not(.Header--mode-tertiary):first-child,
+  :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
     > :global(.vkuiInternalTappable):first-child
     > .Header:not(.Header--mode-tertiary) {
     margin-top: -4px;

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js

@@ -151,12 +151,7 @@ function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrol
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
         className: classNames(styles['HorizontalScroll'], 'vkuiInternalHorizontalScroll', showArrows === 'always' && styles['HorizontalScroll--withConstArrows'], className)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['HorizontalScroll__in'],
-        ref: scrollerRef
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['HorizontalScroll__in-wrapper']
-    }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(ScrollArrow, {
+    }, showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(ScrollArrow, {
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "left",
@@ -168,7 +163,12 @@ function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrol
         direction: "right",
         className: classNames(styles['HorizontalScroll__arrow'], styles['HorizontalScroll__arrowRight']),
         onClick: scrollToRight
-    }));
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles['HorizontalScroll__in'],
+        ref: scrollerRef
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['HorizontalScroll__in-wrapper']
+    }, children)));
 };
 
 //# sourceMappingURL=HorizontalScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","ScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","offsetY","direction","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","ScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","undefined","size","offsetY","direction","onClick","ref"],"mappings":"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"}

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

@@ -6,6 +6,7 @@
    * `overflow-y` мы не трогаем, т.к. из-за `hidden` могут обрезаться тени у потомков.
    */
   overflow-x: hidden;
+  isolation: isolate;
 }
 
 .HorizontalScroll__in {
@@ -28,6 +29,7 @@
 }
 
 .HorizontalScroll__arrow {
+  z-index: var(--vkui_internal--z_index_horizontal_scroll_arrow);
   position: absolute;
   top: 0;
   opacity: 0;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { HasRef, HasRootRef } from '../../types';
+import type { HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
 import { type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
@@ -15,7 +15,7 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
      *
      * > ⚠️ Использование кастомного размера – это пограничный кейс.
      */
-    size?: ImageBaseSize | number;
+    size?: LiteralUnion<ImageBaseSize, number>;
     /**
      * Включает или отключает обводку.
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAAkC,kCAAkC;AAC3F,SAASC,gBAAgB,QAAoC,sCAAsC;AACnG,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,eAAe;AAClE,OAAOC,YAAY,yBAAyB;AAU5C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AAEnB,SAASN,gBAAgB,GAAG;AAkC5B;;CAEC,GACD,OAAO,MAAMO,YAAY,CAAC,EACxBC,IAAG,EACHC,YAAW,EACXC,SAAQ,EACRC,QAAO,EACPC,eAAc,EACdC,MAAK,EACLC,IAAG,EACHC,OAAM,EACNC,OAAM,EACNC,OAAM,EACNC,MAAO,GAAE,EACTC,MAAK,EACLC,OAAM,EACNC,MAAK,EACLC,UAAS,EACTC,WAAU,EACVC,YAAa,KAAI,EACjB,gBAAgBC,iBAAgB,EAChCC,SAAQ,EACR,cAAcC,UAAS,EACvBC,QAAO,EACPC,OAAM,EACNC,QAAO,EACP,GAAGC,WACY;IACf,MAAM,CAACC,QAAQC,UAAU,GAAGrC,MAAMsC,SAAS;IAC3C,MAAM,CAACC,QAAQC,UAAU,GAAGxC,MAAMsC,SAAS;IAE3C,MAAMG,SAASvB,OAAOC;IACtB,MAAMuB,uBAAuB,AAACH,CAAAA,UAAU,CAACE,MAAK,mBAAMzC,MAAM2C,eAAed;IAEzE,MAAMe,eAAeF,uBAAuBb,mBAAmB;IAE/D,IAAIgB,QAAQC,IAAIC,aAAa,eAAe;QAC1CzC,aAAagB;QACb,IAAIsB,cAAc;YAChBvC,qBAAqBiB,MAAM;gBAAE0B,MAAM;gBAAgBC,OAAOL;YAAa;QACzE;IACF;IAEA,MAAMM,kBAAkB,CAACC;QACvBd,UAAU;QACVG,UAAU;QACVP,SAASkB;IACX;IAEA,MAAMC,mBAAmB,CAACD;QACxBd,UAAU;QACVG,UAAU;QACVN,UAAUiB;IACZ;IAEA,MAAME,gBAAgB,AAAC,CAAA;QACrB,OAAQ/B;YACN,KAAK;gBACH,OAAOf,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;QACvC;QAEA,OAAO;IACT,CAAA;IAEA,qBACE,oBAACH,iBAAiBkD;QAASL,OAAO;YAAE3B;QAAK;qBACvC,oBAACiC;QACE,GAAGpB,SAAS;QACbqB,KAAK7B;QACLF,OAAO;YAAE,GAAGA,KAAK;YAAEF,OAAOD;YAAME,QAAQF;QAAK;QAC7CI,WAAWzB,WACTyB,WACAnB,MAAM,CAAC,YAAY,EACnB8C,eACAjB,UAAU7B,MAAM,CAAC,oBAAoB;QAEvCkD,MAAMhB,SAAS,QAAQ;QACvBiB,cAAY3B;QACZC,SAASA;OAERS,wBACC,oBAACkB;QACCH,KAAKnC;QACLT,KAAKA;QACLc,WAAWnB,MAAM,CAAC,iBAAiB;QACnCM,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,KAAKA;QACLC,QAAQA;QACRC,QAAQA;QACRG,OAAOA;QACPC,QAAQA;QACRS,QAAQiB;QACRhB,SAASkB;QAGZR,8BACC,oBAACW;QAAI7B,WAAWzB,WAAWM,MAAM,CAAC,sBAAsB;OAAIqC,eAE7Dd,UACAF,4BAAc,oBAAC2B;QAAIK,eAAAA;QAAYlC,WAAWnB,MAAM,CAAC,oBAAoB;;AAI9E,EAAE;AAEFI,UAAUkD,QAAQ3D;AAElBS,UAAUmD,UAAU3D"}

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

@@ -196,7 +196,8 @@ const TOUCH_MOVE_EVENT_PARAMS = {
         onEnd: onTouchEnd,
         className: classNames(styles['PullToRefresh'], platform === Platform.IOS && styles['PullToRefresh--ios'], watching && styles['PullToRefresh--watching'], refreshing && styles['PullToRefresh--refreshing'], className)
     }, /*#__PURE__*/ React.createElement(FixedLayout, {
-        className: styles['PullToRefresh__controls']
+        className: styles['PullToRefresh__controls'],
+        useParentWidth: true
     }, /*#__PURE__*/ React.createElement(PullToRefreshSpinner, {
         style: {
             transform: spinnerTransform,

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']}>\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']} 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/ScreenSpinner/ScreenSpinner.js

@@ -20,18 +20,18 @@ import styles from './ScreenSpinner.module.css';
     useScrollLock();
     return /*#__PURE__*/ React.createElement(PopoutWrapper, {
         hasMask: false,
-        className: classNames(styles['ScreenSpinner'], hideSpinner && styles['ScreenSpinner--hideSpinner'], state === 'cancelable' && styles['ScreenSpinner--state-cancelable'], state === 'done' && styles['ScreenSpinner--state-done'], className),
+        className: classNames(styles['ScreenSpinner'], state === 'cancelable' && styles['ScreenSpinner--clickable'], className),
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['ScreenSpinner__container'],
         onClick: onClick
     }, /*#__PURE__*/ React.createElement(Spinner, {
-        className: styles['ScreenSpinner__spinner'],
+        className: classNames(styles['ScreenSpinner__spinner'], hideSpinner && styles['ScreenSpinner__spinner--hidden']),
         size: size,
         "aria-label": ariaLabel,
         ...restProps
     }), /*#__PURE__*/ React.createElement("div", {
-        className: styles['ScreenSpinner__icon']
+        className: classNames(styles['ScreenSpinner__icon'], state === 'done' && styles['ScreenSpinner__icon--state-done'])
     }, /*#__PURE__*/ React.createElement(Icon, null))));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        hideSpinner && styles['ScreenSpinner--hideSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--state-cancelable'],\n        state === 'done' && styles['ScreenSpinner--state-done'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={styles['ScreenSpinner__spinner']}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div className={styles['ScreenSpinner__icon']}>\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","hasMask","div","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,MAAK,EACLC,UAAS,EACTC,OAAQ,UAAS,EACjBC,MAAO,QAAO,EACd,cAAcC,YAAY,0BAA0B,CAAA,EACpDC,QAAO,EACP,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,oBAACC;QACCmB,SAAS;QACTZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBS,eAAeT,MAAM,CAAC,6BAA6B,EACnDI,UAAU,gBAAgBJ,MAAM,CAAC,kCAAkC,EACnEI,UAAU,UAAUJ,MAAM,CAAC,4BAA4B,EACvDG;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,WAAWH,MAAM,CAAC,2BAA2B;QAAEO,SAASA;qBAC3D,oBAACV;QACCM,WAAWH,MAAM,CAAC,yBAAyB;QAC3CK,MAAMA;QACNY,cAAYX;QACX,GAAGE,SAAS;sBAEf,oBAACQ;QAAIb,WAAWH,MAAM,CAAC,sBAAsB;qBAC3C,oBAACU;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--clickable'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={classNames(\n            styles['ScreenSpinner__spinner'],\n            hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n          )}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div\n          className={classNames(\n            styles['ScreenSpinner__icon'],\n            state === 'done' && styles['ScreenSpinner__icon--state-done'],\n          )}\n        >\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","hasMask","div","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,MAAK,EACLC,UAAS,EACTC,OAAQ,UAAS,EACjBC,MAAO,QAAO,EACd,cAAcC,YAAY,0BAA0B,CAAA,EACpDC,QAAO,EACP,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,oBAACC;QACCmB,SAAS;QACTZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBI,UAAU,gBAAgBJ,MAAM,CAAC,2BAA2B,EAC5DG;QAEFD,OAAOA;qBAEP,oBAACc;QAAIb,WAAWH,MAAM,CAAC,2BAA2B;QAAEO,SAASA;qBAC3D,oBAACV;QACCM,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCS,eAAeT,MAAM,CAAC,iCAAiC;QAEzDK,MAAMA;QACNY,cAAYX;QACX,GAAGE,SAAS;sBAEf,oBAACQ;QACCb,WAAWT,WACTM,MAAM,CAAC,sBAAsB,EAC7BI,UAAU,UAAUJ,MAAM,CAAC,kCAAkC;qBAG/D,oBAACU;AAKX,EAAE"}

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

@@ -2,17 +2,17 @@
   animation: vkui-screen-spinner-intro 0.3s ease;
 }
 
-.ScreenSpinner--state-cancelable {
+.ScreenSpinner--clickable {
   cursor: pointer;
 }
 
 .ScreenSpinner__spinner {
   opacity: 1;
+  transition: opacity 0.1s ease;
 }
 
-.ScreenSpinner--hideSpinner .ScreenSpinner__spinner {
+.ScreenSpinner__spinner--hidden {
   opacity: 0;
-  transition: opacity 0.1s ease;
 }
 
 .ScreenSpinner__container {
@@ -39,7 +39,7 @@
   animation: vkui-screen-spinner-intro 0.2s ease;
 }
 
-.ScreenSpinner--state-done .ScreenSpinner__icon :global(.vkuiIcon) path {
+.ScreenSpinner__icon--state-done :global(.vkuiIcon) path {
   stroke-dasharray: 50;
   stroke-dashoffset: 50;
   animation: vkui-screen-spinner-iconDone 0.6s 0.3s var(--vkui--animation_easing_platform) forwards;

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

@@ -4,4 +4,4 @@ export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: ({ children, options, popupDirection, renderOption, allowClearButton, ClearButton, ...props }: SelectProps) => React.JSX.Element;
+export declare const Select: ({ children, ...props }: SelectProps) => React.JSX.Element;

package/dist/cssm/components/Select/Select.js

@@ -4,16 +4,11 @@ import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
- */ export const Select = ({ children , options =[] , popupDirection , renderOption , allowClearButton , ClearButton , ...props })=>{
+ */ export const Select = ({ children , ...props })=>{
+    const { options =[] , searchable , emptyText , onInputChange , filterFn , popupDirection , renderOption , renderDropdown , fetching , onClose , onOpen , icon , ClearButton , allowClearButton , dropdownOffsetDistance , fixDropdownWidth , forceDropdownPortal , selectType , autoHideScrollbar , autoHideScrollbarDelay , ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936
+     } = props;
     const hasPointer = useAdaptivityHasPointer();
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, {
-        options: options,
-        popupDirection: popupDirection,
-        renderOption: renderOption,
-        allowClearButton: allowClearButton,
-        ClearButton: ClearButton,
-        ...props
-    }), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, props, options.map(({ label , value  })=>/*#__PURE__*/ React.createElement("option", {
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, props), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, nativeProps, options.map(({ label , value  })=>/*#__PURE__*/ React.createElement("option", {
             value: value,
             key: `${value}`
         }, label))));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n  children,\n  options = [],\n  popupDirection,\n  renderOption,\n  allowClearButton,\n  ClearButton,\n  ...props\n}: SelectProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && (\n        <CustomSelect\n          options={options}\n          popupDirection={popupDirection}\n          renderOption={renderOption}\n          allowClearButton={allowClearButton}\n          ClearButton={ClearButton}\n          {...props}\n        />\n      )}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...props}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","options","popupDirection","renderOption","allowClearButton","ClearButton","props","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,SAAQ,EACRC,SAAU,EAAE,CAAA,EACZC,eAAc,EACdC,aAAY,EACZC,iBAAgB,EAChBC,YAAW,EACX,GAAGC,OACS;IACZ,MAAMC,aAAaX;IAEnB,qBACE,oBAACD,MAAMa,gBACJ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBACrC,oBAACV;QACCI,SAASA;QACTC,gBAAgBA;QAChBC,cAAcA;QACdC,kBAAkBA;QAClBC,aAAaA;QACZ,GAAGC,KAAK;QAGZ,AAACC,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACT,cAAiBQ,OACfL,QAAQS,IAAI,CAAC,EAAEC,MAAK,EAAEC,MAAK,EAAE,iBAC5B,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,CAAC,EAAEF,MAAM,CAAC;WAClCD;AAOf,EAAE"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({ children, ...props }: SelectProps) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    dropdownOffsetDistance,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    selectType,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    ...nativeProps // TODO: https://github.com/Microsoft/TypeScript/issues/12936\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","nativeProps","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,SAAQ,EAAE,GAAGC,OAAoB;IACxD,MAAM,EACJC,SAAU,EAAE,CAAA,EACZC,WAAU,EACVC,UAAS,EACTC,cAAa,EACbC,SAAQ,EACRC,eAAc,EACdC,aAAY,EACZC,eAAc,EACdC,SAAQ,EACRC,QAAO,EACPC,OAAM,EACNC,KAAI,EACJC,YAAW,EACXC,iBAAgB,EAChBC,uBAAsB,EACtBC,iBAAgB,EAChBC,oBAAmB,EACnBC,WAAU,EACVC,kBAAiB,EACjBC,uBAAsB,EACtB,GAAGC,YAAY,6DAA6D;MAC7E,GAAGrB;IAEJ,MAAMsB,aAAa3B;IAEnB,qBACE,oBAACD,MAAM6B,gBACJ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBAAM,oBAAC1B,cAAiBI,QAC9D,AAACsB,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACzB,cAAiBwB,aACfpB,QAAQwB,IAAI,CAAC,EAAEC,MAAK,EAAEC,MAAK,EAAE,iBAC5B,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,CAAC,EAAEF,MAAM,CAAC;WAClCD;AAOf,EAAE"}