@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/cjs/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","className","restProps","React","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","usePlatform","setExternalRef","useExternRef","modifiers","useMemo","offset","push","usePopper","current","popperStyles","attributes","resolvedPlacement","isEdgePlacement","includes","useIsomorphicLayoutEffect","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","classNamesString","getPlatformClassName","minWidth","scrollWidth","undefined"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { usePopper, Modifier } from \"react-popper\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { PopperArrow } from \"../PopperArrow/PopperArrow\";\nimport { HasRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Popper.module.css\";\n\nexport type Placement =\n  | \"auto\"\n  | \"auto-start\"\n  | \"auto-end\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\";\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: \"preventOverflow\",\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: \"flip\",\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: \"arrow\",\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: \"sameWidth\",\n  enabled: true,\n  phase: \"beforeWrite\",\n  requires: [\"computeStyles\"],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = \"bottom-start\",\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(\n    null\n  );\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =\n    React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: \"offset\",\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const {\n    styles: popperStyles,\n    state,\n    attributes,\n  } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement =\n    !!resolvedPlacement && resolvedPlacement.includes(\"-\"); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith(\"bottom\") ||\n        resolvedPlacement?.startsWith(\"top\")\n          ? \"vertical\"\n          : \"horizontal\";\n\n      const arrowSize =\n        placementDirection === \"vertical\" ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === \"vertical\"\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      className={classNamesString(\n        styles[\"Popper\"],\n        getPlatformClassName(styles[\"Popper\"], platform),\n        className\n      )}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...popperStyles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={popperStyles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles[\"Popper__content\"] })\n      ) : (\n        <div className={styles[\"Popper__content\"]}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles[\"PopperPortal\"]}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popper.js","names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","className","restProps","React","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","usePlatform","setExternalRef","useExternRef","modifiers","useMemo","offset","push","usePopper","current","popperStyles","attributes","resolvedPlacement","isEdgePlacement","includes","useIsomorphicLayoutEffect","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","classNames","getPlatformClassName","minWidth","scrollWidth","undefined"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopper, Modifier } from 'react-popper';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { PopperArrow } from '../PopperArrow/PopperArrow';\nimport { HasRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: 'preventOverflow',\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: 'flip',\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: 'arrow',\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(null);\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: 'offset',\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const {\n    styles: popperStyles,\n    state,\n    attributes,\n  } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith('bottom') || resolvedPlacement?.startsWith('top')\n          ? 'vertical'\n          : 'horizontal';\n\n      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === 'vertical'\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      className={classNames(\n        styles['Popper'],\n        getPlatformClassName(styles['Popper'], platform),\n        className,\n      )}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...popperStyles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={popperStyles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/PopperArrow/PopperArrow.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import * as React from 'react';
 export interface PopperArrowProps {
     style?: React.CSSProperties;
     attributes?: React.HTMLAttributes<HTMLDivElement> | null;
     arrowClassName?: string;
 }
-export declare const PopperArrow: ({ style, attributes, arrowClassName, }: PopperArrowProps) => JSX.Element;
+export declare const PopperArrow: ({ style, attributes, arrowClassName }: PopperArrowProps) => JSX.Element;

package/dist/cjs/components/PopperArrow/PopperArrow.js

@@ -9,7 +9,7 @@ exports.PopperArrow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["className"];
 var PopperArrow = function PopperArrow(_ref) {
   var style = _ref.style,
@@ -21,10 +21,10 @@ var PopperArrow = function PopperArrow(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     style: style
   }, restAttributes, {
-    className: (0, _classNames.classNamesString)("vkuiPopperArrow", arrowWrapperClassName),
+    className: (0, _vkjs.classNames)("vkuiPopperArrow", arrowWrapperClassName),
     "data-popper-arrow": true
   }), /*#__PURE__*/React.createElement("svg", {
-    className: (0, _classNames.classNamesString)("vkuiPopperArrow__in", arrowClassName),
+    className: (0, _vkjs.classNames)("vkuiPopperArrow__in", arrowClassName),
     width: "20",
     height: "8",
     viewBox: "0 0 20 8",

package/dist/cjs/components/PopperArrow/PopperArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["PopperArrow","style","attributes","arrowClassName","arrowWrapperClassName","className","restAttributes","classNamesString"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./PopperArrow.module.css\";\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({\n  style,\n  attributes,\n  arrowClassName,\n}: PopperArrowProps) => {\n  const { className: arrowWrapperClassName, ...restAttributes } =\n    attributes ?? {};\n  return (\n    <div\n      style={style}\n      {...restAttributes}\n      className={classNamesString(styles[\"PopperArrow\"], arrowWrapperClassName)}\n      data-popper-arrow={true}\n    >\n      <svg\n        className={classNamesString(styles[\"PopperArrow__in\"], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAAwD;AASjD,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAIA;EAAA,IAHtBC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,cAAc,QAAdA,cAAc;EAEd,YACED,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAC;IADCE,qBAAqB,SAAhCC,SAAS;IAA4BC,cAAc;EAE3D,oBACE;IACE,KAAK,EAAEL;EAAM,GACTK,cAAc;IAClB,SAAS,EAAE,IAAAC,4BAAgB,qBAAwBH,qBAAqB,CAAE;IAC1E,qBAAmB;EAAK,iBAExB;IACE,SAAS,EAAE,IAAAG,4BAAgB,yBAA4BJ,cAAc,CAAE;IACvE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"file":"PopperArrow.js","names":["PopperArrow","style","attributes","arrowClassName","arrowWrapperClassName","className","restAttributes","classNames"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PopperArrow.module.css';\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({ style, attributes, arrowClassName }: PopperArrowProps) => {\n  const { className: arrowWrapperClassName, ...restAttributes } = attributes ?? {};\n  return (\n    <div\n      style={style}\n      {...restAttributes}\n      className={classNames(styles['PopperArrow'], arrowWrapperClassName)}\n      data-popper-arrow={true}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAStC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAAgE;EAAA,IAA1DC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,cAAc,QAAdA,cAAc;EAC7D,YAAgED,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAC;IAA7DE,qBAAqB,SAAhCC,SAAS;IAA4BC,cAAc;EAC3D,oBACE;IACE,KAAK,EAAEL;EAAM,GACTK,cAAc;IAClB,SAAS,EAAE,IAAAC,gBAAU,qBAAwBH,qBAAqB,CAAE;IACpE,qBAAmB;EAAK,iBAExB;IACE,SAAS,EAAE,IAAAG,gBAAU,yBAA4BJ,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     value?: number;
 }

package/dist/cjs/components/Progress/Progress.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _math = require("../../helpers/math");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["value", "getRootRef", "className"];
 var PROGRESS_MIN_VALUE = 0;
 var PROGRESS_MAX_VALUE = 100;
@@ -32,7 +32,7 @@ var Progress = function Progress(_ref) {
     "aria-valuemin": PROGRESS_MIN_VALUE,
     "aria-valuemax": PROGRESS_MAX_VALUE,
     ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiProgress", className)
+    className: (0, _vkjs.classNames)("vkuiProgress", className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiProgress__in",
     style: {

package/dist/cjs/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","names":["PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","clamp","classNamesString","width"],"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clamp } from \"../../helpers/math\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport styles from \"./Progress.module.css\";\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNamesString(styles[\"Progress\"], className)}\n    >\n      <div\n        className={styles[\"Progress__in\"]}\n        style={{ width: `${progress}%` }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAwD;AAUxD,IAAMA,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAKA;EAAA,sBAJnBC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,WAAK,EAACL,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EAErE,oBACE;IACE,iBAAeE;EAAM,GACjBG,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAE,IAAAK,4BAAgB,kBAAqBJ,SAAS;EAAE,iBAE3D;IACE,SAAS,oBAAyB;IAClC,KAAK,EAAE;MAAEK,KAAK,YAAKH,QAAQ;IAAI;EAAE,EACjC,CACE;AAEV,CAAC;AAAC"}
+{"version":3,"file":"Progress.js","names":["PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","restProps","progress","clamp","classNames","width"],"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({ value = 0, getRootRef, className, ...restProps }: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(styles['Progress'], className)}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA6C;AAU7C,IAAMA,kBAAkB,GAAG,CAAC;AAC5B,IAAMC,kBAAkB,GAAG,GAAG;;AAE9B;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAA0E;EAAA,sBAApEC,KAAK;IAALA,KAAK,2BAAG,CAAC;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACvE,IAAMC,QAAQ,GAAG,IAAAC,WAAK,EAACL,KAAK,EAAEH,kBAAkB,EAAEC,kBAAkB,CAAC;EAErE,oBACE;IACE,iBAAeE;EAAM,GACjBG,SAAS;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeN,kBAAmB;IAClC,iBAAeC,kBAAmB;IAClC,GAAG,EAAEG,UAAW;IAChB,SAAS,EAAE,IAAAK,gBAAU,kBAAqBJ,SAAS;EAAE,iBAErD;IAAK,SAAS,oBAAyB;IAAC,KAAK,EAAE;MAAEK,KAAK,YAAKH,QAAQ;IAAI;EAAE,EAAG,CACxE;AAEV,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-declare type StatsType = "playbackStarted" | "click";
+import * as React from 'react';
+declare type StatsType = 'playbackStarted' | 'click';
 declare type BannerData = {
     title?: string;
     url_types?: string;

package/dist/cjs/components/PromoBanner/PromoBanner.js

@@ -12,7 +12,7 @@ var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
 var _Button = require("../Button/Button");
 var _SimpleCell = require("../SimpleCell/SimpleCell");
@@ -29,7 +29,7 @@ var PromoBanner = function PromoBanner(_ref) {
     isCloseButtonHidden = _ref.isCloseButtonHidden,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _React$useState = React.useState(""),
+  var _React$useState = React.useState(''),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     currentPixel = _React$useState2[0],
     setCurrentPixel = _React$useState2[1];
@@ -39,7 +39,7 @@ var PromoBanner = function PromoBanner(_ref) {
     }, {}) : {};
   }, [bannerData.statistics]);
   var onClick = React.useCallback(function () {
-    return setCurrentPixel(statsPixels.click || "");
+    return setCurrentPixel(statsPixels.click || '');
   }, [statsPixels.click]);
   React.useEffect(function () {
     if (statsPixels.playbackStarted) {
@@ -47,12 +47,12 @@ var PromoBanner = function PromoBanner(_ref) {
     }
   }, [statsPixels.playbackStarted]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiPromoBanner", className)
+    className: (0, _vkjs.classNames)("vkuiPromoBanner", className)
   }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "vkuiPromoBanner__head"
   }, /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiPromoBanner__label"
-  }, bannerData.advertisingLabel || "Advertisement"), bannerData.ageRestrictions && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, bannerData.advertisingLabel || 'Advertisement'), bannerData.ageRestrictions && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiPromoBanner__age"
   }, bannerData.ageRestrictions), !isCloseButtonHidden && /*#__PURE__*/React.createElement("div", {
     className: "vkuiPromoBanner__close",
@@ -66,11 +66,11 @@ var PromoBanner = function PromoBanner(_ref) {
       size: 48,
       src: bannerData.iconLink,
       alt: bannerData.title,
-      "data-testid": process.env.NODE_ENV === "test" ? "avatar" : undefined
+      "data-testid": process.env.NODE_ENV === 'test' ? 'avatar' : undefined
     }),
     after: bannerData.ctaText && /*#__PURE__*/React.createElement(_Button.Button, {
       mode: "outline",
-      "data-testid": process.env.NODE_ENV === "test" ? "button-ctaText" : undefined
+      "data-testid": process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined
     }, bannerData.ctaText),
     subtitle: bannerData.domain
   }, bannerData.title), currentPixel.length > 0 && /*#__PURE__*/React.createElement("div", {

package/dist/cjs/components/PromoBanner/PromoBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoBanner.js","names":["PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","classNamesString","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { Button } from \"../Button/Button\";\nimport { SimpleCell } from \"../SimpleCell/SimpleCell\";\nimport { Image } from \"../Image/Image\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport styles from \"./PromoBanner.module.css\";\n\ntype StatsType =\n  | \"playbackStarted\" // Начало показа\n  | \"click\"; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  const [currentPixel, setCurrentPixel] = React.useState(\"\");\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce(\n            (acc, item) => ({ ...acc, [item.type]: item.url }),\n            {}\n          )\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics]\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || \"\"),\n    [statsPixels.click]\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div\n      className={classNamesString(styles[\"PromoBanner\"], className)}\n      {...restProps}\n    >\n      <div className={styles[\"PromoBanner__head\"]}>\n        <Footnote className={styles[\"PromoBanner__label\"]}>\n          {bannerData.advertisingLabel || \"Advertisement\"}\n        </Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles[\"PromoBanner__age\"]}>\n            {bannerData.ageRestrictions}\n          </Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles[\"PromoBanner__close\"]} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={\n                process.env.NODE_ENV === \"test\" ? \"avatar\" : undefined\n              }\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={\n                process.env.NODE_ENV === \"test\" ? \"button-ctaText\" : undefined\n              }\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles[\"PromoBanner__pixels\"]}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAuC3D;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,2BALtBC,UAAU;IAAVA,UAAU,gCAAG,CAAC,CAAC;IACfC,OAAO,QAAPA,OAAO;IACPC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,sBAAwCC,KAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;IAAA;IAAnDC,YAAY;IAAEC,eAAe;EAEpC,IAAMC,WAAW,GAAGJ,KAAK,CAACK,OAAO,CAC/B;IAAA,OACGV,UAAU,CAACW,UAAU,GAClBX,UAAU,CAACW,UAAU,CAACC,MAAM,CAC1B,UAACC,GAAG,EAAEC,IAAI;MAAA,mEAAWD,GAAG,yCAAGC,IAAI,CAACC,IAAI,EAAGD,IAAI,CAACE,GAAG;IAAA,CAAG,EAClD,CAAC,CAAC,CACH,GACD,CAAC,CAAC;EAAA,CAAqC,EAC7C,CAAChB,UAAU,CAACW,UAAU,CAAC,CACxB;EAED,IAAMM,OAAO,GAAGZ,KAAK,CAACa,WAAW,CAC/B;IAAA,OAAMV,eAAe,CAACC,WAAW,CAACU,KAAK,IAAI,EAAE,CAAC;EAAA,GAC9C,CAACV,WAAW,CAACU,KAAK,CAAC,CACpB;EAEDd,KAAK,CAACe,SAAS,CAAC,YAAM;IACpB,IAAIX,WAAW,CAACY,eAAe,EAAE;MAC/Bb,eAAe,CAACC,WAAW,CAACY,eAAe,CAAC;IAC9C;EACF,CAAC,EAAE,CAACZ,WAAW,CAACY,eAAe,CAAC,CAAC;EAEjC,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,qBAAwBnB,SAAS;EAAE,GAC1DC,SAAS,gBAEb;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAC/CJ,UAAU,CAACuB,gBAAgB,IAAI,eAAe,CACtC,EACVvB,UAAU,CAACwB,eAAe,iBACzB,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAC7CxB,UAAU,CAACwB,eAAe,CAE9B,EAEA,CAACtB,mBAAmB,iBACnB;IAAK,SAAS,0BAA+B;IAAC,OAAO,EAAED;EAAQ,gBAC7D,oBAAC,oBAAa,OAAG,CAEpB,CACG,eACN,oBAAC,sBAAU;IACT,IAAI,EAAED,UAAU,CAACyB,YAAa;IAC9B,OAAO,EAAER,OAAQ;IACjB,GAAG,EAAC,8BAA8B;IAClC,MAAM,EAAC,QAAQ;IACf,MAAM,EACJjB,UAAU,CAAC0B,QAAQ,iBACjB,oBAAC,YAAK;MACJ,IAAI,EAAE,EAAG;MACT,GAAG,EAAE1B,UAAU,CAAC0B,QAAS;MACzB,GAAG,EAAE1B,UAAU,CAAC2B,KAAM;MACtB,eACEC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAGC;IAC9C,EAGN;IACD,KAAK,EACH/B,UAAU,CAACgC,OAAO,iBAChB,oBAAC,cAAM;MACL,IAAI,EAAC,SAAS;MACd,eACEJ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,gBAAgB,GAAGC;IACtD,GAEA/B,UAAU,CAACgC,OAAO,CAGxB;IACD,QAAQ,EAAEhC,UAAU,CAACiC;EAAO,GAE3BjC,UAAU,CAAC2B,KAAK,CACN,EAEZpB,YAAY,CAAC2B,MAAM,GAAG,CAAC,iBACtB;IAAK,SAAS;EAAgC,gBAC5C;IAAK,GAAG,EAAE3B,YAAa;IAAC,GAAG,EAAC;EAAE,EAAG,CAEpC,CACG;AAEV,CAAC;AAAC"}
+{"version":3,"file":"PromoBanner.js","names":["PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","React","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","classNames","advertisingLabel","ageRestrictions","trackingLink","iconLink","title","process","env","NODE_ENV","undefined","ctaText","domain","length"],"sources":["../../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { Button } from '../Button/Button';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Image } from '../Image/Image';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote className={styles['PromoBanner__label']}>\n          {bannerData.advertisingLabel || 'Advertisement'}\n        </Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAuC3D;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,2BALtBC,UAAU;IAAVA,UAAU,gCAAG,CAAC,CAAC;IACfC,OAAO,QAAPA,OAAO;IACPC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,sBAAwCC,KAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;IAAA;IAAnDC,YAAY;IAAEC,eAAe;EAEpC,IAAMC,WAAW,GAAGJ,KAAK,CAACK,OAAO,CAC/B;IAAA,OACGV,UAAU,CAACW,UAAU,GAClBX,UAAU,CAACW,UAAU,CAACC,MAAM,CAAC,UAACC,GAAG,EAAEC,IAAI;MAAA,mEAAWD,GAAG,yCAAGC,IAAI,CAACC,IAAI,EAAGD,IAAI,CAACE,GAAG;IAAA,CAAG,EAAE,CAAC,CAAC,CAAC,GACpF,CAAC,CAAC;EAAA,CAAqC,EAC7C,CAAChB,UAAU,CAACW,UAAU,CAAC,CACxB;EAED,IAAMM,OAAO,GAAGZ,KAAK,CAACa,WAAW,CAC/B;IAAA,OAAMV,eAAe,CAACC,WAAW,CAACU,KAAK,IAAI,EAAE,CAAC;EAAA,GAC9C,CAACV,WAAW,CAACU,KAAK,CAAC,CACpB;EAEDd,KAAK,CAACe,SAAS,CAAC,YAAM;IACpB,IAAIX,WAAW,CAACY,eAAe,EAAE;MAC/Bb,eAAe,CAACC,WAAW,CAACY,eAAe,CAAC;IAC9C;EACF,CAAC,EAAE,CAACZ,WAAW,CAACY,eAAe,CAAC,CAAC;EAEjC,oBACE;IAAK,SAAS,EAAE,IAAAC,gBAAU,qBAAwBnB,SAAS;EAAE,GAAKC,SAAS,gBACzE;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAC/CJ,UAAU,CAACuB,gBAAgB,IAAI,eAAe,CACtC,EACVvB,UAAU,CAACwB,eAAe,iBACzB,oBAAC,kBAAQ;IAAC,SAAS;EAA6B,GAAExB,UAAU,CAACwB,eAAe,CAC7E,EAEA,CAACtB,mBAAmB,iBACnB;IAAK,SAAS,0BAA+B;IAAC,OAAO,EAAED;EAAQ,gBAC7D,oBAAC,oBAAa,OAAG,CAEpB,CACG,eACN,oBAAC,sBAAU;IACT,IAAI,EAAED,UAAU,CAACyB,YAAa;IAC9B,OAAO,EAAER,OAAQ;IACjB,GAAG,EAAC,8BAA8B;IAClC,MAAM,EAAC,QAAQ;IACf,MAAM,EACJjB,UAAU,CAAC0B,QAAQ,iBACjB,oBAAC,YAAK;MACJ,IAAI,EAAE,EAAG;MACT,GAAG,EAAE1B,UAAU,CAAC0B,QAAS;MACzB,GAAG,EAAE1B,UAAU,CAAC2B,KAAM;MACtB,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,QAAQ,GAAGC;IAAU,EAGzE;IACD,KAAK,EACH/B,UAAU,CAACgC,OAAO,iBAChB,oBAAC,cAAM;MACL,IAAI,EAAC,SAAS;MACd,eAAaJ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,GAAG,gBAAgB,GAAGC;IAAU,GAE3E/B,UAAU,CAACgC,OAAO,CAGxB;IACD,QAAQ,EAAEhC,UAAU,CAACiC;EAAO,GAE3BjC,UAAU,CAAC2B,KAAK,CACN,EAEZpB,YAAY,CAAC2B,MAAM,GAAG,CAAC,iBACtB;IAAK,SAAS;EAAgC,gBAC5C;IAAK,GAAG,EAAE3B,YAAa;IAAC,GAAG,EAAC;EAAE,EAAG,CAEpC,CACG;AAEV,CAAC;AAAC"}

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

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { AnyFunction } from "../../types";
-import { DOMProps } from "../../lib/dom";
-import { ScrollContextInterface } from "../AppRoot/ScrollContext";
-import { TouchProps } from "../Touch/Touch";
+import * as React from 'react';
+import { AnyFunction } from '../../types';
+import { DOMProps } from '../../lib/dom';
+import { ScrollContextInterface } from '../AppRoot/ScrollContext';
+import { TouchProps } from '../Touch/Touch';
 export interface PullToRefreshProps extends DOMProps, TouchProps {
     /**
      * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)

package/dist/cjs/components/PullToRefresh/PullToRefresh.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("../../lib/dom");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _taptic = require("../../lib/taptic");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
@@ -105,7 +105,7 @@ var PullToRefresh = function PullToRefresh(_ref) {
       event.stopPropagation();
     }
   };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, "touchmove", onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
   var resetRefreshingState = React.useCallback(function () {
     setWatching(false);
     setCanRefresh(false);
@@ -141,7 +141,7 @@ var PullToRefresh = function PullToRefresh(_ref) {
         return platform === _platform.Platform.IOS ? prevSpinnerY : initParams.refreshing;
       });
       onRefresh();
-      (0, _taptic.runTapticImpactOccurred)("light");
+      (0, _taptic.runTapticImpactOccurred)('light');
     }
   }, [refreshing, onRefresh, setWaitFetchingTimeout, platform, initParams.refreshing]);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
@@ -199,9 +199,9 @@ var PullToRefresh = function PullToRefresh(_ref) {
     setTouchDown(false);
   };
   var spinnerTransform = "translate3d(0, ".concat(spinnerY, "px, 0)");
-  var contentTransform = "";
+  var contentTransform = '';
   if (platform === _platform.Platform.IOS && refreshing && !touchDown) {
-    contentTransform = "translate3d(0, 100px, 0)";
+    contentTransform = 'translate3d(0, 100px, 0)';
   } else if (platform === _platform.Platform.IOS && (contentShift || refreshing)) {
     contentTransform = "translate3d(0, ".concat(contentShift, "px, 0)");
   }
@@ -211,7 +211,7 @@ var PullToRefresh = function PullToRefresh(_ref) {
     onStart: onTouchStart,
     onMove: onTouchMove,
     onEnd: onTouchEnd,
-    className: (0, _classNames.classNamesString)("vkuiPullToRefresh", platform === _platform.Platform.IOS && "vkuiPullToRefresh--ios", watching && "vkuiPullToRefresh--watching", refreshing && "vkuiPullToRefresh--refreshing", className)
+    className: (0, _vkjs.classNames)("vkuiPullToRefresh", platform === _platform.Platform.IOS && "vkuiPullToRefresh--ios", watching && "vkuiPullToRefresh--watching", refreshing && "vkuiPullToRefresh--refreshing", className)
   }), /*#__PURE__*/React.createElement(_FixedLayout.FixedLayout, {
     className: "vkuiPullToRefresh__controls"
   }, /*#__PURE__*/React.createElement(_PullToRefreshSpinner.PullToRefreshSpinner, {

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

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

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

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

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PullToRefreshSpinner = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 function calcStrokeDashOffset(value, radius) {
   var progress = value / 100;
   return 2 * Math.PI * radius * (1 - progress);
@@ -21,14 +21,14 @@ var PullToRefreshSpinner = function PullToRefreshSpinner(_ref) {
     style = _ref.style,
     _ref$progress = _ref.progress,
     progress = _ref$progress === void 0 ? 0 : _ref$progress,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Пожалуйста, подождите..." : _ref$ariaLabel;
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Пожалуйста, подождите...' : _ref$ariaLabel;
   var radius = 0.5 * size - 0.5 * strokeWidth;
   var dasharray = 2 * Math.PI * radius;
   var circleCenter = 0.5 * size;
   var dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
+    className: (0, _vkjs.classNames)("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
     style: style,
     "aria-label": on ? ariaLabel : undefined
   }, /*#__PURE__*/React.createElement("svg", {

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

@@ -1 +1 @@
-{"version":3,"file":"PullToRefreshSpinner.js","names":["calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","classNamesString","undefined","width","height","transformOrigin"],"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./PullToRefresh.module.css\";\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  size?: number;\n  strokeWidth?: number;\n  on?: boolean;\n  progress?: number;\n  \"aria-label\"?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  \"aria-label\": ariaLabel = \"Пожалуйста, подождите...\",\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"PullToRefresh__spinner\"],\n        on && styles[\"PullToRefresh__spinner--on\"]\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles[\"PullToRefresh__spinner-self\"]}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles[\"PullToRefresh__spinner-path\"]}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAGA,SAASA,oBAAoB,CAACC,KAAa,EAAEC,MAAc,EAAE;EAC3D,IAAMC,QAAQ,GAAGF,KAAK,GAAG,GAAG;EAC5B,OAAO,CAAC,GAAGG,IAAI,CAACC,EAAE,GAAGH,MAAM,IAAI,CAAC,GAAGC,QAAQ,CAAC;AAC9C;AAWO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoB,OAOA;EAAA,mBAN/BC,EAAE;IAAFA,EAAE,wBAAG,IAAI;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IAAA,wBACTC,WAAW;IAAXA,WAAW,iCAAG,GAAG;IACjBC,KAAK,QAALA,KAAK;IAAA,qBACLP,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IAAA,sBACZ,YAAY;IAAEQ,SAAS,+BAAG,0BAA0B;EAEpD,IAAMT,MAAM,GAAG,GAAG,GAAGM,IAAI,GAAG,GAAG,GAAGC,WAAW;EAC7C,IAAMG,SAAS,GAAG,CAAC,GAAGR,IAAI,CAACC,EAAE,GAAGH,MAAM;EACtC,IAAMW,YAAY,GAAG,GAAG,GAAGL,IAAI;EAE/B,IAAMM,UAAU,GAAGd,oBAAoB,CAACO,EAAE,GAAG,EAAE,GAAGJ,QAAQ,EAAED,MAAM,CAAC;EAEnE,oBACE;IACE,SAAS,EAAE,IAAAa,4BAAgB,gCAEzBR,EAAE,oCAAwC,CAC1C;IACF,KAAK,EAAEG,KAAM;IACb,cAAYH,EAAE,GAAGI,SAAS,GAAGK;EAAU,gBAEvC;IACE,IAAI,EAAC,cAAc;IACnB,SAAS,mCAAwC;IACjD,KAAK,EAAE;MACLC,KAAK,EAAET,IAAI;MACXU,MAAM,EAAEV;IACV,CAAE;IACF,OAAO,gBAASA,IAAI,cAAIA,IAAI,CAAG;IAC/B,KAAK,EAAC;EAA4B,gBAElC;IACE,KAAK,EAAE;MACLS,KAAK,EAAET,IAAI;MACXU,MAAM,EAAEV,IAAI;MACZW,eAAe,YAAKN,YAAY,gBAAMA,YAAY;IACpD;EAAE,gBAEF;IACE,SAAS,mCAAwC;IACjD,IAAI,EAAC,MAAM;IACX,eAAe,EAAED,SAAU;IAC3B,gBAAgB,EAAEE,UAAW;IAC7B,WAAW,EAAEL,WAAY;IACzB,aAAa,EAAC,OAAO;IACrB,EAAE,EAAEI,YAAa;IACjB,EAAE,EAAEA,YAAa;IACjB,CAAC,EAAEX;EAAO,EACV,CACA,CACA,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"file":"PullToRefreshSpinner.js","names":["calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","classNames","undefined","width","height","transformOrigin"],"sources":["../../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAGA,SAASA,oBAAoB,CAACC,KAAa,EAAEC,MAAc,EAAE;EAC3D,IAAMC,QAAQ,GAAGF,KAAK,GAAG,GAAG;EAC5B,OAAO,CAAC,GAAGG,IAAI,CAACC,EAAE,GAAGH,MAAM,IAAI,CAAC,GAAGC,QAAQ,CAAC;AAC9C;AAUO,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoB,OAOA;EAAA,mBAN/BC,EAAE;IAAFA,EAAE,wBAAG,IAAI;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IAAA,wBACTC,WAAW;IAAXA,WAAW,iCAAG,GAAG;IACjBC,KAAK,QAALA,KAAK;IAAA,qBACLP,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IAAA,sBACZ,YAAY;IAAEQ,SAAS,+BAAG,0BAA0B;EAEpD,IAAMT,MAAM,GAAG,GAAG,GAAGM,IAAI,GAAG,GAAG,GAAGC,WAAW;EAC7C,IAAMG,SAAS,GAAG,CAAC,GAAGR,IAAI,CAACC,EAAE,GAAGH,MAAM;EACtC,IAAMW,YAAY,GAAG,GAAG,GAAGL,IAAI;EAE/B,IAAMM,UAAU,GAAGd,oBAAoB,CAACO,EAAE,GAAG,EAAE,GAAGJ,QAAQ,EAAED,MAAM,CAAC;EAEnE,oBACE;IACE,SAAS,EAAE,IAAAa,gBAAU,gCAEnBR,EAAE,oCAAwC,CAC1C;IACF,KAAK,EAAEG,KAAM;IACb,cAAYH,EAAE,GAAGI,SAAS,GAAGK;EAAU,gBAEvC;IACE,IAAI,EAAC,cAAc;IACnB,SAAS,mCAAwC;IACjD,KAAK,EAAE;MACLC,KAAK,EAAET,IAAI;MACXU,MAAM,EAAEV;IACV,CAAE;IACF,OAAO,gBAASA,IAAI,cAAIA,IAAI,CAAG;IAC/B,KAAK,EAAC;EAA4B,gBAElC;IACE,KAAK,EAAE;MACLS,KAAK,EAAET,IAAI;MACXU,MAAM,EAAEV,IAAI;MACZW,eAAe,YAAKN,YAAY,gBAAMA,YAAY;IACpD;EAAE,gBAEF;IACE,SAAS,mCAAwC;IACjD,IAAI,EAAC,MAAM;IACX,eAAe,EAAED,SAAU;IAC3B,gBAAgB,EAAEE,UAAW;IAC7B,WAAW,EAAEL,WAAY;IACzB,aAAa,EAAC,OAAO;IACrB,EAAE,EAAEI,YAAa;IACjB,EAAE,EAAEA,YAAa;IACjB,CAAC,EAAEX;EAAO,EACV,CACA,CACA,CACF;AAEV,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLLabelElement> {
     description?: React.ReactNode;
 }

package/dist/cjs/components/Radio/Radio.js

@@ -10,10 +10,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _Tappable = require("../Tappable/Tappable");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _usePlatform = require("../../hooks/usePlatform");
-var _utils = require("../../lib/utils");
 var _VisuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
@@ -55,7 +54,7 @@ var Radio = function Radio(_ref) {
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, {
     Component: "label",
     style: style,
-    className: (0, _classNames.classNamesString)("vkuiRadio", (0, _getSizeYClassName.getSizeYClassName)("vkuiRadio", sizeY), className),
+    className: (0, _vkjs.classNames)("vkuiRadio", (0, _getSizeYClassName.getSizeYClassName)("vkuiRadio", sizeY), className),
     activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,
     disabled: restProps.disabled,
     getRootRef: getRootRef
@@ -70,7 +69,7 @@ var Radio = function Radio(_ref) {
     className: "vkuiRadio__content"
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiRadio__children"
-  }, children), (0, _utils.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, children), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     className: "vkuiRadio__description"
   }, description))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","classNamesString","getSizeYClassName","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","hasReactNode"],"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./Radio.module.css\";\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden\n      {...props}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"11\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        fill=\"none\"\n      />\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"7.5\"\n        className={styles[\"Radio__pin\"]}\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNamesString(\n        styles[\"Radio\"],\n        getSizeYClassName(styles[\"Radio\"], sizeY),\n        className\n      )}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        className={styles[\"Radio__input\"]}\n        type=\"radio\"\n      />\n      <div className={styles[\"Radio__container\"]}>\n        <RadioIcon className={styles[\"Radio__icon\"]} />\n        <div className={styles[\"Radio__content\"]}>\n          <div className={styles[\"Radio__children\"]}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles[\"Radio__description\"]}>\n              {description}\n            </Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAA0D;AAG1D,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IACE,KAAK,EAAC,4BAA4B;IAClC,OAAO,EAAC,WAAW;IACnB;EAAW,GACPA,KAAK,gBAET;IACE,EAAE,EAAC,IAAI;IACP,EAAE,EAAC,IAAI;IACP,CAAC,EAAC,IAAI;IACN,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,GAAG;IACf,IAAI,EAAC;EAAM,EACX,eACF;IACE,EAAE,EAAC,IAAI;IACP,EAAE,EAAC,IAAI;IACP,CAAC,EAAC,KAAK;IACP,SAAS,kBAAuB;IAChC,IAAI,EAAC;EAAc,EACnB,CACE;AAEV,CAAC;AASD;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEP,KAAM;IACb,SAAS,EAAE,IAAAQ,4BAAgB,eAEzB,IAAAC,oCAAiB,eAAkBF,KAAK,CAAC,EACzCN,SAAS,CACT;IACF,iBAAiB,EAAEG,QAAQ,KAAKM,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAGC,6BAAoB;IACzE,QAAQ,EAAET,SAAS,CAACU,QAAS;IAC7B,UAAU,EAAEX;EAAW,gBAEvB,oBAAC,wCAAmB,6BACdC,SAAS;IACb,SAAS,oBAAyB;IAClC,IAAI,EAAC;EAAO,GACZ,eACF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1D,IAAAgB,mBAAY,EAACf,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAC/CA,WAAW,CAEf,CACG,CACF,CACG;AAEf,CAAC;AAAC"}
+{"version":3,"file":"Radio.js","names":["RadioIcon","props","Radio","children","description","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","classNames","getSizeYClassName","Platform","IOS","ACTIVE_EFFECT_DELAY","disabled","hasReactNode"],"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Radio.module.css';\n\nconst RadioIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7.5\" className={styles['Radio__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement> {\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: RadioProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      style={style}\n      className={classNames(styles['Radio'], getSizeYClassName(styles['Radio'], sizeY), className)}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput {...restProps} className={styles['Radio__input']} type=\"radio\" />\n      <div className={styles['Radio__container']}>\n        <RadioIcon className={styles['Radio__icon']} />\n        <div className={styles['Radio__content']}>\n          <div className={styles['Radio__children']}>{children}</div>\n          {hasReactNode(description) && (\n            <Footnote className={styles['Radio__description']}>{description}</Footnote>\n          )}\n        </div>\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA0D;AAG1D,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAoC,EAAK;EAC1D,oBACE;IAAK,KAAK,EAAC,4BAA4B;IAAC,OAAO,EAAC,WAAW;IAAC;EAAW,GAAKA,KAAK,gBAC/E;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,IAAI;IAAC,MAAM,EAAC,cAAc;IAAC,WAAW,EAAC,GAAG;IAAC,IAAI,EAAC;EAAM,EAAG,eACnF;IAAQ,EAAE,EAAC,IAAI;IAAC,EAAE,EAAC,IAAI;IAAC,CAAC,EAAC,KAAK;IAAC,SAAS,kBAAuB;IAAC,IAAI,EAAC;EAAc,EAAG,CACnF;AAEV,CAAC;AASD;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,IANhBC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAC,OAAO;IACjB,KAAK,EAAEP,KAAM;IACb,SAAS,EAAE,IAAAQ,gBAAU,eAAkB,IAAAC,oCAAiB,eAAkBF,KAAK,CAAC,EAAEN,SAAS,CAAE;IAC7F,iBAAiB,EAAEG,QAAQ,KAAKM,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAGC,6BAAoB;IACzE,QAAQ,EAAET,SAAS,CAACU,QAAS;IAC7B,UAAU,EAAEX;EAAW,gBAEvB,oBAAC,wCAAmB,6BAAKC,SAAS;IAAE,SAAS,oBAAyB;IAAC,IAAI,EAAC;EAAO,GAAG,eACtF;IAAK,SAAS;EAA6B,gBACzC,oBAAC,SAAS;IAAC,SAAS;EAAwB,EAAG,eAC/C;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA4B,GAAEL,QAAQ,CAAO,EAC1D,IAAAgB,kBAAY,EAACf,WAAW,CAAC,iBACxB,oBAAC,kBAAQ;IAAC,SAAS;EAA+B,GAAEA,WAAW,CAChE,CACG,CACF,CACG;AAEf,CAAC;AAAC"}

package/dist/cjs/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    mode?: "vertical" | "horizontal";
+    mode?: 'vertical' | 'horizontal';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup

package/dist/cjs/components/RadioGroup/RadioGroup.js

@@ -9,19 +9,19 @@ exports.RadioGroup = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["mode", "children", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
 var RadioGroup = function RadioGroup(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "vertical" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'vertical' : _ref$mode,
     children = _ref.children,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiRadioGroup", styles["RadioGroup--mode-".concat(mode)], className)
+    className: (0, _vkjs.classNames)("vkuiRadioGroup", styles["RadioGroup--mode-".concat(mode)], className)
   }, restProps), children);
 };
 exports.RadioGroup = RadioGroup;