@vkontakte/vkui 5.2.4 → 5.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"PlatformProvider.js","names":["PlatformProvider","value","children","appearance","useAppearance"],"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\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;AAEA;AACA;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"}
+{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\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"],"names":["PlatformProvider","value","children","appearance","useAppearance","ConfigProviderOverride","platform","TokensClassProvider"],"mappings":";;;;+BAoBgBA;;;eAAAA;;;;0DApBE;6BACY;mCAEM;sCACG;AAgBhC,SAASA,iBAAiB,KAA0C,EAAE;QAA1CC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACxC,IAAMC,aAAaC,IAAAA,4BAAa;IAEhC,qBACE,6BAACC,8CAAsB;QAACC,UAAUL;qBAChC,6BAACM,wCAAmB;QAACD,UAAUL;QAAOE,YAAYA;OAC/CD;AAIT"}

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

@@ -1,49 +1,54 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "PopoutRoot", {
+    enumerable: true,
+    get: function() {
+        return PopoutRoot;
+    }
 });
-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 _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _dom = require("../../lib/dom");
-var _AppRootPortal = require("../AppRoot/AppRootPortal");
-var _excluded = ["popout", "modal", "children", "getRootRef", "className"];
-var PopoutRootPopout = function PopoutRootPopout(_ref) {
-  var children = _ref.children;
-  var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
-    isDesktop = _useAdaptivityWithJSM.isDesktop;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _vkjs.classNames)("vkuiPopoutRoot__popout", isDesktop && "vkuiPopoutRoot__popout--absolute")
-  }, children);
+var _appRootPortal = require("../AppRoot/AppRootPortal");
+var PopoutRootPopout = function(param) {
+    var children = param.children;
+    var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiPopoutRoot__popout", isDesktop && "vkuiPopoutRoot__popout--absolute")
+    }, children);
 };
-var PopoutRootModal = function PopoutRootModal(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPopoutRoot__modal"
-  }, children);
+var PopoutRootModal = function(param) {
+    var children = param.children;
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiPopoutRoot__modal"
+    }, children);
 };
-var PopoutRoot = function PopoutRoot(_ref3) {
-  var popout = _ref3.popout,
-    modal = _ref3.modal,
-    children = _ref3.children,
-    getRootRef = _ref3.getRootRef,
-    className = _ref3.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var _useDOM = (0, _dom.useDOM)(),
-    document = _useDOM.document;
-  React.useEffect(function () {
-    popout && (0, _dom.blurActiveElement)(document);
-  }, [document, popout]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    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)));
+var PopoutRoot = function(_param) {
+    var popout = _param.popout, modal = _param.modal, children = _param.children, getRootRef = _param.getRootRef, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "popout",
+        "modal",
+        "children",
+        "getRootRef",
+        "className"
+    ]);
+    var document = (0, _dom.useDOM)().document;
+    _react.useEffect(function() {
+        popout && (0, _dom.blurActiveElement)(document);
+    }, [
+        document,
+        popout
+    ]);
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        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)));
 };
-exports.PopoutRoot = PopoutRoot;
+
 //# sourceMappingURL=PopoutRoot.js.map

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

@@ -1 +1 @@
-{"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 { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\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;AACA;AACA;AAEA;AAAyD;AAOzD,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"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\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"],"names":["PopoutRoot","PopoutRootPopout","children","isDesktop","useAdaptivityWithJSMediaQueries","div","className","classNames","PopoutRootModal","popout","modal","getRootRef","restProps","document","useDOM","React","useEffect","blurActiveElement","ref","AppRootPortal"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;;2DA1CU;oBACI;+CACqB;mBACN;6BAEZ;AAO9B,IAAMC,mBAAmB,gBAAyC;QAAtCC,iBAAAA;IAC1B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IAER,qBACE,qBAACE;QACCC,WAAWC,IAAAA,gBAAU,4BAEnBJ;OAGDD;AAGP;AAMA,IAAMM,kBAAkB,gBAAwC;QAArCN,iBAAAA;IACzB,qBAAO,qBAACG;QAAIC,SAAS;OAAgCJ;AACvD;AASO,IAAMF,aAAa,iBAOH;QANrBS,gBAAAA,QACAC,eAAAA,OACAR,kBAAAA,UACAS,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAR;QACAS;QACAL;;IAGA,IAAM,AAAEO,WAAaC,IAAAA,WAAM,IAAnBD;IAERE,OAAMC,SAAS,CAAC,WAAM;QACpBP,UAAUQ,IAAAA,sBAAiB,EAACJ;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,qBAACJ,4CAAQO;QAAWN,WAAWC,IAAAA,gBAAU,oBAAuBD;QAAYY,KAAKP;QAC9ET,wBACD,qBAACiB,4BAAa,QACX,CAAC,CAACV,wBAAU,qBAACR,wBAAkBQ,SAC/B,CAAC,CAACC,uBAAS,qBAACF,uBAAiBE;AAItC"}

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

@@ -1,82 +1,77 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "PopoutWrapper", {
+    enumerable: true,
+    get: function() {
+        return PopoutWrapper;
+    }
 });
-exports.PopoutWrapper = void 0;
-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 _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePlatform = require("../../hooks/usePlatform");
 var _useTimeout = require("../../hooks/useTimeout");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
-var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children", "onClick", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
- */
-var PopoutWrapper = function PopoutWrapper(_ref) {
-  var _ref$alignY = _ref.alignY,
-    alignY = _ref$alignY === void 0 ? 'center' : _ref$alignY,
-    _ref$alignX = _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,
-    hasMask = _ref$hasMask === void 0 ? true : _ref$hasMask,
-    _ref$fixed = _ref.fixed,
-    fixed = _ref$fixed === void 0 ? true : _ref$fixed,
-    children = _ref.children,
-    onClick = _ref.onClick,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var _React$useState = React.useState(!hasMask),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    opened = _React$useState2[0],
-    setOpened = _React$useState2[1];
-  var elRef = React.useRef(null);
-  var onFadeInEnd = function onFadeInEnd(e) {
-    if (!e || e.animationName === 'vkui-animation-full-fade-in') {
-      setOpened(true);
-    }
-  };
-  var animationFinishFallback = (0, _useTimeout.useTimeout)(onFadeInEnd, platform === _platform.Platform.IOS ? 300 : 200);
-  React.useEffect(function () {
-    !opened && animationFinishFallback.set();
-  }, [animationFinishFallback, opened]);
-  var _useDOM = (0, _dom.useDOM)(),
-    window = _useDOM.window;
-  (0, _useGlobalEventListener.useGlobalEventListener)(window, 'touchmove', function (e) {
-    return e.preventDefault();
-  }, {
-    passive: false
-  });
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    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", {
-    className: "vkuiPopoutWrapper__container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPopoutWrapper__overlay",
-    onClick: onClick
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPopoutWrapper__content"
-  }, children)));
-};
-exports.PopoutWrapper = PopoutWrapper;
-var styles = {
-  "PopoutWrapper--alignY-center": "vkuiPopoutWrapper--alignY-center",
-  "PopoutWrapper--alignY-bottom": "vkuiPopoutWrapper--alignY-bottom",
-  "PopoutWrapper--alignY-top": "vkuiPopoutWrapper--alignY-top",
-  "PopoutWrapper--alignX-center": "vkuiPopoutWrapper--alignX-center",
-  "PopoutWrapper--alignX-left": "vkuiPopoutWrapper--alignX-left",
-  "PopoutWrapper--alignX-right": "vkuiPopoutWrapper--alignX-right"
+var PopoutWrapper = function(_param) {
+    var _param_alignY = _param.alignY, alignY = _param_alignY === void 0 ? "center" : _param_alignY, _param_alignX = _param.alignX, alignX = _param_alignX === void 0 ? "center" : _param_alignX, _param_closing = _param.closing, closing = _param_closing === void 0 ? false : _param_closing, _param_hasMask = _param.hasMask, hasMask = _param_hasMask === void 0 ? true : _param_hasMask, _param_fixed = _param.fixed, fixed = _param_fixed === void 0 ? true : _param_fixed, children = _param.children, onClick = _param.onClick, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "alignY",
+        "alignX",
+        "closing",
+        "hasMask",
+        "fixed",
+        "children",
+        "onClick",
+        "className"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var _React_useState = _slicedToArray(_react.useState(!hasMask), 2), opened = _React_useState[0], setOpened = _React_useState[1];
+    var elRef = _react.useRef(null);
+    var onFadeInEnd = function(e) {
+        if (!e || e.animationName === "vkui-animation-full-fade-in") {
+            setOpened(true);
+        }
+    };
+    var animationFinishFallback = (0, _useTimeout.useTimeout)(onFadeInEnd, platform === _platform.Platform.IOS ? 300 : 200);
+    _react.useEffect(function() {
+        !opened && animationFinishFallback.set();
+    }, [
+        animationFinishFallback,
+        opened
+    ]);
+    var window = (0, _dom.useDOM)().window;
+    (0, _useGlobalEventListener.useGlobalEventListener)(window, "touchmove", function(e) {
+        return e.preventDefault();
+    }, {
+        passive: false
+    });
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiPopoutWrapper", {
+            center: "vkuiPopoutWrapper--alignY-center",
+            top: "vkuiPopoutWrapper--alignY-top",
+            bottom: "vkuiPopoutWrapper--alignY-bottom"
+        }[alignY], {
+            center: "vkuiPopoutWrapper--alignX-center",
+            left: "vkuiPopoutWrapper--alignX-left",
+            right: "vkuiPopoutWrapper--alignX-right"
+        }[alignX], closing && "vkuiPopoutWrapper--closing", opened && "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", hasMask && "vkuiPopoutWrapper--masked", className),
+        onAnimationEnd: opened ? undefined : onFadeInEnd,
+        ref: elRef
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiPopoutWrapper__container"
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiPopoutWrapper__overlay",
+        onClick: onClick
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiPopoutWrapper__content"
+    }, children)));
 };
+
 //# sourceMappingURL=PopoutWrapper.js.map

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","classNames","styles","undefined"],"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\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;AAA8C;AAW9C;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"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\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        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[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"],"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","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;2DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,gBAAgB,iBAUH;+BATxBC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,KAAK,2CACfC,SAAAA,sCAAU,IAAI,yCACdC,OAAAA,kCAAQ,IAAI,iBACZC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA4BC,iCAAAA,OAAMC,QAAQ,CAAC,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,MAAM,CAAiB,IAAI;IAE/C,IAAMC,cAAc,SAACC,GAA6B;QAChD,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAK,+BAA+B;YAC3DL,UAAU,IAAI;QAChB,CAAC;IACH;IACA,IAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaR,aAAaa,kBAAQ,CAACC,GAAG,GAAG,MAAM,GAAG;IAC7FZ,OAAMa,SAAS,CAAC,WAAM;QACpB,CAACX,UAAUO,wBAAwBK,GAAG;IACxC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,WAAM,IAAjBD;IACRE,IAAAA,8CAAsB,EAACF,QAAQ,aAAa,SAACR;eAAMA,EAAEW,cAAc;OAAI;QACrEC,SAAS,KAAK;IAChB;IAEA,qBACE,qBAACC,4CACKvB;QACJD,WAAWyB,IAAAA,gBAAU,uBAEnB;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB,WAAW;QAChDuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}

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

@@ -1,147 +1,141 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Popover", {
+    enumerable: true,
+    get: function() {
+        return Popover;
+    }
 });
-exports.Popover = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useEventListener = require("../../hooks/useEventListener");
 var _useExternRef = require("../../hooks/useExternRef");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
-var _usePatchChildrenRef3 = require("../../hooks/usePatchChildrenRef");
+var _usePatchChildrenRef = require("../../hooks/usePatchChildrenRef");
 var _useTimeout = require("../../hooks/useTimeout");
 var _dom = require("../../lib/dom");
-var _FocusTrap = require("../FocusTrap/FocusTrap");
-var _Popper = require("../Popper/Popper");
-var _excluded = ["action", "shown", "showDelay", "hideDelay", "offsetDistance", "content", "children", "style", "className", "getRef", "onShownChange"];
-/**
- * @see https://vkcom.github.io/VKUI/#/Popover
- */
-var Popover = function Popover(_ref) {
-  var _ref$action = _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,
-    _ref$hideDelay = _ref.hideDelay,
-    hideDelay = _ref$hideDelay === void 0 ? 150 : _ref$hideDelay,
-    _ref$offsetDistance = _ref.offsetDistance,
-    offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
-    content = _ref.content,
-    children = _ref.children,
-    styleProp = _ref.style,
-    className = _ref.className,
-    getRef = _ref.getRef,
-    onShownChange = _ref.onShownChange,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useDOM = (0, _dom.useDOM)(),
-    document = _useDOM.document;
-  var hoverable = action === 'hover';
-  var hovered = React.useRef(false);
-  var _React$useState = React.useState(shownProp || false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    computedShown = _React$useState2[0],
-    setComputedShown = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    dropdownNode = _React$useState4[0],
-    setPopperNode = _React$useState4[1];
-  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') {
-      setComputedShown(value);
-    }
-    typeof onShownChange === 'function' && onShownChange(value);
-  };
-  var showTimeout = (0, _useTimeout.useTimeout)(function () {
-    return setShown(true);
-  }, showDelay);
-  var hideTimeout = (0, _useTimeout.useTimeout)(function () {
-    return setShown(false);
-  }, hideDelay);
-  var handleTargetEnter = function handleTargetEnter() {
-    hovered.current = true;
-    hideTimeout.clear();
-    showTimeout.set();
-  };
-  var handleTargetClick = function handleTargetClick() {
-    if (hovered.current && shown) {
-      return;
-    }
-    setShown(!shown);
-  };
-  var handleTargetLeave = function handleTargetLeave() {
-    hovered.current = false;
-    showTimeout.clear();
-    hideTimeout.set();
-  };
-  var handleContentKeyDownEscape = function handleContentKeyDownEscape() {
-    setShown(false);
-  };
-  var handleOutsideClick = function handleOutsideClick(e) {
-    var _childRef$current;
-    if (dropdownNode && !((_childRef$current = childRef.current) !== null && _childRef$current !== void 0 && _childRef$current.contains(e.target)) && !dropdownNode.contains(e.target)) {
-      setShown(false);
-    }
-  };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', handleOutsideClick, {
-    capture: true,
-    passive: true
-  });
-  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);
-    }
-    return function () {
-      targetEnterListener.remove();
-      targetLeaveListener.remove();
+var _focusTrap = require("../FocusTrap/FocusTrap");
+var _popper = require("../Popper/Popper");
+var Popover = function(_param) {
+    var _param_action = _param.action, action = _param_action === void 0 ? "click" : _param_action, shownProp = _param.shown, _param_showDelay = _param.showDelay, showDelay = _param_showDelay === void 0 ? 150 : _param_showDelay, _param_hideDelay = _param.hideDelay, hideDelay = _param_hideDelay === void 0 ? 150 : _param_hideDelay, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, content = _param.content, children = _param.children, styleProp = _param.style, className = _param.className, getRef = _param.getRef, onShownChange = _param.onShownChange, restProps = _objectWithoutProperties(_param, [
+        "action",
+        "shown",
+        "showDelay",
+        "hideDelay",
+        "offsetDistance",
+        "content",
+        "children",
+        "style",
+        "className",
+        "getRef",
+        "onShownChange"
+    ]);
+    var document = (0, _dom.useDOM)().document;
+    var hoverable = action === "hover";
+    var hovered = _react.useRef(false);
+    var _React_useState = _slicedToArray(_react.useState(shownProp || false), 2), computedShown = _React_useState[0], setComputedShown = _React_useState[1];
+    var _React_useState1 = _slicedToArray(_react.useState(null), 2), dropdownNode = _React_useState1[0], setPopperNode = _React_useState1[1];
+    var shown = typeof shownProp === "boolean" ? shownProp : computedShown;
+    var patchedPopperRef = (0, _useExternRef.useExternRef)(setPopperNode, getRef);
+    var _usePatchChildrenRef1 = _slicedToArray((0, _usePatchChildrenRef.usePatchChildrenRef)(children), 2), childRef = _usePatchChildrenRef1[0], child = _usePatchChildrenRef1[1];
+    var setShown = function(value) {
+        if (typeof shownProp !== "boolean") {
+            setComputedShown(value);
+        }
+        typeof onShownChange === "function" && onShownChange(value);
+    };
+    var showTimeout = (0, _useTimeout.useTimeout)(function() {
+        return setShown(true);
+    }, showDelay);
+    var hideTimeout = (0, _useTimeout.useTimeout)(function() {
+        return setShown(false);
+    }, hideDelay);
+    var handleTargetEnter = function() {
+        hovered.current = true;
+        hideTimeout.clear();
+        showTimeout.set();
+    };
+    var handleTargetClick = function() {
+        if (hovered.current && shown) {
+            return;
+        }
+        setShown(!shown);
+    };
+    var handleTargetLeave = function() {
+        hovered.current = false;
+        showTimeout.clear();
+        hideTimeout.set();
     };
-  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, child, shown && /*#__PURE__*/React.createElement(_Popper.Popper, (0, _extends2.default)({}, restProps, {
-    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")
-    }),
-    renderContent: function renderContent(_ref2) {
-      var wrapperClassName = _ref2.className;
-      return /*#__PURE__*/React.createElement(_FocusTrap.FocusTrap, {
-        className: wrapperClassName,
-        onClose: handleContentKeyDownEscape
-      }, content);
-    },
-    onMouseOver: hoverable ? hideTimeout.clear : undefined,
-    onMouseOut: hoverable ? handleTargetLeave : undefined
-  })));
+    var handleContentKeyDownEscape = function() {
+        setShown(false);
+    };
+    var handleOutsideClick = function(e) {
+        var _childRef_current;
+        if (dropdownNode && !((_childRef_current = childRef.current) === null || _childRef_current === void 0 ? void 0 : _childRef_current.contains(e.target)) && !dropdownNode.contains(e.target)) {
+            setShown(false);
+        }
+    };
+    (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", handleOutsideClick, {
+        capture: true,
+        passive: true
+    });
+    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);
+        }
+        return function() {
+            targetEnterListener.remove();
+            targetLeaveListener.remove();
+        };
+    }, [
+        childRef,
+        hoverable,
+        targetEnterListener,
+        targetLeaveListener
+    ]);
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, shown && /*#__PURE__*/ _react.createElement(_popper.Popper, _objectSpreadProps(_objectSpread({}, restProps), {
+        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
+        _objectSpreadProps(_objectSpread({}, styleProp), {
+            "--vkui_internal--popover_safe_zone_padding": "".concat(offsetDistance, "px")
+        }),
+        renderContent: function(param) {
+            var wrapperClassName = param.className;
+            return /*#__PURE__*/ _react.createElement(_focusTrap.FocusTrap, {
+                className: wrapperClassName,
+                onClose: handleContentKeyDownEscape
+            }, content);
+        },
+        onMouseOver: hoverable ? hideTimeout.clear : undefined,
+        onMouseOut: hoverable ? handleTargetLeave : undefined
+    })));
 };
-exports.Popover = Popover;
+
 //# sourceMappingURL=Popover.js.map