@vkontakte/vkui 5.5.1 → 5.5.3

package/dist/components/FormItem/FormItem.js

@@ -16,7 +16,7 @@ var sizeYClassNames = _define_property({
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */ export var FormItem = function(_param) {
-    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties(_param, [
+    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, restProps = _object_without_properties(_param, [
         "children",
         "top",
         "bottom",
@@ -26,12 +26,15 @@ var sizeYClassNames = _define_property({
         "onRemove",
         "removePlaceholder",
         "getRootRef",
-        "className"
+        "className",
+        "htmlFor"
     ]);
     var rootEl = useExternRef(getRootRef);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var wrappedChildren = /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(top) && /*#__PURE__*/ React.createElement(Subhead, {
-        className: "vkuiFormItem__top"
+        className: "vkuiFormItem__top",
+        Component: htmlFor ? "label" : "h5",
+        htmlFor: htmlFor
     }, top), children, hasReactNode(bottom) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiFormItem__bottom"
     }, bottom));

package/dist/components/FormItem/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,kBAEJ;IADAC,MAAMV,uCAA2C;GAChDK,SAASM,SAAUX,0CAElB;AAoBJ;;CAEC,GACD,OAAO,IAAMY,WAAW;QACtBC,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWjB,0DACXkB,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASpB,aAAaiB;IAC5B,IAA2BlB,iBAAAA,wCAAAA,eAAnBsB,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,oBAAC3B,MAAM4B,gBACJ1B,aAAaa,sBAAQ,oBAACN;QAAQc,SAAS;OAA4BR,MACnED,UACAZ,aAAac,yBAAW,oBAACR;QAASe,SAAS;OAA+BP;IAI/E,qBACE,oBAACE,mDACKM;QACJK,KAAKJ;QACLF,WAAWtB,2BAET,wBACAgB,WAAW,aACT,CAAA;YACEa,OAAO7B,yCAEL;YAEF8B,OAAO9B,yCAEL;QAEJ,CAAA,CAAC,CAACgB,OAAO,EACXS,UAAUpB,SAAS0B,WAAWtB,eAAe,CAACgB,MAAM,EACpDxB,aAAaa,QACXd,oCAAwC,kCAC1CkB,aAAalB,sCAA0C,oCACvDsB;QAGDJ,0BACC,oBAACZ;QACC0B,OAAM;QACNb,UAAU,SAACc;YACT,IAAIT,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU;YACrB;QACF;QACAd,mBAAmBA;QACnBe,QAAQjB,cAAc;qBAEtB,oBAACkB;QACCd,WAAWtB,sCAA0C;OAEpD0B,oBAILA;AAIR,EAAE"}
+{"version":3,"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,kBAEJ;IADAC,MAAMV,uCAA2C;GAChDK,SAASM,SAAUX,0CAElB;AAoBJ;;CAEC,GACD,OAAO,IAAMY,WAAW;QACtBC,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWjB,0DACXkB,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASrB,aAAaiB;IAC5B,IAA2BlB,iBAAAA,wCAAAA,eAAnBuB,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,oBAAC5B,MAAM6B,gBACJ3B,aAAaa,sBACZ,oBAACN;QACCc,SAAS;QACTL,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAZ,aAAac,yBAAW,oBAACR;QAASe,SAAS;OAA+BP;IAI/E,qBACE,oBAACE,mDACKO;QACJK,KAAKJ;QACLH,WAAWtB,2BAET,wBACAgB,WAAW,aACT,CAAA;YACEc,OAAO9B,yCAEL;YAEF+B,OAAO/B,yCAEL;QAEJ,CAAA,CAAC,CAACgB,OAAO,EACXU,UAAUrB,SAAS2B,WAAWvB,eAAe,CAACiB,MAAM,EACpDzB,aAAaa,QACXd,oCAAwC,kCAC1CkB,aAAalB,sCAA0C,oCACvDsB;QAGDJ,0BACC,oBAACZ;QACC2B,OAAM;QACNd,UAAU,SAACe;YACT,IAAIT,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQU,SAAS;gBACnBhB,SAASe,GAAGT,OAAOU;YACrB;QACF;QACAf,mBAAmBA;QACnBgB,QAAQlB,cAAc;qBAEtB,oBAACmB;QACCf,WAAWtB,sCAA0C;OAEpD2B,oBAILA;AAIR,EAAE"}

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -181,12 +181,7 @@ function doScroll(param) {
     ]);
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
         className: classNames("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", showArrows === "always" && "vkuiHorizontalScroll--withConstArrows", className)
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiHorizontalScroll__in",
-        ref: scrollerRef
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiHorizontalScroll__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",
@@ -198,7 +193,12 @@ function doScroll(param) {
         direction: "right",
         className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
         onClick: scrollToRight
-    }));
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHorizontalScroll__in",
+        ref: scrollerRef
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHorizontalScroll__in-wrapper"
+    }, children)));
 };
 
 //# sourceMappingURL=HorizontalScroll.js.map

package/dist/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","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","useState","canScrollLeft","setCanScrollLeft","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","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","useState","canScrollLeft","setCanScrollLeft","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/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/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","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","useState","loaded","setLoaded","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","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","useState","loaded","setLoaded","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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"}

package/dist/components/ModalCard/ModalCard.d.ts

@@ -6,4 +6,4 @@ export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
-export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, className, size, ...restProps }: ModalCardProps) => React.JSX.Element;
+export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, className, size, getRootRef, ...restProps }: ModalCardProps) => React.JSX.Element;

package/dist/components/ModalCard/ModalCard.js

@@ -19,7 +19,7 @@ var warn = warnOnce("ModalCard");
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */ export var ModalCard = function(_param) {
-    var icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, nav = _param.nav, id = _param.id, className = _param.className, size = _param.size, restProps = _object_without_properties(_param, [
+    var icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, nav = _param.nav, id = _param.id, className = _param.className, size = _param.size, getRootRef = _param.getRootRef, restProps = _object_without_properties(_param, [
         "icon",
         "header",
         "subheader",
@@ -29,7 +29,8 @@ var warn = warnOnce("ModalCard");
         "nav",
         "id",
         "className",
-        "size"
+        "size",
+        "getRootRef"
     ]);
     var isDesktop = useAdaptivityWithJSMediaQueries().isDesktop;
     var platform = usePlatform();
@@ -39,6 +40,7 @@ var warn = warnOnce("ModalCard");
         id: id
     }, warn), ModalType.CARD).refs;
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        ref: getRootRef,
         id: id,
         className: classNames("vkuiModalCard", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCard--desktop", className)
     }), /*#__PURE__*/ React.createElement(ModalCardBase, {

package/dist/components/ModalCard/ModalCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  size,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","ModalType","platformClassNames","ios","android","vkcom","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","restProps","isDesktop","platform","modalContext","useContext","refs","CARD","div","hasOwnProperty","getRootRef","innerElement"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAA4B,iCAAiC;AACnF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMU,YAAY;QACvBC,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,mBAAAA,WACAC,cAAAA,MACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAczB,kCAAdyB;IACR,IAAMC,WAAWzB;IAEjB,IAAM0B,eAAe7B,MAAM8B,WAAWvB;IACtC,IAAM,AAAEwB,OAASvB,iBAAiBJ,SAAS;QAAEkB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOL,UAAUuB,MAAjED;IAER,qBACE,oBAACE,+CACKP;QACJH,IAAIA;QACJC,WAAWvB,4BAETS,mBAAmBwB,eAAeN,YAC9BlB,kBAAkB,CAACkB,SAAS,GAC5BlB,mBAAmBE,SACvBe,uCACAH;sBAGF,oBAAClB;QACCkB,SAAS;QACTW,YAAYJ,KAAKK;QACjBpB,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWQ,aAAaR;QACjCI,MAAMA;OAELN;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  size,\n  getRootRef,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","ModalType","platformClassNames","ios","android","vkcom","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","platform","modalContext","useContext","refs","CARD","div","ref","hasOwnProperty","innerElement"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAA4B,iCAAiC;AACnF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMU,YAAY;QACvBC,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,mBAAAA,WACAC,cAAAA,MACAC,oBAAAA,YACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAc1B,kCAAd0B;IACR,IAAMC,WAAW1B;IAEjB,IAAM2B,eAAe9B,MAAM+B,WAAWxB;IACtC,IAAM,AAAEyB,OAASxB,iBAAiBJ,SAAS;QAAEkB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOL,UAAUwB,MAAjED;IAER,qBACE,oBAACE,+CACKP;QACJQ,KAAKT;QACLH,IAAIA;QACJC,WAAWvB,4BAETS,mBAAmB0B,eAAeP,YAC9BnB,kBAAkB,CAACmB,SAAS,GAC5BnB,mBAAmBE,SACvBgB,uCACAJ;sBAGF,oBAAClB;QACCkB,SAAS;QACTE,YAAYM,KAAKK;QACjBrB,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWS,aAAaT;QACjCI,MAAMA;OAELN;AAIT,EAAE"}

package/dist/components/PanelHeader/LegacyPanelHeaderContent.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { HasComponent } from '../../types';
+export interface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {
+}
+/**
+ * TODO [>=6]: Удалить подкомпонент
+ * @deprecated
+ */
+export declare const LegacyPanelHeaderContent: {
+    ({ children, Component, id, }: LegacyPanelHeaderContentProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/PanelHeader/LegacyPanelHeaderContent.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { usePlatform } from "../../hooks/usePlatform";
+import { Platform } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
+import { Text } from "../Typography/Text/Text";
+var warn = warnOnce("PanelHeader");
+/**
+ * TODO [>=6]: Удалить подкомпонент
+ * @deprecated
+ */ export var LegacyPanelHeaderContent = function(param) {
+    var children = param.children, _param_Component = param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, id = param.id;
+    if (process.env.NODE_ENV === "development") {
+        warn("Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.");
+    }
+    var platform = usePlatform();
+    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
+        weight: "2",
+        Component: Component,
+        id: id
+    }, children) : /*#__PURE__*/ React.createElement(Component, {
+        className: "vkuiPanelHeader__content-in",
+        id: id
+    }, children);
+};
+LegacyPanelHeaderContent.displayName = "LegacyPanelHeaderContent";
+
+//# sourceMappingURL=LegacyPanelHeaderContent.js.map

package/dist/components/PanelHeader/LegacyPanelHeaderContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelHeader/LegacyPanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nexport interface LegacyPanelHeaderContentProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nexport const LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n"],"names":["React","usePlatform","Platform","warnOnce","Text","warn","LegacyPanelHeaderContent","children","Component","id","process","env","NODE_ENV","platform","VKCOM","weight","className","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,IAAI,QAAQ,0BAA0B;AAO/C,IAAMC,OAAOF,SAAS;AAEtB;;;CAGC,GACD,OAAO,IAAMG,2BAA2B;QACtCC,iBAAAA,mCACAC,WAAAA,0CAAY,2BACZC,WAAAA;IAEA,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1CP,KACE;IAEJ;IAEA,IAAMQ,WAAWZ;IAEjB,OAAOY,aAAaX,SAASY,sBAC3B,oBAACV;QAAKW,QAAO;QAAIP,WAAWA;QAAWC,IAAIA;OACxCF,0BAGH,oBAACC;QAAUQ,SAAS;QAAqCP,IAAIA;OAC1DF;AAGP,EAAE;AAEFD,yBAAyBW,cAAc"}

package/dist/components/PanelHeader/PanelHeader.d.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { HasComponent, HasRef, HasRootRef } from '../../types';
 export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     before?: React.ReactNode;
+    /**
+     * Добавляет элемент справа.
+     *
+     * При передаче нескольких элементов, расставляет отступы между ними.
+     */
     after?: React.ReactNode;
     separator?: boolean;
     transparent?: boolean;
@@ -25,10 +30,7 @@ export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>,
 export declare const PanelHeader: {
     ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, typographyProps, ...restProps }: PanelHeaderProps): React.JSX.Element;
     Content: {
-        ({ children, Component, id, }: LegacyPanelHeaderContentProps): React.JSX.Element;
+        ({ children, Component, id, }: import("./LegacyPanelHeaderContent").LegacyPanelHeaderContentProps): React.JSX.Element;
         displayName: string;
     };
 };
-interface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {
-}
-export {};

package/dist/components/PanelHeader/PanelHeader.js

@@ -8,7 +8,6 @@ import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditi
 import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
-import { warnOnce } from "../../lib/warnOnce";
 import { useConfigProvider, WebviewType } from "../ConfigProvider/ConfigProviderContext";
 import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { ModalRootContext } from "../ModalRoot/ModalRootContext";
@@ -16,6 +15,7 @@ import { Separator } from "../Separator/Separator";
 import { Spacing } from "../Spacing/Spacing";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
 import { Text } from "../Typography/Text/Text";
+import { LegacyPanelHeaderContent } from "./LegacyPanelHeaderContent";
 var platformClassNames = {
     ios: classNames("vkuiPanelHeader--ios", "vkuiInternalPanelHeader--ios"),
     android: classNames("vkuiPanelHeader--android", "vkuiInternalPanelHeader--android"),
@@ -107,26 +107,6 @@ var PanelHeaderIn = function(param) {
         size: 16
     })));
 };
-var warn = warnOnce("PanelHeader");
-/**
- * TODO [>=6]: Удалить подкомпонент
- * @deprecated
- */ var LegacyPanelHeaderContent = function(param) {
-    var children = param.children, _param_Component = param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, id = param.id;
-    if (process.env.NODE_ENV === "development") {
-        warn("Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.");
-    }
-    var platform = usePlatform();
-    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
-        weight: "2",
-        Component: Component,
-        id: id
-    }, children) : /*#__PURE__*/ React.createElement(Component, {
-        className: "vkuiPanelHeader__content-in",
-        id: id
-    }, children);
-};
-LegacyPanelHeaderContent.displayName = "LegacyPanelHeaderContent";
 PanelHeader.Content = LegacyPanelHeaderContent;
 
 //# sourceMappingURL=PanelHeader.js.map

package/dist/components/PanelHeader/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\ninterface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nconst LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","warnOnce","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","isInsideModal","useContext","platform","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","VKCOM","weight","className","Fragment","fixed","div","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","warn","id","process","env","NODE_ENV","Content"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport { LegacyPanelHeaderContent } from './LegacyPanelHeaderContent';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","LegacyPanelHeaderContent","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","isInsideModal","useContext","platform","typographyNode","isValidElement","type","displayName","VKCOM","weight","className","Fragment","fixed","div","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","Content"],"mappings":"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"}

package/dist/components/PullToRefresh/PullToRefresh.js

@@ -208,7 +208,8 @@ var TOUCH_MOVE_EVENT_PARAMS = {
         onEnd: onTouchEnd,
         className: classNames("vkuiPullToRefresh", platform === Platform.IOS && "vkuiPullToRefresh--ios", watching && "vkuiPullToRefresh--watching", refreshing && "vkuiPullToRefresh--refreshing", className)
     }), /*#__PURE__*/ React.createElement(FixedLayout, {
-        className: "vkuiPullToRefresh__controls"
+        className: "vkuiPullToRefresh__controls",
+        useParentWidth: true
     }, /*#__PURE__*/ React.createElement(PullToRefreshSpinner, {
         style: {
             transform: spinnerTransform,

package/dist/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","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","useState","spinnerY","setSpinnerY","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","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","useState","spinnerY","setSpinnerY","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/components/ScreenSpinner/ScreenSpinner.js

@@ -31,17 +31,17 @@ import { Icon48DoneOutline } from "./Icon48DoneOutline";
     useScrollLock();
     return /*#__PURE__*/ React.createElement(PopoutWrapper, {
         hasMask: false,
-        className: classNames("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", state === "cancelable" && "vkuiScreenSpinner--state-cancelable", state === "done" && "vkuiScreenSpinner--state-done", className),
+        className: classNames("vkuiScreenSpinner", state === "cancelable" && "vkuiScreenSpinner--clickable", className),
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiScreenSpinner__container",
         onClick: onClick
     }, /*#__PURE__*/ React.createElement(Spinner, _object_spread({
-        className: "vkuiScreenSpinner__spinner",
+        className: classNames("vkuiScreenSpinner__spinner", hideSpinner && "vkuiScreenSpinner__spinner--hidden"),
         size: size,
         "aria-label": ariaLabel
     }, restProps)), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiScreenSpinner__icon"
+        className: classNames("vkuiScreenSpinner__icon", state === "done" && "vkuiScreenSpinner__icon--state-done")
     }, /*#__PURE__*/ React.createElement(Icon, null))));
 };