@vkontakte/vkui 4.37.0 → 5.0.0

package/dist/components/PanelHeaderBack/PanelHeaderBack.js

@@ -1,35 +1,48 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "sizeX", "aria-label"];
+var _excluded = ["label", "aria-label"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from "react";
 import { Icon28ChevronBack, Icon28ChevronLeftOutline, Icon28ArrowLeftOutline } from "@vkontakte/icons";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, VKCOM, IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { classNames } from "../../lib/classNames";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
  */
-export var PanelHeaderBackComponent = function PanelHeaderBackComponent(_ref) {
+export var PanelHeaderBack = function PanelHeaderBack(_ref) {
   var label = _ref.label,
-      sizeX = _ref.sizeX,
       _ref$ariaLabel = _ref["aria-label"],
       ariaLabel = _ref$ariaLabel === void 0 ? "Назад" : _ref$ariaLabel,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
-  var showLabel = platform === VKCOM || platform === IOS && sizeX === SizeType.REGULAR;
+
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX; // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular
+  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
+
+
+  var showLabel = platform === Platform.VKCOM || platform === Platform.IOS;
+  var icon = createScopedElement(Icon28ArrowLeftOutline, null);
+
+  switch (platform) {
+    case Platform.IOS:
+      icon = createScopedElement(Icon28ChevronBack, null);
+      break;
+
+    case Platform.VKCOM:
+      icon = createScopedElement(Icon28ChevronLeftOutline, null);
+      break;
+  }
+
   return createScopedElement(PanelHeaderButton, _extends({}, restProps, {
-    "aria-label": ariaLabel,
-    vkuiClass: classNames("PanelHeaderBack", platform === IOS && "PanelHeaderBack--ios", platform === VKCOM && "PanelHeaderBack--vkcom", showLabel && !!label && "PanelHeaderBack--has-label"),
-    label: showLabel && label
-  }), platform === ANDROID && createScopedElement(Icon28ArrowLeftOutline, null), platform === VKCOM && createScopedElement(Icon28ChevronLeftOutline, null), platform === IOS && createScopedElement(Icon28ChevronBack, null));
+    vkuiClass: classNames("PanelHeaderBack", getSizeXClassName("PanelHeaderBack", sizeX), platform === Platform.IOS && "PanelHeaderBack--ios", platform === Platform.VKCOM && "PanelHeaderBack--vkcom", showLabel && !!label && "PanelHeaderBack--has-label"),
+    label: showLabel && label,
+    "aria-label": ariaLabel
+  }), icon);
 };
-export var PanelHeaderBack = /*#__PURE__*/React.memo(withAdaptivity(PanelHeaderBackComponent, {
-  sizeX: true
-}));
-PanelHeaderBack.displayName = "PanelHeaderBack";
 //# sourceMappingURL=PanelHeaderBack.js.map

package/dist/components/PanelHeaderBack/PanelHeaderBack.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderBack.js","names":["React","Icon28ChevronBack","Icon28ChevronLeftOutline","Icon28ArrowLeftOutline","PanelHeaderButton","ANDROID","VKCOM","IOS","usePlatform","withAdaptivity","SizeType","classNames","PanelHeaderBackComponent","label","sizeX","ariaLabel","restProps","platform","showLabel","REGULAR","PanelHeaderBack","memo","displayName"],"sources":["../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n  Icon28ArrowLeftOutline,\n} from \"@vkontakte/icons\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { ANDROID, VKCOM, IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  SizeType,\n  AdaptivityProps,\n} from \"../../hoc/withAdaptivity\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./PanelHeaderBack.css\";\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps &\n  AdaptivityProps & {\n    \"aria-label\"?: string;\n  };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBackComponent = ({\n  label,\n  sizeX,\n  \"aria-label\": ariaLabel = \"Назад\",\n  ...restProps\n}: PanelHeaderButtonProps & AdaptivityProps) => {\n  const platform = usePlatform();\n  const showLabel =\n    platform === VKCOM || (platform === IOS && sizeX === SizeType.REGULAR);\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      aria-label={ariaLabel}\n      vkuiClass={classNames(\n        \"PanelHeaderBack\",\n        platform === IOS && \"PanelHeaderBack--ios\",\n        platform === VKCOM && \"PanelHeaderBack--vkcom\",\n        showLabel && !!label && \"PanelHeaderBack--has-label\"\n      )}\n      label={showLabel && label}\n    >\n      {platform === ANDROID && <Icon28ArrowLeftOutline />}\n      {platform === VKCOM && <Icon28ChevronLeftOutline />}\n      {platform === IOS && <Icon28ChevronBack />}\n    </PanelHeaderButton>\n  );\n};\n\nexport const PanelHeaderBack = React.memo(\n  withAdaptivity(PanelHeaderBackComponent, {\n    sizeX: true,\n  })\n);\n\nPanelHeaderBack.displayName = \"PanelHeaderBack\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,iBADF,EAEEC,wBAFF,EAGEC,sBAHF,QAIO,kBAJP;AAKA,SACEC,iBADF;AAIA,SAASC,OAAT,EAAkBC,KAAlB,EAAyBC,GAAzB;AACA,SAASC,WAAT;AACA,SACEC,cADF,EAEEC,QAFF;AAKA,SAASC,UAAT;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,OAKQ;EAAA,IAJ9CC,KAI8C,QAJ9CA,KAI8C;EAAA,IAH9CC,KAG8C,QAH9CA,KAG8C;EAAA,0BAF9C,YAE8C;EAAA,IAFhCC,SAEgC,+BAFpB,OAEoB;EAAA,IAD3CC,SAC2C;;EAC9C,IAAMC,QAAQ,GAAGT,WAAW,EAA5B;EACA,IAAMU,SAAS,GACbD,QAAQ,KAAKX,KAAb,IAAuBW,QAAQ,KAAKV,GAAb,IAAoBO,KAAK,KAAKJ,QAAQ,CAACS,OADhE;EAGA,OACE,oBAAC,iBAAD,eACMH,SADN;IAEE,cAAYD,SAFd;IAGE,SAAS,EAAEJ,UAAU,CACnB,iBADmB,EAEnBM,QAAQ,KAAKV,GAAb,IAAoB,sBAFD,EAGnBU,QAAQ,KAAKX,KAAb,IAAsB,wBAHH,EAInBY,SAAS,IAAI,CAAC,CAACL,KAAf,IAAwB,4BAJL,CAHvB;IASE,KAAK,EAAEK,SAAS,IAAIL;EATtB,IAWGI,QAAQ,KAAKZ,OAAb,IAAwB,oBAAC,sBAAD,OAX3B,EAYGY,QAAQ,KAAKX,KAAb,IAAsB,oBAAC,wBAAD,OAZzB,EAaGW,QAAQ,KAAKV,GAAb,IAAoB,oBAAC,iBAAD,OAbvB,CADF;AAiBD,CA3BM;AA6BP,OAAO,IAAMa,eAAe,gBAAGpB,KAAK,CAACqB,IAAN,CAC7BZ,cAAc,CAACG,wBAAD,EAA2B;EACvCE,KAAK,EAAE;AADgC,CAA3B,CADe,CAAxB;AAMPM,eAAe,CAACE,WAAhB,GAA8B,iBAA9B"}
+{"version":3,"file":"PanelHeaderBack.js","names":["Icon28ChevronBack","Icon28ChevronLeftOutline","Icon28ArrowLeftOutline","PanelHeaderButton","Platform","getSizeXClassName","usePlatform","classNames","useAdaptivity","PanelHeaderBack","label","ariaLabel","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon"],"sources":["../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import {\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n  Icon28ArrowLeftOutline,\n} from \"@vkontakte/icons\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Platform } from \"../../lib/platform\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./PanelHeaderBack.css\";\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  \"aria-label\"?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  \"aria-label\": ariaLabel = \"Назад\",\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      vkuiClass={classNames(\n        \"PanelHeaderBack\",\n        getSizeXClassName(\"PanelHeaderBack\", sizeX),\n        platform === Platform.IOS && \"PanelHeaderBack--ios\",\n        platform === Platform.VKCOM && \"PanelHeaderBack--vkcom\",\n        showLabel && !!label && \"PanelHeaderBack--has-label\"\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;AAAA,SACEA,iBADF,EAEEC,wBAFF,EAGEC,sBAHF,QAIO,kBAJP;AAKA,SACEC,iBADF;AAIA,SAASC,QAAT;AACA,SAASC,iBAAT;AACA,SAASC,WAAT;AACA,SAASC,UAAT;AACA,SAASC,aAAT;;AAOA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OAID;EAAA,IAH5BC,KAG4B,QAH5BA,KAG4B;EAAA,0BAF5B,YAE4B;EAAA,IAFdC,SAEc,+BAFF,OAEE;EAAA,IADzBC,SACyB;;EAC5B,IAAMC,QAAQ,GAAGP,WAAW,EAA5B;;EACA,qBAAkBE,aAAa,EAA/B;EAAA,IAAQM,KAAR,kBAAQA,KAAR,CAF4B,CAG5B;EACA;;;EACA,IAAMC,SAAS,GAAGF,QAAQ,KAAKT,QAAQ,CAACY,KAAtB,IAA+BH,QAAQ,KAAKT,QAAQ,CAACa,GAAvE;EAEA,IAAIC,IAAI,GAAG,oBAAC,sBAAD,OAAX;;EACA,QAAQL,QAAR;IACE,KAAKT,QAAQ,CAACa,GAAd;MACEC,IAAI,GAAG,oBAAC,iBAAD,OAAP;MACA;;IACF,KAAKd,QAAQ,CAACY,KAAd;MACEE,IAAI,GAAG,oBAAC,wBAAD,OAAP;MACA;EANJ;;EASA,OACE,oBAAC,iBAAD,eACMN,SADN;IAEE,SAAS,EAAEL,UAAU,CACnB,iBADmB,EAEnBF,iBAAiB,CAAC,iBAAD,EAAoBS,KAApB,CAFE,EAGnBD,QAAQ,KAAKT,QAAQ,CAACa,GAAtB,IAA6B,sBAHV,EAInBJ,QAAQ,KAAKT,QAAQ,CAACY,KAAtB,IAA+B,wBAJZ,EAKnBD,SAAS,IAAI,CAAC,CAACL,KAAf,IAAwB,4BALL,CAFvB;IASE,KAAK,EAAEK,SAAS,IAAIL,KATtB;IAUE,cAAYC;EAVd,IAYGO,IAZH,CADF;AAgBD,CArCM"}

package/dist/components/PanelHeaderButton/PanelHeaderButton.js

@@ -8,7 +8,7 @@ import { classNames } from "../../lib/classNames";
 import { warnOnce } from "../../lib/warnOnce";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
-import { IOS, VKCOM, ANDROID } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
 
@@ -17,7 +17,7 @@ var ButtonTypography = function ButtonTypography(_ref) {
       children = _ref.children;
   var platform = usePlatform();
 
-  if (platform === IOS) {
+  if (platform === Platform.IOS) {
     return createScopedElement(Title, {
       Component: "span",
       level: "3",
@@ -26,7 +26,7 @@ var ButtonTypography = function ButtonTypography(_ref) {
   }
 
   return createScopedElement(Text, {
-    weight: platform === VKCOM ? undefined : "2"
+    weight: platform === Platform.VKCOM ? undefined : "2"
   }, children);
 };
 
@@ -49,19 +49,19 @@ export var PanelHeaderButton = function PanelHeaderButton(_ref2) {
   var activeMode;
 
   switch (platform) {
-    case ANDROID:
-      hoverMode = "background";
-      activeMode = "background";
-      break;
-
-    case IOS:
+    case Platform.IOS:
       hoverMode = "background";
       activeMode = "opacity";
       break;
 
-    case VKCOM:
+    case Platform.VKCOM:
       hoverMode = "PanelHeaderButton--hover";
       activeMode = "PanelHeaderButton--active";
+      break;
+
+    default:
+      hoverMode = "background";
+      activeMode = "background";
   }
 
   if (process.env.NODE_ENV === "development") {
@@ -80,8 +80,10 @@ export var PanelHeaderButton = function PanelHeaderButton(_ref2) {
     vkuiClass: classNames(getClassName("PanelHeaderButton", platform), primary && "PanelHeaderButton--primary", isPrimitive && "PanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "PanelHeaderButton--notPrimitive")
   }), isPrimitive ? createScopedElement(ButtonTypography, {
     primary: primary
-  }, children) : children, isPrimitiveLabel ? createScopedElement(ButtonTypography, {
+  }, children) : children, createScopedElement("div", {
+    vkuiClass: "PanelHeaderButton__label"
+  }, isPrimitiveLabel ? createScopedElement(ButtonTypography, {
     primary: primary
-  }, label) : label);
+  }, label) : label));
 };
 //# sourceMappingURL=PanelHeaderButton.js.map

package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderButton.js","names":["Tappable","getClassName","classNames","warnOnce","usePlatform","getTitleFromChildren","isPrimitiveReactNode","IOS","VKCOM","ANDROID","Text","Title","ButtonTypography","primary","children","platform","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href"],"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getTitleFromChildren, isPrimitiveReactNode } from \"../../lib/utils\";\nimport { IOS, VKCOM, ANDROID } from \"../../lib/platform\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport \"./PanelHeaderButton.css\";\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, \"label\"> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps[\"primary\"];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? \"1\" : \"3\"}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === VKCOM ? undefined : \"2\"}>{children}</Text>;\n};\n\nconst warn = warnOnce(\"PanelHeaderButton\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case ANDROID:\n      hoverMode = \"background\";\n      activeMode = \"background\";\n      break;\n    case IOS:\n      hoverMode = \"background\";\n      activeMode = \"opacity\";\n      break;\n    case VKCOM:\n      hoverMode = \"PanelHeaderButton--hover\";\n      activeMode = \"PanelHeaderButton--active\";\n  }\n\n  if (process.env.NODE_ENV === \"development\") {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps[\"aria-label\"] ||\n        restProps[\"aria-labelledby\"]\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        \"a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.\",\n        \"error\"\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      hoverMode={hoverMode}\n      Component={restProps.href ? \"a\" : \"button\"}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      vkuiClass={classNames(\n        getClassName(\"PanelHeaderButton\", platform),\n        primary && \"PanelHeaderButton--primary\",\n        isPrimitive && \"PanelHeaderButton--primitive\",\n        !isPrimitive && !isPrimitiveLabel && \"PanelHeaderButton--notPrimitive\"\n      )}\n    >\n      {isPrimitive ? (\n        <ButtonTypography primary={primary}>{children}</ButtonTypography>\n      ) : (\n        children\n      )}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary}>{label}</ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AACA,SAAwBA,QAAxB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,WAAT;AACA,SAASC,oBAAT,EAA+BC,oBAA/B;AACA,SAASC,GAAT,EAAcC,KAAd,EAAqBC,OAArB;AACA,SAASC,IAAT;AACA,SAASC,KAAT;;AAYA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAAkD;EAAA,IAA/CC,OAA+C,QAA/CA,OAA+C;EAAA,IAAtCC,QAAsC,QAAtCA,QAAsC;EACzE,IAAMC,QAAQ,GAAGX,WAAW,EAA5B;;EAEA,IAAIW,QAAQ,KAAKR,GAAjB,EAAsB;IACpB,OACE,oBAAC,KAAD;MAAO,SAAS,EAAC,MAAjB;MAAwB,KAAK,EAAC,GAA9B;MAAkC,MAAM,EAAEM,OAAO,GAAG,GAAH,GAAS;IAA1D,GACGC,QADH,CADF;EAKD;;EAED,OAAO,oBAAC,IAAD;IAAM,MAAM,EAAEC,QAAQ,KAAKP,KAAb,GAAqBQ,SAArB,GAAiC;EAA/C,GAAqDF,QAArD,CAAP;AACD,CAZD;;AAcA,IAAMG,IAAI,GAAGd,QAAQ,CAAC,mBAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAMe,iBAAiB,GAAG,SAApBA,iBAAoB,QAKH;EAAA,IAJ5BJ,QAI4B,SAJ5BA,QAI4B;EAAA,0BAH5BD,OAG4B;EAAA,IAH5BA,OAG4B,8BAHlB,KAGkB;EAAA,IAF5BM,KAE4B,SAF5BA,KAE4B;EAAA,IADzBC,SACyB;;EAC5B,IAAMC,WAAW,GAAGf,oBAAoB,CAACQ,QAAD,CAAxC;EACA,IAAMQ,gBAAgB,GAAGhB,oBAAoB,CAACa,KAAD,CAA7C;EACA,IAAMJ,QAAQ,GAAGX,WAAW,EAA5B;EAEA,IAAImB,SAAJ;EACA,IAAIC,UAAJ;;EAEA,QAAQT,QAAR;IACE,KAAKN,OAAL;MACEc,SAAS,GAAG,YAAZ;MACAC,UAAU,GAAG,YAAb;MACA;;IACF,KAAKjB,GAAL;MACEgB,SAAS,GAAG,YAAZ;MACAC,UAAU,GAAG,SAAb;MACA;;IACF,KAAKhB,KAAL;MACEe,SAAS,GAAG,0BAAZ;MACAC,UAAU,GAAG,2BAAb;EAXJ;;EAcA,IAAIC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;IAC1C,IAAMC,iBAAiB,GAAGC,OAAO,CAC/BxB,oBAAoB,CAACS,QAAD,CAApB,IACET,oBAAoB,CAACc,KAAD,CADtB,IAEEC,SAAS,CAAC,YAAD,CAFX,IAGEA,SAAS,CAAC,iBAAD,CAJoB,CAAjC;;IAOA,IAAI,CAACQ,iBAAL,EAAwB;MACtBX,IAAI,CACF,oMADE,EAEF,OAFE,CAAJ;IAID;EACF;;EAED,OACE,oBAAC,QAAD,eACMG,SADN;IAEE,SAAS,EAAEG,SAFb;IAGE,SAAS,EAAEH,SAAS,CAACU,IAAV,GAAiB,GAAjB,GAAuB,QAHpC;IAIE,iBAAiB,EAAE,GAJrB;IAKE,UAAU,EAAEN,UALd;IAME,SAAS,EAAEtB,UAAU,CACnBD,YAAY,CAAC,mBAAD,EAAsBc,QAAtB,CADO,EAEnBF,OAAO,IAAI,4BAFQ,EAGnBQ,WAAW,IAAI,8BAHI,EAInB,CAACA,WAAD,IAAgB,CAACC,gBAAjB,IAAqC,iCAJlB;EANvB,IAaGD,WAAW,GACV,oBAAC,gBAAD;IAAkB,OAAO,EAAER;EAA3B,GAAqCC,QAArC,CADU,GAGVA,QAhBJ,EAkBGQ,gBAAgB,GACf,oBAAC,gBAAD;IAAkB,OAAO,EAAET;EAA3B,GAAqCM,KAArC,CADe,GAGfA,KArBJ,CADF;AA0BD,CArEM"}
+{"version":3,"file":"PanelHeaderButton.js","names":["Tappable","getClassName","classNames","warnOnce","usePlatform","getTitleFromChildren","isPrimitiveReactNode","Platform","Text","Title","ButtonTypography","primary","children","platform","IOS","VKCOM","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href"],"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getTitleFromChildren, isPrimitiveReactNode } from \"../../lib/utils\";\nimport { Platform } from \"../../lib/platform\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport \"./PanelHeaderButton.css\";\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, \"label\"> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps[\"primary\"];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? \"1\" : \"3\"}>\n        {children}\n      </Title>\n    );\n  }\n\n  return (\n    <Text weight={platform === Platform.VKCOM ? undefined : \"2\"}>\n      {children}\n    </Text>\n  );\n};\n\nconst warn = warnOnce(\"PanelHeaderButton\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = \"background\";\n      activeMode = \"opacity\";\n      break;\n    case Platform.VKCOM:\n      hoverMode = \"PanelHeaderButton--hover\";\n      activeMode = \"PanelHeaderButton--active\";\n      break;\n    default:\n      hoverMode = \"background\";\n      activeMode = \"background\";\n  }\n\n  if (process.env.NODE_ENV === \"development\") {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps[\"aria-label\"] ||\n        restProps[\"aria-labelledby\"]\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        \"a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.\",\n        \"error\"\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      hoverMode={hoverMode}\n      Component={restProps.href ? \"a\" : \"button\"}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      vkuiClass={classNames(\n        getClassName(\"PanelHeaderButton\", platform),\n        primary && \"PanelHeaderButton--primary\",\n        isPrimitive && \"PanelHeaderButton--primitive\",\n        !isPrimitive && !isPrimitiveLabel && \"PanelHeaderButton--notPrimitive\"\n      )}\n    >\n      {isPrimitive ? (\n        <ButtonTypography primary={primary}>{children}</ButtonTypography>\n      ) : (\n        children\n      )}\n      <div vkuiClass=\"PanelHeaderButton__label\">\n        {isPrimitiveLabel ? (\n          <ButtonTypography primary={primary}>{label}</ButtonTypography>\n        ) : (\n          label\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

package/dist/components/PanelHeaderClose/PanelHeaderClose.js

@@ -4,7 +4,7 @@ var _excluded = ["children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { Icon28CancelOutline } from "@vkontakte/icons";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { getTitleFromChildren } from "../../lib/utils";
 import { usePlatform } from "../../hooks/usePlatform";
 /**
@@ -19,6 +19,6 @@ export var PanelHeaderClose = function PanelHeaderClose(_ref) {
   var platform = usePlatform();
   return createScopedElement(PanelHeaderButton, _extends({
     "aria-label": getTitleFromChildren(children)
-  }, restProps), platform === IOS ? children : createScopedElement(Icon28CancelOutline, null));
+  }, restProps), platform === Platform.IOS ? children : createScopedElement(Icon28CancelOutline, null));
 };
 //# sourceMappingURL=PanelHeaderClose.js.map

package/dist/components/PanelHeaderClose/PanelHeaderClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderClose.js","names":["Icon28CancelOutline","PanelHeaderButton","IOS","getTitleFromChildren","usePlatform","PanelHeaderClose","children","restProps","platform"],"sources":["../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import { Icon28CancelOutline } from \"@vkontakte/icons\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { IOS } from \"../../lib/platform\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose\n */\nexport const PanelHeaderClose = ({\n  children = \"Отмена\",\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  return (\n    <PanelHeaderButton\n      aria-label={getTitleFromChildren(children)}\n      {...restProps}\n    >\n      {platform === IOS ? children : <Icon28CancelOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;AAAA,SAASA,mBAAT,QAAoC,kBAApC;AACA,SACEC,iBADF;AAIA,SAASC,GAAT;AACA,SAASC,oBAAT;AACA,SAASC,WAAT;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAGF;EAAA,yBAF5BC,QAE4B;EAAA,IAF5BA,QAE4B,8BAFjB,QAEiB;EAAA,IADzBC,SACyB;;EAC5B,IAAMC,QAAQ,GAAGJ,WAAW,EAA5B;EACA,OACE,oBAAC,iBAAD;IACE,cAAYD,oBAAoB,CAACG,QAAD;EADlC,GAEMC,SAFN,GAIGC,QAAQ,KAAKN,GAAb,GAAmBI,QAAnB,GAA8B,oBAAC,mBAAD,OAJjC,CADF;AAQD,CAbM"}
+{"version":3,"file":"PanelHeaderClose.js","names":["Icon28CancelOutline","PanelHeaderButton","Platform","getTitleFromChildren","usePlatform","PanelHeaderClose","children","restProps","platform","IOS"],"sources":["../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import { Icon28CancelOutline } from \"@vkontakte/icons\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Platform } from \"../../lib/platform\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose\n */\nexport const PanelHeaderClose = ({\n  children = \"Отмена\",\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  return (\n    <PanelHeaderButton\n      aria-label={getTitleFromChildren(children)}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? children : <Icon28CancelOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;;AAAA,SAASA,mBAAT,QAAoC,kBAApC;AACA,SACEC,iBADF;AAIA,SAASC,QAAT;AACA,SAASC,oBAAT;AACA,SAASC,WAAT;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAGF;EAAA,yBAF5BC,QAE4B;EAAA,IAF5BA,QAE4B,8BAFjB,QAEiB;EAAA,IADzBC,SACyB;;EAC5B,IAAMC,QAAQ,GAAGJ,WAAW,EAA5B;EACA,OACE,oBAAC,iBAAD;IACE,cAAYD,oBAAoB,CAACG,QAAD;EADlC,GAEMC,SAFN,GAIGC,QAAQ,KAAKN,QAAQ,CAACO,GAAtB,GAA4BH,QAA5B,GAAuC,oBAAC,mBAAD,OAJ1C,CADF;AAQD,CAbM"}

package/dist/components/PanelHeaderContent/PanelHeaderContent.js

@@ -7,10 +7,10 @@ import { classNames } from "../../lib/classNames";
 import { Tappable } from "../Tappable/Tappable";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import { getClassName } from "../../helpers/getClassName";
-import { Caption } from "../Typography/Caption/Caption";
+import { getPlatformClassName } from "../../helpers/getPlatformClassName";
+import { Footnote } from "../Typography/Footnote/Footnote";
 import { Headline } from "../Typography/Headline/Headline";
-import { IOS, ANDROID, Platform } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { Text } from "../Typography/Text/Text";
 
 var PanelHeaderChildren = function PanelHeaderChildren(_ref) {
@@ -54,18 +54,18 @@ export var PanelHeaderContent = function PanelHeaderContent(_ref2) {
   var inProps = onClick ? _objectSpread(_objectSpread({}, restProps), {}, {
     onClick: onClick,
     activeEffectDelay: 200,
-    hasActive: platform === IOS,
+    hasActive: platform === Platform.IOS,
     activeMode: "opacity"
   }) : {};
   return createScopedElement("div", _extends({}, rootProps, {
-    vkuiClass: getClassName("PanelHeaderContent", platform),
+    vkuiClass: classNames("PanelHeaderContent", getPlatformClassName("PanelHeaderContent", platform)),
     style: style,
     className: className
   }), hasReactNode(before) && createScopedElement("div", {
     vkuiClass: "PanelHeaderContent__before"
   }, before), createScopedElement(InComponent, _extends({}, inProps, {
-    vkuiClass: classNames("PanelHeaderContent__in", !before && platform !== ANDROID && "PanelHeaderContent__in--centered")
-  }), hasReactNode(status) && createScopedElement(Caption, {
+    vkuiClass: classNames("PanelHeaderContent__in", !before && platform !== Platform.ANDROID && "PanelHeaderContent__in--centered")
+  }), hasReactNode(status) && createScopedElement(Footnote, {
     vkuiClass: "PanelHeaderContent__status"
   }, status), createScopedElement("div", {
     vkuiClass: "PanelHeaderContent__children"

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContent.js","names":["classNames","Tappable","usePlatform","hasReactNode","getClassName","Caption","Headline","IOS","ANDROID","Platform","Text","PanelHeaderChildren","platform","hasStatus","hasBefore","children","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","activeMode"],"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,SAASA,UAAT;AACA,SAASC,QAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,GAAT,EAAcC,OAAd,EAAuBC,QAAvB;AACA,SAASC,IAAT;;AAiBA,IAAMC,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,KAAKH,QAAQ,CAACO,KAA1B,EAAiC;IAC/B,OACE,oBAAC,IAAD;MAAM,SAAS,EAAC,KAAhB;MAAsB,MAAM,EAAC;IAA7B,GACGD,QADH,CADF;EAKD;;EAED,OAAOF,SAAS,IAAIC,SAAb,GACL,oBAAC,QAAD;IAAU,SAAS,EAAC,KAApB;IAA0B,MAAM,EAAC;EAAjC,GACGC,QADH,CADK,GAKL;IAAK,SAAS,EAAC;EAAf,GAAkDA,QAAlD,CALF;AAOD,CArBD;AAuBA;AACA;AACA;;;AACA,OAAO,IAAME,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,IAH7BP,QAG6B,SAH7BA,QAG6B;EAAA,IAF7BQ,OAE6B,SAF7BA,OAE6B;EAAA,IAD1BC,SAC0B;;EAC7B,IAAMC,WAAW,GAAGF,OAAO,GAAGtB,QAAH,GAAc,KAAzC;EACA,IAAMyB,SAAS,GAAGH,OAAO,GAAG,EAAH,GAAQC,SAAjC;EACA,IAAMZ,QAAQ,GAAGV,WAAW,EAA5B;EACA,IAAMyB,OAAO,GAAGJ,OAAO,mCAEdC,SAFc;IAGjBD,OAAO,EAAPA,OAHiB;IAIjBK,iBAAiB,EAAE,GAJF;IAKjBC,SAAS,EAAEjB,QAAQ,KAAKL,GALP;IAMjBuB,UAAU,EAAE;EANK,KAQnB,EARJ;EAUA,OACE,wCACMJ,SADN;IAEE,SAAS,EAAEtB,YAAY,CAAC,oBAAD,EAAuBQ,QAAvB,CAFzB;IAGE,KAAK,EAAEO,KAHT;IAIE,SAAS,EAAED;EAJb,IAMGf,YAAY,CAACmB,MAAD,CAAZ,IACC;IAAK,SAAS,EAAC;EAAf,GAA6CA,MAA7C,CAPJ,EASE,oBAAC,WAAD,eACMK,OADN;IAEE,SAAS,EAAE3B,UAAU,CACnB,wBADmB,EAEnB,CAACsB,MAAD,IAAWV,QAAQ,KAAKJ,OAAxB,IAAmC,kCAFhB;EAFvB,IAOGL,YAAY,CAACkB,MAAD,CAAZ,IACC,oBAAC,OAAD;IAAS,SAAS,EAAC;EAAnB,GAAiDA,MAAjD,CARJ,EAUE;IAAK,SAAS,EAAC;EAAf,GACE,oBAAC,mBAAD;IACE,QAAQ,EAAET,QADZ;IAEE,SAAS,EAAET,YAAY,CAACkB,MAAD,CAFzB;IAGE,SAAS,EAAElB,YAAY,CAACmB,MAAD;EAHzB,GAKGP,QALH,CADF,EAQGZ,YAAY,CAACiB,KAAD,CAAZ,IACC;IAAK,SAAS,EAAC;EAAf,GAA4CA,KAA5C,CATJ,CAVF,EAsBGjB,YAAY,CAACmB,MAAD,CAAZ,IAAwB;IAAK,SAAS,EAAC;EAAf,EAtB3B,CATF,CADF;AAoCD,CA3DM"}
+{"version":3,"file":"PanelHeaderContent.js","names":["classNames","Tappable","usePlatform","hasReactNode","getPlatformClassName","Footnote","Headline","Platform","Text","PanelHeaderChildren","platform","hasStatus","hasBefore","children","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","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,SAASA,UAAT;AACA,SAASC,QAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,oBAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA,SAASC,IAAT;;AAiBA,IAAMC,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,KAAKH,QAAQ,CAACO,KAA1B,EAAiC;IAC/B,OACE,oBAAC,IAAD;MAAM,SAAS,EAAC,KAAhB;MAAsB,MAAM,EAAC;IAA7B,GACGD,QADH,CADF;EAKD;;EAED,OAAOF,SAAS,IAAIC,SAAb,GACL,oBAAC,QAAD;IAAU,SAAS,EAAC,KAApB;IAA0B,MAAM,EAAC;EAAjC,GACGC,QADH,CADK,GAKL;IAAK,SAAS,EAAC;EAAf,GAAkDA,QAAlD,CALF;AAOD,CArBD;AAuBA;AACA;AACA;;;AACA,OAAO,IAAME,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,IAH7BP,QAG6B,SAH7BA,QAG6B;EAAA,IAF7BQ,OAE6B,SAF7BA,OAE6B;EAAA,IAD1BC,SAC0B;;EAC7B,IAAMC,WAAW,GAAGF,OAAO,GAAGpB,QAAH,GAAc,KAAzC;EACA,IAAMuB,SAAS,GAAGH,OAAO,GAAG,EAAH,GAAQC,SAAjC;EACA,IAAMZ,QAAQ,GAAGR,WAAW,EAA5B;EACA,IAAMuB,OAAO,GAAGJ,OAAO,mCAEdC,SAFc;IAGjBD,OAAO,EAAPA,OAHiB;IAIjBK,iBAAiB,EAAE,GAJF;IAKjBC,SAAS,EAAEjB,QAAQ,KAAKH,QAAQ,CAACqB,GALhB;IAMjBC,UAAU,EAAE;EANK,KAQnB,EARJ;EAUA,OACE,wCACML,SADN;IAEE,SAAS,EAAExB,UAAU,CACnB,oBADmB,EAEnBI,oBAAoB,CAAC,oBAAD,EAAuBM,QAAvB,CAFD,CAFvB;IAME,KAAK,EAAEO,KANT;IAOE,SAAS,EAAED;EAPb,IASGb,YAAY,CAACiB,MAAD,CAAZ,IACC;IAAK,SAAS,EAAC;EAAf,GAA6CA,MAA7C,CAVJ,EAYE,oBAAC,WAAD,eACMK,OADN;IAEE,SAAS,EAAEzB,UAAU,CACnB,wBADmB,EAEnB,CAACoB,MAAD,IACEV,QAAQ,KAAKH,QAAQ,CAACuB,OADxB,IAEE,kCAJiB;EAFvB,IASG3B,YAAY,CAACgB,MAAD,CAAZ,IACC,oBAAC,QAAD;IAAU,SAAS,EAAC;EAApB,GAAkDA,MAAlD,CAVJ,EAYE;IAAK,SAAS,EAAC;EAAf,GACE,oBAAC,mBAAD;IACE,QAAQ,EAAET,QADZ;IAEE,SAAS,EAAEP,YAAY,CAACgB,MAAD,CAFzB;IAGE,SAAS,EAAEhB,YAAY,CAACiB,MAAD;EAHzB,GAKGP,QALH,CADF,EAQGV,YAAY,CAACe,KAAD,CAAZ,IACC;IAAK,SAAS,EAAC;EAAf,GAA4CA,KAA5C,CATJ,CAZF,EAwBGf,YAAY,CAACiB,MAAD,CAAZ,IAAwB;IAAK,SAAS,EAAC;EAAf,EAxB3B,CAZF,CADF;AAyCD,CAhEM"}

package/dist/components/PanelHeaderContext/PanelHeaderContext.js

@@ -6,15 +6,15 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { classNames } from "../../lib/classNames";
-import { ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useScrollLock } from "../AppRoot/ScrollContext";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
@@ -39,16 +39,15 @@ export var PanelHeaderContext = function PanelHeaderContext(_ref) {
   var closing = visible && !opened;
 
   var _useAdaptivity = useAdaptivity(),
-      viewWidth = _useAdaptivity.viewWidth;
+      sizeX = _useAdaptivity.sizeX;
 
-  var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
   var elementRef = React.useRef(null);
   useIsomorphicLayoutEffect(function () {
     opened && setVisible(true);
   }, [opened]);
-  useScrollLock(!isDesktop && opened); // start closing on outer click
+  useScrollLock(platform !== Platform.VKCOM && opened); // start closing on outer click
 
-  useGlobalEventListener(document, "click", isDesktop && opened && !closing && function (event) {
+  useGlobalEventListener(document, "click", opened && !closing && function (event) {
     if (elementRef.current && !elementRef.current.contains(event.target)) {
       onClose();
     }
@@ -63,8 +62,7 @@ export var PanelHeaderContext = function PanelHeaderContext(_ref) {
     return closing ? animationFallback.set() : animationFallback.clear();
   }, [animationFallback, closing]);
   return createScopedElement(FixedLayout, _extends({}, restProps, {
-    vkuiClass: classNames("PanelHeaderContext", platform === IOS && "PanelHeaderContext--ios", opened && "PanelHeaderContext--opened", closing && "PanelHeaderContext--closing", isDesktop && "PanelHeaderContext--desktop", // TODO v5.0.0 поправить под новую адаптивность
-    (platform !== IOS || platform === IOS && isDesktop) && "PanelHeaderContext--rounded"),
+    vkuiClass: classNames("PanelHeaderContext", platform === Platform.IOS && "PanelHeaderContext--ios", opened && "PanelHeaderContext--opened", closing && "PanelHeaderContext--closing", getSizeXClassName("PanelHeaderContext", sizeX), "PanelHeaderContext--rounded"),
     vertical: "top"
   }), createScopedElement("div", {
     vkuiClass: "PanelHeaderContext__in",
@@ -72,8 +70,11 @@ export var PanelHeaderContext = function PanelHeaderContext(_ref) {
     onAnimationEnd: closing ? onAnimationEnd : undefined
   }, createScopedElement("div", {
     vkuiClass: "PanelHeaderContext__content"
-  }, visible && children)), !isDesktop && visible && createScopedElement("div", {
-    onClick: onClose,
+  }, visible && children)), visible && createScopedElement("div", {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onClose();
+    },
     vkuiClass: "PanelHeaderContext__fade"
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContext.js","names":["React","FixedLayout","classNames","ViewWidth","useAdaptivity","useDOM","IOS","useIsomorphicLayoutEffect","useGlobalEventListener","useTimeout","usePlatform","useScrollLock","PanelHeaderContext","children","onClose","opened","restProps","document","platform","useState","visible","setVisible","closing","viewWidth","isDesktop","SMALL_TABLET","elementRef","useRef","event","current","contains","target","onAnimationEnd","animationFallback","useEffect","set","clear","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":"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"}
+{"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;;AASA;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"}

package/dist/components/PanelHeaderEdit/PanelHeaderEdit.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["isActive", "editLabel", "doneLabel"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { Icon28EditOutline, Icon28DoneOutline } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
 
@@ -24,6 +24,6 @@ export var PanelHeaderEdit = function PanelHeaderEdit(_ref) {
   var platform = usePlatform();
   return createScopedElement(PanelHeaderButton, _extends({
     "aria-label": iOSText
-  }, restProps), platform === IOS ? iOSText : createScopedElement(AndroidIcon, null));
+  }, restProps), platform === Platform.IOS ? iOSText : createScopedElement(AndroidIcon, null));
 };
 //# sourceMappingURL=PanelHeaderEdit.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderEdit.js","names":["PanelHeaderButton","IOS","Icon28EditOutline","Icon28DoneOutline","usePlatform","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform"],"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,SACEA,iBADF;AAIA,SAASC,GAAT;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,GAAb,GAAmBS,OAAnB,GAA6B,oBAAC,WAAD,OADhC,CADF;AAKD,CAfM"}
+{"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"}

package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js

@@ -4,7 +4,7 @@ var _excluded = ["children"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
 import { Icon28DoneOutline } from "@vkontakte/icons";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getTitleFromChildren } from "../../lib/utils";
 /**
@@ -20,6 +20,6 @@ export var PanelHeaderSubmit = function PanelHeaderSubmit(_ref) {
   return createScopedElement(PanelHeaderButton, _extends({
     "aria-label": getTitleFromChildren(children),
     primary: true
-  }, restProps), platform === IOS ? children : createScopedElement(Icon28DoneOutline, null));
+  }, restProps), platform === Platform.IOS ? children : createScopedElement(Icon28DoneOutline, null));
 };
 //# sourceMappingURL=PanelHeaderSubmit.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderButton","Icon28DoneOutline","IOS","usePlatform","getTitleFromChildren","PanelHeaderSubmit","children","restProps","platform"],"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,SACEA,iBADF;AAIA,SAASC,iBAAT,QAAkC,kBAAlC;AACA,SAASC,GAAT;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,GAAb,GAAmBI,QAAnB,GAA8B,oBAAC,iBAAD,OALjC,CADF;AASD,CAfM"}
+{"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"}

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

@@ -1,13 +1,8 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
-import { AdaptivityContextInterface, AdaptivityProps } from "../AdaptivityProvider/AdaptivityContext";
 import "./PopoutRoot.css";
-export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps, HasRootRef<HTMLDivElement> {
+export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     popout?: React.ReactNode;
     modal?: React.ReactNode;
 }
-export declare const PopoutRootComponent: {
-    ({ popout, modal, viewWidth, viewHeight, hasMouse, children, getRootRef, ...restProps }: PopoutRootProps & AdaptivityContextInterface): JSX.Element;
-    displayName: string;
-};
-export declare const PopoutRoot: React.FC<Pick<PopoutRootProps & AdaptivityContextInterface, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "popout" | "modal" | "getRootRef"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const PopoutRoot: ({ popout, modal, children, getRootRef, ...restProps }: PopoutRootProps) => JSX.Element;

package/dist/components/PopoutRoot/PopoutRoot.js

@@ -1,18 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["popout", "modal", "viewWidth", "viewHeight", "hasMouse", "children", "getRootRef"];
+var _excluded = ["popout", "modal", "children", "getRootRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { blurActiveElement, useDOM } from "../../lib/dom";
-import { useAdaptivityIsDesktop } from "../../hooks/useAdaptivity";
-export var PopoutRootComponent = function PopoutRootComponent(_ref) {
+import { useAdaptivityWithMediaQueries } from "../../hooks/useAdaptivityWithMediaQueries";
+export 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 = _objectWithoutProperties(_ref, _excluded);
@@ -20,7 +16,9 @@ export var PopoutRootComponent = function PopoutRootComponent(_ref) {
   var _useDOM = useDOM(),
       document = _useDOM.document;
 
-  var isDesktop = useAdaptivityIsDesktop();
+  var _useAdaptivityWithMed = useAdaptivityWithMediaQueries(),
+      isDesktop = _useAdaptivityWithMed.isDesktop;
+
   React.useEffect(function () {
     popout && blurActiveElement(document);
   }, [document, popout]);
@@ -33,10 +31,4 @@ export var PopoutRootComponent = function PopoutRootComponent(_ref) {
     vkuiClass: "PopoutRoot__modal"
   }, modal)));
 };
-PopoutRootComponent.displayName = "PopoutRoot";
-export var PopoutRoot = withAdaptivity(PopoutRootComponent, {
-  viewWidth: true,
-  viewHeight: true,
-  hasMouse: true
-});
 //# sourceMappingURL=PopoutRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.js","names":["React","withAdaptivity","AppRootPortal","blurActiveElement","useDOM","useAdaptivityIsDesktop","PopoutRootComponent","popout","modal","viewWidth","viewHeight","hasMouse","children","getRootRef","restProps","document","isDesktop","useEffect","displayName","PopoutRoot"],"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,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,cAAT;AACA,SAASC,aAAT;AACA,SAASC,iBAAT,EAA4BC,MAA5B;AAKA,SAASC,sBAAT;AAWA,OAAO,IAAMC,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,cAAqBV,MAAM,EAA3B;EAAA,IAAQW,QAAR,WAAQA,QAAR;;EAEA,IAAMC,SAAS,GAAGX,sBAAsB,EAAxC;EAEAL,KAAK,CAACiB,SAAN,CAAgB,YAAM;IACpBV,MAAM,IAAIJ,iBAAiB,CAACY,QAAD,CAA3B;EACD,CAFD,EAEG,CAACA,QAAD,EAAWR,MAAX,CAFH;EAIA,OACE,wCAASO,SAAT;IAAoB,SAAS,EAAC,YAA9B;IAA2C,GAAG,EAAED;EAAhD,IACGD,QADH,EAEE,oBAAC,aAAD,QACG,CAAC,CAACL,MAAF,IACC;IACE,SAAS,EACPS,SAAS,GAAG,sBAAH,GAA4B;EAFzC,GAKGT,MALH,CAFJ,EAUG,CAAC,CAACC,KAAF,IAAW;IAAK,SAAS,EAAC;EAAf,GAAoCA,KAApC,CAVd,CAFF,CADF;AAiBD,CAnCM;AAqCPF,mBAAmB,CAACY,WAApB,GAAkC,YAAlC;AAEA,OAAO,IAAMC,UAAU,GAAGlB,cAAc,CAACK,mBAAD,EAAsB;EAC5DG,SAAS,EAAE,IADiD;EAE5DC,UAAU,EAAE,IAFgD;EAG5DC,QAAQ,EAAE;AAHkD,CAAtB,CAAjC"}
+{"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;AAUA,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"}

package/dist/components/PopoutWrapper/PopoutWrapper.js

@@ -5,7 +5,7 @@ var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children",
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { IOS } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
@@ -44,7 +44,7 @@ export var PopoutWrapper = function PopoutWrapper(_ref) {
     }
   };
 
-  var animationFinishFallback = useTimeout(onFadeInEnd, platform === IOS ? 300 : 200);
+  var animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);
   React.useEffect(function () {
     !opened && animationFinishFallback.set();
   }, [animationFinishFallback, opened]);
@@ -58,7 +58,7 @@ export var PopoutWrapper = function PopoutWrapper(_ref) {
     passive: false
   });
   return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames("PopoutWrapper", "PopoutWrapper--v-".concat(alignY), "PopoutWrapper--h-".concat(alignX), closing && "PopoutWrapper--closing", opened && "PopoutWrapper--opened", fixed && "PopoutWrapper--fixed", hasMask && "PopoutWrapper--masked"),
+    vkuiClass: 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
   }), createScopedElement("div", {