@vkontakte/vkui 5.0.0 → 5.0.1

package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "onClose", "opened"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+var _excluded = ["children", "onClose", "opened", "className"];
 import * as React from "react";
 import { FixedLayout } from "../FixedLayout/FixedLayout";
-import { classNames } from "../../lib/classNames";
+import { classNamesString } from "../../lib/classNames";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
 import { Platform } from "../../lib/platform";
@@ -15,68 +14,66 @@ import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useScrollLock } from "../AppRoot/ScrollContext";
 import { getSizeXClassName } from "../../helpers/getSizeXClassName";
-import "./PanelHeaderContext.css";
-
+import "./PanelHeaderContext.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
  */
 export var PanelHeaderContext = function PanelHeaderContext(_ref) {
   var children = _ref.children,
-      onClose = _ref.onClose,
-      _ref$opened = _ref.opened,
-      opened = _ref$opened === void 0 ? false : _ref$opened,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    onClose = _ref.onClose,
+    _ref$opened = _ref.opened,
+    opened = _ref$opened === void 0 ? false : _ref$opened,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var _useDOM = useDOM(),
-      document = _useDOM.document;
-
+    document = _useDOM.document;
   var platform = usePlatform();
-
   var _React$useState = React.useState(opened),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      visible = _React$useState2[0],
-      setVisible = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    visible = _React$useState2[0],
+    setVisible = _React$useState2[1];
   var closing = visible && !opened;
-
   var _useAdaptivity = useAdaptivity(),
-      sizeX = _useAdaptivity.sizeX;
-
+    sizeX = _useAdaptivity.sizeX;
   var elementRef = React.useRef(null);
   useIsomorphicLayoutEffect(function () {
     opened && setVisible(true);
   }, [opened]);
-  useScrollLock(platform !== Platform.VKCOM && opened); // start closing on outer click
+  useScrollLock(platform !== Platform.VKCOM && opened);
 
+  // start closing on outer click
   useGlobalEventListener(document, "click", opened && !closing && function (event) {
     if (elementRef.current && !elementRef.current.contains(event.target)) {
+      event.stopPropagation();
       onClose();
     }
-  }); // fallback onAnimationEnd when animationend not supported
+  }, {
+    capture: true
+  });
 
+  // fallback onAnimationEnd when animationend not supported
   var onAnimationEnd = function onAnimationEnd() {
     return setVisible(false);
   };
-
   var animationFallback = useTimeout(onAnimationEnd, 200);
   React.useEffect(function () {
     return closing ? animationFallback.set() : animationFallback.clear();
   }, [animationFallback, closing]);
-  return createScopedElement(FixedLayout, _extends({}, restProps, {
-    vkuiClass: classNames("PanelHeaderContext", platform === Platform.IOS && "PanelHeaderContext--ios", opened && "PanelHeaderContext--opened", closing && "PanelHeaderContext--closing", getSizeXClassName("PanelHeaderContext", sizeX), "PanelHeaderContext--rounded"),
+  return /*#__PURE__*/React.createElement(FixedLayout, _extends({}, restProps, {
+    className: classNamesString("vkuiPanelHeaderContext", platform === Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", getSizeXClassName("vkuiPanelHeaderContext", sizeX), "vkuiPanelHeaderContext--rounded", className),
     vertical: "top"
-  }), createScopedElement("div", {
-    vkuiClass: "PanelHeaderContext__in",
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPanelHeaderContext__in",
     ref: elementRef,
     onAnimationEnd: closing ? onAnimationEnd : undefined
-  }, createScopedElement("div", {
-    vkuiClass: "PanelHeaderContext__content"
-  }, visible && children)), visible && createScopedElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPanelHeaderContext__content"
+  }, visible && children)), visible && /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(event) {
       event.stopPropagation();
       onClose();
     },
-    vkuiClass: "PanelHeaderContext__fade"
+    className: "vkuiPanelHeaderContext__fade"
   }));
 };
 //# sourceMappingURL=PanelHeaderContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContext.js","names":["React","FixedLayout","classNames","useAdaptivity","useDOM","Platform","useIsomorphicLayoutEffect","useGlobalEventListener","useTimeout","usePlatform","useScrollLock","getSizeXClassName","PanelHeaderContext","children","onClose","opened","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","undefined","stopPropagation"],"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FixedLayout } from \"../FixedLayout/FixedLayout\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Platform } from \"../../lib/platform\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport \"./PanelHeaderContext.css\";\n\nexport interface PanelHeaderContextProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    \"click\",\n    opened &&\n      !closing &&\n      ((event) => {\n        if (\n          elementRef.current &&\n          !elementRef.current.contains(event.target as Node)\n        ) {\n          onClose();\n        }\n      })\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing]\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      vkuiClass={classNames(\n        \"PanelHeaderContext\",\n        platform === Platform.IOS && \"PanelHeaderContext--ios\",\n        opened && \"PanelHeaderContext--opened\",\n        closing && \"PanelHeaderContext--closing\",\n        getSizeXClassName(\"PanelHeaderContext\", sizeX),\n        \"PanelHeaderContext--rounded\"\n      )}\n      vertical=\"top\"\n    >\n      <div\n        vkuiClass=\"PanelHeaderContext__in\"\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div vkuiClass=\"PanelHeaderContext__content\">{visible && children}</div>\n      </div>\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          vkuiClass=\"PanelHeaderContext__fade\"\n        />\n      )}\n    </FixedLayout>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,aAAT;AACA,SAASC,MAAT;AACA,SAASC,QAAT;AACA,SAASC,yBAAT;AACA,SAASC,sBAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,aAAT;AACA,SAASC,iBAAT;AACA;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAKH;EAAA,IAJ7BC,QAI6B,QAJ7BA,QAI6B;EAAA,IAH7BC,OAG6B,QAH7BA,OAG6B;EAAA,uBAF7BC,MAE6B;EAAA,IAF7BA,MAE6B,4BAFpB,KAEoB;EAAA,IAD1BC,SAC0B;;EAC7B,cAAqBZ,MAAM,EAA3B;EAAA,IAAQa,QAAR,WAAQA,QAAR;;EACA,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;;EACA,sBAA8BT,KAAK,CAACmB,QAAN,CAAeJ,MAAf,CAA9B;EAAA;EAAA,IAAOK,OAAP;EAAA,IAAgBC,UAAhB;;EACA,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACL,MAA5B;;EACA,qBAAkBZ,aAAa,EAA/B;EAAA,IAAQoB,KAAR,kBAAQA,KAAR;;EACA,IAAMC,UAAU,GAAGxB,KAAK,CAACyB,MAAN,CAA6B,IAA7B,CAAnB;EAEAnB,yBAAyB,CAAC,YAAM;IAC9BS,MAAM,IAAIM,UAAU,CAAC,IAAD,CAApB;EACD,CAFwB,EAEtB,CAACN,MAAD,CAFsB,CAAzB;EAIAL,aAAa,CAACQ,QAAQ,KAAKb,QAAQ,CAACqB,KAAtB,IAA+BX,MAAhC,CAAb,CAZ6B,CAc7B;;EACAR,sBAAsB,CACpBU,QADoB,EAEpB,OAFoB,EAGpBF,MAAM,IACJ,CAACO,OADH,IAEG,UAACK,KAAD,EAAW;IACV,IACEH,UAAU,CAACI,OAAX,IACA,CAACJ,UAAU,CAACI,OAAX,CAAmBC,QAAnB,CAA4BF,KAAK,CAACG,MAAlC,CAFH,EAGE;MACAhB,OAAO;IACR;EACF,CAZiB,CAAtB,CAf6B,CA8B7B;;EACA,IAAMiB,cAAc,GAAG,SAAjBA,cAAiB;IAAA,OAAMV,UAAU,CAAC,KAAD,CAAhB;EAAA,CAAvB;;EACA,IAAMW,iBAAiB,GAAGxB,UAAU,CAACuB,cAAD,EAAiB,GAAjB,CAApC;EACA/B,KAAK,CAACiC,SAAN,CACE;IAAA,OAAOX,OAAO,GAAGU,iBAAiB,CAACE,GAAlB,EAAH,GAA6BF,iBAAiB,CAACG,KAAlB,EAA3C;EAAA,CADF,EAEE,CAACH,iBAAD,EAAoBV,OAApB,CAFF;EAKA,OACE,oBAAC,WAAD,eACMN,SADN;IAEE,SAAS,EAAEd,UAAU,CACnB,oBADmB,EAEnBgB,QAAQ,KAAKb,QAAQ,CAAC+B,GAAtB,IAA6B,yBAFV,EAGnBrB,MAAM,IAAI,4BAHS,EAInBO,OAAO,IAAI,6BAJQ,EAKnBX,iBAAiB,CAAC,oBAAD,EAAuBY,KAAvB,CALE,EAMnB,6BANmB,CAFvB;IAUE,QAAQ,EAAC;EAVX,IAYE;IACE,SAAS,EAAC,wBADZ;IAEE,GAAG,EAAEC,UAFP;IAGE,cAAc,EAAEF,OAAO,GAAGS,cAAH,GAAoBM;EAH7C,GAKE;IAAK,SAAS,EAAC;EAAf,GAA8CjB,OAAO,IAAIP,QAAzD,CALF,CAZF,EAmBGO,OAAO,IACN;IACE,OAAO,EAAE,iBAACO,KAAD,EAAW;MAClBA,KAAK,CAACW,eAAN;MACAxB,OAAO;IACR,CAJH;IAKE,SAAS,EAAC;EALZ,EApBJ,CADF;AA+BD,CA1EM"}
+{"version":3,"file":"PanelHeaderContext.js","names":["React","FixedLayout","classNamesString","useAdaptivity","useDOM","Platform","useIsomorphicLayoutEffect","useGlobalEventListener","useTimeout","usePlatform","useScrollLock","getSizeXClassName","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","undefined"],"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FixedLayout } from \"../FixedLayout/FixedLayout\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Platform } from \"../../lib/platform\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport styles from \"./PanelHeaderContext.module.css\";\n\nexport interface PanelHeaderContextProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    \"click\",\n    opened &&\n      !closing &&\n      ((event) => {\n        if (\n          elementRef.current &&\n          !elementRef.current.contains(event.target as Node)\n        ) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true }\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing]\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNamesString(\n        styles[\"PanelHeaderContext\"],\n        platform === Platform.IOS && styles[\"PanelHeaderContext--ios\"],\n        opened && styles[\"PanelHeaderContext--opened\"],\n        closing && styles[\"PanelHeaderContext--closing\"],\n        getSizeXClassName(styles[\"PanelHeaderContext\"], sizeX),\n        styles[\"PanelHeaderContext--rounded\"],\n        className\n      )}\n      vertical=\"top\"\n    >\n      <div\n        className={styles[\"PanelHeaderContext__in\"]}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div className={styles[\"PanelHeaderContext__content\"]}>\n          {visible && children}\n        </div>\n      </div>\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles[\"PanelHeaderContext__fade\"]}\n        />\n      )}\n    </FixedLayout>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AASpE;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAMA;EAAA,IAL7BC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,mBACPC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBb,MAAM,EAAE;IAArBc,QAAQ,WAARA,QAAQ;EAChB,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,sBAA8BT,KAAK,CAACoB,QAAQ,CAACL,MAAM,CAAC;IAAA;IAA7CM,OAAO;IAAEC,UAAU;EAC1B,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACN,MAAM;EAClC,qBAAkBZ,aAAa,EAAE;IAAzBqB,KAAK,kBAALA,KAAK;EACb,IAAMC,UAAU,GAAGzB,KAAK,CAAC0B,MAAM,CAAiB,IAAI,CAAC;EAErDpB,yBAAyB,CAAC,YAAM;IAC9BS,MAAM,IAAIO,UAAU,CAAC,IAAI,CAAC;EAC5B,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;EAEZL,aAAa,CAACS,QAAQ,KAAKd,QAAQ,CAACsB,KAAK,IAAIZ,MAAM,CAAC;;EAEpD;EACAR,sBAAsB,CACpBW,QAAQ,EACR,OAAO,EACPH,MAAM,IACJ,CAACQ,OAAO,IACP,UAACK,KAAK,EAAK;IACV,IACEH,UAAU,CAACI,OAAO,IAClB,CAACJ,UAAU,CAACI,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAS,EAClD;MACAH,KAAK,CAACI,eAAe,EAAE;MACvBlB,OAAO,EAAE;IACX;EACF,CAAE,EACJ;IAAEmB,OAAO,EAAE;EAAK,CAAC,CAClB;;EAED;EACA,IAAMC,cAAc,GAAG,SAAjBA,cAAc;IAAA,OAASZ,UAAU,CAAC,KAAK,CAAC;EAAA;EAC9C,IAAMa,iBAAiB,GAAG3B,UAAU,CAAC0B,cAAc,EAAE,GAAG,CAAC;EACzDlC,KAAK,CAACoC,SAAS,CACb;IAAA,OAAOb,OAAO,GAAGY,iBAAiB,CAACE,GAAG,EAAE,GAAGF,iBAAiB,CAACG,KAAK,EAAE;EAAA,CAAC,EACrE,CAACH,iBAAiB,EAAEZ,OAAO,CAAC,CAC7B;EAED,oBACE,oBAAC,WAAW,eACNN,SAAS;IACb,SAAS,EAAEf,gBAAgB,2BAEzBiB,QAAQ,KAAKd,QAAQ,CAACkC,GAAG,iCAAqC,EAC9DxB,MAAM,oCAAwC,EAC9CQ,OAAO,qCAAyC,EAChDZ,iBAAiB,2BAA+Ba,KAAK,CAAC,qCAEtDR,SAAS,CACT;IACF,QAAQ,EAAC;EAAK,iBAEd;IACE,SAAS,8BAAmC;IAC5C,GAAG,EAAES,UAAW;IAChB,cAAc,EAAEF,OAAO,GAAGW,cAAc,GAAGM;EAAU,gBAErD;IAAK,SAAS;EAAwC,GACnDnB,OAAO,IAAIR,QAAQ,CAChB,CACF,EACLQ,OAAO,iBACN;IACE,OAAO,EAAE,iBAACO,KAAK,EAAK;MAClBA,KAAK,CAACI,eAAe,EAAE;MACvBlB,OAAO,EAAE;IACX,CAAE;IACF,SAAS;EAAqC,EAEjD,CACW;AAElB,CAAC"}

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

@@ -0,0 +1 @@
+.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--opened{height:100%;width:100%}.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--opened{height:auto}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--opened{height:auto}}.vkuiPanelHeaderContext__in{box-sizing:border-box;left:0;padding:8px;pointer-events:none;position:absolute;width:100%;z-index:2}.vkuiPanelHeaderContext__fade{background:rgba(0,0,0,.4);display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.vkuiPanelHeaderContext--sizeX-compact .vkuiPanelHeaderContext__fade{display:block}@media (max-width:767px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__fade{display:block}}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-in .2s ease}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-out .2s ease}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-in .2s ease;pointer-events:auto}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext .vkuiList{background:var(--vkui--color_background_content)}.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__in{padding:0}.vkuiPanelHeaderContext--rounded:not(.vkuiPanelHeaderContext--ios) .vkuiList,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__content{background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__content{background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}}@keyframes vkui-animation-panelheadercontext-translate-in{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes vkui-animation-panelheadercontext-translate-out{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}

package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.js

@@ -1,29 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isActive", "editLabel", "doneLabel"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
 import { Platform } from "../../lib/platform";
 import { Icon28EditOutline, Icon28DoneOutline } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
-
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
  */
 export var PanelHeaderEdit = function PanelHeaderEdit(_ref) {
   var _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-      _ref$editLabel = _ref.editLabel,
-      editLabel = _ref$editLabel === void 0 ? "Редактировать" : _ref$editLabel,
-      _ref$doneLabel = _ref.doneLabel,
-      doneLabel = _ref$doneLabel === void 0 ? "Готово" : _ref$doneLabel,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    _ref$editLabel = _ref.editLabel,
+    editLabel = _ref$editLabel === void 0 ? "Редактировать" : _ref$editLabel,
+    _ref$doneLabel = _ref.doneLabel,
+    doneLabel = _ref$doneLabel === void 0 ? "Готово" : _ref$doneLabel,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var iOSText = isActive ? doneLabel : editLabel;
   var AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;
   var platform = usePlatform();
-  return createScopedElement(PanelHeaderButton, _extends({
+  return /*#__PURE__*/React.createElement(PanelHeaderButton, _extends({
     "aria-label": iOSText
-  }, restProps), platform === Platform.IOS ? iOSText : createScopedElement(AndroidIcon, null));
+  }, restProps), platform === Platform.IOS ? iOSText : /*#__PURE__*/React.createElement(AndroidIcon, null));
 };
 //# sourceMappingURL=PanelHeaderEdit.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderEdit.js","names":["PanelHeaderButton","Platform","Icon28EditOutline","Icon28DoneOutline","usePlatform","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","IOS"],"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Platform } from \"../../lib/platform\";\nimport { Icon28EditOutline, Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = \"Редактировать\",\n  doneLabel = \"Готово\",\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;AAAA,SACEA,iBADF;AAIA,SAASC,QAAT;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,kBAArD;AACA,SAASC,WAAT;;AAiBA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OAKH;EAAA,yBAJ1BC,QAI0B;EAAA,IAJ1BA,QAI0B,8BAJf,KAIe;EAAA,0BAH1BC,SAG0B;EAAA,IAH1BA,SAG0B,+BAHd,eAGc;EAAA,0BAF1BC,SAE0B;EAAA,IAF1BA,SAE0B,+BAFd,QAEc;EAAA,IADvBC,SACuB;;EAC1B,IAAMC,OAAO,GAAGJ,QAAQ,GAAGE,SAAH,GAAeD,SAAvC;EACA,IAAMI,WAAW,GAAGL,QAAQ,GAAGH,iBAAH,GAAuBD,iBAAnD;EACA,IAAMU,QAAQ,GAAGR,WAAW,EAA5B;EAEA,OACE,oBAAC,iBAAD;IAAmB,cAAYM;EAA/B,GAA4CD,SAA5C,GACGG,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4BH,OAA5B,GAAsC,oBAAC,WAAD,OADzC,CADF;AAKD,CAfM"}
+{"version":3,"file":"PanelHeaderEdit.js","names":["React","PanelHeaderButton","Platform","Icon28EditOutline","Icon28DoneOutline","usePlatform","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","IOS"],"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Platform } from \"../../lib/platform\";\nimport { Icon28EditOutline, Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = \"Редактировать\",\n  doneLabel = \"Готово\",\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,QAEZ,wCAAwC;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACvE,SAASC,WAAW,QAAQ,yBAAyB;AAiBrD;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKA;EAAA,yBAJ1BC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,eAAe;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACjBC,SAAS;EAEZ,IAAMC,OAAO,GAAGJ,QAAQ,GAAGE,SAAS,GAAGD,SAAS;EAChD,IAAMI,WAAW,GAAGL,QAAQ,GAAGH,iBAAiB,GAAGD,iBAAiB;EACpE,IAAMU,QAAQ,GAAGR,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAAC,cAAYM;EAAQ,GAAKD,SAAS,GAClDG,QAAQ,KAAKX,QAAQ,CAACY,GAAG,GAAGH,OAAO,gBAAG,oBAAC,WAAW,OAAG,CACpC;AAExB,CAAC"}

package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.js

@@ -1,25 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
 import { Icon28DoneOutline } from "@vkontakte/icons";
 import { Platform } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getTitleFromChildren } from "../../lib/utils";
+
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
  */
-
 export var PanelHeaderSubmit = function PanelHeaderSubmit(_ref) {
   var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? "Готово" : _ref$children,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref$children === void 0 ? "Готово" : _ref$children,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
-  return createScopedElement(PanelHeaderButton, _extends({
+  return /*#__PURE__*/React.createElement(PanelHeaderButton, _extends({
     "aria-label": getTitleFromChildren(children),
     primary: true
-  }, restProps), platform === Platform.IOS ? children : createScopedElement(Icon28DoneOutline, null));
+  }, restProps), platform === Platform.IOS ? children : /*#__PURE__*/React.createElement(Icon28DoneOutline, null));
 };
 //# sourceMappingURL=PanelHeaderSubmit.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderButton","Icon28DoneOutline","Platform","usePlatform","getTitleFromChildren","PanelHeaderSubmit","children","restProps","platform","IOS"],"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import {\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,SACEA,iBADF;AAIA,SAASC,iBAAT,QAAkC,kBAAlC;AACA,SAASC,QAAT;AACA,SAASC,WAAT;AACA,SAASC,oBAAT;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAGH;EAAA,yBAF5BC,QAE4B;EAAA,IAF5BA,QAE4B,8BAFjB,QAEiB;EAAA,IADzBC,SACyB;;EAC5B,IAAMC,QAAQ,GAAGL,WAAW,EAA5B;EAEA,OACE,oBAAC,iBAAD;IACE,cAAYC,oBAAoB,CAACE,QAAD,CADlC;IAEE,OAAO;EAFT,GAGMC,SAHN,GAKGC,QAAQ,KAAKN,QAAQ,CAACO,GAAtB,GAA4BH,QAA5B,GAAuC,oBAAC,iBAAD,OAL1C,CADF;AASD,CAfM"}
+{"version":3,"file":"PanelHeaderSubmit.js","names":["React","PanelHeaderButton","Icon28DoneOutline","Platform","usePlatform","getTitleFromChildren","PanelHeaderSubmit","children","restProps","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,QAEZ,wCAAwC;AAC/C,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,iBAAiB;;AAEtD;AACA;AACA;AACA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAGL,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAChB,cAAYC,oBAAoB,CAACE,QAAQ,CAAE;IAC3C,OAAO;EAAA,GACHC,SAAS,GAEZC,QAAQ,KAAKN,QAAQ,CAACO,GAAG,GAAGH,QAAQ,gBAAG,oBAAC,iBAAiB,OAAG,CAC3C;AAExB,CAAC"}

package/dist/cssm/components/PanelSpinner/PanelSpinner.js

@@ -2,20 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["height", "style"];
-import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { Spinner } from "../Spinner/Spinner";
-
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelSpinner
  */
 export var PanelSpinner = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$height = _ref.height,
-      height = _ref$height === void 0 ? 96 : _ref$height,
-      style = _ref.style,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  return createScopedElement(Spinner, _extends({
+    height = _ref$height === void 0 ? 96 : _ref$height,
+    style = _ref.style,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Spinner, _extends({
     size: "regular"
   }, restProps, {
     style: _objectSpread({

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSpinner.js","names":["React","Spinner","PanelSpinner","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,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT;;AAMA;AACA;AACA;AACA,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,IAAN,CAC1B;EAAA,uBAAGC,MAAH;EAAA,IAAGA,MAAH,4BAAY,EAAZ;EAAA,IAAgBC,KAAhB,QAAgBA,KAAhB;EAAA,IAA0BC,SAA1B;;EAAA,OACE,oBAAC,OAAD;IAAS,IAAI,EAAC;EAAd,GAA4BA,SAA5B;IAAuC,KAAK;MAAIF,MAAM,EAANA;IAAJ,GAAeC,KAAf;EAA5C,GADF;AAAA,CAD0B,CAArB;AAMPH,YAAY,CAACK,WAAb,GAA2B,cAA3B"}
+{"version":3,"file":"PanelSpinner.js","names":["React","Spinner","PanelSpinner","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAsB,oBAAoB;AAM1D;AACA;AACA;AACA,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,IAAI,CACpC;EAAA,uBAAGC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAAA,oBACjC,oBAAC,OAAO;IAAC,IAAI,EAAC;EAAS,GAAKA,SAAS;IAAE,KAAK;MAAIF,MAAM,EAANA;IAAM,GAAKC,KAAK;EAAG,GAAG;AAAA,CACvE,CACF;AAEDH,YAAY,CAACK,WAAW,GAAG,cAAc"}

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

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
-import "./Placeholder.css";
 export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Иконка
@@ -22,4 +21,4 @@ export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, ...restProps }: PlaceholderProps) => JSX.Element;
+export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, className, ...restProps }: PlaceholderProps) => JSX.Element;

package/dist/cssm/components/Placeholder/Placeholder.js

@@ -1,41 +1,40 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["icon", "header", "action", "children", "stretched", "getRootRef"];
-import { createScopedElement } from "../../lib/jsxRuntime";
-import { classNames } from "../../lib/classNames";
+var _excluded = ["icon", "header", "action", "children", "stretched", "getRootRef", "className"];
+import * as React from "react";
+import { classNamesString } from "../../lib/classNames";
 import { hasReactNode } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
 import { Headline } from "../Typography/Headline/Headline";
-import "./Placeholder.css";
-
+import "./Placeholder.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
 export var Placeholder = function Placeholder(_ref) {
   var icon = _ref.icon,
-      header = _ref.header,
-      action = _ref.action,
-      children = _ref.children,
-      stretched = _ref.stretched,
-      getRootRef = _ref.getRootRef,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  return createScopedElement("div", _extends({}, restProps, {
+    header = _ref.header,
+    action = _ref.action,
+    children = _ref.children,
+    stretched = _ref.stretched,
+    getRootRef = _ref.getRootRef,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    vkuiClass: classNames("Placeholder", stretched && "Placeholder--stretched")
-  }), createScopedElement("div", {
-    vkuiClass: "Placeholder__in"
-  }, hasReactNode(icon) && createScopedElement("div", {
-    vkuiClass: "Placeholder__icon"
-  }, icon), hasReactNode(header) && createScopedElement(Title, {
+    className: classNamesString("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPlaceholder__in"
+  }, hasReactNode(icon) && /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPlaceholder__icon"
+  }, icon), hasReactNode(header) && /*#__PURE__*/React.createElement(Title, {
     level: "2",
     weight: "2",
-    vkuiClass: "Placeholder__header"
-  }, header), hasReactNode(children) && createScopedElement(Headline, {
+    className: "vkuiPlaceholder__header"
+  }, header), hasReactNode(children) && /*#__PURE__*/React.createElement(Headline, {
     weight: "3",
-    vkuiClass: "Placeholder__text"
-  }, children), hasReactNode(action) && createScopedElement("div", {
-    vkuiClass: "Placeholder__action"
+    className: "vkuiPlaceholder__text"
+  }, children), hasReactNode(action) && /*#__PURE__*/React.createElement("div", {
+    className: "vkuiPlaceholder__action"
   }, action)));
 };
 //# sourceMappingURL=Placeholder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","names":["classNames","hasReactNode","Title","Headline","Placeholder","icon","header","action","children","stretched","getRootRef","restProps"],"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } 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 \"./Placeholder.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  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    vkuiClass={classNames(\"Placeholder\", stretched && \"Placeholder--stretched\")}\n  >\n    <div vkuiClass=\"Placeholder__in\">\n      {hasReactNode(icon) && <div vkuiClass=\"Placeholder__icon\">{icon}</div>}\n      {hasReactNode(header) && (\n        <Title level=\"2\" weight=\"2\" vkuiClass=\"Placeholder__header\">\n          {header}\n        </Title>\n      )}\n      {hasReactNode(children) && (\n        <Headline weight=\"3\" vkuiClass=\"Placeholder__text\">\n          {children}\n        </Headline>\n      )}\n      {hasReactNode(action) && (\n        <div vkuiClass=\"Placeholder__action\">{action}</div>\n      )}\n    </div>\n  </div>\n);\n"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAASC,KAAT;AACA,SAASC,QAAT;AAEA;;AAuBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,IADyB,QACzBA,IADyB;EAAA,IAEzBC,MAFyB,QAEzBA,MAFyB;EAAA,IAGzBC,MAHyB,QAGzBA,MAHyB;EAAA,IAIzBC,QAJyB,QAIzBA,QAJyB;EAAA,IAKzBC,SALyB,QAKzBA,SALyB;EAAA,IAMzBC,UANyB,QAMzBA,UANyB;EAAA,IAOtBC,SAPsB;;EAAA,OASzB,wCACMA,SADN;IAEE,GAAG,EAAED,UAFP;IAGE,SAAS,EAAEV,UAAU,CAAC,aAAD,EAAgBS,SAAS,IAAI,wBAA7B;EAHvB,IAKE;IAAK,SAAS,EAAC;EAAf,GACGR,YAAY,CAACI,IAAD,CAAZ,IAAsB;IAAK,SAAS,EAAC;EAAf,GAAoCA,IAApC,CADzB,EAEGJ,YAAY,CAACK,MAAD,CAAZ,IACC,oBAAC,KAAD;IAAO,KAAK,EAAC,GAAb;IAAiB,MAAM,EAAC,GAAxB;IAA4B,SAAS,EAAC;EAAtC,GACGA,MADH,CAHJ,EAOGL,YAAY,CAACO,QAAD,CAAZ,IACC,oBAAC,QAAD;IAAU,MAAM,EAAC,GAAjB;IAAqB,SAAS,EAAC;EAA/B,GACGA,QADH,CARJ,EAYGP,YAAY,CAACM,MAAD,CAAZ,IACC;IAAK,SAAS,EAAC;EAAf,GAAsCA,MAAtC,CAbJ,CALF,CATyB;AAAA,CAApB"}
+{"version":3,"file":"Placeholder.js","names":["React","classNamesString","hasReactNode","Title","Headline","Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,QAAQ,QAAQ,iCAAiC;AAAC;AAyB3D;AACA;AACA;AACA,OAAO,IAAMC,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,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEV,gBAAgB,oBAEzBS,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvCV,YAAY,CAACI,IAAI,CAAC,iBACjB;IAAK,SAAS;EAA8B,GAAEA,IAAI,CACnD,EACAJ,YAAY,CAACK,MAAM,CAAC,iBACnB,oBAAC,KAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACAL,YAAY,CAACO,QAAQ,CAAC,iBACrB,oBAAC,QAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACAP,YAAY,CAACM,MAAM,CAAC,iBACnB;IAAK,SAAS;EAAgC,GAAEA,MAAM,CACvD,CACG,CACF;AAAA,CACP"}

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

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
-import "./PopoutRoot.css";
 export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     popout?: React.ReactNode;
     modal?: React.ReactNode;
 }
-export declare const PopoutRoot: ({ popout, modal, children, getRootRef, ...restProps }: PopoutRootProps) => JSX.Element;
+export declare const PopoutRoot: ({ popout, modal, children, getRootRef, className, ...restProps }: PopoutRootProps) => JSX.Element;

package/dist/cssm/components/PopoutRoot/PopoutRoot.js

@@ -1,35 +1,41 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["popout", "modal", "children", "getRootRef"];
-import { createScopedElement } from "../../lib/jsxRuntime";
+var _excluded = ["popout", "modal", "children", "getRootRef", "className"];
 import * as React from "react";
+import { classNamesString } from "../../lib/classNames";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { blurActiveElement, useDOM } from "../../lib/dom";
-import { useAdaptivityWithMediaQueries } from "../../hooks/useAdaptivityWithMediaQueries";
-import "./PopoutRoot.css";
-export var PopoutRoot = function PopoutRoot(_ref) {
-  var popout = _ref.popout,
-      modal = _ref.modal,
-      children = _ref.children,
-      getRootRef = _ref.getRootRef,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";
+import "./PopoutRoot.module.css";
+var PopoutRootPopout = function PopoutRootPopout(_ref) {
+  var children = _ref.children;
+  var _useAdaptivityWithJSM = useAdaptivityWithJSMediaQueries(),
+    isDesktop = _useAdaptivityWithJSM.isDesktop;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNamesString("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);
+};
+export var PopoutRoot = function PopoutRoot(_ref3) {
+  var popout = _ref3.popout,
+    modal = _ref3.modal,
+    children = _ref3.children,
+    getRootRef = _ref3.getRootRef,
+    className = _ref3.className,
+    restProps = _objectWithoutProperties(_ref3, _excluded);
   var _useDOM = useDOM(),
-      document = _useDOM.document;
-
-  var _useAdaptivityWithMed = useAdaptivityWithMediaQueries(),
-      isDesktop = _useAdaptivityWithMed.isDesktop;
-
+    document = _useDOM.document;
   React.useEffect(function () {
     popout && blurActiveElement(document);
   }, [document, popout]);
-  return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: "PopoutRoot",
+  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: classNamesString("vkuiPopoutRoot", className),
     ref: getRootRef
-  }), children, createScopedElement(AppRootPortal, null, !!popout && createScopedElement("div", {
-    vkuiClass: isDesktop ? "PopoutRoot--absolute" : "PopoutRoot__popout"
-  }, popout), !!modal && createScopedElement("div", {
-    vkuiClass: "PopoutRoot__modal"
-  }, modal)));
+  }), children, /*#__PURE__*/React.createElement(AppRootPortal, null, !!popout && /*#__PURE__*/React.createElement(PopoutRootPopout, null, popout), !!modal && /*#__PURE__*/React.createElement(PopoutRootModal, null, modal)));
 };
 //# sourceMappingURL=PopoutRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.js","names":["React","AppRootPortal","blurActiveElement","useDOM","useAdaptivityWithMediaQueries","PopoutRoot","popout","modal","children","getRootRef","restProps","document","isDesktop","useEffect"],"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { blurActiveElement, useDOM } from \"../../lib/dom\";\nimport { useAdaptivityWithMediaQueries } from \"../../hooks/useAdaptivityWithMediaQueries\";\nimport \"./PopoutRoot.css\";\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  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  const { isDesktop } = useAdaptivityWithMediaQueries();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} vkuiClass=\"PopoutRoot\" ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && (\n          <div\n            vkuiClass={\n              isDesktop ? \"PopoutRoot--absolute\" : \"PopoutRoot__popout\"\n            }\n          >\n            {popout}\n          </div>\n        )}\n        {!!modal && <div vkuiClass=\"PopoutRoot__modal\">{modal}</div>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,aAAT;AACA,SAASC,iBAAT,EAA4BC,MAA5B;AACA,SAASC,6BAAT;AACA;AASA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAMH;EAAA,IALrBC,MAKqB,QALrBA,MAKqB;EAAA,IAJrBC,KAIqB,QAJrBA,KAIqB;EAAA,IAHrBC,QAGqB,QAHrBA,QAGqB;EAAA,IAFrBC,UAEqB,QAFrBA,UAEqB;EAAA,IADlBC,SACkB;;EACrB,cAAqBP,MAAM,EAA3B;EAAA,IAAQQ,QAAR,WAAQA,QAAR;;EAEA,4BAAsBP,6BAA6B,EAAnD;EAAA,IAAQQ,SAAR,yBAAQA,SAAR;;EAEAZ,KAAK,CAACa,SAAN,CAAgB,YAAM;IACpBP,MAAM,IAAIJ,iBAAiB,CAACS,QAAD,CAA3B;EACD,CAFD,EAEG,CAACA,QAAD,EAAWL,MAAX,CAFH;EAIA,OACE,wCAASI,SAAT;IAAoB,SAAS,EAAC,YAA9B;IAA2C,GAAG,EAAED;EAAhD,IACGD,QADH,EAEE,oBAAC,aAAD,QACG,CAAC,CAACF,MAAF,IACC;IACE,SAAS,EACPM,SAAS,GAAG,sBAAH,GAA4B;EAFzC,GAKGN,MALH,CAFJ,EAUG,CAAC,CAACC,KAAF,IAAW;IAAK,SAAS,EAAC;EAAf,GAAoCA,KAApC,CAVd,CAFF,CADF;AAiBD,CAhCM"}
+{"version":3,"file":"PopoutRoot.js","names":["React","classNamesString","AppRootPortal","blurActiveElement","useDOM","useAdaptivityWithJSMediaQueries","PopoutRootPopout","children","isDesktop","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","document","useEffect"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,eAAe;AACzD,SAASC,+BAA+B,QAAQ,6CAA6C;AAAC;AAO9F,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsBF,+BAA+B,EAAE;IAA/CG,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAEP,gBAAgB,2BAEzBO,SAAS,sCAA0C;EACnD,GAEDD,QAAQ,CACL;AAEV,CAAC;AAMD,IAAME,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCF,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASD,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLL,QAAQ,SAARA,QAAQ;IACRM,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBX,MAAM,EAAE;IAArBY,QAAQ,WAARA,QAAQ;EAEhBhB,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpBN,MAAM,IAAIR,iBAAiB,CAACa,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEL,MAAM,CAAC,CAAC;EAEtB,oBACE,wCACMI,SAAS;IACb,SAAS,EAAEd,gBAAgB,mBAAuBa,SAAS,CAAE;IAC7D,GAAG,EAAED;EAAW,IAEfN,QAAQ,eACT,oBAAC,aAAa,QACX,CAAC,CAACI,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC"}

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

@@ -0,0 +1 @@
+.vkuiPopoutRoot{height:100%;position:relative;width:100%}.vkuiPopoutRoot__popout{height:100%;left:0;position:fixed;top:0;width:100%;z-index:100}.vkuiPopoutRoot__popout--absolute{position:absolute}.vkuiPopoutRoot__modal{height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}.vkuiPopoutRoot__modal:empty{display:none}

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import "./PopoutWrapper.css";
 export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
     hasMask?: boolean;
     fixed?: boolean;
@@ -10,4 +9,4 @@ export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */
-export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, ...restProps }: PopoutWrapperProps) => JSX.Element;
+export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, className, ...restProps }: PopoutWrapperProps) => JSX.Element;