@vkontakte/vkui 4.37.0 → 5.0.0

package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js

@@ -23,9 +23,9 @@ var _usePlatform = require("../../hooks/usePlatform");
 
 var _utils = require("../../lib/utils");
 
-var _getClassName = require("../../helpers/getClassName");
+var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 
-var _Caption = require("../Typography/Caption/Caption");
+var _Footnote = require("../Typography/Footnote/Footnote");
 
 var _Headline = require("../Typography/Headline/Headline");
 
@@ -75,18 +75,18 @@ var PanelHeaderContent = function PanelHeaderContent(_ref2) {
   var inProps = onClick ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
     onClick: onClick,
     activeEffectDelay: 200,
-    hasActive: platform === _platform.IOS,
+    hasActive: platform === _platform.Platform.IOS,
     activeMode: "opacity"
   }) : {};
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, rootProps, {
-    vkuiClass: (0, _getClassName.getClassName)("PanelHeaderContent", platform),
+    vkuiClass: (0, _classNames.classNames)("PanelHeaderContent", (0, _getPlatformClassName.getPlatformClassName)("PanelHeaderContent", platform)),
     style: style,
     className: className
   }), (0, _utils.hasReactNode)(before) && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PanelHeaderContent__before"
   }, before), (0, _jsxRuntime.createScopedElement)(InComponent, (0, _extends2.default)({}, inProps, {
-    vkuiClass: (0, _classNames.classNames)("PanelHeaderContent__in", !before && platform !== _platform.ANDROID && "PanelHeaderContent__in--centered")
-  }), (0, _utils.hasReactNode)(status) && (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+    vkuiClass: (0, _classNames.classNames)("PanelHeaderContent__in", !before && platform !== _platform.Platform.ANDROID && "PanelHeaderContent__in--centered")
+  }), (0, _utils.hasReactNode)(status) && (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
     vkuiClass: "PanelHeaderContent__status"
   }, status), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PanelHeaderContent__children"

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContent.js","names":["PanelHeaderChildren","platform","hasStatus","hasBefore","children","Platform","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","Tappable","rootProps","usePlatform","inProps","activeEffectDelay","hasActive","IOS","activeMode","getClassName","hasReactNode","classNames","ANDROID"],"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { IOS, ANDROID, Platform } from \"../../lib/platform\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { HasPlatform } from \"../../types\";\nimport \"./PanelHeaderContent.css\";\n\nexport interface PanelHeaderContentProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasPlatform {\n  hasStatus: boolean;\n  hasBefore: boolean;\n  children?: React.ReactNode;\n}\n\nconst PanelHeaderChildren = ({\n  platform,\n  hasStatus,\n  hasBefore,\n  children,\n}: PanelHeaderChildrenProps) => {\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div vkuiClass=\"PanelHeaderContent__children-in\">{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : \"div\";\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === IOS,\n        activeMode: \"opacity\",\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      vkuiClass={getClassName(\"PanelHeaderContent\", platform)}\n      style={style}\n      className={className}\n    >\n      {hasReactNode(before) && (\n        <div vkuiClass=\"PanelHeaderContent__before\">{before}</div>\n      )}\n      <InComponent\n        {...inProps}\n        vkuiClass={classNames(\n          \"PanelHeaderContent__in\",\n          !before && platform !== ANDROID && \"PanelHeaderContent__in--centered\"\n        )}\n      >\n        {hasReactNode(status) && (\n          <Caption vkuiClass=\"PanelHeaderContent__status\">{status}</Caption>\n        )}\n        <div vkuiClass=\"PanelHeaderContent__children\">\n          <PanelHeaderChildren\n            platform={platform}\n            hasStatus={hasReactNode(status)}\n            hasBefore={hasReactNode(before)}\n          >\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div vkuiClass=\"PanelHeaderContent__aside\">{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div vkuiClass=\"PanelHeaderContent__width\" />}\n      </InComponent>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAiBA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,OAKI;EAAA,IAJ9BC,QAI8B,QAJ9BA,QAI8B;EAAA,IAH9BC,SAG8B,QAH9BA,SAG8B;EAAA,IAF9BC,SAE8B,QAF9BA,SAE8B;EAAA,IAD9BC,QAC8B,QAD9BA,QAC8B;;EAC9B,IAAIH,QAAQ,KAAKI,kBAAA,CAASC,KAA1B,EAAiC;IAC/B,OACE,qCAAC,UAAD;MAAM,SAAS,EAAC,KAAhB;MAAsB,MAAM,EAAC;IAA7B,GACGF,QADH,CADF;EAKD;;EAED,OAAOF,SAAS,IAAIC,SAAb,GACL,qCAAC,kBAAD;IAAU,SAAS,EAAC,KAApB;IAA0B,MAAM,EAAC;EAAjC,GACGC,QADH,CADK,GAKL;IAAK,SAAS,EAAC;EAAf,GAAkDA,QAAlD,CALF;AAOD,CArBD;AAuBA;AACA;AACA;;;AACO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAqB,QASH;EAAA,IAR7BC,SAQ6B,SAR7BA,SAQ6B;EAAA,IAP7BC,KAO6B,SAP7BA,KAO6B;EAAA,IAN7BC,KAM6B,SAN7BA,KAM6B;EAAA,IAL7BC,MAK6B,SAL7BA,MAK6B;EAAA,IAJ7BC,MAI6B,SAJ7BA,MAI6B;EAAA,IAH7BR,QAG6B,SAH7BA,QAG6B;EAAA,IAF7BS,OAE6B,SAF7BA,OAE6B;EAAA,IAD1BC,SAC0B;EAC7B,IAAMC,WAAW,GAAGF,OAAO,GAAGG,kBAAH,GAAc,KAAzC;EACA,IAAMC,SAAS,GAAGJ,OAAO,GAAG,EAAH,GAAQC,SAAjC;EACA,IAAMb,QAAQ,GAAG,IAAAiB,wBAAA,GAAjB;EACA,IAAMC,OAAO,GAAGN,OAAO,+DAEdC,SAFc;IAGjBD,OAAO,EAAPA,OAHiB;IAIjBO,iBAAiB,EAAE,GAJF;IAKjBC,SAAS,EAAEpB,QAAQ,KAAKqB,aALP;IAMjBC,UAAU,EAAE;EANK,KAQnB,EARJ;EAUA,OACE,uEACMN,SADN;IAEE,SAAS,EAAE,IAAAO,0BAAA,EAAa,oBAAb,EAAmCvB,QAAnC,CAFb;IAGE,KAAK,EAAEQ,KAHT;IAIE,SAAS,EAAED;EAJb,IAMG,IAAAiB,mBAAA,EAAab,MAAb,KACC;IAAK,SAAS,EAAC;EAAf,GAA6CA,MAA7C,CAPJ,EASE,qCAAC,WAAD,6BACMO,OADN;IAEE,SAAS,EAAE,IAAAO,sBAAA,EACT,wBADS,EAET,CAACd,MAAD,IAAWX,QAAQ,KAAK0B,iBAAxB,IAAmC,kCAF1B;EAFb,IAOG,IAAAF,mBAAA,EAAad,MAAb,KACC,qCAAC,gBAAD;IAAS,SAAS,EAAC;EAAnB,GAAiDA,MAAjD,CARJ,EAUE;IAAK,SAAS,EAAC;EAAf,GACE,qCAAC,mBAAD;IACE,QAAQ,EAAEV,QADZ;IAEE,SAAS,EAAE,IAAAwB,mBAAA,EAAad,MAAb,CAFb;IAGE,SAAS,EAAE,IAAAc,mBAAA,EAAab,MAAb;EAHb,GAKGR,QALH,CADF,EAQG,IAAAqB,mBAAA,EAAaf,KAAb,KACC;IAAK,SAAS,EAAC;EAAf,GAA4CA,KAA5C,CATJ,CAVF,EAsBG,IAAAe,mBAAA,EAAab,MAAb,KAAwB;IAAK,SAAS,EAAC;EAAf,EAtB3B,CATF,CADF;AAoCD,CA3DM"}
+{"version":3,"file":"PanelHeaderContent.js","names":["PanelHeaderChildren","platform","hasStatus","hasBefore","children","Platform","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","Tappable","rootProps","usePlatform","inProps","activeEffectDelay","hasActive","IOS","activeMode","classNames","getPlatformClassName","hasReactNode","ANDROID"],"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Platform } from \"../../lib/platform\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { HasPlatform } from \"../../types\";\nimport \"./PanelHeaderContent.css\";\n\nexport interface PanelHeaderContentProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasPlatform {\n  hasStatus: boolean;\n  hasBefore: boolean;\n  children?: React.ReactNode;\n}\n\nconst PanelHeaderChildren = ({\n  platform,\n  hasStatus,\n  hasBefore,\n  children,\n}: PanelHeaderChildrenProps) => {\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div vkuiClass=\"PanelHeaderContent__children-in\">{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : \"div\";\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: \"opacity\",\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      vkuiClass={classNames(\n        \"PanelHeaderContent\",\n        getPlatformClassName(\"PanelHeaderContent\", platform)\n      )}\n      style={style}\n      className={className}\n    >\n      {hasReactNode(before) && (\n        <div vkuiClass=\"PanelHeaderContent__before\">{before}</div>\n      )}\n      <InComponent\n        {...inProps}\n        vkuiClass={classNames(\n          \"PanelHeaderContent__in\",\n          !before &&\n            platform !== Platform.ANDROID &&\n            \"PanelHeaderContent__in--centered\"\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote vkuiClass=\"PanelHeaderContent__status\">{status}</Footnote>\n        )}\n        <div vkuiClass=\"PanelHeaderContent__children\">\n          <PanelHeaderChildren\n            platform={platform}\n            hasStatus={hasReactNode(status)}\n            hasBefore={hasReactNode(before)}\n          >\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div vkuiClass=\"PanelHeaderContent__aside\">{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div vkuiClass=\"PanelHeaderContent__width\" />}\n      </InComponent>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAiBA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,OAKI;EAAA,IAJ9BC,QAI8B,QAJ9BA,QAI8B;EAAA,IAH9BC,SAG8B,QAH9BA,SAG8B;EAAA,IAF9BC,SAE8B,QAF9BA,SAE8B;EAAA,IAD9BC,QAC8B,QAD9BA,QAC8B;;EAC9B,IAAIH,QAAQ,KAAKI,kBAAA,CAASC,KAA1B,EAAiC;IAC/B,OACE,qCAAC,UAAD;MAAM,SAAS,EAAC,KAAhB;MAAsB,MAAM,EAAC;IAA7B,GACGF,QADH,CADF;EAKD;;EAED,OAAOF,SAAS,IAAIC,SAAb,GACL,qCAAC,kBAAD;IAAU,SAAS,EAAC,KAApB;IAA0B,MAAM,EAAC;EAAjC,GACGC,QADH,CADK,GAKL;IAAK,SAAS,EAAC;EAAf,GAAkDA,QAAlD,CALF;AAOD,CArBD;AAuBA;AACA;AACA;;;AACO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAqB,QASH;EAAA,IAR7BC,SAQ6B,SAR7BA,SAQ6B;EAAA,IAP7BC,KAO6B,SAP7BA,KAO6B;EAAA,IAN7BC,KAM6B,SAN7BA,KAM6B;EAAA,IAL7BC,MAK6B,SAL7BA,MAK6B;EAAA,IAJ7BC,MAI6B,SAJ7BA,MAI6B;EAAA,IAH7BR,QAG6B,SAH7BA,QAG6B;EAAA,IAF7BS,OAE6B,SAF7BA,OAE6B;EAAA,IAD1BC,SAC0B;EAC7B,IAAMC,WAAW,GAAGF,OAAO,GAAGG,kBAAH,GAAc,KAAzC;EACA,IAAMC,SAAS,GAAGJ,OAAO,GAAG,EAAH,GAAQC,SAAjC;EACA,IAAMb,QAAQ,GAAG,IAAAiB,wBAAA,GAAjB;EACA,IAAMC,OAAO,GAAGN,OAAO,+DAEdC,SAFc;IAGjBD,OAAO,EAAPA,OAHiB;IAIjBO,iBAAiB,EAAE,GAJF;IAKjBC,SAAS,EAAEpB,QAAQ,KAAKI,kBAAA,CAASiB,GALhB;IAMjBC,UAAU,EAAE;EANK,KAQnB,EARJ;EAUA,OACE,uEACMN,SADN;IAEE,SAAS,EAAE,IAAAO,sBAAA,EACT,oBADS,EAET,IAAAC,0CAAA,EAAqB,oBAArB,EAA2CxB,QAA3C,CAFS,CAFb;IAME,KAAK,EAAEQ,KANT;IAOE,SAAS,EAAED;EAPb,IASG,IAAAkB,mBAAA,EAAad,MAAb,KACC;IAAK,SAAS,EAAC;EAAf,GAA6CA,MAA7C,CAVJ,EAYE,qCAAC,WAAD,6BACMO,OADN;IAEE,SAAS,EAAE,IAAAK,sBAAA,EACT,wBADS,EAET,CAACZ,MAAD,IACEX,QAAQ,KAAKI,kBAAA,CAASsB,OADxB,IAEE,kCAJO;EAFb,IASG,IAAAD,mBAAA,EAAaf,MAAb,KACC,qCAAC,kBAAD;IAAU,SAAS,EAAC;EAApB,GAAkDA,MAAlD,CAVJ,EAYE;IAAK,SAAS,EAAC;EAAf,GACE,qCAAC,mBAAD;IACE,QAAQ,EAAEV,QADZ;IAEE,SAAS,EAAE,IAAAyB,mBAAA,EAAaf,MAAb,CAFb;IAGE,SAAS,EAAE,IAAAe,mBAAA,EAAad,MAAb;EAHb,GAKGR,QALH,CADF,EAQG,IAAAsB,mBAAA,EAAahB,KAAb,KACC;IAAK,SAAS,EAAC;EAAf,GAA4CA,KAA5C,CATJ,CAZF,EAwBG,IAAAgB,mBAAA,EAAad,MAAb,KAAwB;IAAK,SAAS,EAAC;EAAf,EAxB3B,CAZF,CADF;AAyCD,CAhEM"}

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js

@@ -23,8 +23,6 @@ var _FixedLayout = require("../FixedLayout/FixedLayout");
 
 var _classNames = require("../../lib/classNames");
 
-var _AdaptivityContext = require("../AdaptivityProvider/AdaptivityContext");
-
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
 var _dom = require("../../lib/dom");
@@ -41,6 +39,8 @@ var _usePlatform = require("../../hooks/usePlatform");
 
 var _ScrollContext = require("../AppRoot/ScrollContext");
 
+var _getSizeXClassName = require("../../helpers/getSizeXClassName");
+
 var _excluded = ["children", "onClose", "opened"];
 
 /**
@@ -66,16 +66,15 @@ var PanelHeaderContext = function PanelHeaderContext(_ref) {
   var closing = visible && !opened;
 
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      viewWidth = _useAdaptivity.viewWidth;
+      sizeX = _useAdaptivity.sizeX;
 
-  var isDesktop = viewWidth >= _AdaptivityContext.ViewWidth.SMALL_TABLET;
   var elementRef = React.useRef(null);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     opened && setVisible(true);
   }, [opened]);
-  (0, _ScrollContext.useScrollLock)(!isDesktop && opened); // start closing on outer click
+  (0, _ScrollContext.useScrollLock)(platform !== _platform.Platform.VKCOM && opened); // start closing on outer click
 
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", isDesktop && opened && !closing && function (event) {
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", opened && !closing && function (event) {
     if (elementRef.current && !elementRef.current.contains(event.target)) {
       onClose();
     }
@@ -90,8 +89,7 @@ var PanelHeaderContext = function PanelHeaderContext(_ref) {
     return closing ? animationFallback.set() : animationFallback.clear();
   }, [animationFallback, closing]);
   return (0, _jsxRuntime.createScopedElement)(_FixedLayout.FixedLayout, (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)("PanelHeaderContext", platform === _platform.IOS && "PanelHeaderContext--ios", opened && "PanelHeaderContext--opened", closing && "PanelHeaderContext--closing", isDesktop && "PanelHeaderContext--desktop", // TODO v5.0.0 поправить под новую адаптивность
-    (platform !== _platform.IOS || platform === _platform.IOS && isDesktop) && "PanelHeaderContext--rounded"),
+    vkuiClass: (0, _classNames.classNames)("PanelHeaderContext", platform === _platform.Platform.IOS && "PanelHeaderContext--ios", opened && "PanelHeaderContext--opened", closing && "PanelHeaderContext--closing", (0, _getSizeXClassName.getSizeXClassName)("PanelHeaderContext", sizeX), "PanelHeaderContext--rounded"),
     vertical: "top"
   }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PanelHeaderContext__in",
@@ -99,8 +97,11 @@ var PanelHeaderContext = function PanelHeaderContext(_ref) {
     onAnimationEnd: closing ? onAnimationEnd : undefined
   }, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PanelHeaderContext__content"
-  }, visible && children)), !isDesktop && visible && (0, _jsxRuntime.createScopedElement)("div", {
-    onClick: onClose,
+  }, visible && children)), visible && (0, _jsxRuntime.createScopedElement)("div", {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onClose();
+    },
     vkuiClass: "PanelHeaderContext__fade"
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContext.js","names":["PanelHeaderContext","children","onClose","opened","restProps","useDOM","document","platform","usePlatform","React","useState","visible","setVisible","closing","useAdaptivity","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","elementRef","useRef","useIsomorphicLayoutEffect","useScrollLock","useGlobalEventListener","event","current","contains","target","onAnimationEnd","animationFallback","useTimeout","useEffect","set","clear","classNames","IOS","undefined"],"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FixedLayout } from \"../FixedLayout/FixedLayout\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ViewWidth } from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { IOS } 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 \"./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 { viewWidth } = useAdaptivity();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(!isDesktop && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    \"click\",\n    isDesktop &&\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 === IOS && \"PanelHeaderContext--ios\",\n        opened && \"PanelHeaderContext--opened\",\n        closing && \"PanelHeaderContext--closing\",\n        isDesktop && \"PanelHeaderContext--desktop\",\n        // TODO v5.0.0 поправить под новую адаптивность\n        (platform !== IOS || (platform === IOS && isDesktop)) &&\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      {!isDesktop && visible && (\n        <div onClick={onClose} vkuiClass=\"PanelHeaderContext__fade\" />\n      )}\n    </FixedLayout>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AASA;AACA;AACA;AACO,IAAMA,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,cAAqB,IAAAC,WAAA,GAArB;EAAA,IAAQC,QAAR,WAAQA,QAAR;;EACA,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;;EACA,sBAA8BC,KAAK,CAACC,QAAN,CAAeP,MAAf,CAA9B;EAAA;EAAA,IAAOQ,OAAP;EAAA,IAAgBC,UAAhB;;EACA,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACR,MAA5B;;EACA,qBAAsB,IAAAW,6BAAA,GAAtB;EAAA,IAAQC,SAAR,kBAAQA,SAAR;;EACA,IAAMC,SAAS,GAAGD,SAAS,IAAIE,4BAAA,CAAUC,YAAzC;EACA,IAAMC,UAAU,GAAGV,KAAK,CAACW,MAAN,CAA6B,IAA7B,CAAnB;EAEA,IAAAC,oDAAA,EAA0B,YAAM;IAC9BlB,MAAM,IAAIS,UAAU,CAAC,IAAD,CAApB;EACD,CAFD,EAEG,CAACT,MAAD,CAFH;EAIA,IAAAmB,4BAAA,EAAc,CAACN,SAAD,IAAcb,MAA5B,EAb6B,CAe7B;;EACA,IAAAoB,8CAAA,EACEjB,QADF,EAEE,OAFF,EAGEU,SAAS,IACPb,MADF,IAEE,CAACU,OAFH,IAGG,UAACW,KAAD,EAAW;IACV,IACEL,UAAU,CAACM,OAAX,IACA,CAACN,UAAU,CAACM,OAAX,CAAmBC,QAAnB,CAA4BF,KAAK,CAACG,MAAlC,CAFH,EAGE;MACAzB,OAAO;IACR;EACF,CAbL,EAhB6B,CAgC7B;;EACA,IAAM0B,cAAc,GAAG,SAAjBA,cAAiB;IAAA,OAAMhB,UAAU,CAAC,KAAD,CAAhB;EAAA,CAAvB;;EACA,IAAMiB,iBAAiB,GAAG,IAAAC,sBAAA,EAAWF,cAAX,EAA2B,GAA3B,CAA1B;EACAnB,KAAK,CAACsB,SAAN,CACE;IAAA,OAAOlB,OAAO,GAAGgB,iBAAiB,CAACG,GAAlB,EAAH,GAA6BH,iBAAiB,CAACI,KAAlB,EAA3C;EAAA,CADF,EAEE,CAACJ,iBAAD,EAAoBhB,OAApB,CAFF;EAKA,OACE,qCAAC,wBAAD,6BACMT,SADN;IAEE,SAAS,EAAE,IAAA8B,sBAAA,EACT,oBADS,EAET3B,QAAQ,KAAK4B,aAAb,IAAoB,yBAFX,EAGThC,MAAM,IAAI,4BAHD,EAITU,OAAO,IAAI,6BAJF,EAKTG,SAAS,IAAI,6BALJ,EAMT;IACA,CAACT,QAAQ,KAAK4B,aAAb,IAAqB5B,QAAQ,KAAK4B,aAAb,IAAoBnB,SAA1C,KACE,6BARO,CAFb;IAYE,QAAQ,EAAC;EAZX,IAcE;IACE,SAAS,EAAC,wBADZ;IAEE,GAAG,EAAEG,UAFP;IAGE,cAAc,EAAEN,OAAO,GAAGe,cAAH,GAAoBQ;EAH7C,GAKE;IAAK,SAAS,EAAC;EAAf,GAA8CzB,OAAO,IAAIV,QAAzD,CALF,CAdF,EAqBG,CAACe,SAAD,IAAcL,OAAd,IACC;IAAK,OAAO,EAAET,OAAd;IAAuB,SAAS,EAAC;EAAjC,EAtBJ,CADF;AA2BD,CAxEM"}
+{"version":3,"file":"PanelHeaderContext.js","names":["PanelHeaderContext","children","onClose","opened","restProps","useDOM","document","platform","usePlatform","React","useState","visible","setVisible","closing","useAdaptivity","sizeX","elementRef","useRef","useIsomorphicLayoutEffect","useScrollLock","Platform","VKCOM","useGlobalEventListener","event","current","contains","target","onAnimationEnd","animationFallback","useTimeout","useEffect","set","clear","classNames","IOS","getSizeXClassName","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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AASA;AACA;AACA;AACO,IAAMA,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,cAAqB,IAAAC,WAAA,GAArB;EAAA,IAAQC,QAAR,WAAQA,QAAR;;EACA,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;;EACA,sBAA8BC,KAAK,CAACC,QAAN,CAAeP,MAAf,CAA9B;EAAA;EAAA,IAAOQ,OAAP;EAAA,IAAgBC,UAAhB;;EACA,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACR,MAA5B;;EACA,qBAAkB,IAAAW,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,IAAMC,UAAU,GAAGP,KAAK,CAACQ,MAAN,CAA6B,IAA7B,CAAnB;EAEA,IAAAC,oDAAA,EAA0B,YAAM;IAC9Bf,MAAM,IAAIS,UAAU,CAAC,IAAD,CAApB;EACD,CAFD,EAEG,CAACT,MAAD,CAFH;EAIA,IAAAgB,4BAAA,EAAcZ,QAAQ,KAAKa,kBAAA,CAASC,KAAtB,IAA+BlB,MAA7C,EAZ6B,CAc7B;;EACA,IAAAmB,8CAAA,EACEhB,QADF,EAEE,OAFF,EAGEH,MAAM,IACJ,CAACU,OADH,IAEG,UAACU,KAAD,EAAW;IACV,IACEP,UAAU,CAACQ,OAAX,IACA,CAACR,UAAU,CAACQ,OAAX,CAAmBC,QAAnB,CAA4BF,KAAK,CAACG,MAAlC,CAFH,EAGE;MACAxB,OAAO;IACR;EACF,CAZL,EAf6B,CA8B7B;;EACA,IAAMyB,cAAc,GAAG,SAAjBA,cAAiB;IAAA,OAAMf,UAAU,CAAC,KAAD,CAAhB;EAAA,CAAvB;;EACA,IAAMgB,iBAAiB,GAAG,IAAAC,sBAAA,EAAWF,cAAX,EAA2B,GAA3B,CAA1B;EACAlB,KAAK,CAACqB,SAAN,CACE;IAAA,OAAOjB,OAAO,GAAGe,iBAAiB,CAACG,GAAlB,EAAH,GAA6BH,iBAAiB,CAACI,KAAlB,EAA3C;EAAA,CADF,EAEE,CAACJ,iBAAD,EAAoBf,OAApB,CAFF;EAKA,OACE,qCAAC,wBAAD,6BACMT,SADN;IAEE,SAAS,EAAE,IAAA6B,sBAAA,EACT,oBADS,EAET1B,QAAQ,KAAKa,kBAAA,CAASc,GAAtB,IAA6B,yBAFpB,EAGT/B,MAAM,IAAI,4BAHD,EAITU,OAAO,IAAI,6BAJF,EAKT,IAAAsB,oCAAA,EAAkB,oBAAlB,EAAwCpB,KAAxC,CALS,EAMT,6BANS,CAFb;IAUE,QAAQ,EAAC;EAVX,IAYE;IACE,SAAS,EAAC,wBADZ;IAEE,GAAG,EAAEC,UAFP;IAGE,cAAc,EAAEH,OAAO,GAAGc,cAAH,GAAoBS;EAH7C,GAKE;IAAK,SAAS,EAAC;EAAf,GAA8CzB,OAAO,IAAIV,QAAzD,CALF,CAZF,EAmBGU,OAAO,IACN;IACE,OAAO,EAAE,iBAACY,KAAD,EAAW;MAClBA,KAAK,CAACc,eAAN;MACAnC,OAAO;IACR,CAJH;IAKE,SAAS,EAAC;EALZ,EApBJ,CADF;AA+BD,CA1EM"}

package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js

@@ -39,7 +39,7 @@ var PanelHeaderEdit = function PanelHeaderEdit(_ref) {
   var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)(_PanelHeaderButton.PanelHeaderButton, (0, _extends2.default)({
     "aria-label": iOSText
-  }, restProps), platform === _platform.IOS ? iOSText : (0, _jsxRuntime.createScopedElement)(AndroidIcon, null));
+  }, restProps), platform === _platform.Platform.IOS ? iOSText : (0, _jsxRuntime.createScopedElement)(AndroidIcon, null));
 };
 
 exports.PanelHeaderEdit = PanelHeaderEdit;

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderEdit.js","names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","usePlatform","IOS"],"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { IOS } 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 === IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AAIA;;AACA;;AACA;;;;AAiBA;AACA;AACA;AACO,IAAMA,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,GAAGM,wBAAH,GAAuBC,wBAAnD;EACA,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;EAEA,OACE,qCAAC,oCAAD;IAAmB,cAAYL;EAA/B,GAA4CD,SAA5C,GACGK,QAAQ,KAAKE,aAAb,GAAmBN,OAAnB,GAA6B,qCAAC,WAAD,OADhC,CADF;AAKD,CAfM"}
+{"version":3,"file":"PanelHeaderEdit.js","names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","usePlatform","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;;AAIA;;AACA;;AACA;;;;AAiBA;AACA;AACA;AACO,IAAMA,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,GAAGM,wBAAH,GAAuBC,wBAAnD;EACA,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;EAEA,OACE,qCAAC,oCAAD;IAAmB,cAAYL;EAA/B,GAA4CD,SAA5C,GACGK,QAAQ,KAAKE,kBAAA,CAASC,GAAtB,GAA4BP,OAA5B,GAAsC,qCAAC,WAAD,OADzC,CADF;AAKD,CAfM"}

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

@@ -36,7 +36,7 @@ var PanelHeaderSubmit = function PanelHeaderSubmit(_ref) {
   return (0, _jsxRuntime.createScopedElement)(_PanelHeaderButton.PanelHeaderButton, (0, _extends2.default)({
     "aria-label": (0, _utils.getTitleFromChildren)(children),
     primary: true
-  }, restProps), platform === _platform.IOS ? children : (0, _jsxRuntime.createScopedElement)(_icons.Icon28DoneOutline, null));
+  }, restProps), platform === _platform.Platform.IOS ? children : (0, _jsxRuntime.createScopedElement)(_icons.Icon28DoneOutline, null));
 };
 
 exports.PanelHeaderSubmit = PanelHeaderSubmit;

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","getTitleFromChildren","IOS"],"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { IOS } 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 === IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AAIA;;AACA;;AACA;;AACA;;;;AAEA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAGH;EAAA,yBAF5BC,QAE4B;EAAA,IAF5BA,QAE4B,8BAFjB,QAEiB;EAAA,IADzBC,SACyB;EAC5B,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;EAEA,OACE,qCAAC,oCAAD;IACE,cAAY,IAAAC,2BAAA,EAAqBJ,QAArB,CADd;IAEE,OAAO;EAFT,GAGMC,SAHN,GAKGC,QAAQ,KAAKG,aAAb,GAAmBL,QAAnB,GAA8B,qCAAC,wBAAD,OALjC,CADF;AASD,CAfM"}
+{"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","getTitleFromChildren","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;;AAIA;;AACA;;AACA;;AACA;;;;AAEA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAGH;EAAA,yBAF5BC,QAE4B;EAAA,IAF5BA,QAE4B,8BAFjB,QAEiB;EAAA,IADzBC,SACyB;EAC5B,IAAMC,QAAQ,GAAG,IAAAC,wBAAA,GAAjB;EAEA,OACE,qCAAC,oCAAD;IACE,cAAY,IAAAC,2BAAA,EAAqBJ,QAArB,CADd;IAEE,OAAO;EAFT,GAGMC,SAHN,GAKGC,QAAQ,KAAKG,kBAAA,CAASC,GAAtB,GAA4BN,QAA5B,GAAuC,qCAAC,wBAAD,OAL1C,CADF;AASD,CAfM"}

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

@@ -7,7 +7,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopoutRootComponent = exports.PopoutRoot = void 0;
+exports.PopoutRoot = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
@@ -17,22 +17,17 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var React = _interopRequireWildcard(require("react"));
 
-var _withAdaptivity = require("../../hoc/withAdaptivity");
-
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
 
 var _dom = require("../../lib/dom");
 
-var _useAdaptivity = require("../../hooks/useAdaptivity");
+var _useAdaptivityWithMediaQueries = require("../../hooks/useAdaptivityWithMediaQueries");
 
-var _excluded = ["popout", "modal", "viewWidth", "viewHeight", "hasMouse", "children", "getRootRef"];
+var _excluded = ["popout", "modal", "children", "getRootRef"];
 
-var PopoutRootComponent = function PopoutRootComponent(_ref) {
+var PopoutRoot = function PopoutRoot(_ref) {
   var popout = _ref.popout,
       modal = _ref.modal,
-      viewWidth = _ref.viewWidth,
-      viewHeight = _ref.viewHeight,
-      hasMouse = _ref.hasMouse,
       children = _ref.children,
       getRootRef = _ref.getRootRef,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -40,7 +35,9 @@ var PopoutRootComponent = function PopoutRootComponent(_ref) {
   var _useDOM = (0, _dom.useDOM)(),
       document = _useDOM.document;
 
-  var isDesktop = (0, _useAdaptivity.useAdaptivityIsDesktop)();
+  var _useAdaptivityWithMed = (0, _useAdaptivityWithMediaQueries.useAdaptivityWithMediaQueries)(),
+      isDesktop = _useAdaptivityWithMed.isDesktop;
+
   React.useEffect(function () {
     popout && (0, _dom.blurActiveElement)(document);
   }, [document, popout]);
@@ -54,12 +51,5 @@ var PopoutRootComponent = function PopoutRootComponent(_ref) {
   }, modal)));
 };
 
-exports.PopoutRootComponent = PopoutRootComponent;
-PopoutRootComponent.displayName = "PopoutRoot";
-var PopoutRoot = (0, _withAdaptivity.withAdaptivity)(PopoutRootComponent, {
-  viewWidth: true,
-  viewHeight: true,
-  hasMouse: true
-});
 exports.PopoutRoot = PopoutRoot;
 //# sourceMappingURL=PopoutRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.js","names":["PopoutRootComponent","popout","modal","viewWidth","viewHeight","hasMouse","children","getRootRef","restProps","useDOM","document","isDesktop","useAdaptivityIsDesktop","React","useEffect","blurActiveElement","displayName","PopoutRoot","withAdaptivity"],"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport { withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { blurActiveElement, useDOM } from \"../../lib/dom\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivityIsDesktop } from \"../../hooks/useAdaptivity\";\nimport \"./PopoutRoot.css\";\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityProps,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRootComponent = ({\n  popout,\n  modal,\n  viewWidth,\n  viewHeight,\n  hasMouse,\n  children,\n  getRootRef,\n  ...restProps\n}: PopoutRootProps & AdaptivityContextInterface) => {\n  const { document } = useDOM();\n\n  const isDesktop = useAdaptivityIsDesktop();\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\nPopoutRootComponent.displayName = \"PopoutRoot\";\n\nexport const PopoutRoot = withAdaptivity(PopoutRootComponent, {\n  viewWidth: true,\n  viewHeight: true,\n  hasMouse: true,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAKA;;;;AAWO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,OASiB;EAAA,IARlDC,MAQkD,QARlDA,MAQkD;EAAA,IAPlDC,KAOkD,QAPlDA,KAOkD;EAAA,IANlDC,SAMkD,QANlDA,SAMkD;EAAA,IALlDC,UAKkD,QALlDA,UAKkD;EAAA,IAJlDC,QAIkD,QAJlDA,QAIkD;EAAA,IAHlDC,QAGkD,QAHlDA,QAGkD;EAAA,IAFlDC,UAEkD,QAFlDA,UAEkD;EAAA,IAD/CC,SAC+C;;EAClD,cAAqB,IAAAC,WAAA,GAArB;EAAA,IAAQC,QAAR,WAAQA,QAAR;;EAEA,IAAMC,SAAS,GAAG,IAAAC,qCAAA,GAAlB;EAEAC,KAAK,CAACC,SAAN,CAAgB,YAAM;IACpBb,MAAM,IAAI,IAAAc,sBAAA,EAAkBL,QAAlB,CAAV;EACD,CAFD,EAEG,CAACA,QAAD,EAAWT,MAAX,CAFH;EAIA,OACE,uEAASO,SAAT;IAAoB,SAAS,EAAC,YAA9B;IAA2C,GAAG,EAAED;EAAhD,IACGD,QADH,EAEE,qCAAC,4BAAD,QACG,CAAC,CAACL,MAAF,IACC;IACE,SAAS,EACPU,SAAS,GAAG,sBAAH,GAA4B;EAFzC,GAKGV,MALH,CAFJ,EAUG,CAAC,CAACC,KAAF,IAAW;IAAK,SAAS,EAAC;EAAf,GAAoCA,KAApC,CAVd,CAFF,CADF;AAiBD,CAnCM;;;AAqCPF,mBAAmB,CAACgB,WAApB,GAAkC,YAAlC;AAEO,IAAMC,UAAU,GAAG,IAAAC,8BAAA,EAAelB,mBAAf,EAAoC;EAC5DG,SAAS,EAAE,IADiD;EAE5DC,UAAU,EAAE,IAFgD;EAG5DC,QAAQ,EAAE;AAHkD,CAApC,CAAnB"}
+{"version":3,"file":"PopoutRoot.js","names":["PopoutRoot","popout","modal","children","getRootRef","restProps","useDOM","document","useAdaptivityWithMediaQueries","isDesktop","React","useEffect","blurActiveElement"],"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;;AAEA;;AACA;;AACA;;;;AAUO,IAAMA,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,cAAqB,IAAAC,WAAA,GAArB;EAAA,IAAQC,QAAR,WAAQA,QAAR;;EAEA,4BAAsB,IAAAC,4DAAA,GAAtB;EAAA,IAAQC,SAAR,yBAAQA,SAAR;;EAEAC,KAAK,CAACC,SAAN,CAAgB,YAAM;IACpBV,MAAM,IAAI,IAAAW,sBAAA,EAAkBL,QAAlB,CAAV;EACD,CAFD,EAEG,CAACA,QAAD,EAAWN,MAAX,CAFH;EAIA,OACE,uEAASI,SAAT;IAAoB,SAAS,EAAC,YAA9B;IAA2C,GAAG,EAAED;EAAhD,IACGD,QADH,EAEE,qCAAC,4BAAD,QACG,CAAC,CAACF,MAAF,IACC;IACE,SAAS,EACPQ,SAAS,GAAG,sBAAH,GAA4B;EAFzC,GAKGR,MALH,CAFJ,EAUG,CAAC,CAACC,KAAF,IAAW;IAAK,SAAS,EAAC;EAAf,GAAoCA,KAApC,CAVd,CAFF,CADF;AAiBD,CAhCM"}

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

@@ -65,7 +65,7 @@ var PopoutWrapper = function PopoutWrapper(_ref) {
     }
   };
 
-  var animationFinishFallback = (0, _useTimeout.useTimeout)(onFadeInEnd, platform === _platform.IOS ? 300 : 200);
+  var animationFinishFallback = (0, _useTimeout.useTimeout)(onFadeInEnd, platform === _platform.Platform.IOS ? 300 : 200);
   React.useEffect(function () {
     !opened && animationFinishFallback.set();
   }, [animationFinishFallback, opened]);
@@ -79,7 +79,7 @@ var PopoutWrapper = function PopoutWrapper(_ref) {
     passive: false
   });
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)("PopoutWrapper", "PopoutWrapper--v-".concat(alignY), "PopoutWrapper--h-".concat(alignX), closing && "PopoutWrapper--closing", opened && "PopoutWrapper--opened", fixed && "PopoutWrapper--fixed", hasMask && "PopoutWrapper--masked"),
+    vkuiClass: (0, _classNames.classNames)("PopoutWrapper", "PopoutWrapper--alignY-".concat(alignY), "PopoutWrapper--alignX-".concat(alignX), closing && "PopoutWrapper--closing", opened && "PopoutWrapper--opened", fixed && "PopoutWrapper--fixed", hasMask && "PopoutWrapper--masked"),
     onAnimationEnd: opened ? undefined : onFadeInEnd,
     ref: elRef
   }), (0, _jsxRuntime.createScopedElement)("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.js","names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","IOS","useEffect","set","useDOM","window","useGlobalEventListener","preventDefault","passive","classNames","undefined"],"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS } 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 === 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--v-${alignY}`,\n        `PopoutWrapper--h-${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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAYA;AACA;AACA;AACO,IAAMA,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,GAAG,IAAAC,wBAAA,GAAjB;;EACA,sBAA4BC,KAAK,CAACC,QAAN,CAAe,CAACR,OAAhB,CAA5B;EAAA;EAAA,IAAOS,MAAP;EAAA,IAAeC,SAAf;;EACA,IAAMC,KAAK,GAAGJ,KAAK,CAACK,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,GAAG,IAAAC,sBAAA,EAC9BJ,WAD8B,EAE9BR,QAAQ,KAAKa,aAAb,GAAmB,GAAnB,GAAyB,GAFK,CAAhC;EAIAX,KAAK,CAACY,SAAN,CAAgB,YAAM;IACpB,CAACV,MAAD,IAAWO,uBAAuB,CAACI,GAAxB,EAAX;EACD,CAFD,EAEG,CAACJ,uBAAD,EAA0BP,MAA1B,CAFH;;EAIA,cAAmB,IAAAY,WAAA,GAAnB;EAAA,IAAQC,MAAR,WAAQA,MAAR;;EACA,IAAAC,8CAAA,EAAuBD,MAAvB,EAA+B,WAA/B,EAA4C,UAACR,CAAD;IAAA,OAAOA,CAAC,CAACU,cAAF,EAAP;EAAA,CAA5C,EAAuE;IACrEC,OAAO,EAAE;EAD4D,CAAvE;EAIA,OACE,uEACMrB,SADN;IAEE,SAAS,EAAE,IAAAsB,sBAAA,EACT,eADS,6BAEW7B,MAFX,8BAGWC,MAHX,GAITC,OAAO,IAAI,wBAJF,EAKTU,MAAM,IAAI,uBALD,EAMTR,KAAK,IAAI,sBANA,EAOTD,OAAO,IAAI,uBAPF,CAFb;IAWE,cAAc,EAAES,MAAM,GAAGkB,SAAH,GAAed,WAXvC;IAYE,GAAG,EAAEF;EAZP,IAcE;IAAK,SAAS,EAAC;EAAf,GACE;IAAK,SAAS,EAAC,wBAAf;IAAwC,OAAO,EAAER;EAAjD,EADF,EAEE;IAAK,SAAS,EAAC;EAAf,GAAyCD,QAAzC,CAFF,CAdF,CADF;AAqBD,CArDM"}
+{"version":3,"file":"PopoutWrapper.js","names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","useDOM","window","useGlobalEventListener","preventDefault","passive","classNames","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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAYA;AACA;AACA;AACO,IAAMA,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,GAAG,IAAAC,wBAAA,GAAjB;;EACA,sBAA4BC,KAAK,CAACC,QAAN,CAAe,CAACR,OAAhB,CAA5B;EAAA;EAAA,IAAOS,MAAP;EAAA,IAAeC,SAAf;;EACA,IAAMC,KAAK,GAAGJ,KAAK,CAACK,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,GAAG,IAAAC,sBAAA,EAC9BJ,WAD8B,EAE9BR,QAAQ,KAAKa,kBAAA,CAASC,GAAtB,GAA4B,GAA5B,GAAkC,GAFJ,CAAhC;EAIAZ,KAAK,CAACa,SAAN,CAAgB,YAAM;IACpB,CAACX,MAAD,IAAWO,uBAAuB,CAACK,GAAxB,EAAX;EACD,CAFD,EAEG,CAACL,uBAAD,EAA0BP,MAA1B,CAFH;;EAIA,cAAmB,IAAAa,WAAA,GAAnB;EAAA,IAAQC,MAAR,WAAQA,MAAR;;EACA,IAAAC,8CAAA,EAAuBD,MAAvB,EAA+B,WAA/B,EAA4C,UAACT,CAAD;IAAA,OAAOA,CAAC,CAACW,cAAF,EAAP;EAAA,CAA5C,EAAuE;IACrEC,OAAO,EAAE;EAD4D,CAAvE;EAIA,OACE,uEACMtB,SADN;IAEE,SAAS,EAAE,IAAAuB,sBAAA,EACT,eADS,kCAEgB9B,MAFhB,mCAGgBC,MAHhB,GAITC,OAAO,IAAI,wBAJF,EAKTU,MAAM,IAAI,uBALD,EAMTR,KAAK,IAAI,sBANA,EAOTD,OAAO,IAAI,uBAPF,CAFb;IAWE,cAAc,EAAES,MAAM,GAAGmB,SAAH,GAAef,WAXvC;IAYE,GAAG,EAAEF;EAZP,IAcE;IAAK,SAAS,EAAC;EAAf,GACE;IAAK,SAAS,EAAC,wBAAf;IAAwC,OAAO,EAAER;EAAjD,EADF,EAEE;IAAK,SAAS,EAAC;EAAf,GAAyCD,QAAzC,CAFF,CAdF,CADF;AAqBD,CArDM"}

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

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popover = void 0;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _dom = require("../../lib/dom");
+
+var _classNames = require("../../lib/classNames");
+
+var _Popper = require("../Popper/Popper");
+
+var _FocusTrap = require("../FocusTrap/FocusTrap");
+
+var _useTimeout = require("../../hooks/useTimeout");
+
+var _useExternRef = require("../../hooks/useExternRef");
+
+var _useEventListener = require("../../hooks/useEventListener");
+
+var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+
+var _usePatchChildrenRef3 = require("../../hooks/usePatchChildrenRef");
+
+var _excluded = ["action", "shown", "showDelay", "hideDelay", "offsetDistance", "content", "children", "style", "className", "getRef", "onShownChange"];
+var styles = {
+  "Popover": "vkuiPopover",
+  "vkui-popper-fadein": "vkui-popper-fadein"
+};
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Popover
+ */
+var Popover = function Popover(_ref) {
+  var _ref$action = _ref.action,
+      action = _ref$action === void 0 ? "click" : _ref$action,
+      shownProp = _ref.shown,
+      _ref$showDelay = _ref.showDelay,
+      showDelay = _ref$showDelay === void 0 ? 150 : _ref$showDelay,
+      _ref$hideDelay = _ref.hideDelay,
+      hideDelay = _ref$hideDelay === void 0 ? 150 : _ref$hideDelay,
+      _ref$offsetDistance = _ref.offsetDistance,
+      offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
+      content = _ref.content,
+      children = _ref.children,
+      styleProp = _ref.style,
+      className = _ref.className,
+      getRef = _ref.getRef,
+      onShownChange = _ref.onShownChange,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useDOM = (0, _dom.useDOM)(),
+      document = _useDOM.document;
+
+  var hoverable = action === "hover";
+  var hovered = React.useRef(false);
+
+  var _React$useState = React.useState(shownProp || false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      computedShown = _React$useState2[0],
+      setComputedShown = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      dropdownNode = _React$useState4[0],
+      setPopperNode = _React$useState4[1];
+
+  var shown = typeof shownProp === "boolean" ? shownProp : computedShown;
+  var patchedPopperRef = (0, _useExternRef.useExternRef)(setPopperNode, getRef);
+
+  var _usePatchChildrenRef = (0, _usePatchChildrenRef3.usePatchChildrenRef)(children),
+      _usePatchChildrenRef2 = (0, _slicedToArray2.default)(_usePatchChildrenRef, 2),
+      childRef = _usePatchChildrenRef2[0],
+      child = _usePatchChildrenRef2[1];
+
+  var setShown = function setShown(value) {
+    if (typeof shownProp !== "boolean") {
+      setComputedShown(value);
+    }
+
+    typeof onShownChange === "function" && onShownChange(value);
+  };
+
+  var showTimeout = (0, _useTimeout.useTimeout)(function () {
+    return setShown(true);
+  }, showDelay);
+  var hideTimeout = (0, _useTimeout.useTimeout)(function () {
+    return setShown(false);
+  }, hideDelay);
+
+  var handleTargetEnter = function handleTargetEnter() {
+    hovered.current = true;
+    hideTimeout.clear();
+    showTimeout.set();
+  };
+
+  var handleTargetClick = function handleTargetClick() {
+    if (hovered.current && shown) {
+      return;
+    }
+
+    setShown(!shown);
+  };
+
+  var handleTargetLeave = function handleTargetLeave() {
+    hovered.current = false;
+    showTimeout.clear();
+    hideTimeout.set();
+  };
+
+  var handleContentKeyDownEscape = function handleContentKeyDownEscape() {
+    setShown(false);
+  };
+
+  var handleOutsideClick = function handleOutsideClick(e) {
+    var _childRef$current;
+
+    if (dropdownNode && !((_childRef$current = childRef.current) !== null && _childRef$current !== void 0 && _childRef$current.contains(e.target)) && !dropdownNode.contains(e.target)) {
+      setShown(false);
+    }
+  };
+
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", handleOutsideClick);
+  var targetEnterListener = (0, _useEventListener.useEventListener)("mouseenter", handleTargetEnter);
+  var targetClickEvent = (0, _useEventListener.useEventListener)("click", handleTargetClick);
+  var targetLeaveListener = (0, _useEventListener.useEventListener)("mouseleave", handleTargetLeave);
+  React.useEffect(function () {
+    if (!childRef.current) {
+      return;
+    }
+
+    targetClickEvent.add(childRef.current);
+
+    if (hoverable) {
+      targetEnterListener.add(childRef.current);
+      targetLeaveListener.add(childRef.current);
+    }
+  }, [childRef, hoverable, targetClickEvent, targetEnterListener, targetLeaveListener]);
+  return (0, _jsxRuntime.createScopedElement)(React.Fragment, null, child, shown && (0, _jsxRuntime.createScopedElement)(_Popper.Popper, (0, _extends2.default)({}, restProps, {
+    className: (0, _classNames.classNamesString)(styles["Popover"], className),
+    targetRef: childRef,
+    getRef: patchedPopperRef,
+    offsetDistance: offsetDistance,
+    style: // Reason: Typescript ругается на CSS Custom Properties в объекте
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styleProp), {}, {
+      "--popover-safe-zone-padding": "".concat(offsetDistance, "px")
+    }),
+    renderContent: function renderContent(_ref2) {
+      var className = _ref2.className;
+      return (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, {
+        vkuiClass: className,
+        onClose: handleContentKeyDownEscape
+      }, content);
+    },
+    onMouseOver: hoverable ? hideTimeout.clear : undefined,
+    onMouseOut: hoverable ? handleTargetLeave : undefined
+  })));
+};
+
+exports.Popover = Popover;
+//# sourceMappingURL=Popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","classNamesString","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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"}

package/dist/cjs/components/PromoBanner/PromoBanner.js

@@ -29,29 +29,21 @@ var _Button = require("../Button/Button");
 
 var _SimpleCell = require("../SimpleCell/SimpleCell");
 
-var _Avatar = require("../Avatar/Avatar");
+var _Image = require("../Image/Image");
 
-var _Caption = require("../Typography/Caption/Caption");
-
-var _warnOnce = require("../../lib/warnOnce");
+var _Footnote = require("../Typography/Footnote/Footnote");
 
 var _excluded = ["bannerData", "onClose", "isCloseButtonHidden"];
-var warn = (0, _warnOnce.warnOnce)("PromoBanner");
+
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
  */
-
 var PromoBanner = function PromoBanner(_ref) {
   var _ref$bannerData = _ref.bannerData,
       bannerData = _ref$bannerData === void 0 ? {} : _ref$bannerData,
       onClose = _ref.onClose,
       isCloseButtonHidden = _ref.isCloseButtonHidden,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var ageRestrictions = bannerData.ageRestrictions != null ? parseInt(bannerData.ageRestrictions) : bannerData.ageRestriction;
-
-  if (bannerData.ageRestriction && process.env.NODE_ENV === "development") {
-    warn("Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions");
-  }
 
   var _React$useState = React.useState(""),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -75,11 +67,11 @@ var PromoBanner = function PromoBanner(_ref) {
     vkuiClass: "PromoBanner"
   }, restProps), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PromoBanner__head"
-  }, (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+  }, (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
     vkuiClass: "PromoBanner__label"
-  }, bannerData.advertisingLabel || "Advertisement"), ageRestrictions != null && (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+  }, bannerData.advertisingLabel || "Advertisement"), bannerData.ageRestrictions && (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
     vkuiClass: "PromoBanner__age"
-  }, ageRestrictions, "+"), !isCloseButtonHidden && (0, _jsxRuntime.createScopedElement)("div", {
+  }, bannerData.ageRestrictions), !isCloseButtonHidden && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PromoBanner__close",
     onClick: onClose
   }, (0, _jsxRuntime.createScopedElement)(_icons.Icon24Dismiss, null))), (0, _jsxRuntime.createScopedElement)(_SimpleCell.SimpleCell, {
@@ -87,8 +79,7 @@ var PromoBanner = function PromoBanner(_ref) {
     onClick: onClick,
     rel: "nofollow noopener noreferrer",
     target: "_blank",
-    before: (0, _jsxRuntime.createScopedElement)(_Avatar.Avatar, {
-      mode: "image",
+    before: (0, _jsxRuntime.createScopedElement)(_Image.Image, {
       size: 48,
       src: bannerData.iconLink,
       alt: bannerData.title