@vkontakte/vkui 5.0.3 → 5.1.2

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

@@ -2,19 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { getTitleFromChildren, noop } from "../../lib/utils";
-import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useDOM } from "../../lib/dom";
-import { Platform } from "../../lib/platform";
-import { Icon24Cancel } from "@vkontakte/icons";
-import { IconButton } from "../IconButton/IconButton";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { Tappable } from "../Tappable/Tappable";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { getTitleFromChildren } from '../../lib/utils';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useDOM } from '../../lib/dom';
+import { Platform } from '../../lib/platform';
+import { Icon24Cancel } from '@vkontakte/icons';
+import { IconButton } from '../IconButton/IconButton';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { Tappable } from '../Tappable/Tappable';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import "./Removable.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
@@ -32,7 +32,7 @@ var RemovableIos = function RemovableIos(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     removeOffset = _React$useState2[0],
     updateRemoveOffset = _React$useState2[1];
-  useGlobalEventListener(window, "click", function () {
+  useGlobalEventListener(window, 'click', function () {
     if (removeOffset > 0) {
       updateRemoveOffset(0);
     }
@@ -66,7 +66,7 @@ var RemovableIos = function RemovableIos(_ref) {
     hasActive: false,
     hasHover: false,
     "aria-label": removePlaceholderString,
-    className: classNamesString("vkuiRemovable__action", "vkuiRemovable__toggle"),
+    className: classNames("vkuiRemovable__action", "vkuiRemovable__toggle"),
     onClick: onRemoveActivateClick,
     disabled: removeOffset > 0
   }, /*#__PURE__*/React.createElement("i", {
@@ -96,9 +96,9 @@ export var Removable = function Removable(_ref2) {
     _ref2$onRemove = _ref2.onRemove,
     onRemove = _ref2$onRemove === void 0 ? noop : _ref2$onRemove,
     _ref2$removePlacehold = _ref2.removePlaceholder,
-    removePlaceholder = _ref2$removePlacehold === void 0 ? "Удалить" : _ref2$removePlacehold,
+    removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
     _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "center" : _ref2$align,
+    align = _ref2$align === void 0 ? 'center' : _ref2$align,
     className = _ref2.className,
     restProps = _objectWithoutProperties(_ref2, _excluded);
   var platform = usePlatform();
@@ -112,7 +112,7 @@ export var Removable = function Removable(_ref2) {
   var removePlaceholderString = getTitleFromChildren(removePlaceholder);
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: ref,
-    className: classNamesString("vkuiRemovable", platform === Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], getSizeYClassName("vkuiRemovable", sizeY), className)
+    className: classNames("vkuiRemovable", platform === Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], getSizeYClassName("vkuiRemovable", sizeY), className)
   }), platform !== Platform.IOS && /*#__PURE__*/React.createElement("div", {
     className: "vkuiRemovable__content"
   }, children, /*#__PURE__*/React.createElement(IconButton, {

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

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

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

@@ -1 +1 @@
-.vkuiRemovable__content{align-items:center;display:flex;padding-left:var(--vkui--size_base_padding_horizontal--regular);position:relative}.vkuiRemovable__action{border:none;flex-grow:0;flex-shrink:0;position:relative}.vkuiRemovable__action.vkuiRemovable__action{color:var(--vkui--color_icon_secondary)}.vkuiRemovable--align-start .vkuiRemovable__action{align-self:flex-start}.vkuiRemovable--ios{overflow:hidden}.vkuiRemovable__remove{background-color:var(--vkui--color_background_negative);border:none;border-radius:0;color:#fff;color:var(--vkui_internal--white);font-size:15px;height:100%;left:100%;line-height:45px;padding:0 10px;position:absolute;top:0}.vkuiRemovable__remove-in{align-items:center;display:flex;height:100%;justify-content:center;width:100%}@media (prefers-reduced-motion:no-preference){.vkuiRemovable--ios .vkuiRemovable__content{transition:transform .6s var(--vkui--animation_easing_platform)}}.vkuiRemovable__toggle{background:none;display:block;height:44px;margin:0 2px;width:44px}.vkuiRemovable__toggle-in{align-content:center;align-items:center;border:none;display:flex;height:100%;justify-content:center;position:relative;width:100%}.vkuiRemovable__toggle-in:after{background-color:var(--vkui--color_background_negative);border-radius:50%;content:"";height:22px;width:22px}.vkuiRemovable__toggle-in:before{background-color:#fff;background-color:var(--vkui_internal--white);content:"";display:block;height:2px;position:absolute;width:12px}.vkuiRemovable--ios .vkuiRemovable__content{padding-left:0;padding-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable .vkuiRemovable__content,.vkuiFormLayoutGroup--removable .vkuiRemovable__content{align-items:flex-start;flex-wrap:wrap}.vkuiRemovable__offset{display:none}.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{display:block;height:calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);order:-1;width:100%}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--sizeY-compact.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--sizeY-none.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}}
+.vkuiRemovable__content{align-items:center;display:flex;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);position:relative}.vkuiRemovable__action{border:none;flex-grow:0;flex-shrink:0;position:relative}.vkuiRemovable__action.vkuiRemovable__action{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiRemovable--align-start .vkuiRemovable__action{align-self:flex-start}.vkuiRemovable--ios{overflow:hidden}.vkuiRemovable__remove{background-color:#e64646;background-color:var(--vkui--color_background_negative);border:none;border-radius:0;color:#fff;color:var(--vkui_internal--white);font-size:15px;height:100%;left:100%;line-height:45px;padding:0 10px;position:absolute;top:0}.vkuiRemovable__remove-in{align-items:center;display:flex;height:100%;justify-content:center;width:100%}@media (prefers-reduced-motion:no-preference){.vkuiRemovable--ios .vkuiRemovable__content{transition:transform .6s cubic-bezier(.4,0,.2,1);transition:transform .6s var(--vkui--animation_easing_platform)}}.vkuiRemovable__toggle{background:none;display:block;height:44px;margin:0 2px;width:44px}.vkuiRemovable__toggle-in{align-content:center;align-items:center;border:none;display:flex;height:100%;justify-content:center;position:relative;width:100%}.vkuiRemovable__toggle-in:after{background-color:#e64646;background-color:var(--vkui--color_background_negative);border-radius:50%;content:"";height:22px;width:22px}.vkuiRemovable__toggle-in:before{background-color:#fff;background-color:var(--vkui_internal--white);content:"";display:block;height:2px;position:absolute;width:12px}.vkuiRemovable--ios .vkuiRemovable__content{padding-left:0;padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable .vkuiRemovable__content,.vkuiFormLayoutGroup--removable .vkuiRemovable__content{align-items:flex-start;flex-wrap:wrap}.vkuiRemovable__offset{display:none}.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{display:block;height:calc(2px + 18px + 8px);height:calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);order:-1;width:100%}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--sizeY-compact.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--sizeY-none.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { TappableProps } from "../Tappable/Tappable";
+import * as React from 'react';
+import { TappableProps } from '../Tappable/Tappable';
 export interface RichCellProps extends TappableProps {
     /**
      * Контейнер для текста над `children`.

package/dist/cssm/components/RichCell/RichCell.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["subhead", "children", "text", "caption", "before", "after", "afterCaption", "bottom", "actions", "multiline", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Tappable } from "../Tappable/Tappable";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Tappable } from '../Tappable/Tappable';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import "./RichCell.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
@@ -27,7 +27,7 @@ export var RichCell = function RichCell(_ref) {
   var _useAdaptivity = useAdaptivity(),
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
-    className: classNamesString("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", getSizeYClassName("vkuiRichCell", sizeY), className)
+    className: classNames("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", getSizeYClassName("vkuiRichCell", sizeY), className)
   }), before && /*#__PURE__*/React.createElement("div", {
     className: "vkuiRichCell__before"
   }, before), /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"RichCell.js","names":["React","classNamesString","Tappable","Subhead","getSizeYClassName","useAdaptivity","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport styles from \"./RichCell.module.css\";\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 24 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNamesString(\n        styles[\"RichCell\"],\n        !multiline && styles[\"RichCell--text-ellipsis\"],\n        getSizeYClassName(styles[\"RichCell\"], sizeY),\n        className\n      )}\n    >\n      {before && <div className={styles[\"RichCell__before\"]}>{before}</div>}\n      <div className={styles[\"RichCell__in\"]}>\n        <div className={styles[\"RichCell__content\"]}>\n          <div className={styles[\"RichCell__content-before\"]}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles[\"RichCell__subhead\"]}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles[\"RichCell__children\"]}>{children}</div>\n            {text && <div className={styles[\"RichCell__text\"]}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles[\"RichCell__caption\"]}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles[\"RichCell__content-after\"]}>\n              {after && (\n                <div className={styles[\"RichCell__after-children\"]}>\n                  {after}\n                </div>\n              )}\n              {afterCaption && (\n                <div className={styles[\"RichCell__after-caption\"]}>\n                  {afterCaption}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles[\"RichCell__bottom\"]}>{bottom}</div>}\n        {actions && (\n          <div className={styles[\"RichCell__actions\"]}>{actions}</div>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAqD1D;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBb,aAAa,EAAE;IAAzBc,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ,eACHD,SAAS;IACb,SAAS,EAAEjB,gBAAgB,iBAEzB,CAACe,SAAS,iCAAqC,EAC/CZ,iBAAiB,iBAAqBe,KAAK,CAAC,EAC5CF,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBACJ;IAAK,SAAS;EAAqC,GAChDA,KAAK,CAET,EACAC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAC/CA,YAAY,CAEhB,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBACN;IAAK,SAAS;EAA8B,GAAEA,OAAO,CACtD,CACG,CACG;AAEf,CAAC"}
+{"version":3,"file":"RichCell.js","names":["React","classNames","Tappable","Subhead","getSizeYClassName","useAdaptivity","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './RichCell.module.css';\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 24 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        getSizeYClassName(styles['RichCell'], sizeY),\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAqD1D;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBb,aAAa,EAAE;IAAzBc,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ,eACHD,SAAS;IACb,SAAS,EAAEjB,UAAU,iBAEnB,CAACe,SAAS,iCAAqC,EAC/CZ,iBAAiB,iBAAqBe,KAAK,CAAC,EAC5CF,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC"}

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

@@ -1 +1 @@
-.vkuiRichCell{box-sizing:border-box;color:var(--vkui--color_text_primary);display:flex;font-family:var(--vkui--font_family_base);min-height:64px;padding:8px var(--vkui--size_base_padding_horizontal--regular);text-decoration:none}.vkuiRichCell--sizeY-compact{min-height:60px}.vkuiRichCell__before{margin-right:12px}.vkuiRichCell__in{display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:0}.vkuiRichCell__content{display:flex}.vkuiRichCell__content-before{flex-grow:1;min-width:0}.vkuiRichCell__content-after{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;padding-left:4px}.vkuiRichCell__after-children{font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell__after-caption{color:var(--vkui--color_text_secondary);font-size:var(--vkui--font_footnote--font_size--regular);line-height:var(--vkui--font_footnote--line_height--regular);margin-top:2px}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption{font-size:var(--vkui--font_caption1--font_size--regular);line-height:var(--vkui--font_caption1--line_height--regular)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-caption{font-size:var(--vkui--font_caption1--font_size--regular);line-height:var(--vkui--font_caption1--line_height--regular)}}.vkuiRichCell__caption,.vkuiRichCell__subhead{color:var(--vkui--color_text_secondary)}.vkuiRichCell__caption{margin-top:1px}.vkuiRichCell__children{font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell--text-ellipsis .vkuiRichCell__caption,.vkuiRichCell--text-ellipsis .vkuiRichCell__children,.vkuiRichCell--text-ellipsis .vkuiRichCell__subhead,.vkuiRichCell--text-ellipsis .vkuiRichCell__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiRichCell__bottom{margin-top:5px}.vkuiRichCell__actions{margin-top:8px}.vkuiRichCell__after-children,.vkuiRichCell__children,.vkuiRichCell__text{font-size:var(--vkui--font_paragraph--font_size--regular);line-height:var(--vkui--font_paragraph--line_height--regular)}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-children,.vkuiRichCell--sizeY-compact .vkuiRichCell__children,.vkuiRichCell--sizeY-compact .vkuiRichCell__text{font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-children,.vkuiRichCell--sizeY-none .vkuiRichCell__children,.vkuiRichCell--sizeY-none .vkuiRichCell__text{font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiFormItem .vkuiRichCell{margin-left:calc(-1 * var(--vkui--size_base_padding_horizontal--regular));margin-right:calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none{min-height:60px}}
+.vkuiRichCell{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:flex;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-height:64px;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);text-decoration:none}.vkuiRichCell--sizeY-compact{min-height:60px}.vkuiRichCell__before{margin-right:12px}.vkuiRichCell__in{display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:0}.vkuiRichCell__content{display:flex}.vkuiRichCell__content-before{flex-grow:1;min-width:0}.vkuiRichCell__content-after{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;padding-left:4px}.vkuiRichCell__after-children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell__after-caption{color:#818c99;color:var(--vkui--color_text_secondary);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular);margin-top:2px}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}}.vkuiRichCell__caption,.vkuiRichCell__subhead{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiRichCell__caption{margin-top:1px}.vkuiRichCell__children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell--text-ellipsis .vkuiRichCell__caption,.vkuiRichCell--text-ellipsis .vkuiRichCell__children,.vkuiRichCell--text-ellipsis .vkuiRichCell__subhead,.vkuiRichCell--text-ellipsis .vkuiRichCell__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiRichCell__bottom{margin-top:5px}.vkuiRichCell__actions{margin-top:8px}.vkuiRichCell__after-children,.vkuiRichCell__children,.vkuiRichCell__text{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-children,.vkuiRichCell--sizeY-compact .vkuiRichCell__children,.vkuiRichCell--sizeY-compact .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-children,.vkuiRichCell--sizeY-none .vkuiRichCell__children,.vkuiRichCell--sizeY-none .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiFormItem .vkuiRichCell{margin-left:calc(-1 * 16px);margin-left:calc(-1 * var(--vkui--size_base_padding_horizontal--regular));margin-right:calc(-1 * 16px);margin-right:calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiRichCell--sizeY-none{min-height:60px}}

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { HoverPopperProps } from "../HoverPopper/HoverPopper";
-export interface RichTooltipProps extends Omit<HoverPopperProps, "arrowClassName"> {
+import { HoverPopperProps } from '../HoverPopper/HoverPopper';
+export interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {
     /**
      * Стиль отображения подсказки
      */
-    appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
+    appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip

package/dist/cssm/components/RichTooltip/RichTooltip.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "arrow", "appearance", "className"];
-import * as React from "react";
-import { HoverPopper } from "../HoverPopper/HoverPopper";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { HoverPopper } from '../HoverPopper/HoverPopper';
+import { classNames } from '@vkontakte/vkjs';
 import "./RichTooltip.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
@@ -13,11 +13,11 @@ export var RichTooltip = function RichTooltip(_ref) {
     _ref$arrow = _ref.arrow,
     arrow = _ref$arrow === void 0 ? true : _ref$arrow,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? "neutral" : _ref$appearance,
+    appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
     className = _ref.className,
     popperProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(HoverPopper, _extends({
-    className: classNamesString("vkuiRichTooltip", styles["RichTooltip--appearance-".concat(appearance)], className),
+    className: classNames("vkuiRichTooltip", styles["RichTooltip--appearance-".concat(appearance)], className),
     arrow: arrow,
     arrowClassName: "vkuiRichTooltip__arrow"
   }, popperProps), children);

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

@@ -1 +1 @@
-{"version":3,"file":"RichTooltip.js","names":["React","HoverPopper","classNamesString","RichTooltip","children","arrow","appearance","className","popperProps","styles"],"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./RichTooltip.module.css\";\n\nexport interface RichTooltipProps\n  extends Omit<HoverPopperProps, \"arrowClassName\"> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = \"neutral\",\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNamesString(\n        styles[\"RichTooltip\"],\n        styles[`RichTooltip--appearance-${appearance}`],\n        className\n      )}\n      arrow={arrow}\n      arrowClassName={styles[\"RichTooltip__arrow\"]}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAA0B,4BAA4B;AAC1E,SAASC,gBAAgB,QAAQ,sBAAsB;AAAC;AAWxD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,IAAI;IAAA,uBACZC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,WAAW;IACV,SAAS,EAAEN,gBAAgB,oBAEzBO,MAAM,mCAA4BH,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,cAAc;EAA+B,GACzCG,WAAW,GAEdJ,QAAQ,CACG;AAElB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"RichTooltip.js","names":["React","HoverPopper","classNames","RichTooltip","children","arrow","appearance","className","popperProps","styles"],"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        styles[`RichTooltip--appearance-${appearance}`],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAA0B,4BAA4B;AAC1E,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAU7C;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,IAAI;IAAA,uBACZC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,WAAW;IACV,SAAS,EAAEN,UAAU,oBAEnBO,MAAM,mCAA4BH,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,cAAc;EAA+B,GACzCG,WAAW,GAEdJ,QAAQ,CACG;AAElB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1 +1 @@
-.vkuiRichTooltip{animation:vkui-popper-fadein .2s ease;background-color:var(--vkui--color_background_modal);border-radius:var(--vkui--size_border_radius--regular);box-shadow:var(--vkui--elevation3);color:var(--vkui--color_text_primary)}.vkuiRichTooltip__arrow{color:var(--vkui--color_background_modal)}.vkuiRichTooltip--appearance-accent{background-color:var(--vkui--color_background_accent_tint);color:var(--vkui--color_text_contrast)}.vkuiRichTooltip--appearance-accent .vkuiRichTooltip__arrow{color:var(--vkui--color_background_accent_tint)}.vkuiRichTooltip--appearance-white{background-color:var(--vkui--color_background_contrast);color:var(--vkui--color_text_primary_invariably)}.vkuiRichTooltip--appearance-white .vkuiRichTooltip__arrow{color:var(--vkui--color_background_contrast)}.vkuiRichTooltip--appearance-black{background-color:var(--vkui--color_background_contrast_inverse);color:var(--vkui--color_text_contrast)}.vkuiRichTooltip--appearance-black .vkuiRichTooltip__arrow{color:var(--vkui--color_background_contrast_inverse)}.vkuiRichTooltip--appearance-inversion{background-color:var(--vkui--color_background_modal_inverse);color:var(--vkui--color_text_contrast_themed)}.vkuiRichTooltip--appearance-inversion .vkuiRichTooltip__arrow{color:var(--vkui--color_background_modal_inverse)}
+.vkuiRichTooltip{animation:vkui-popper-fadein .2s ease;background-color:#fff;background-color:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);color:#000;color:var(--vkui--color_text_primary)}.vkuiRichTooltip__arrow{color:#fff;color:var(--vkui--color_background_modal)}.vkuiRichTooltip--appearance-accent{background-color:#5a9eff;background-color:var(--vkui--color_background_accent_tint);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiRichTooltip--appearance-accent .vkuiRichTooltip__arrow{color:#5a9eff;color:var(--vkui--color_background_accent_tint)}.vkuiRichTooltip--appearance-white{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiRichTooltip--appearance-white .vkuiRichTooltip__arrow{color:#fff;color:var(--vkui--color_background_contrast)}.vkuiRichTooltip--appearance-black{background-color:#2d2d2e;background-color:var(--vkui--color_background_contrast_inverse);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiRichTooltip--appearance-black .vkuiRichTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_contrast_inverse)}.vkuiRichTooltip--appearance-inversion{background-color:#2d2d2e;background-color:var(--vkui--color_background_modal_inverse);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiRichTooltip--appearance-inversion .vkuiRichTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_modal_inverse)}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { NavIdProps } from "../../lib/getNavId";
+import * as React from 'react';
+import { NavIdProps } from '../../lib/getNavId';
 export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
     activeView: string;
     onTransition?(params: {

package/dist/cssm/components/Root/Root.js

@@ -2,21 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "activeView", "onTransition", "nav", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
-import { SplitColContext } from "../SplitCol/SplitCol";
-import { ScrollContext } from "../AppRoot/ScrollContext";
-import { NavTransitionProvider } from "../NavTransitionContext/NavTransitionContext";
-import { getNavId } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-import { useDOM } from "../../lib/dom";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { useTimeout } from "../../hooks/useTimeout";
-import { usePlatform } from "../../hooks/usePlatform";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { SplitColContext } from '../SplitCol/SplitCol';
+import { ScrollContext } from '../AppRoot/ScrollContext';
+import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
+import { getNavId } from '../../lib/getNavId';
+import { warnOnce } from '../../lib/warnOnce';
+import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useTimeout } from '../../hooks/useTimeout';
+import { usePlatform } from '../../hooks/usePlatform';
 import "./Root.module.css";
-var warn = warnOnce("Root");
+var warn = warnOnce('Root');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
@@ -103,12 +103,12 @@ export var Root = function Root(_ref) {
     fallbackTransition.set();
   }, [fallbackTransition, transition]);
   var onAnimationEnd = function onAnimationEnd(e) {
-    if (["vkui-root-android-animation-hide-back", "vkui-root-android-animation-show-forward", "vkui-root-ios-animation-hide-back", "vkui-root-ios-animation-show-forward"].includes(e.animationName)) {
+    if (['vkui-root-android-animation-hide-back', 'vkui-root-android-animation-show-forward', 'vkui-root-ios-animation-hide-back', 'vkui-root-ios-animation-show-forward'].includes(e.animationName)) {
       finishTransition();
     }
   };
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiRoot", platform === Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
+    className: classNames("vkuiRoot", platform === Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
   }), views.map(function (view) {
     var _scrolls$viewId;
     var viewId = getNavId(view.props, warn);
@@ -123,7 +123,7 @@ export var Root = function Root(_ref) {
         return viewId && (viewNodes[viewId] = e);
       },
       onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
-      className: classNamesString("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__view--hide-back", transition && viewId === prevView && !isBack && "vkuiRoot__view--hide-forward", transition && viewId === activeView && isBack && "vkuiRoot__view--show-back", transition && viewId === activeView && !isBack && "vkuiRoot__view--show-forward", !transition && viewId === activeView && "vkuiRoot__view--active")
+      className: classNames("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__view--hide-back", transition && viewId === prevView && !isBack && "vkuiRoot__view--hide-forward", transition && viewId === activeView && isBack && "vkuiRoot__view--show-back", transition && viewId === activeView && !isBack && "vkuiRoot__view--show-forward")
     }, /*#__PURE__*/React.createElement(NavTransitionProvider, {
       entering: transition && viewId === activeView
     }, /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Root.js","names":["React","classNamesString","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { useConfigProvider } from \"../ConfigProvider/ConfigProviderContext\";\nimport { SplitColContext } from \"../SplitCol/SplitCol\";\nimport { ScrollContext } from \"../AppRoot/ScrollContext\";\nimport { NavTransitionProvider } from \"../NavTransitionContext/NavTransitionContext\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./Root.module.css\";\n\nexport interface RootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce(\"Root\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>(\n    {}\n  ).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] =\n    React.useState<RootState>({\n      activeView: _activeView,\n      transition: false,\n    });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(\n    finishTransition,\n    platform === Platform.IOS ? 600 : 300\n  );\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        \"vkui-root-android-animation-hide-back\",\n        \"vkui-root-android-animation-show-forward\",\n        \"vkui-root-ios-animation-hide-back\",\n        \"vkui-root-ios-animation-show-forward\",\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"Root\"],\n        platform === Platform.IOS && styles[\"Root--ios\"],\n        transition && styles[\"Root--transition\"],\n        className\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget =\n          transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition &&\n          (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNamesString(\n              styles[\"Root__view\"],\n              transition &&\n                viewId === prevView &&\n                isBack &&\n                styles[\"Root__view--hide-back\"],\n              transition &&\n                viewId === prevView &&\n                !isBack &&\n                styles[\"Root__view--hide-forward\"],\n              transition &&\n                viewId === activeView &&\n                isBack &&\n                styles[\"Root__view--show-back\"],\n              transition &&\n                viewId === activeView &&\n                !isBack &&\n                styles[\"Root__view--show-forward\"],\n              !transition &&\n                viewId === activeView &&\n                styles[\"Root__view--active\"]\n            )}\n          >\n            <NavTransitionProvider\n              entering={transition && viewId === activeView}\n            >\n              <div\n                className={styles[\"Root__scrollCompensation\"]}\n                style={{\n                  marginTop: compensateScroll\n                    ? viewId && -(scrolls[viewId] ?? 0)\n                    : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Root.js","names":["React","classNames","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiRoot{height:100%;position:relative;width:100%}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{height:100%;position:relative;width:100%}.vkuiRoot--transition .vkuiRoot__view{left:0;overflow:hidden;position:fixed;top:0}.vkuiRoot__scrollCompensation{height:100%;width:100%}.vkuiRoot__view--hide-forward,.vkuiRoot__view--show-back{z-index:1}.vkuiRoot__view--hide-back,.vkuiRoot__view--show-forward{z-index:2}.vkuiRoot__view--show-forward{animation:vkui-root-android-animation-show-forward .3s var(--vkui--animation_easing_platform)}.vkuiRoot__view--hide-back{animation:vkui-root-android-animation-hide-back .3s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after,.vkuiRoot--ios .vkuiRoot__view--show-back:after{background-color:#000;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:6}.vkuiRoot--ios .vkuiRoot__view--show-back:after{animation:vkui-root-ios-animation-show-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after{animation:vkui-root-ios-animation-hide-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--show-forward{animation:vkui-root-ios-animation-show-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--hide-back{animation:vkui-root-ios-animation-hide-back .6s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkui-root-ios-animation-hide-back{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}@keyframes vkui-root-ios-animation-show-forward{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes vkui-root-android-animation-hide-back{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes vkui-root-android-animation-show-forward{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
+.vkuiRoot{height:100%;position:relative;width:100%}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{height:100%;position:relative;width:100%}.vkuiRoot--transition .vkuiRoot__view{left:0;overflow:hidden;position:fixed;top:0}.vkuiRoot__scrollCompensation{height:100%;width:100%}.vkuiRoot__view--show-forward{animation:vkui-root-android-animation-show-forward .3s cubic-bezier(.4,0,.2,1);animation:vkui-root-android-animation-show-forward .3s var(--vkui--animation_easing_platform)}.vkuiRoot__view--hide-back{animation:vkui-root-android-animation-hide-back .3s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-android-animation-hide-back .3s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after,.vkuiRoot--ios .vkuiRoot__view--show-back:after{background-color:#000;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiRoot--ios .vkuiRoot__view--show-back:after{animation:vkui-root-ios-animation-show-back .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-ios-animation-show-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after{animation:vkui-root-ios-animation-hide-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-root-ios-animation-hide-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--show-forward{animation:vkui-root-ios-animation-show-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-root-ios-animation-show-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--hide-back{animation:vkui-root-ios-animation-hide-back .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-ios-animation-hide-back .6s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkui-root-ios-animation-hide-back{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}@keyframes vkui-root-ios-animation-show-forward{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes vkui-root-android-animation-hide-back{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes vkui-root-android-animation-show-forward{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}

package/dist/cssm/components/ScreenSpinner/Icon48CancelCircle.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const Icon48CancelCircle: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from "react";
+import * as React from 'react';
 export var Icon48CancelCircle = function Icon48CancelCircle(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     className: "vkuiIcon",

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

@@ -1 +1 @@
-{"version":3,"file":"Icon48CancelCircle.js","names":["React","Icon48CancelCircle","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAoC;EAAA,oBACrE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,8VAA8V;IAChW,IAAI,EAAC;EAAc,EACnB,CACE;AAAA,CACP"}
+{"version":3,"file":"Icon48CancelCircle.js","names":["React","Icon48CancelCircle","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAoC;EAAA,oBACrE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,8VAA8V;IAChW,IAAI,EAAC;EAAc,EACnB,CACE;AAAA,CACP"}

package/dist/cssm/components/ScreenSpinner/Icon48DoneOutline.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const Icon48DoneOutline: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from "react";
+import * as React from 'react';
 export var Icon48DoneOutline = function Icon48DoneOutline(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     className: "vkuiIcon",

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

@@ -1 +1 @@
-{"version":3,"file":"Icon48DoneOutline.js","names":["React","Icon48DoneOutline","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAoC;EAAA,oBACpE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,CAAC,EAAC,mBAAmB;IACrB,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,KAAK;IACjB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACE;AAAA,CACP"}
+{"version":3,"file":"Icon48DoneOutline.js","names":["React","Icon48DoneOutline","props"],"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAoC;EAAA,oBACpE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,CAAC,EAAC,mBAAmB;IACrB,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,KAAK;IACjB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACE;AAAA,CACP"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SpinnerProps } from "../Spinner/Spinner";
+import { SpinnerProps } from '../Spinner/Spinner';
 export interface ScreenSpinnerProps extends SpinnerProps {
-    state?: "loading" | "cancelable" | "done" | "error";
+    state?: 'loading' | 'cancelable' | 'done' | 'error';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner

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

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["style", "className", "state", "size", "aria-label", "onClick"];
-import * as React from "react";
-import { Spinner } from "../Spinner/Spinner";
-import { Icon24Cancel } from "@vkontakte/icons";
-import { Icon48DoneOutline } from "./Icon48DoneOutline";
-import { Icon48CancelCircle } from "./Icon48CancelCircle";
-import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { useScrollLock } from "../AppRoot/ScrollContext";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { Spinner } from '../Spinner/Spinner';
+import { Icon24Cancel } from '@vkontakte/icons';
+import { Icon48DoneOutline } from './Icon48DoneOutline';
+import { Icon48CancelCircle } from './Icon48CancelCircle';
+import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { classNames } from '@vkontakte/vkjs';
 import "./ScreenSpinner.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
@@ -17,14 +17,14 @@ export var ScreenSpinner = function ScreenSpinner(_ref) {
   var style = _ref.style,
     className = _ref.className,
     _ref$state = _ref.state,
-    state = _ref$state === void 0 ? "loading" : _ref$state,
+    state = _ref$state === void 0 ? 'loading' : _ref$state,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "large" : _ref$size,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Пожалуйста, подождите..." : _ref$ariaLabel,
+    size = _ref$size === void 0 ? 'large' : _ref$size,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Пожалуйста, подождите...' : _ref$ariaLabel,
     onClick = _ref.onClick,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var hideSpinner = state === "done" || state === "error";
+  var hideSpinner = state === 'done' || state === 'error';
   var Icon = {
     loading: function loading() {
       return null;
@@ -36,7 +36,7 @@ export var ScreenSpinner = function ScreenSpinner(_ref) {
   useScrollLock();
   return /*#__PURE__*/React.createElement(PopoutWrapper, {
     hasMask: false,
-    className: classNamesString("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", styles["ScreenSpinner--state-".concat(state)], className),
+    className: classNames("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", styles["ScreenSpinner--state-".concat(state)], className),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiScreenSpinner__container",