@vkontakte/vkui 5.0.2 → 5.1.0

package/dist/components/PanelHeaderButton/PanelHeaderButton.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "primary", "label", "className"];
-import * as React from "react";
-import { Tappable } from "../Tappable/Tappable";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { classNamesString } from "../../lib/classNames";
-import { warnOnce } from "../../lib/warnOnce";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getTitleFromChildren, isPrimitiveReactNode } from "../../lib/utils";
-import { Platform } from "../../lib/platform";
-import { Text } from "../Typography/Text/Text";
-import { Title } from "../Typography/Title/Title";
+import * as React from 'react';
+import { Tappable } from '../Tappable/Tappable';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';
+import { warnOnce } from '../../lib/warnOnce';
+import { usePlatform } from '../../hooks/usePlatform';
+import { getTitleFromChildren } from '../../lib/utils';
+import { Platform } from '../../lib/platform';
+import { Text } from '../Typography/Text/Text';
+import { Title } from '../Typography/Title/Title';
 var ButtonTypography = function ButtonTypography(_ref) {
   var primary = _ref.primary,
     children = _ref.children;
@@ -19,14 +19,14 @@ var ButtonTypography = function ButtonTypography(_ref) {
     return /*#__PURE__*/React.createElement(Title, {
       Component: "span",
       level: "3",
-      weight: primary ? "1" : "3"
+      weight: primary ? '1' : '3'
     }, children);
   }
   return /*#__PURE__*/React.createElement(Text, {
-    weight: platform === Platform.VKCOM ? undefined : "2"
+    weight: platform === Platform.VKCOM ? undefined : '2'
   }, children);
 };
-var warn = warnOnce("PanelHeaderButton");
+var warn = warnOnce('PanelHeaderButton');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
@@ -45,35 +45,34 @@ export var PanelHeaderButton = function PanelHeaderButton(_ref2) {
   var activeMode;
   switch (platform) {
     case Platform.IOS:
-      hoverMode = "background";
-      activeMode = "opacity";
+      hoverMode = 'background';
+      activeMode = 'opacity';
       break;
     case Platform.VKCOM:
       hoverMode = "vkuiPanelHeaderButton--hover";
       activeMode = "vkuiPanelHeaderButton--active";
       break;
     default:
-      hoverMode = "background";
-      activeMode = "background";
+      hoverMode = 'background';
+      activeMode = 'background';
   }
-  if (process.env.NODE_ENV === "development") {
-    var hasAccessibleName = Boolean(getTitleFromChildren(children) || getTitleFromChildren(label) || restProps["aria-label"] || restProps["aria-labelledby"]);
+  if (process.env.NODE_ENV === 'development') {
+    var hasAccessibleName = Boolean(getTitleFromChildren(children) || getTitleFromChildren(label) || restProps['aria-label'] || restProps['aria-labelledby']);
     if (!hasAccessibleName) {
-      warn("a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.", "error");
+      warn('a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.', 'error');
     }
   }
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
     hoverMode: hoverMode,
-    Component: restProps.href ? "a" : "button",
+    Component: restProps.href ? 'a' : 'button',
     activeEffectDelay: 200,
     activeMode: activeMode,
-    className: classNamesString("vkuiPanelHeaderButton", getPlatformClassName("vkuiPanelHeaderButton", platform), isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className)
+    className: classNames("vkuiPanelHeaderButton", getPlatformClassName("vkuiPanelHeaderButton", platform), isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className)
   }), isPrimitive ? /*#__PURE__*/React.createElement(ButtonTypography, {
     primary: primary
-  }, children) : children, /*#__PURE__*/React.createElement("div", {
+  }, children) : children, isPrimitiveLabel ? /*#__PURE__*/React.createElement(ButtonTypography, {
+    primary: primary,
     className: "vkuiPanelHeaderButton__label"
-  }, isPrimitiveLabel ? /*#__PURE__*/React.createElement(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":["React","Tappable","getPlatformClassName","classNamesString","warnOnce","usePlatform","getTitleFromChildren","isPrimitiveReactNode","Platform","Text","Title","ButtonTypography","primary","children","platform","IOS","VKCOM","undefined","warn","PanelHeaderButton","label","className","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 { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { classNamesString } 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 styles from \"./PanelHeaderButton.module.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  className,\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 = styles[\"PanelHeaderButton--hover\"];\n      activeMode = styles[\"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      className={classNamesString(\n        styles[\"PanelHeaderButton\"],\n        getPlatformClassName(styles[\"PanelHeaderButton\"], platform),\n        isPrimitive && styles[\"PanelHeaderButton--primitive\"],\n        !isPrimitive &&\n          !isPrimitiveLabel &&\n          styles[\"PanelHeaderButton--notPrimitive\"],\n        className\n      )}\n    >\n      {isPrimitive ? (\n        <ButtonTypography primary={primary}>{children}</ButtonTypography>\n      ) : (\n        children\n      )}\n      <div className={styles[\"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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"}
+{"version":3,"file":"PanelHeaderButton.js","names":["React","Tappable","getPlatformClassName","classNames","isPrimitiveReactNode","warnOnce","usePlatform","getTitleFromChildren","Platform","Text","Title","ButtonTypography","primary","children","platform","IOS","VKCOM","undefined","warn","PanelHeaderButton","label","className","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 { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Platform } from '../../lib/platform';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.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 <Text weight={platform === 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  className,\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 = styles['PanelHeaderButton--hover'];\n      activeMode = styles['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      className={classNames(\n        styles['PanelHeaderButton'],\n        getPlatformClassName(styles['PanelHeaderButton'], platform),\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,iBAAiB;AAClE,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,KAAK,QAAQ,2BAA2B;AAYjD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAqD;EAAA,IAA/CC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;EAC3C,IAAMC,QAAQ,GAAGR,WAAW,EAAE;EAE9B,IAAIQ,QAAQ,KAAKN,QAAQ,CAACO,GAAG,EAAE;IAC7B,oBACE,oBAAC,KAAK;MAAC,SAAS,EAAC,MAAM;MAAC,KAAK,EAAC,GAAG;MAAC,MAAM,EAAEH,OAAO,GAAG,GAAG,GAAG;IAAI,GAC3DC,QAAQ,CACH;EAEZ;EAEA,oBAAO,oBAAC,IAAI;IAAC,MAAM,EAAEC,QAAQ,KAAKN,QAAQ,CAACQ,KAAK,GAAGC,SAAS,GAAG;EAAI,GAAEJ,QAAQ,CAAQ;AACvF,CAAC;AAED,IAAMK,IAAI,GAAGb,QAAQ,CAAC,mBAAmB,CAAC;;AAE1C;AACA;AACA;AACA,OAAO,IAAMc,iBAAiB,GAAG,SAApBA,iBAAiB,QAMA;EAAA,IAL5BN,QAAQ,SAARA,QAAQ;IAAA,sBACRD,OAAO;IAAPA,OAAO,8BAAG,KAAK;IACfQ,KAAK,SAALA,KAAK;IACLC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAGnB,oBAAoB,CAACS,QAAQ,CAAC;EAClD,IAAMW,gBAAgB,GAAGpB,oBAAoB,CAACgB,KAAK,CAAC;EACpD,IAAMN,QAAQ,GAAGR,WAAW,EAAE;EAE9B,IAAImB,SAAS;EACb,IAAIC,UAAU;EAEd,QAAQZ,QAAQ;IACd,KAAKN,QAAQ,CAACO,GAAG;MACfU,SAAS,GAAG,YAAY;MACxBC,UAAU,GAAG,SAAS;MACtB;IACF,KAAKlB,QAAQ,CAACQ,KAAK;MACjBS,SAAS,iCAAqC;MAC9CC,UAAU,kCAAsC;MAChD;IACF;MACED,SAAS,GAAG,YAAY;MACxBC,UAAU,GAAG,YAAY;EAAC;EAG9B,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,iBAAiB,GAAGC,OAAO,CAC/BxB,oBAAoB,CAACM,QAAQ,CAAC,IAC5BN,oBAAoB,CAACa,KAAK,CAAC,IAC3BE,SAAS,CAAC,YAAY,CAAC,IACvBA,SAAS,CAAC,iBAAiB,CAAC,CAC/B;IAED,IAAI,CAACQ,iBAAiB,EAAE;MACtBZ,IAAI,CACF,oMAAoM,EACpM,OAAO,CACR;IACH;EACF;EAEA,oBACE,oBAAC,QAAQ,eACHI,SAAS;IACb,SAAS,EAAEG,SAAU;IACrB,SAAS,EAAEH,SAAS,CAACU,IAAI,GAAG,GAAG,GAAG,QAAS;IAC3C,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAEN,UAAW;IACvB,SAAS,EAAEvB,UAAU,0BAEnBD,oBAAoB,0BAA8BY,QAAQ,CAAC,EAC3DS,WAAW,sCAA0C,EACrD,CAACA,WAAW,IAAI,CAACC,gBAAgB,yCAA6C,EAC9EH,SAAS;EACT,IAEDE,WAAW,gBAAG,oBAAC,gBAAgB;IAAC,OAAO,EAAEX;EAAQ,GAAEC,QAAQ,CAAoB,GAAGA,QAAQ,EAC1FW,gBAAgB,gBACf,oBAAC,gBAAgB;IAAC,OAAO,EAAEZ,OAAQ;IAAC,SAAS;EAAqC,GAC/EQ,KAAK,CACW,GAEnBA,KACD,CACQ;AAEf,CAAC"}

package/dist/components/PanelHeaderClose/PanelHeaderClose.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PanelHeaderButtonProps } from "../PanelHeaderButton/PanelHeaderButton";
+import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose
  */

package/dist/components/PanelHeaderClose/PanelHeaderClose.js

@@ -1,19 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-import * as React from "react";
-import { Icon28CancelOutline } from "@vkontakte/icons";
-import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { Platform } from "../../lib/platform";
-import { getTitleFromChildren } from "../../lib/utils";
-import { usePlatform } from "../../hooks/usePlatform";
+import * as React from 'react';
+import { Icon28CancelOutline } from '@vkontakte/icons';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { Platform } from '../../lib/platform';
+import { getTitleFromChildren } from '../../lib/utils';
+import { usePlatform } from '../../hooks/usePlatform';
 
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose
  */
 export var PanelHeaderClose = function PanelHeaderClose(_ref) {
   var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? "Отмена" : _ref$children,
+    children = _ref$children === void 0 ? 'Отмена' : _ref$children,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   return /*#__PURE__*/React.createElement(PanelHeaderButton, _extends({

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderClose.js","names":["React","Icon28CancelOutline","PanelHeaderButton","Platform","getTitleFromChildren","usePlatform","PanelHeaderClose","children","restProps","platform","IOS"],"sources":["../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { 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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,kBAAkB;AACtD,SACEC,iBAAiB,QAEZ,wCAAwC;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,WAAW,QAAQ,yBAAyB;;AAErD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAGC;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAGJ,WAAW,EAAE;EAC9B,oBACE,oBAAC,iBAAiB;IAChB,cAAYD,oBAAoB,CAACG,QAAQ;EAAE,GACvCC,SAAS,GAEZC,QAAQ,KAAKN,QAAQ,CAACO,GAAG,GAAGH,QAAQ,gBAAG,oBAAC,mBAAmB,OAAG,CAC7C;AAExB,CAAC"}
+{"version":3,"file":"PanelHeaderClose.js","names":["React","Icon28CancelOutline","PanelHeaderButton","Platform","getTitleFromChildren","usePlatform","PanelHeaderClose","children","restProps","platform","IOS"],"sources":["../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28CancelOutline } from '@vkontakte/icons';\nimport { PanelHeaderButton, PanelHeaderButtonProps } 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 = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28CancelOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,kBAAkB;AACtD,SAASC,iBAAiB,QAAgC,wCAAwC;AAClG,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,WAAW,QAAQ,yBAAyB;;AAErD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsE;EAAA,yBAAhEC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAKC,SAAS;EAClE,IAAMC,QAAQ,GAAGJ,WAAW,EAAE;EAC9B,oBACE,oBAAC,iBAAiB;IAAC,cAAYD,oBAAoB,CAACG,QAAQ;EAAE,GAAKC,SAAS,GACzEC,QAAQ,KAAKN,QAAQ,CAACO,GAAG,GAAGH,QAAQ,gBAAG,oBAAC,mBAAmB,OAAG,CAC7C;AAExB,CAAC"}

package/dist/components/PanelHeaderContent/PanelHeaderContent.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {
     aside?: React.ReactNode;
     before?: React.ReactNode;

package/dist/components/PanelHeaderContent/PanelHeaderContent.js

@@ -2,16 +2,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "style", "aside", "status", "before", "children", "onClick"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Tappable } from "../Tappable/Tappable";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { getPlatformClassName } from "../../helpers/getPlatformClassName";
-import { Footnote } from "../Typography/Footnote/Footnote";
-import { Headline } from "../Typography/Headline/Headline";
-import { Platform } from "../../lib/platform";
-import { Text } from "../Typography/Text/Text";
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Tappable } from '../Tappable/Tappable';
+import { usePlatform } from '../../hooks/usePlatform';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Headline } from '../Typography/Headline/Headline';
+import { Platform } from '../../lib/platform';
+import { Text } from '../Typography/Text/Text';
 var PanelHeaderChildren = function PanelHeaderChildren(_ref) {
   var hasStatus = _ref.hasStatus,
     hasBefore = _ref.hasBefore,
@@ -43,22 +42,22 @@ export var PanelHeaderContent = function PanelHeaderContent(_ref2) {
     children = _ref2.children,
     onClick = _ref2.onClick,
     restProps = _objectWithoutProperties(_ref2, _excluded);
-  var InComponent = onClick ? Tappable : "div";
+  var InComponent = onClick ? Tappable : 'div';
   var rootProps = onClick ? {} : restProps;
   var platform = usePlatform();
   var inProps = onClick ? _objectSpread(_objectSpread({}, restProps), {}, {
     onClick: onClick,
     activeEffectDelay: 200,
     hasActive: platform === Platform.IOS,
-    activeMode: "opacity"
+    activeMode: 'opacity'
   }) : {};
   return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
     style: style,
-    className: classNamesString("vkuiPanelHeaderContent", getPlatformClassName("vkuiPanelHeaderContent", platform), className)
+    className: classNames("vkuiPanelHeaderContent", getPlatformClassName("vkuiPanelHeaderContent", platform), className)
   }), hasReactNode(before) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiPanelHeaderContent__before"
   }, before), /*#__PURE__*/React.createElement(InComponent, _extends({}, inProps, {
-    className: classNamesString("vkuiPanelHeaderContent__in", !before && platform !== Platform.ANDROID && "vkuiPanelHeaderContent__in--centered")
+    className: classNames("vkuiPanelHeaderContent__in", !before && platform !== Platform.ANDROID && "vkuiPanelHeaderContent__in--centered")
   }), hasReactNode(status) && /*#__PURE__*/React.createElement(Footnote, {
     className: "vkuiPanelHeaderContent__status"
   }, status), /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContent.js","names":["React","classNamesString","Tappable","usePlatform","hasReactNode","getPlatformClassName","Footnote","Headline","Platform","Text","PanelHeaderChildren","hasStatus","hasBefore","children","platform","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 { classNamesString } 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 styles from \"./PanelHeaderContent.module.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 {\n  hasStatus: boolean;\n  hasBefore: boolean;\n  children?: React.ReactNode;\n}\n\nconst PanelHeaderChildren = ({\n  hasStatus,\n  hasBefore,\n  children,\n}: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\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 className={styles[\"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      style={style}\n      className={classNamesString(\n        styles[\"PanelHeaderContent\"],\n        getPlatformClassName(styles[\"PanelHeaderContent\"], platform),\n        className\n      )}\n    >\n      {hasReactNode(before) && (\n        <div className={styles[\"PanelHeaderContent__before\"]}>{before}</div>\n      )}\n      <InComponent\n        {...inProps}\n        className={classNamesString(\n          styles[\"PanelHeaderContent__in\"],\n          !before &&\n            platform !== Platform.ANDROID &&\n            styles[\"PanelHeaderContent__in--centered\"]\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles[\"PanelHeaderContent__status\"]}>\n            {status}\n          </Footnote>\n        )}\n        <div className={styles[\"PanelHeaderContent__children\"]}>\n          <PanelHeaderChildren\n            hasStatus={hasReactNode(status)}\n            hasBefore={hasReactNode(before)}\n          >\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles[\"PanelHeaderContent__aside\"]}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && (\n          <div className={styles[\"PanelHeaderContent__width\"]} />\n        )}\n      </InComponent>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,IAAI,QAAQ,yBAAyB;AAgB9C,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,OAIO;EAAA,IAH9BC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;EAER,IAAMC,QAAQ,GAAGX,WAAW,EAAE;EAC9B,IAAIW,QAAQ,KAAKN,QAAQ,CAACO,KAAK,EAAE;IAC/B,oBACE,oBAAC,IAAI;MAAC,SAAS,EAAC,KAAK;MAAC,MAAM,EAAC;IAAG,GAC7BF,QAAQ,CACJ;EAEX;EAEA,OAAOF,SAAS,IAAIC,SAAS,gBAC3B,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,MAAM,EAAC;EAAG,GACjCC,QAAQ,CACA,gBAEX;IAAK,SAAS;EAA4C,GAAEA,QAAQ,CACrE;AACH,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkB,QASA;EAAA,IAR7BC,SAAS,SAATA,SAAS;IACTC,KAAK,SAALA,KAAK;IACLC,KAAK,SAALA,KAAK;IACLC,MAAM,SAANA,MAAM;IACNC,MAAM,SAANA,MAAM;IACNR,QAAQ,SAARA,QAAQ;IACRS,OAAO,SAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGF,OAAO,GAAGpB,QAAQ,GAAG,KAAK;EAC9C,IAAMuB,SAAS,GAAGH,OAAO,GAAG,CAAC,CAAC,GAAGC,SAAS;EAC1C,IAAMT,QAAQ,GAAGX,WAAW,EAAE;EAC9B,IAAMuB,OAAO,GAAGJ,OAAO,mCAEdC,SAAS;IACZD,OAAO,EAAPA,OAAO;IACPK,iBAAiB,EAAE,GAAG;IACtBC,SAAS,EAAEd,QAAQ,KAAKN,QAAQ,CAACqB,GAAG;IACpCC,UAAU,EAAE;EAAS,KAEvB,CAAC,CAAC;EAEN,oBACE,wCACML,SAAS;IACb,KAAK,EAAEP,KAAM;IACb,SAAS,EAAEjB,gBAAgB,2BAEzBI,oBAAoB,2BAA+BS,QAAQ,CAAC,EAC5DG,SAAS;EACT,IAEDb,YAAY,CAACiB,MAAM,CAAC,iBACnB;IAAK,SAAS;EAAuC,GAAEA,MAAM,CAC9D,eACD,oBAAC,WAAW,eACNK,OAAO;IACX,SAAS,EAAEzB,gBAAgB,+BAEzB,CAACoB,MAAM,IACLP,QAAQ,KAAKN,QAAQ,CAACuB,OAAO,0CACa;EAC5C,IAED3B,YAAY,CAACgB,MAAM,CAAC,iBACnB,oBAAC,QAAQ;IAAC,SAAS;EAAuC,GACvDA,MAAM,CAEV,eACD;IAAK,SAAS;EAAyC,gBACrD,oBAAC,mBAAmB;IAClB,SAAS,EAAEhB,YAAY,CAACgB,MAAM,CAAE;IAChC,SAAS,EAAEhB,YAAY,CAACiB,MAAM;EAAE,GAE/BR,QAAQ,CACW,EACrBT,YAAY,CAACe,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAsC,GAAEA,KAAK,CAC5D,CACG,EACLf,YAAY,CAACiB,MAAM,CAAC,iBACnB;IAAK,SAAS;EAAsC,EACrD,CACW,CACV;AAEV,CAAC"}
+{"version":3,"file":"PanelHeaderContent.js","names":["React","classNames","hasReactNode","Tappable","usePlatform","getPlatformClassName","Footnote","Headline","Platform","Text","PanelHeaderChildren","hasStatus","hasBefore","children","platform","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, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { usePlatform } from '../../hooks/usePlatform';\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 styles from './PanelHeaderContent.module.css';\n\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps {\n  hasStatus: boolean;\n  hasBefore: boolean;\n  children?: React.ReactNode;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\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 className={styles['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      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        getPlatformClassName(styles['PanelHeaderContent'], platform),\n        className,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div className={styles['PanelHeaderContent__children']}>\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,IAAI,QAAQ,yBAAyB;AAe9C,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqE;EAAA,IAA/DC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAIU,QAAQ,KAAKN,QAAQ,CAACO,KAAK,EAAE;IAC/B,oBACE,oBAAC,IAAI;MAAC,SAAS,EAAC,KAAK;MAAC,MAAM,EAAC;IAAG,GAC7BF,QAAQ,CACJ;EAEX;EAEA,OAAOF,SAAS,IAAIC,SAAS,gBAC3B,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,MAAM,EAAC;EAAG,GACjCC,QAAQ,CACA,gBAEX;IAAK,SAAS;EAA4C,GAAEA,QAAQ,CACrE;AACH,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkB,QASA;EAAA,IAR7BC,SAAS,SAATA,SAAS;IACTC,KAAK,SAALA,KAAK;IACLC,KAAK,SAALA,KAAK;IACLC,MAAM,SAANA,MAAM;IACNC,MAAM,SAANA,MAAM;IACNR,QAAQ,SAARA,QAAQ;IACRS,OAAO,SAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGF,OAAO,GAAGnB,QAAQ,GAAG,KAAK;EAC9C,IAAMsB,SAAS,GAAGH,OAAO,GAAG,CAAC,CAAC,GAAGC,SAAS;EAC1C,IAAMT,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAMsB,OAAO,GAAGJ,OAAO,mCAEdC,SAAS;IACZD,OAAO,EAAPA,OAAO;IACPK,iBAAiB,EAAE,GAAG;IACtBC,SAAS,EAAEd,QAAQ,KAAKN,QAAQ,CAACqB,GAAG;IACpCC,UAAU,EAAE;EAAS,KAEvB,CAAC,CAAC;EAEN,oBACE,wCACML,SAAS;IACb,KAAK,EAAEP,KAAM;IACb,SAAS,EAAEjB,UAAU,2BAEnBI,oBAAoB,2BAA+BS,QAAQ,CAAC,EAC5DG,SAAS;EACT,IAEDf,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAuC,GAAEA,MAAM,CAAO,eAC7F,oBAAC,WAAW,eACNK,OAAO;IACX,SAAS,EAAEzB,UAAU,+BAEnB,CAACoB,MAAM,IAAIP,QAAQ,KAAKN,QAAQ,CAACuB,OAAO,0CAA8C;EACtF,IAED7B,YAAY,CAACkB,MAAM,CAAC,iBACnB,oBAAC,QAAQ;IAAC,SAAS;EAAuC,GAAEA,MAAM,CACnE,eACD;IAAK,SAAS;EAAyC,gBACrD,oBAAC,mBAAmB;IAAC,SAAS,EAAElB,YAAY,CAACkB,MAAM,CAAE;IAAC,SAAS,EAAElB,YAAY,CAACmB,MAAM;EAAE,GACnFR,QAAQ,CACW,EACrBX,YAAY,CAACiB,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAsC,GAAEA,KAAK,CAC5D,CACG,EACLjB,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAsC,EAAG,CACpE,CACV;AAEV,CAAC"}

package/dist/components/PanelHeaderContext/PanelHeaderContext.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {
     opened: boolean;
     onClose: VoidFunction;

package/dist/components/PanelHeaderContext/PanelHeaderContext.js

@@ -2,18 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "onClose", "opened", "className"];
-import * as React from "react";
-import { FixedLayout } from "../FixedLayout/FixedLayout";
-import { classNamesString } from "../../lib/classNames";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useDOM } from "../../lib/dom";
-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";
+import * as React from 'react';
+import { FixedLayout } from '../FixedLayout/FixedLayout';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useDOM } from '../../lib/dom';
+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
  */
@@ -41,7 +41,7 @@ export var PanelHeaderContext = function PanelHeaderContext(_ref) {
   useScrollLock(platform !== Platform.VKCOM && opened);
 
   // start closing on outer click
-  useGlobalEventListener(document, "click", opened && !closing && function (event) {
+  useGlobalEventListener(document, 'click', opened && !closing && function (event) {
     if (elementRef.current && !elementRef.current.contains(event.target)) {
       event.stopPropagation();
       onClose();
@@ -59,20 +59,20 @@ export var PanelHeaderContext = function PanelHeaderContext(_ref) {
     return closing ? animationFallback.set() : animationFallback.clear();
   }, [animationFallback, closing]);
   return /*#__PURE__*/React.createElement(FixedLayout, _extends({}, restProps, {
-    className: classNamesString("vkuiPanelHeaderContext", platform === Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", getSizeXClassName("vkuiPanelHeaderContext", sizeX), "vkuiPanelHeaderContext--rounded", className),
+    className: classNames("vkuiPanelHeaderContext", platform === Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", getSizeXClassName("vkuiPanelHeaderContext", sizeX), "vkuiPanelHeaderContext--rounded", className),
     vertical: "top"
+  }), visible && /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onClose();
+    },
+    className: "vkuiPanelHeaderContext__fade"
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiPanelHeaderContext__in",
     ref: elementRef,
     onAnimationEnd: closing ? onAnimationEnd : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiPanelHeaderContext__content"
-  }, visible && children)), visible && /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      onClose();
-    },
-    className: "vkuiPanelHeaderContext__fade"
-  }));
+  }, visible && children)));
 };
 //# sourceMappingURL=PanelHeaderContext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContext.js","names":["React","FixedLayout","classNamesString","useAdaptivity","useDOM","Platform","useIsomorphicLayoutEffect","useGlobalEventListener","useTimeout","usePlatform","useScrollLock","getSizeXClassName","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","undefined"],"sources":["../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FixedLayout } from \"../FixedLayout/FixedLayout\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Platform } from \"../../lib/platform\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport styles from \"./PanelHeaderContext.module.css\";\n\nexport interface PanelHeaderContextProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    \"click\",\n    opened &&\n      !closing &&\n      ((event) => {\n        if (\n          elementRef.current &&\n          !elementRef.current.contains(event.target as Node)\n        ) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true }\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing]\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNamesString(\n        styles[\"PanelHeaderContext\"],\n        platform === Platform.IOS && styles[\"PanelHeaderContext--ios\"],\n        opened && styles[\"PanelHeaderContext--opened\"],\n        closing && styles[\"PanelHeaderContext--closing\"],\n        getSizeXClassName(styles[\"PanelHeaderContext\"], sizeX),\n        styles[\"PanelHeaderContext--rounded\"],\n        className\n      )}\n      vertical=\"top\"\n    >\n      <div\n        className={styles[\"PanelHeaderContext__in\"]}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div className={styles[\"PanelHeaderContext__content\"]}>\n          {visible && children}\n        </div>\n      </div>\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles[\"PanelHeaderContext__fade\"]}\n        />\n      )}\n    </FixedLayout>\n  );\n};\n"],"mappings":"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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","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","undefined"],"sources":["../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport styles from './PanelHeaderContext.module.css';\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        getSizeXClassName(styles['PanelHeaderContext'], sizeX),\n        styles['PanelHeaderContext--rounded'],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{visible && children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,iBAAiB,QAAQ,iCAAiC;AAQnE;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAMA;EAAA,IAL7BC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,mBACPC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBb,MAAM,EAAE;IAArBc,QAAQ,WAARA,QAAQ;EAChB,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,sBAA8BT,KAAK,CAACoB,QAAQ,CAACL,MAAM,CAAC;IAAA;IAA7CM,OAAO;IAAEC,UAAU;EAC1B,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACN,MAAM;EAClC,qBAAkBZ,aAAa,EAAE;IAAzBqB,KAAK,kBAALA,KAAK;EACb,IAAMC,UAAU,GAAGzB,KAAK,CAAC0B,MAAM,CAAiB,IAAI,CAAC;EAErDpB,yBAAyB,CAAC,YAAM;IAC9BS,MAAM,IAAIO,UAAU,CAAC,IAAI,CAAC;EAC5B,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;EAEZL,aAAa,CAACS,QAAQ,KAAKd,QAAQ,CAACsB,KAAK,IAAIZ,MAAM,CAAC;;EAEpD;EACAR,sBAAsB,CACpBW,QAAQ,EACR,OAAO,EACPH,MAAM,IACJ,CAACQ,OAAO,IACP,UAACK,KAAK,EAAK;IACV,IAAIH,UAAU,CAACI,OAAO,IAAI,CAACJ,UAAU,CAACI,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAS,EAAE;MAC5EH,KAAK,CAACI,eAAe,EAAE;MACvBlB,OAAO,EAAE;IACX;EACF,CAAE,EACJ;IAAEmB,OAAO,EAAE;EAAK,CAAC,CAClB;;EAED;EACA,IAAMC,cAAc,GAAG,SAAjBA,cAAc;IAAA,OAASZ,UAAU,CAAC,KAAK,CAAC;EAAA;EAC9C,IAAMa,iBAAiB,GAAG3B,UAAU,CAAC0B,cAAc,EAAE,GAAG,CAAC;EACzDlC,KAAK,CAACoC,SAAS,CACb;IAAA,OAAOb,OAAO,GAAGY,iBAAiB,CAACE,GAAG,EAAE,GAAGF,iBAAiB,CAACG,KAAK,EAAE;EAAA,CAAC,EACrE,CAACH,iBAAiB,EAAEZ,OAAO,CAAC,CAC7B;EAED,oBACE,oBAAC,WAAW,eACNN,SAAS;IACb,SAAS,EAAEf,UAAU,2BAEnBiB,QAAQ,KAAKd,QAAQ,CAACkC,GAAG,iCAAqC,EAC9DxB,MAAM,oCAAwC,EAC9CQ,OAAO,qCAAyC,EAChDZ,iBAAiB,2BAA+Ba,KAAK,CAAC,qCAEtDR,SAAS,CACT;IACF,QAAQ,EAAC;EAAK,IAEbK,OAAO,iBACN;IACE,OAAO,EAAE,iBAACO,KAAK,EAAK;MAClBA,KAAK,CAACI,eAAe,EAAE;MACvBlB,OAAO,EAAE;IACX,CAAE;IACF,SAAS;EAAqC,EAEjD,eACD;IACE,SAAS,8BAAmC;IAC5C,GAAG,EAAEW,UAAW;IAChB,cAAc,EAAEF,OAAO,GAAGW,cAAc,GAAGM;EAAU,gBAErD;IAAK,SAAS;EAAwC,GAAEnB,OAAO,IAAIR,QAAQ,CAAO,CAC9E,CACM;AAElB,CAAC"}

package/dist/components/PanelHeaderEdit/PanelHeaderEdit.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PanelHeaderButtonProps } from "../PanelHeaderButton/PanelHeaderButton";
+import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
     /**
      * Включен ли режим редактирования

package/dist/components/PanelHeaderEdit/PanelHeaderEdit.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderEdit.js","names":["React","PanelHeaderButton","Platform","Icon28EditOutline","Icon28DoneOutline","usePlatform","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","IOS"],"sources":["../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Platform } from \"../../lib/platform\";\nimport { Icon28EditOutline, Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = \"Редактировать\",\n  doneLabel = \"Готово\",\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,QAEZ,wCAAwC;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACvE,SAASC,WAAW,QAAQ,yBAAyB;AAiBrD;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKA;EAAA,yBAJ1BC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,eAAe;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACjBC,SAAS;EAEZ,IAAMC,OAAO,GAAGJ,QAAQ,GAAGE,SAAS,GAAGD,SAAS;EAChD,IAAMI,WAAW,GAAGL,QAAQ,GAAGH,iBAAiB,GAAGD,iBAAiB;EACpE,IAAMU,QAAQ,GAAGR,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAAC,cAAYM;EAAQ,GAAKD,SAAS,GAClDG,QAAQ,KAAKX,QAAQ,CAACY,GAAG,GAAGH,OAAO,gBAAG,oBAAC,WAAW,OAAG,CACpC;AAExB,CAAC"}
+{"version":3,"file":"PanelHeaderEdit.js","names":["React","PanelHeaderButton","Platform","Icon28EditOutline","Icon28DoneOutline","usePlatform","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","IOS"],"sources":["../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Platform } from '../../lib/platform';\nimport { Icon28EditOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAgC,wCAAwC;AAClG,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACvE,SAASC,WAAW,QAAQ,yBAAyB;AAiBrD;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKA;EAAA,yBAJ1BC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,eAAe;IAAA,sBAC3BC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACjBC,SAAS;EAEZ,IAAMC,OAAO,GAAGJ,QAAQ,GAAGE,SAAS,GAAGD,SAAS;EAChD,IAAMI,WAAW,GAAGL,QAAQ,GAAGH,iBAAiB,GAAGD,iBAAiB;EACpE,IAAMU,QAAQ,GAAGR,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAAC,cAAYM;EAAQ,GAAKD,SAAS,GAClDG,QAAQ,KAAKX,QAAQ,CAACY,GAAG,GAAGH,OAAO,gBAAG,oBAAC,WAAW,OAAG,CACpC;AAExB,CAAC"}

package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PanelHeaderButtonProps } from "../PanelHeaderButton/PanelHeaderButton";
+import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
  */

package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderSubmit.js","names":["React","PanelHeaderButton","Icon28DoneOutline","Platform","usePlatform","getTitleFromChildren","PanelHeaderSubmit","children","restProps","platform","IOS"],"sources":["../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { Platform } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = \"Готово\",\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton\n      aria-label={getTitleFromChildren(children)}\n      primary\n      {...restProps}\n    >\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,QAEZ,wCAAwC;AAC/C,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,iBAAiB;;AAEtD;AACA;AACA;AACA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAGL,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAChB,cAAYC,oBAAoB,CAACE,QAAQ,CAAE;IAC3C,OAAO;EAAA,GACHC,SAAS,GAEZC,QAAQ,KAAKN,QAAQ,CAACO,GAAG,GAAGH,QAAQ,gBAAG,oBAAC,iBAAiB,OAAG,CAC3C;AAExB,CAAC"}
+{"version":3,"file":"PanelHeaderSubmit.js","names":["React","PanelHeaderButton","Icon28DoneOutline","Platform","usePlatform","getTitleFromChildren","PanelHeaderSubmit","children","restProps","platform","IOS"],"sources":["../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PanelHeaderButton, PanelHeaderButtonProps } 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 aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAgC,wCAAwC;AAClG,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,iBAAiB;;AAEtD;AACA;AACA;AACA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAGL,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAAC,cAAYC,oBAAoB,CAACE,QAAQ,CAAE;IAAC,OAAO;EAAA,GAAKC,SAAS,GACjFC,QAAQ,KAAKN,QAAQ,CAACO,GAAG,GAAGH,QAAQ,gBAAG,oBAAC,iBAAiB,OAAG,CAC3C;AAExB,CAAC"}

package/dist/components/PanelSpinner/PanelSpinner.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { SpinnerProps } from "../Spinner/Spinner";
+import * as React from 'react';
+import { SpinnerProps } from '../Spinner/Spinner';
 export interface PanelSpinnerProps extends SpinnerProps {
     height?: number;
 }

package/dist/components/PanelSpinner/PanelSpinner.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["height", "style"];
-import * as React from "react";
-import { Spinner } from "../Spinner/Spinner";
+import * as React from 'react';
+import { Spinner } from '../Spinner/Spinner';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelSpinner
  */
@@ -20,5 +20,5 @@ export var PanelSpinner = /*#__PURE__*/React.memo(function (_ref) {
     }, style)
   }));
 });
-PanelSpinner.displayName = "PanelSpinner";
+PanelSpinner.displayName = 'PanelSpinner';
 //# sourceMappingURL=PanelSpinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSpinner.js","names":["React","Spinner","PanelSpinner","memo","height","style","restProps","displayName"],"sources":["../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Spinner, SpinnerProps } from \"../Spinner/Spinner\";\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  )\n);\n\nPanelSpinner.displayName = \"PanelSpinner\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAsB,oBAAoB;AAM1D;AACA;AACA;AACA,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,IAAI,CACpC;EAAA,uBAAGC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAAA,oBACjC,oBAAC,OAAO;IAAC,IAAI,EAAC;EAAS,GAAKA,SAAS;IAAE,KAAK;MAAIF,MAAM,EAANA;IAAM,GAAKC,KAAK;EAAG,GAAG;AAAA,CACvE,CACF;AAEDH,YAAY,CAACK,WAAW,GAAG,cAAc"}
+{"version":3,"file":"PanelSpinner.js","names":["React","Spinner","PanelSpinner","memo","height","style","restProps","displayName"],"sources":["../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAsB,oBAAoB;AAM1D;AACA;AACA;AACA,OAAO,IAAMC,YAAY,gBAAGF,KAAK,CAACG,IAAI,CACpC;EAAA,uBAAGC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAAA,oBACjC,oBAAC,OAAO;IAAC,IAAI,EAAC;EAAS,GAAKA,SAAS;IAAE,KAAK;MAAIF,MAAM,EAANA;IAAM,GAAKC,KAAK;EAAG,GAAG;AAAA,CACvE,CACF;AAEDH,YAAY,CAACK,WAAW,GAAG,cAAc"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Иконка

package/dist/components/Placeholder/Placeholder.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["icon", "header", "action", "children", "stretched", "getRootRef", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { hasReactNode } from "../../lib/utils";
-import { Title } from "../Typography/Title/Title";
-import { Headline } from "../Typography/Headline/Headline";
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Title } from '../Typography/Title/Title';
+import { Headline } from '../Typography/Headline/Headline';
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
@@ -20,7 +19,7 @@ export var Placeholder = function Placeholder(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNamesString("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", className)
+    className: classNames("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiPlaceholder__in"
   }, hasReactNode(icon) && /*#__PURE__*/React.createElement("div", {