@vkontakte/vkui 5.0.0 → 5.0.1

package/dist/components/PopoutWrapper/PopoutWrapper.js

@@ -1,73 +1,73 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children", "onClick"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children", "onClick", "className"];
 import * as React from "react";
-import { classNames } from "../../lib/classNames";
+import { classNamesString } from "../../lib/classNames";
 import { Platform } from "../../lib/platform";
 import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { useDOM } from "../../lib/dom";
-
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */
 export 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,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    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 = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-
   var _React$useState = React.useState(!hasMask),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      opened = _React$useState2[0],
-      setOpened = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_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 = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);
   React.useEffect(function () {
     !opened && animationFinishFallback.set();
   }, [animationFinishFallback, opened]);
-
   var _useDOM = useDOM(),
-      window = _useDOM.window;
-
+    window = _useDOM.window;
   useGlobalEventListener(window, "touchmove", function (e) {
     return e.preventDefault();
   }, {
     passive: false
   });
-  return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames("PopoutWrapper", "PopoutWrapper--alignY-".concat(alignY), "PopoutWrapper--alignX-".concat(alignX), closing && "PopoutWrapper--closing", opened && "PopoutWrapper--opened", fixed && "PopoutWrapper--fixed", hasMask && "PopoutWrapper--masked"),
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: 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),
     onAnimationEnd: opened ? undefined : onFadeInEnd,
     ref: elRef
-  }), createScopedElement("div", {
-    vkuiClass: "PopoutWrapper__container"
-  }, createScopedElement("div", {
-    vkuiClass: "PopoutWrapper__overlay",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPopoutWrapper__container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPopoutWrapper__overlay",
     onClick: onClick
-  }), createScopedElement("div", {
-    vkuiClass: "PopoutWrapper__content"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPopoutWrapper__content"
   }, children)));
 };
+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"
+};
 //# sourceMappingURL=PopoutWrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.js","names":["React","classNames","Platform","useTimeout","usePlatform","useGlobalEventListener","useDOM","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","undefined"],"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } 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 \"./PopoutWrapper.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  ...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      vkuiClass={classNames(\n        \"PopoutWrapper\",\n        `PopoutWrapper--alignY-${alignY}`,\n        `PopoutWrapper--alignX-${alignX}`,\n        closing && \"PopoutWrapper--closing\",\n        opened && \"PopoutWrapper--opened\",\n        fixed && \"PopoutWrapper--fixed\",\n        hasMask && \"PopoutWrapper--masked\"\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div vkuiClass=\"PopoutWrapper__container\">\n        <div vkuiClass=\"PopoutWrapper__overlay\" onClick={onClick} />\n        <div vkuiClass=\"PopoutWrapper__content\">{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,sBAAT;AACA,SAASC,MAAT;;AAYA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OASH;EAAA,uBARxBC,MAQwB;EAAA,IARxBA,MAQwB,4BARf,QAQe;EAAA,uBAPxBC,MAOwB;EAAA,IAPxBA,MAOwB,4BAPf,QAOe;EAAA,wBANxBC,OAMwB;EAAA,IANxBA,OAMwB,6BANd,KAMc;EAAA,wBALxBC,OAKwB;EAAA,IALxBA,OAKwB,6BALd,IAKc;EAAA,sBAJxBC,KAIwB;EAAA,IAJxBA,KAIwB,2BAJhB,IAIgB;EAAA,IAHxBC,QAGwB,QAHxBA,QAGwB;EAAA,IAFxBC,OAEwB,QAFxBA,OAEwB;EAAA,IADrBC,SACqB;;EACxB,IAAMC,QAAQ,GAAGZ,WAAW,EAA5B;;EACA,sBAA4BJ,KAAK,CAACiB,QAAN,CAAe,CAACN,OAAhB,CAA5B;EAAA;EAAA,IAAOO,MAAP;EAAA,IAAeC,SAAf;;EACA,IAAMC,KAAK,GAAGpB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAAd;;EAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAA8B;IAChD,IAAI,CAACA,CAAD,IAAMA,CAAC,CAACC,aAAF,KAAoB,6BAA9B,EAA6D;MAC3DL,SAAS,CAAC,IAAD,CAAT;IACD;EACF,CAJD;;EAKA,IAAMM,uBAAuB,GAAGtB,UAAU,CACxCmB,WADwC,EAExCN,QAAQ,KAAKd,QAAQ,CAACwB,GAAtB,GAA4B,GAA5B,GAAkC,GAFM,CAA1C;EAIA1B,KAAK,CAAC2B,SAAN,CAAgB,YAAM;IACpB,CAACT,MAAD,IAAWO,uBAAuB,CAACG,GAAxB,EAAX;EACD,CAFD,EAEG,CAACH,uBAAD,EAA0BP,MAA1B,CAFH;;EAIA,cAAmBZ,MAAM,EAAzB;EAAA,IAAQuB,MAAR,WAAQA,MAAR;;EACAxB,sBAAsB,CAACwB,MAAD,EAAS,WAAT,EAAsB,UAACN,CAAD;IAAA,OAAOA,CAAC,CAACO,cAAF,EAAP;EAAA,CAAtB,EAAiD;IACrEC,OAAO,EAAE;EAD4D,CAAjD,CAAtB;EAIA,OACE,wCACMhB,SADN;IAEE,SAAS,EAAEd,UAAU,CACnB,eADmB,kCAEMO,MAFN,mCAGMC,MAHN,GAInBC,OAAO,IAAI,wBAJQ,EAKnBQ,MAAM,IAAI,uBALS,EAMnBN,KAAK,IAAI,sBANU,EAOnBD,OAAO,IAAI,uBAPQ,CAFvB;IAWE,cAAc,EAAEO,MAAM,GAAGc,SAAH,GAAeV,WAXvC;IAYE,GAAG,EAAEF;EAZP,IAcE;IAAK,SAAS,EAAC;EAAf,GACE;IAAK,SAAS,EAAC,wBAAf;IAAwC,OAAO,EAAEN;EAAjD,EADF,EAEE;IAAK,SAAS,EAAC;EAAf,GAAyCD,QAAzC,CAFF,CAdF,CADF;AAqBD,CArDM"}
+{"version":3,"file":"PopoutWrapper.js","names":["React","classNamesString","Platform","useTimeout","usePlatform","useGlobalEventListener","useDOM","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,MAAM,QAAQ,eAAe;AAYtC;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGb,WAAW,EAAE;EAC9B,sBAA4BJ,KAAK,CAACkB,QAAQ,CAAC,CAACP,OAAO,CAAC;IAAA;IAA7CQ,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGrB,KAAK,CAACsB,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,GAAGvB,UAAU,CACxCoB,WAAW,EACXN,QAAQ,KAAKf,QAAQ,CAACyB,GAAG,GAAG,GAAG,GAAG,GAAG,CACtC;EACD3B,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,CAACT,MAAM,IAAIO,uBAAuB,CAACG,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACH,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmBb,MAAM,EAAE;IAAnBwB,MAAM,WAANA,MAAM;EACdzB,sBAAsB,CAACyB,MAAM,EAAE,WAAW,EAAE,UAACN,CAAC;IAAA,OAAKA,CAAC,CAACO,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,wCACMhB,SAAS;IACb,SAAS,EAAEf,gBAAgB,sBAEzBgC,MAAM,iCAA0BzB,MAAM,EAAG,EACzCyB,MAAM,iCAA0BxB,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CS,MAAM,+BAAmC,EACzCP,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEI,MAAM,GAAGe,SAAS,GAAGX,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAEP;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/components/Popover/Popover.js

@@ -3,7 +3,6 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["action", "shown", "showDelay", "hideDelay", "offsetDistance", "content", "children", "style", "className", "getRef", "onShownChange"];
-import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { useDOM } from "../../lib/dom";
 import { classNamesString } from "../../lib/classNames";
@@ -14,103 +13,81 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
-var styles = {
-  "Popover": "vkuiPopover",
-  "vkui-popper-fadein": "vkui-popper-fadein"
-};
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
 export 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 = _objectWithoutProperties(_ref, _excluded);
-
+    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 = _objectWithoutProperties(_ref, _excluded);
   var _useDOM = useDOM(),
-      document = _useDOM.document;
-
+    document = _useDOM.document;
   var hoverable = action === "hover";
   var hovered = React.useRef(false);
-
   var _React$useState = React.useState(shownProp || false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      computedShown = _React$useState2[0],
-      setComputedShown = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    computedShown = _React$useState2[0],
+    setComputedShown = _React$useState2[1];
   var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      dropdownNode = _React$useState4[0],
-      setPopperNode = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dropdownNode = _React$useState4[0],
+    setPopperNode = _React$useState4[1];
   var shown = typeof shownProp === "boolean" ? shownProp : computedShown;
   var patchedPopperRef = useExternRef(setPopperNode, getRef);
-
   var _usePatchChildrenRef = usePatchChildrenRef(children),
-      _usePatchChildrenRef2 = _slicedToArray(_usePatchChildrenRef, 2),
-      childRef = _usePatchChildrenRef2[0],
-      child = _usePatchChildrenRef2[1];
-
+    _usePatchChildrenRef2 = _slicedToArray(_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 = useTimeout(function () {
     return setShown(true);
   }, showDelay);
   var hideTimeout = 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);
     }
   };
-
   useGlobalEventListener(document, "click", handleOutsideClick);
   var targetEnterListener = useEventListener("mouseenter", handleTargetEnter);
   var targetClickEvent = useEventListener("click", handleTargetClick);
@@ -119,28 +96,26 @@ export var Popover = function Popover(_ref) {
     if (!childRef.current) {
       return;
     }
-
     targetClickEvent.add(childRef.current);
-
     if (hoverable) {
       targetEnterListener.add(childRef.current);
       targetLeaveListener.add(childRef.current);
     }
   }, [childRef, hoverable, targetClickEvent, targetEnterListener, targetLeaveListener]);
-  return createScopedElement(React.Fragment, null, child, shown && createScopedElement(Popper, _extends({}, restProps, {
-    className: classNamesString(styles["Popover"], className),
+  return /*#__PURE__*/React.createElement(React.Fragment, null, child, shown && /*#__PURE__*/React.createElement(Popper, _extends({}, restProps, {
+    className: classNamesString("vkuiPopover", className),
     targetRef: childRef,
     getRef: patchedPopperRef,
     offsetDistance: offsetDistance,
     style: // Reason: Typescript ругается на CSS Custom Properties в объекте
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     _objectSpread(_objectSpread({}, styleProp), {}, {
-      "--popover-safe-zone-padding": "".concat(offsetDistance, "px")
+      "--vkui_internal--popover_safe_zone_padding": "".concat(offsetDistance, "px")
     }),
     renderContent: function renderContent(_ref2) {
-      var className = _ref2.className;
-      return createScopedElement(FocusTrap, {
-        vkuiClass: className,
+      var wrapperClassName = _ref2.className;
+      return /*#__PURE__*/React.createElement(FocusTrap, {
+        className: wrapperClassName,
         onClose: handleContentKeyDownEscape
       }, content);
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","useDOM","classNamesString","Popper","FocusTrap","useTimeout","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","styles","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              \"--popover-safe-zone-padding\": `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className }) => (\n            <FocusTrap\n              vkuiClass={className}\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":["React","useDOM","classNamesString","Popper","FocusTrap","useTimeout","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","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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"}

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Modifier } from "react-popper";
 import { HasRef } from "../../types";
-import "./Popper.css";
 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;
@@ -54,4 +53,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, style: compStyles, customModifiers, renderContent, ...restProps }: PopperProps) => JSX.Element;
+export declare const Popper: ({ targetRef, children, getRef, placement, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, style: compStyles, customModifiers, renderContent, className, ...restProps }: PopperProps) => JSX.Element;

package/dist/components/Popper/Popper.js

@@ -3,16 +3,16 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent", "className"];
 import * as React from "react";
 import { usePopper } from "react-popper";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { PopperArrow } from "../PopperArrow/PopperArrow";
 import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
+import { getPlatformClassName } from "../../helpers/getPlatformClassName";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { classNamesString } from "../../lib/classNames";
 var ARROW_PADDING = 8;
 var ARROW_WIDTH = 20;
 var ARROW_HEIGHT = 8;
@@ -45,43 +45,40 @@ var sameWidthModifier = {
     state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
   }
 };
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-
 export var Popper = function Popper(_ref3) {
   var _targetRef$current3;
-
   var targetRef = _ref3.targetRef,
-      children = _ref3.children,
-      getRef = _ref3.getRef,
-      _ref3$placement = _ref3.placement,
-      placement = _ref3$placement === void 0 ? "bottom-start" : _ref3$placement,
-      onPlacementChange = _ref3.onPlacementChange,
-      arrow = _ref3.arrow,
-      arrowClassName = _ref3.arrowClassName,
-      sameWidth = _ref3.sameWidth,
-      _ref3$offsetDistance = _ref3.offsetDistance,
-      offsetDistance = _ref3$offsetDistance === void 0 ? 8 : _ref3$offsetDistance,
-      _ref3$offsetSkidding = _ref3.offsetSkidding,
-      offsetSkidding = _ref3$offsetSkidding === void 0 ? 0 : _ref3$offsetSkidding,
-      _ref3$forcePortal = _ref3.forcePortal,
-      forcePortal = _ref3$forcePortal === void 0 ? true : _ref3$forcePortal,
-      compStyles = _ref3.style,
-      customModifiers = _ref3.customModifiers,
-      renderContent = _ref3.renderContent,
-      restProps = _objectWithoutProperties(_ref3, _excluded);
-
+    children = _ref3.children,
+    getRef = _ref3.getRef,
+    _ref3$placement = _ref3.placement,
+    placement = _ref3$placement === void 0 ? "bottom-start" : _ref3$placement,
+    onPlacementChange = _ref3.onPlacementChange,
+    arrow = _ref3.arrow,
+    arrowClassName = _ref3.arrowClassName,
+    sameWidth = _ref3.sameWidth,
+    _ref3$offsetDistance = _ref3.offsetDistance,
+    offsetDistance = _ref3$offsetDistance === void 0 ? 8 : _ref3$offsetDistance,
+    _ref3$offsetSkidding = _ref3.offsetSkidding,
+    offsetSkidding = _ref3$offsetSkidding === void 0 ? 0 : _ref3$offsetSkidding,
+    _ref3$forcePortal = _ref3.forcePortal,
+    forcePortal = _ref3$forcePortal === void 0 ? true : _ref3$forcePortal,
+    compStyles = _ref3.style,
+    customModifiers = _ref3.customModifiers,
+    renderContent = _ref3.renderContent,
+    className = _ref3.className,
+    restProps = _objectWithoutProperties(_ref3, _excluded);
   var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      popperNode = _React$useState2[0],
-      setPopperNode = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    popperNode = _React$useState2[0],
+    setPopperNode = _React$useState2[1];
   var _React$useState3 = React.useState(0),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      smallTargetOffsetSkidding = _React$useState4[0],
-      setSmallTargetOffsetSkidding = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    smallTargetOffsetSkidding = _React$useState4[0],
+    setSmallTargetOffsetSkidding = _React$useState4[1];
   var platform = usePlatform();
   var setExternalRef = useExternRef(getRef, setPopperNode);
   var modifiers = React.useMemo(function () {
@@ -91,43 +88,35 @@ export var Popper = function Popper(_ref3) {
         offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
       }
     }, flipModifier];
-
     if (arrow) {
       modifiers.push(arrowModifier);
     }
-
     if (sameWidth) {
       modifiers.push(sameWidthModifier);
     }
-
     if (customModifiers) {
       modifiers.push.apply(modifiers, _toConsumableArray(customModifiers));
     }
-
     return modifiers;
   }, [arrow, sameWidth, smallTargetOffsetSkidding, offsetSkidding, offsetDistance, customModifiers]);
-
   var _usePopper = usePopper(targetRef.current, popperNode, {
-    placement: placement,
-    modifiers: modifiers
-  }),
-      styles = _usePopper.styles,
-      state = _usePopper.state,
-      attributes = _usePopper.attributes;
-
+      placement: placement,
+      modifiers: modifiers
+    }),
+    popperStyles = _usePopper.styles,
+    state = _usePopper.state,
+    attributes = _usePopper.attributes;
   var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
   var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован с краю
+
   // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
   // таргета из-за маленьких размеров последнего
-
   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;
-
       if (targetSize < arrowSize + 2 * ARROW_PADDING) {
         setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
       }
@@ -142,24 +131,24 @@ export var Popper = function Popper(_ref3) {
       });
     }
   }, [onPlacementChange, resolvedPlacement]);
-  var dropdown = createScopedElement("div", _extends({}, restProps, attributes.popper, {
-    vkuiClass: getClassName("Popper", platform),
+  var dropdown = /*#__PURE__*/React.createElement("div", _extends({}, restProps, attributes.popper, {
+    className: classNamesString("vkuiPopper", getPlatformClassName("vkuiPopper", platform), className),
     ref: setExternalRef,
-    style: _objectSpread(_objectSpread(_objectSpread({}, compStyles), styles.popper), {}, {
+    style: _objectSpread(_objectSpread(_objectSpread({}, compStyles), popperStyles.popper), {}, {
       minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined
     })
-  }), arrow && createScopedElement(PopperArrow, {
+  }), arrow && /*#__PURE__*/React.createElement(PopperArrow, {
     attributes: attributes.arrow,
-    style: styles.arrow,
+    style: popperStyles.arrow,
     arrowClassName: arrowClassName
   }), renderContent ? renderContent({
-    className: "Popper__content"
-  }) : createScopedElement("div", {
-    vkuiClass: "Popper__content"
+    className: "vkuiPopper__content"
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPopper__content"
   }, children));
-  return createScopedElement(AppRootPortal, {
+  return /*#__PURE__*/React.createElement(AppRootPortal, {
     forcePortal: forcePortal,
-    vkuiClass: "PopperPortal"
+    className: "vkuiPopperPortal"
   }, dropdown);
 };
 //# sourceMappingURL=Popper.js.map