@vkontakte/vkui 5.0.2 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","getTitleFromChildren","Platform","IOS"],"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { Platform } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = \"Готово\",\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton\n      aria-label={getTitleFromChildren(children)}\n      primary\n      {...restProps}\n    >\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAIA;AACA;AACA;AACA;AAAuD;AAEvD;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,oCAAiB;IAChB,cAAY,IAAAC,2BAAoB,EAACJ,QAAQ,CAAE;IAC3C,OAAO;EAAA,GACHC,SAAS,GAEZC,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAGN,QAAQ,gBAAG,oBAAC,wBAAiB,OAAG,CAC3C;AAExB,CAAC;AAAC"}
+{"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","getTitleFromChildren","Platform","IOS"],"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { Platform } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTitleFromChildren } from '../../lib/utils';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAuD;AAEvD;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,oCAAiB;IAAC,cAAY,IAAAC,2BAAoB,EAACJ,QAAQ,CAAE;IAAC,OAAO;EAAA,GAAKC,SAAS,GACjFC,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAGN,QAAQ,gBAAG,oBAAC,wBAAiB,OAAG,CAC3C;AAExB,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { SpinnerProps } from "../Spinner/Spinner";
+import * as React from 'react';
+import { SpinnerProps } from '../Spinner/Spinner';
 export interface PanelSpinnerProps extends SpinnerProps {
     height?: number;
 }

package/dist/cjs/components/PanelSpinner/PanelSpinner.js

@@ -29,5 +29,5 @@ var PanelSpinner = /*#__PURE__*/React.memo(function (_ref) {
   }));
 });
 exports.PanelSpinner = PanelSpinner;
-PanelSpinner.displayName = "PanelSpinner";
+PanelSpinner.displayName = 'PanelSpinner';
 //# sourceMappingURL=PanelSpinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSpinner.js","names":["PanelSpinner","React","memo","height","style","restProps","displayName"],"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Spinner, SpinnerProps } from \"../Spinner/Spinner\";\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  )\n);\n\nPanelSpinner.displayName = \"PanelSpinner\";\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAA2D;AAM3D;AACA;AACA;AACO,IAAMA,YAAY,gBAAGC,KAAK,CAACC,IAAI,CACpC;EAAA,uBAAGC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAAA,oBACjC,oBAAC,gBAAO;IAAC,IAAI,EAAC;EAAS,GAAKA,SAAS;IAAE,KAAK;MAAIF,MAAM,EAANA;IAAM,GAAKC,KAAK;EAAG,GAAG;AAAA,CACvE,CACF;AAAC;AAEFJ,YAAY,CAACM,WAAW,GAAG,cAAc"}
+{"version":3,"file":"PanelSpinner.js","names":["PanelSpinner","React","memo","height","style","restProps","displayName"],"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAA2D;AAM3D;AACA;AACA;AACO,IAAMA,YAAY,gBAAGC,KAAK,CAACC,IAAI,CACpC;EAAA,uBAAGC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAAA,oBACjC,oBAAC,gBAAO;IAAC,IAAI,EAAC;EAAS,GAAKA,SAAS;IAAE,KAAK;MAAIF,MAAM,EAANA;IAAM,GAAKC,KAAK;EAAG,GAAG;AAAA,CACvE,CACF;AAAC;AAEFJ,YAAY,CAACM,WAAW,GAAG,cAAc"}

package/dist/cjs/components/Placeholder/Placeholder.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 PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Иконка

package/dist/cjs/components/Placeholder/Placeholder.js

@@ -9,8 +9,7 @@ exports.Placeholder = 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 _utils = require("../../lib/utils");
+var _vkjs = require("@vkontakte/vkjs");
 var _Title = require("../Typography/Title/Title");
 var _Headline = require("../Typography/Headline/Headline");
 var _excluded = ["icon", "header", "action", "children", "stretched", "getRootRef", "className"];
@@ -28,19 +27,19 @@ var Placeholder = function Placeholder(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", className)
+    className: (0, _vkjs.classNames)("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiPlaceholder__in"
-  }, (0, _utils.hasReactNode)(icon) && /*#__PURE__*/React.createElement("div", {
+  }, (0, _vkjs.hasReactNode)(icon) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiPlaceholder__icon"
-  }, icon), (0, _utils.hasReactNode)(header) && /*#__PURE__*/React.createElement(_Title.Title, {
+  }, icon), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/React.createElement(_Title.Title, {
     level: "2",
     weight: "2",
     className: "vkuiPlaceholder__header"
-  }, header), (0, _utils.hasReactNode)(children) && /*#__PURE__*/React.createElement(_Headline.Headline, {
+  }, header), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/React.createElement(_Headline.Headline, {
     weight: "3",
     className: "vkuiPlaceholder__text"
-  }, children), (0, _utils.hasReactNode)(action) && /*#__PURE__*/React.createElement("div", {
+  }, children), (0, _vkjs.hasReactNode)(action) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiPlaceholder__action"
   }, action)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","names":["Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps","classNamesString","hasReactNode"],"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { HasRootRef } from \"../../types\";\nimport styles from \"./Placeholder.module.css\";\n\nexport interface PlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  action,\n  children,\n  stretched,\n  getRootRef,\n  className,\n  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNamesString(\n      styles[\"Placeholder\"],\n      stretched && styles[\"Placeholder--stretched\"],\n      className\n    )}\n  >\n    <div className={styles[\"Placeholder__in\"]}>\n      {hasReactNode(icon) && (\n        <div className={styles[\"Placeholder__icon\"]}>{icon}</div>\n      )}\n      {hasReactNode(header) && (\n        <Title level=\"2\" weight=\"2\" className={styles[\"Placeholder__header\"]}>\n          {header}\n        </Title>\n      )}\n      {hasReactNode(children) && (\n        <Headline weight=\"3\" className={styles[\"Placeholder__text\"]}>\n          {children}\n        </Headline>\n      )}\n      {hasReactNode(action) && (\n        <div className={styles[\"Placeholder__action\"]}>{action}</div>\n      )}\n    </div>\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA2D;AAyB3D;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW;EAAA,IACtBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,sDACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAE,IAAAG,4BAAgB,qBAEzBJ,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvC,IAAAG,mBAAY,EAACT,IAAI,CAAC,iBACjB;IAAK,SAAS;EAA8B,GAAEA,IAAI,CACnD,EACA,IAAAS,mBAAY,EAACR,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACA,IAAAQ,mBAAY,EAACN,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACA,IAAAM,mBAAY,EAACP,MAAM,CAAC,iBACnB;IAAK,SAAS;EAAgC,GAAEA,MAAM,CACvD,CACG,CACF;AAAA,CACP;AAAC"}
+{"version":3,"file":"Placeholder.js","names":["Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps","classNames","hasReactNode"],"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Title } from '../Typography/Title/Title';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { HasRootRef } from '../../types';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  action,\n  children,\n  stretched,\n  getRootRef,\n  className,\n  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      className,\n    )}\n  >\n    <div className={styles['Placeholder__in']}>\n      {hasReactNode(icon) && <div className={styles['Placeholder__icon']}>{icon}</div>}\n      {hasReactNode(header) && (\n        <Title level=\"2\" weight=\"2\" className={styles['Placeholder__header']}>\n          {header}\n        </Title>\n      )}\n      {hasReactNode(children) && (\n        <Headline weight=\"3\" className={styles['Placeholder__text']}>\n          {children}\n        </Headline>\n      )}\n      {hasReactNode(action) && <div className={styles['Placeholder__action']}>{action}</div>}\n    </div>\n  </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAA2D;AAyB3D;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW;EAAA,IACtBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,sDACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAE,IAAAG,gBAAU,qBAEnBJ,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvC,IAAAG,kBAAY,EAACT,IAAI,CAAC,iBAAI;IAAK,SAAS;EAA8B,GAAEA,IAAI,CAAO,EAC/E,IAAAS,kBAAY,EAACR,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACA,IAAAQ,kBAAY,EAACN,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACA,IAAAM,kBAAY,EAACP,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,MAAM,CAAO,CAClF,CACF;AAAA,CACP;AAAC"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PlatformType } from '../../lib/platform';
+export interface PlatformProviderProps {
+    /**
+     * Платформа
+     */
+    value: PlatformType;
+    children: React.ReactNode;
+}
+/**
+ * Компонент, позволяющий переопределить платформу для части приложения
+ *
+ * @version 5.1.0
+ * @see https://vkcom.github.io/VKUI/#/PlatformProvider
+ */
+export declare function PlatformProvider({ value, children }: PlatformProviderProps): JSX.Element;

package/dist/cjs/components/PlatformProvider/PlatformProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlatformProvider = PlatformProvider;
+var _react = _interopRequireDefault(require("react"));
+var _ConfigProviderOverride = require("../ConfigProvider/ConfigProviderOverride");
+var _tokensClassProvider = require("../../lib/tokensClassProvider");
+var _useAppearance = require("../../hooks/useAppearance");
+/**
+ * Компонент, позволяющий переопределить платформу для части приложения
+ *
+ * @version 5.1.0
+ * @see https://vkcom.github.io/VKUI/#/PlatformProvider
+ */
+function PlatformProvider(_ref) {
+  var value = _ref.value,
+    children = _ref.children;
+  var appearance = (0, _useAppearance.useAppearance)();
+  return /*#__PURE__*/_react.default.createElement(_ConfigProviderOverride.ConfigProviderOverride, {
+    platform: value
+  }, /*#__PURE__*/_react.default.createElement(_tokensClassProvider.TokensClassProvider, {
+    platform: value,
+    appearance: appearance
+  }, children));
+}
+//# sourceMappingURL=PlatformProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlatformProvider.js","names":["PlatformProvider","value","children","appearance","useAppearance"],"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { PlatformType } from '../../lib/platform';\nimport { useAppearance } from '../../hooks/useAppearance';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @version 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AAUA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAgB,OAA6C;EAAA,IAA1CC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAChD,IAAMC,UAAU,GAAG,IAAAC,4BAAa,GAAE;EAElC,oBACE,6BAAC,8CAAsB;IAAC,QAAQ,EAAEH;EAAM,gBACtC,6BAAC,wCAAmB;IAAC,QAAQ,EAAEA,KAAM;IAAC,UAAU,EAAEE;EAAW,GAC1DD,QAAQ,CACW,CACC;AAE7B"}

package/dist/cjs/components/PopoutRoot/PopoutRoot.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 PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     popout?: React.ReactNode;
     modal?: React.ReactNode;

package/dist/cjs/components/PopoutRoot/PopoutRoot.js

@@ -9,7 +9,7 @@ exports.PopoutRoot = 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 _AppRootPortal = require("../AppRoot/AppRootPortal");
 var _dom = require("../../lib/dom");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
@@ -19,7 +19,7 @@ var PopoutRootPopout = function PopoutRootPopout(_ref) {
   var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
     isDesktop = _useAdaptivityWithJSM.isDesktop;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classNames.classNamesString)("vkuiPopoutRoot__popout", isDesktop && "vkuiPopoutRoot__popout--absolute")
+    className: (0, _vkjs.classNames)("vkuiPopoutRoot__popout", isDesktop && "vkuiPopoutRoot__popout--absolute")
   }, children);
 };
 var PopoutRootModal = function PopoutRootModal(_ref2) {
@@ -41,7 +41,7 @@ var PopoutRoot = function PopoutRoot(_ref3) {
     popout && (0, _dom.blurActiveElement)(document);
   }, [document, popout]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiPopoutRoot", className),
+    className: (0, _vkjs.classNames)("vkuiPopoutRoot", className),
     ref: getRootRef
   }), children, /*#__PURE__*/React.createElement(_AppRootPortal.AppRootPortal, null, !!popout && /*#__PURE__*/React.createElement(PopoutRootPopout, null, popout), !!modal && /*#__PURE__*/React.createElement(PopoutRootModal, null, modal)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.js","names":["PopoutRootPopout","children","useAdaptivityWithJSMediaQueries","isDesktop","classNamesString","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","useDOM","document","React","useEffect","blurActiveElement"],"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { blurActiveElement, useDOM } from \"../../lib/dom\";\nimport { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport styles from \"./PopoutRoot.module.css\";\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"PopoutRoot__popout\"],\n        isDesktop && styles[\"PopoutRoot__popout--absolute\"]\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles[\"PopoutRoot__modal\"]}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(styles[\"PopoutRoot\"], className)}\n      ref={getRootRef}\n    >\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA8F;AAO9F,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,4BAEzBD,SAAS,sCAA0C;EACnD,GAEDF,QAAQ,CACL;AAEV,CAAC;AAMD,IAAMI,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCJ,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASM,IAAMK,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLP,QAAQ,SAARA,QAAQ;IACRQ,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqB,IAAAC,WAAM,GAAE;IAArBC,QAAQ,WAARA,QAAQ;EAEhBC,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBR,MAAM,IAAI,IAAAS,sBAAiB,EAACH,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEN,MAAM,CAAC,CAAC;EAEtB,oBACE,sDACMI,SAAS;IACb,SAAS,EAAE,IAAAP,4BAAgB,oBAAuBM,SAAS,CAAE;IAC7D,GAAG,EAAED;EAAW,IAEfR,QAAQ,eACT,oBAAC,4BAAa,QACX,CAAC,CAACM,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC;AAAC"}
+{"version":3,"file":"PopoutRoot.js","names":["PopoutRootPopout","children","useAdaptivityWithJSMediaQueries","isDesktop","classNames","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","useDOM","document","React","useEffect","blurActiveElement"],"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA8F;AAO9F,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,4BAEnBD,SAAS,sCAA0C;EACnD,GAEDF,QAAQ,CACL;AAEV,CAAC;AAMD,IAAMI,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCJ,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASM,IAAMK,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLP,QAAQ,SAARA,QAAQ;IACRQ,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqB,IAAAC,WAAM,GAAE;IAArBC,QAAQ,WAARA,QAAQ;EAEhBC,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBR,MAAM,IAAI,IAAAS,sBAAiB,EAACH,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEN,MAAM,CAAC,CAAC;EAEtB,oBACE,sDAASI,SAAS;IAAE,SAAS,EAAE,IAAAP,gBAAU,oBAAuBM,SAAS,CAAE;IAAC,GAAG,EAAED;EAAW,IACzFR,QAAQ,eACT,oBAAC,4BAAa,QACX,CAAC,CAACM,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC;AAAC"}

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

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React from 'react';
 export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
     hasMask?: boolean;
     fixed?: boolean;
-    alignY?: "top" | "center" | "bottom";
-    alignX?: "left" | "center" | "right";
+    alignY?: 'top' | 'center' | 'bottom';
+    alignX?: 'left' | 'center' | 'right';
     closing?: boolean;
 }
 /**

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 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 _platform = require("../../lib/platform");
 var _useTimeout = require("../../hooks/useTimeout");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -22,9 +22,9 @@ var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children",
  */
 var PopoutWrapper = function PopoutWrapper(_ref) {
   var _ref$alignY = _ref.alignY,
-    alignY = _ref$alignY === void 0 ? "center" : _ref$alignY,
+    alignY = _ref$alignY === void 0 ? 'center' : _ref$alignY,
     _ref$alignX = _ref.alignX,
-    alignX = _ref$alignX === void 0 ? "center" : _ref$alignX,
+    alignX = _ref$alignX === void 0 ? 'center' : _ref$alignX,
     _ref$closing = _ref.closing,
     closing = _ref$closing === void 0 ? false : _ref$closing,
     _ref$hasMask = _ref.hasMask,
@@ -42,7 +42,7 @@ var PopoutWrapper = function PopoutWrapper(_ref) {
     setOpened = _React$useState2[1];
   var elRef = React.useRef(null);
   var onFadeInEnd = function onFadeInEnd(e) {
-    if (!e || e.animationName === "vkui-animation-full-fade-in") {
+    if (!e || e.animationName === 'vkui-animation-full-fade-in') {
       setOpened(true);
     }
   };
@@ -52,13 +52,13 @@ var PopoutWrapper = function PopoutWrapper(_ref) {
   }, [animationFinishFallback, opened]);
   var _useDOM = (0, _dom.useDOM)(),
     window = _useDOM.window;
-  (0, _useGlobalEventListener.useGlobalEventListener)(window, "touchmove", function (e) {
+  (0, _useGlobalEventListener.useGlobalEventListener)(window, 'touchmove', function (e) {
     return e.preventDefault();
   }, {
     passive: false
   });
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiPopoutWrapper", styles["PopoutWrapper--alignY-".concat(alignY)], styles["PopoutWrapper--alignX-".concat(alignX)], closing && "vkuiPopoutWrapper--closing", opened && "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", hasMask && "vkuiPopoutWrapper--masked", className),
+    className: (0, _vkjs.classNames)("vkuiPopoutWrapper", styles["PopoutWrapper--alignY-".concat(alignY)], styles["PopoutWrapper--alignX-".concat(alignX)], closing && "vkuiPopoutWrapper--closing", opened && "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", hasMask && "vkuiPopoutWrapper--masked", className),
     onAnimationEnd: opened ? undefined : onFadeInEnd,
     ref: elRef
   }), /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.js","names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","useDOM","window","useGlobalEventListener","preventDefault","passive","classNamesString","styles","undefined"],"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useDOM } from \"../../lib/dom\";\nimport styles from \"./PopoutWrapper.module.css\";\n\nexport interface PopoutWrapperProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: \"top\" | \"center\" | \"bottom\";\n  alignX?: \"left\" | \"center\" | \"right\";\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = \"center\",\n  alignX = \"center\",\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === \"vkui-animation-full-fade-in\") {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(\n    onFadeInEnd,\n    platform === Platform.IOS ? 300 : 200\n  );\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, \"touchmove\", (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"PopoutWrapper\"],\n        styles[`PopoutWrapper--alignY-${alignY}`],\n        styles[`PopoutWrapper--alignX-${alignX}`],\n        closing && styles[\"PopoutWrapper--closing\"],\n        opened && styles[\"PopoutWrapper--opened\"],\n        fixed && styles[\"PopoutWrapper--fixed\"],\n        hasMask && styles[\"PopoutWrapper--masked\"],\n        className\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles[\"PopoutWrapper__container\"]}>\n        <div className={styles[\"PopoutWrapper__overlay\"]} onClick={onClick} />\n        <div className={styles[\"PopoutWrapper__content\"]}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAuC;AAYvC;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAUA;EAAA,uBATxBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,oBACjBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,oBACfC,OAAO;IAAPA,OAAO,6BAAG,IAAI;IAAA,kBACdC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACZC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA4BC,KAAK,CAACC,QAAQ,CAAC,CAACT,OAAO,CAAC;IAAA;IAA7CU,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGJ,KAAK,CAACK,MAAM,CAAiB,IAAI,CAAC;EAEhD,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAwB,EAAK;IAChD,IAAI,CAACA,CAAC,IAAIA,CAAC,CAACC,aAAa,KAAK,6BAA6B,EAAE;MAC3DL,SAAS,CAAC,IAAI,CAAC;IACjB;EACF,CAAC;EACD,IAAMM,uBAAuB,GAAG,IAAAC,sBAAU,EACxCJ,WAAW,EACXR,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAG,GAAG,CACtC;EACDZ,KAAK,CAACa,SAAS,CAAC,YAAM;IACpB,CAACX,MAAM,IAAIO,uBAAuB,CAACK,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACL,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmB,IAAAa,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EACd,IAAAC,8CAAsB,EAACD,MAAM,EAAE,WAAW,EAAE,UAACT,CAAC;IAAA,OAAKA,CAAC,CAACW,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,sDACMtB,SAAS;IACb,SAAS,EAAE,IAAAuB,4BAAgB,uBAEzBC,MAAM,iCAA0BhC,MAAM,EAAG,EACzCgC,MAAM,iCAA0B/B,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CW,MAAM,+BAAmC,EACzCT,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEM,MAAM,GAAGoB,SAAS,GAAGhB,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAET;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"PopoutWrapper.js","names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","useDOM","window","useGlobalEventListener","preventDefault","passive","classNames","styles","undefined"],"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === 'vkui-animation-full-fade-in') {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        styles[`PopoutWrapper--alignY-${alignY}`],\n        styles[`PopoutWrapper--alignX-${alignX}`],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAuC;AAWvC;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAUA;EAAA,uBATxBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,oBACjBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,oBACfC,OAAO;IAAPA,OAAO,6BAAG,IAAI;IAAA,kBACdC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACZC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA4BC,KAAK,CAACC,QAAQ,CAAC,CAACT,OAAO,CAAC;IAAA;IAA7CU,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGJ,KAAK,CAACK,MAAM,CAAiB,IAAI,CAAC;EAEhD,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAwB,EAAK;IAChD,IAAI,CAACA,CAAC,IAAIA,CAAC,CAACC,aAAa,KAAK,6BAA6B,EAAE;MAC3DL,SAAS,CAAC,IAAI,CAAC;IACjB;EACF,CAAC;EACD,IAAMM,uBAAuB,GAAG,IAAAC,sBAAU,EAACJ,WAAW,EAAER,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;EAC9FZ,KAAK,CAACa,SAAS,CAAC,YAAM;IACpB,CAACX,MAAM,IAAIO,uBAAuB,CAACK,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACL,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmB,IAAAa,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EACd,IAAAC,8CAAsB,EAACD,MAAM,EAAE,WAAW,EAAE,UAACT,CAAC;IAAA,OAAKA,CAAC,CAACW,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,sDACMtB,SAAS;IACb,SAAS,EAAE,IAAAuB,gBAAU,uBAEnBC,MAAM,iCAA0BhC,MAAM,EAAG,EACzCgC,MAAM,iCAA0B/B,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CW,MAAM,+BAAmC,EACzCT,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEM,MAAM,GAAGoB,SAAS,GAAGhB,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAET;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { PopperCommonProps } from "../Popper/Popper";
-export interface PopoverProps extends Omit<PopperCommonProps, "arrow" | "arrowClassName"> {
+import * as React from 'react';
+import { PopperCommonProps } from '../Popper/Popper';
+export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {
     /**
      * Механика вызова всплывающего окна.
      *
@@ -11,7 +11,7 @@ export interface PopoverProps extends Omit<PopperCommonProps, "arrow" | "arrowCl
      * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента
      * > и выпадающего окна.
      */
-    action?: "click" | "hover";
+    action?: 'click' | 'hover';
     /**
      * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.
      */

package/dist/cjs/components/Popover/Popover.js

@@ -12,7 +12,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 _Popper = require("../Popper/Popper");
 var _FocusTrap = require("../FocusTrap/FocusTrap");
 var _useTimeout = require("../../hooks/useTimeout");
@@ -26,7 +26,7 @@ var _excluded = ["action", "shown", "showDelay", "hideDelay", "offsetDistance",
  */
 var Popover = function Popover(_ref) {
   var _ref$action = _ref.action,
-    action = _ref$action === void 0 ? "click" : _ref$action,
+    action = _ref$action === void 0 ? 'click' : _ref$action,
     shownProp = _ref.shown,
     _ref$showDelay = _ref.showDelay,
     showDelay = _ref$showDelay === void 0 ? 150 : _ref$showDelay,
@@ -43,7 +43,7 @@ var Popover = function Popover(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useDOM = (0, _dom.useDOM)(),
     document = _useDOM.document;
-  var hoverable = action === "hover";
+  var hoverable = action === 'hover';
   var hovered = React.useRef(false);
   var _React$useState = React.useState(shownProp || false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -53,17 +53,17 @@ var Popover = function Popover(_ref) {
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     dropdownNode = _React$useState4[0],
     setPopperNode = _React$useState4[1];
-  var shown = typeof shownProp === "boolean" ? shownProp : computedShown;
+  var shown = typeof shownProp === 'boolean' ? shownProp : computedShown;
   var patchedPopperRef = (0, _useExternRef.useExternRef)(setPopperNode, getRef);
   var _usePatchChildrenRef = (0, _usePatchChildrenRef3.usePatchChildrenRef)(children),
     _usePatchChildrenRef2 = (0, _slicedToArray2.default)(_usePatchChildrenRef, 2),
     childRef = _usePatchChildrenRef2[0],
     child = _usePatchChildrenRef2[1];
   var setShown = function setShown(value) {
-    if (typeof shownProp !== "boolean") {
+    if (typeof shownProp !== 'boolean') {
       setComputedShown(value);
     }
-    typeof onShownChange === "function" && onShownChange(value);
+    typeof onShownChange === 'function' && onShownChange(value);
   };
   var showTimeout = (0, _useTimeout.useTimeout)(function () {
     return setShown(true);
@@ -96,29 +96,38 @@ var Popover = function Popover(_ref) {
       setShown(false);
     }
   };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", handleOutsideClick);
-  var targetEnterListener = (0, _useEventListener.useEventListener)("mouseenter", handleTargetEnter);
-  var targetClickEvent = (0, _useEventListener.useEventListener)("click", handleTargetClick);
-  var targetLeaveListener = (0, _useEventListener.useEventListener)("mouseleave", handleTargetLeave);
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', handleOutsideClick);
+  var targetEnterListener = (0, _useEventListener.useEventListener)('mouseenter', handleTargetEnter);
+  var targetClickEvent = (0, _useEventListener.useEventListener)('click', handleTargetClick);
+  var targetLeaveListener = (0, _useEventListener.useEventListener)('mouseleave', handleTargetLeave);
   React.useEffect(function () {
     if (!childRef.current) {
       return;
     }
     targetClickEvent.add(childRef.current);
+  }, [childRef, targetClickEvent]);
+  React.useEffect(function () {
+    if (!childRef.current) {
+      return;
+    }
     if (hoverable) {
       targetEnterListener.add(childRef.current);
       targetLeaveListener.add(childRef.current);
     }
-  }, [childRef, hoverable, targetClickEvent, targetEnterListener, targetLeaveListener]);
+    return function () {
+      targetEnterListener.remove();
+      targetLeaveListener.remove();
+    };
+  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, child, shown && /*#__PURE__*/React.createElement(_Popper.Popper, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiPopover", className),
+    className: (0, _vkjs.classNames)("vkuiPopover", className),
     targetRef: childRef,
     getRef: patchedPopperRef,
     offsetDistance: offsetDistance,
     style: // Reason: Typescript ругается на CSS Custom Properties в объекте
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styleProp), {}, {
-      "--vkui_internal--popover_safe_zone_padding": "".concat(offsetDistance, "px")
+      '--vkui_internal--popover_safe_zone_padding': "".concat(offsetDistance, "px")
     }),
     renderContent: function renderContent(_ref2) {
       var wrapperClassName = _ref2.className;

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","classNamesString","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { PopperCommonProps, Popper } from \"../Popper/Popper\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\nimport styles from \"./Popover.module.css\";\n\nexport interface PopoverProps\n  extends Omit<PopperCommonProps, \"arrow\" | \"arrowClassName\"> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: \"click\" | \"hover\";\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = \"click\",\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === \"hover\";\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(\n    null\n  );\n\n  const shown = typeof shownProp === \"boolean\" ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== \"boolean\") {\n      setComputedShown(value);\n    }\n    typeof onShownChange === \"function\" && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, \"click\", handleOutsideClick);\n  const targetEnterListener = useEventListener(\"mouseenter\", handleTargetEnter);\n  const targetClickEvent = useEventListener(\"click\", handleTargetClick);\n  const targetLeaveListener = useEventListener(\"mouseleave\", handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, [\n    childRef,\n    hoverable,\n    targetClickEvent,\n    targetEnterListener,\n    targetLeaveListener,\n  ]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNamesString(styles[\"Popover\"], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              \"--vkui_internal--popover_safe_zone_padding\": `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","classNames","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick);\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { Modifier } from "react-popper";
-import { HasRef } from "../../types";
-export declare type Placement = "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "top" | "bottom" | "left" | "right";
+import * as React from 'react';
+import { Modifier } from 'react-popper';
+import { HasRef } from '../../types';
+export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
 export interface PopperRenderContentProps {
     className: string;
 }

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

@@ -19,31 +19,31 @@ var _usePlatform = require("../../hooks/usePlatform");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _useExternRef = require("../../hooks/useExternRef");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent", "className"];
 var ARROW_PADDING = 8;
 var ARROW_WIDTH = 20;
 var ARROW_HEIGHT = 8;
 var preventOverflowModifier = {
-  name: "preventOverflow",
+  name: 'preventOverflow',
   options: {
     mainAxis: false
   }
 };
 var flipModifier = {
-  name: "flip"
+  name: 'flip'
 };
 var arrowModifier = {
-  name: "arrow",
+  name: 'arrow',
   options: {
     padding: ARROW_PADDING
   }
 };
 var sameWidthModifier = {
-  name: "sameWidth",
+  name: 'sameWidth',
   enabled: true,
-  phase: "beforeWrite",
-  requires: ["computeStyles"],
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
   fn: function fn(_ref) {
     var state = _ref.state;
     state.styles.popper.width = "".concat(state.rects.reference.width, "px");
@@ -63,7 +63,7 @@ var Popper = function Popper(_ref3) {
     children = _ref3.children,
     getRef = _ref3.getRef,
     _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? "bottom-start" : _ref3$placement,
+    placement = _ref3$placement === void 0 ? 'bottom-start' : _ref3$placement,
     onPlacementChange = _ref3.onPlacementChange,
     arrow = _ref3.arrow,
     arrowClassName = _ref3.arrowClassName,
@@ -91,7 +91,7 @@ var Popper = function Popper(_ref3) {
   var setExternalRef = (0, _useExternRef.useExternRef)(getRef, setPopperNode);
   var modifiers = React.useMemo(function () {
     var modifiers = [preventOverflowModifier, {
-      name: "offset",
+      name: 'offset',
       options: {
         offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
       }
@@ -115,16 +115,16 @@ var Popper = function Popper(_ref3) {
     state = _usePopper.state,
     attributes = _usePopper.attributes;
   var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
-  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован с краю
+  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю
 
   // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
   // таргета из-за маленьких размеров последнего
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     if (arrow && isEdgePlacement) {
       var _ref4, _targetRef$current, _targetRef$current2;
-      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith("bottom") || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith("top") ? "vertical" : "horizontal";
-      var arrowSize = placementDirection === "vertical" ? ARROW_WIDTH : ARROW_HEIGHT;
-      var targetSize = (_ref4 = placementDirection === "vertical" ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
+      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('bottom') || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
+      var arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
+      var targetSize = (_ref4 = placementDirection === 'vertical' ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
       if (targetSize < arrowSize + 2 * ARROW_PADDING) {
         setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
       }
@@ -140,7 +140,7 @@ var Popper = function Popper(_ref3) {
     }
   }, [onPlacementChange, resolvedPlacement]);
   var dropdown = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, attributes.popper, {
-    className: (0, _classNames.classNamesString)("vkuiPopper", (0, _getPlatformClassName.getPlatformClassName)("vkuiPopper", platform), className),
+    className: (0, _vkjs.classNames)("vkuiPopper", (0, _getPlatformClassName.getPlatformClassName)("vkuiPopper", platform), className),
     ref: setExternalRef,
     style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, compStyles), popperStyles.popper), {}, {
       minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined