@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/Panel/Panel.js

@@ -1,8 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["centered", "children", "getRootRef", "nav", "className"];
-var _sizeXClassNames;
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -11,39 +6,33 @@ import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import { Touch } from '../Touch/Touch';
-import "./Panel.module.css";
-var sizeXClassNames = (_sizeXClassNames = {
-  none: "vkuiPanel--sizeX-none"
-}, _defineProperty(_sizeXClassNames, SizeType.COMPACT, "vkuiPanel--sizeX-compact"), _defineProperty(_sizeXClassNames, SizeType.REGULAR, "vkuiPanel--sizeX-regular"), _sizeXClassNames);
+import styles from './Panel.module.css';
+const sizeXClassNames = {
+    none: styles['Panel--sizeX-none'],
+    [SizeType.COMPACT]: styles['Panel--sizeX-compact'],
+    [SizeType.REGULAR]: styles['Panel--sizeX-regular']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
- */
-export var Panel = function Panel(_ref) {
-  var _ref$centered = _ref.centered,
-    centered = _ref$centered === void 0 ? false : _ref$centered,
-    children = _ref.children,
-    getRootRef = _ref.getRootRef,
-    nav = _ref.nav,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
-    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: getRootRef,
-    className: classNames("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiPanel--centered", className)
-  }), /*#__PURE__*/React.createElement(Touch, {
-    Component: TooltipContainer,
-    className: "vkuiPanel__in"
-  }, platform === Platform.IOS && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPanel__fade"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPanel__in-before"
-  }), centered ? /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPanel__centered"
-  }, children) : children, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPanel__in-after"
-  })));
+ */ export const Panel = ({ centered =false , children , getRootRef , nav , className , ...restProps })=>{
+    const platform = usePlatform();
+    const { sizeX ='none'  } = useAdaptivity();
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        ref: getRootRef,
+        className: classNames(styles['Panel'], sizeXClassNames[sizeX], centered && styles['Panel--centered'], className)
+    }, /*#__PURE__*/ React.createElement(Touch, {
+        Component: TooltipContainer,
+        className: styles['Panel__in']
+    }, platform === Platform.IOS && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiInternalPanel__fade"
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Panel__in-before']
+    }), centered ? /*#__PURE__*/ React.createElement("div", {
+        className: styles['Panel__centered']
+    }, children) : children, /*#__PURE__*/ React.createElement("div", {
+        className: styles['Panel__in-after']
+    })));
 };
+
 //# sourceMappingURL=Panel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","IOS"],"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,KAAK,QAAQ,gBAAgB;AAAC;AAGvC,IAAMC,eAAe;EACnBC,IAAI;AAA6B,qCAChCL,QAAQ,CAACM,OAAO,iEAChBN,QAAQ,CAACO,OAAO,gDAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGhB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCkB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,wCACMF,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAEd,UAAU,cAEnBO,eAAe,CAACY,KAAK,CAAC,EACtBP,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,KAAK;IAAC,SAAS,EAAEX,gBAAiB;IAAC,SAAS;EAAsB,GAChEa,QAAQ,KAAKd,QAAQ,CAACgB,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7CR,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC"}
+{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","styles","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACJ,SAASQ,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMK,QAAQ,CAAC,EACpBC,UAAW,KAAK,CAAA,EAChBC,SAAQ,EACRC,WAAU,EACVC,IAAG,EACHC,UAAS,EACT,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACE,GAAGH,SAAS;QACbI,KAAKP;QACLE,WAAWjB,WACTO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBP,YAAYN,MAAM,CAAC,kBAAkB,EACrCU;qBAGF,oBAACX;QAAMiB,WAAWlB;QAAkBY,WAAWV,MAAM,CAAC,YAAY;OAC/DY,aAAaf,SAASoB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,WAAWV,MAAM,CAAC,mBAAmB;QACzCM,yBAAW,oBAACQ;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;OAAGO,YAAkBA,QAAQ,gBAClF,oBAACO;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;;AAIjD,EAAE"}

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

@@ -1 +1 @@
-.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:before{content:"";height:100%}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:before{left:0;position:absolute;top:0;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis+*,.vkuiPanel__centered .vkuiPanelHeader--vis+*{margin-top:56px;margin-top:var(--vkui--size_panel_header_height--regular)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiEpic--hasTabbar .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--sizeX-regular:before{background-color:initial}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__in,.vkuiPanel--sizeX-none:before{background-color:initial}}
+.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:before{content:"";height:100%}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:before{left:0;position:absolute;top:0;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--vis+*,.vkuiPanel__centered .vkuiInternalPanelHeader--vis+*{margin-top:56px;margin-top:var(--vkui--size_panel_header_height--regular)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiInternalEpic--hasTabbar .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--sizeX-regular:before{background-color:initial}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__in,.vkuiPanel--sizeX-none:before{background-color:initial}}

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["before", "children", "after", "separator", "visor", "transparent", "shadow", "getRef", "getRootRef", "fixed", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -15,95 +12,69 @@ import { Separator } from '../Separator/Separator';
 import { Spacing } from '../Spacing/Spacing';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import { Text } from '../Typography/Text/Text';
-import "./PanelHeader.module.css";
-var platformClassNames = {
-  ios: "vkuiPanelHeader--ios",
-  android: "vkuiPanelHeader--android",
-  vkcom: "vkuiPanelHeader--vkcom"
+import styles from './PanelHeader.module.css';
+const platformClassNames = {
+    ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),
+    android: styles['PanelHeader--android'],
+    vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom')
 };
-var sizeXClassNames = {
-  none: "vkuiPanelHeader--sizeX-none",
-  regular: "vkuiPanelHeader--sizeX-regular"
+const sizeXClassNames = {
+    none: styles['PanelHeader--sizeX-none'],
+    regular: styles['PanelHeader--sizeX-regular']
 };
-var PanelHeaderIn = function PanelHeaderIn(_ref) {
-  var before = _ref.before,
-    after = _ref.after,
-    separator = _ref.separator,
-    children = _ref.children;
-  var _useConfigProvider = useConfigProvider(),
-    webviewType = _useConfigProvider.webviewType;
-  var _React$useContext = React.useContext(ModalRootContext),
-    isInsideModal = _React$useContext.isInsideModal;
-  var platform = usePlatform();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipContainer, {
-    fixed: true,
-    className: "vkuiPanelHeader__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPanelHeader__before"
-  }, before), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPanelHeader__content"
-  }, platform === Platform.VKCOM ? /*#__PURE__*/React.createElement(Text, {
-    weight: "2"
-  }, children) : /*#__PURE__*/React.createElement("span", {
-    className: "vkuiPanelHeader__content-in"
-  }, children)), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPanelHeader__after"
-  }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/React.createElement(Separator, {
-    className: "vkuiPanelHeader__separator",
-    wide: true
-  }));
+const PanelHeaderIn = ({ before , after , separator , children  })=>{
+    const { webviewType  } = useConfigProvider();
+    const { isInsideModal  } = React.useContext(ModalRootContext);
+    const platform = usePlatform();
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TooltipContainer, {
+        fixed: true,
+        className: styles['PanelHeader__in']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')
+    }, before), /*#__PURE__*/ React.createElement("div", {
+        className: styles['PanelHeader__content']
+    }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
+        weight: "2"
+    }, children) : /*#__PURE__*/ React.createElement("span", {
+        className: styles['PanelHeader__content-in']
+    }, children)), /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')
+    }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/ React.createElement(Separator, {
+        className: styles['PanelHeader__separator'],
+        wide: true
+    }));
 };
-
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
- */
-export var PanelHeader = function PanelHeader(_ref2) {
-  var before = _ref2.before,
-    children = _ref2.children,
-    after = _ref2.after,
-    _ref2$separator = _ref2.separator,
-    separator = _ref2$separator === void 0 ? true : _ref2$separator,
-    _ref2$visor = _ref2.visor,
-    visor = _ref2$visor === void 0 ? true : _ref2$visor,
-    _ref2$transparent = _ref2.transparent,
-    transparent = _ref2$transparent === void 0 ? false : _ref2$transparent,
-    shadow = _ref2.shadow,
-    getRef = _ref2.getRef,
-    getRootRef = _ref2.getRootRef,
-    fixed = _ref2.fixed,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded);
-  var platform = usePlatform();
-  var _useConfigProvider2 = useConfigProvider(),
-    webviewType = _useConfigProvider2.webviewType;
-  var _React$useContext2 = React.useContext(ModalRootContext),
-    isInsideModal = _React$useContext2.isInsideModal;
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
-    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
-  var _useAdaptivityConditi = useAdaptivityConditionalRender(),
-    adaptiveSizeX = _useAdaptivityConditi.sizeX;
-  var isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && "vkuiPanelHeader--vis", separator && visor && "vkuiPanelHeader--sep", webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
-    ref: isFixed ? getRootRef : getRef
-  }), isFixed ? /*#__PURE__*/React.createElement(FixedLayout, {
-    className: "vkuiPanelHeader__fixed",
-    vertical: "top",
-    getRootRef: getRef
-  }, /*#__PURE__*/React.createElement(PanelHeaderIn, {
-    before: before,
-    after: after,
-    separator: separator
-  }, children)) : /*#__PURE__*/React.createElement(PanelHeaderIn, {
-    before: before,
-    after: after,
-    separator: separator
-  }, children), separator && visor && platform !== Platform.VKCOM && /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeX.compact && /*#__PURE__*/React.createElement(Separator, {
-    className: adaptiveSizeX.compact.className
-  }), adaptiveSizeX.regular && /*#__PURE__*/React.createElement(Spacing, {
-    className: adaptiveSizeX.regular.className,
-    size: 16
-  })));
+ */ export const PanelHeader = ({ before , children , after , separator =true , visor =true , transparent =false , shadow , getRef , getRootRef , fixed , className , ...restProps })=>{
+    const platform = usePlatform();
+    const { webviewType  } = useConfigProvider();
+    const { isInsideModal  } = React.useContext(ModalRootContext);
+    const { sizeX ='none'  } = useAdaptivity();
+    const { sizeX: adaptiveSizeX  } = useAdaptivityConditionalRender();
+    let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['PanelHeader'], 'vkuiInternalPanelHeader', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && styles['PanelHeader--trnsp'], shadow && styles['PanelHeader--shadow'], visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'), separator && visor && classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'), webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'], !before && styles['PanelHeader--no-before'], !after && styles['PanelHeader--no-after'], isFixed && styles['PanelHeader--fixed'], sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
+        ref: isFixed ? getRootRef : getRef
+    }, isFixed ? /*#__PURE__*/ React.createElement(FixedLayout, {
+        className: styles['PanelHeader__fixed'],
+        vertical: "top",
+        getRootRef: getRef
+    }, /*#__PURE__*/ React.createElement(PanelHeaderIn, {
+        before: before,
+        after: after,
+        separator: separator
+    }, children)) : /*#__PURE__*/ React.createElement(PanelHeaderIn, {
+        before: before,
+        after: after,
+        separator: separator
+    }, children), separator && visor && platform !== Platform.VKCOM && /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeX.compact && /*#__PURE__*/ React.createElement(Separator, {
+        className: adaptiveSizeX.compact.className
+    }), adaptiveSizeX.regular && /*#__PURE__*/ React.createElement(Spacing, {
+        className: adaptiveSizeX.regular.className,
+        size: 16
+    })));
 };
+
 //# sourceMappingURL=PanelHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.js","names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","webviewType","useContext","isInsideModal","platform","VKCOM","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","compact"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeader--ios'],\n  android: styles['PanelHeader--android'],\n  vkcom: styles['PanelHeader--vkcom'],\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: styles['PanelHeader--android'],\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","webviewType","isInsideModal","useContext","platform","Fragment","fixed","className","div","VKCOM","weight","span","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","restProps","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader__separator{margin-top:calc(-1 * 1px);margin-top:calc(-1 * var(--vkui_internal--thin_border))}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}
+.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiInternalSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiInternal.SplitCol--spaced-none.SplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiInternal.SplitCol--spaced-none.SplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiInternalSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content,.vkuiInternalSplitCol--viewWidth-tabletPlus.vkuiInternalSplitCol--spaced-none.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiInternalSplitCol--viewWidth-none.vkuiInternalSplitCol--spaced-none.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiInternalModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiInternalModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader__separator{margin-top:calc(-1 * 1px);margin-top:calc(-1 * var(--vkui_internal--thin_border))}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
-export declare type PanelHeaderBackProps = PanelHeaderButtonProps & {
+export type PanelHeaderBackProps = PanelHeaderButtonProps & {
     'aria-label'?: string;
 };
 /**

package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "aria-label", "className"];
 import * as React from 'react';
 import { Icon28ArrowLeftOutline, Icon28ChevronBack, Icon28ChevronLeftOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
@@ -9,36 +6,30 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
-import "./PanelHeaderBack.module.css";
+import styles from '../PanelHeaderButton/PanelHeaderButton.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
- */
-export var PanelHeaderBack = function PanelHeaderBack(_ref) {
-  var label = _ref.label,
-    _ref$ariaLabel = _ref['aria-label'],
-    ariaLabel = _ref$ariaLabel === void 0 ? 'Назад' : _ref$ariaLabel,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
-    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _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 = /*#__PURE__*/React.createElement(Icon28ArrowLeftOutline, null);
-  switch (platform) {
-    case Platform.IOS:
-      icon = /*#__PURE__*/React.createElement(Icon28ChevronBack, null);
-      break;
-    case Platform.VKCOM:
-      icon = /*#__PURE__*/React.createElement(Icon28ChevronLeftOutline, null);
-      break;
-  }
-  return /*#__PURE__*/React.createElement(PanelHeaderButton, _extends({}, restProps, {
-    className: classNames("vkuiPanelHeaderBack", sizeX === SizeType.COMPACT && "vkuiPanelHeaderBack--sizeX-compact", platform === Platform.IOS && "vkuiPanelHeaderBack--ios", platform === Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
-    label: showLabel && label,
-    "aria-label": ariaLabel
-  }), icon);
+ */ export const PanelHeaderBack = ({ label , 'aria-label': ariaLabel = 'Назад' , className , ...restProps })=>{
+    const platform = usePlatform();
+    const { sizeX ='none'  } = useAdaptivity();
+    // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular
+    // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
+    const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;
+    let icon = /*#__PURE__*/ React.createElement(Icon28ArrowLeftOutline, null);
+    switch(platform){
+        case Platform.IOS:
+            icon = /*#__PURE__*/ React.createElement(Icon28ChevronBack, null);
+            break;
+        case Platform.VKCOM:
+            icon = /*#__PURE__*/ React.createElement(Icon28ChevronLeftOutline, null);
+            break;
+    }
+    return /*#__PURE__*/ React.createElement(PanelHeaderButton, {
+        ...restProps,
+        className: classNames(sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'], platform === Platform.IOS && styles['PanelHeaderBack--ios'], platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'], showLabel && !!label && styles['PanelHeaderBack--has-label'], className),
+        label: showLabel && label,
+        "aria-label": ariaLabel
+    }, icon);
 };
+
 //# sourceMappingURL=PanelHeaderBack.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderBack.js","names":["React","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","SizeType","Platform","PanelHeaderButton","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon","COMPACT"],"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from './PanelHeaderBack.module.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  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = 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      className={classNames(\n        styles['PanelHeaderBack'],\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,QAAgC,wCAAwC;AAAC;AAOnG;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKE;EAAA,IAJ5BC,KAAK,QAALA,KAAK;IAAA,sBACL,YAAY;IAAEC,SAAS,+BAAG,OAAO;IACjCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCW,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB;EACA;EACA,IAAMC,SAAS,GAAGF,QAAQ,KAAKP,QAAQ,CAACU,KAAK,IAAIH,QAAQ,KAAKP,QAAQ,CAACW,GAAG;EAE1E,IAAIC,IAAI,gBAAG,oBAAC,sBAAsB,OAAG;EACrC,QAAQL,QAAQ;IACd,KAAKP,QAAQ,CAACW,GAAG;MACfC,IAAI,gBAAG,oBAAC,iBAAiB,OAAG;MAC5B;IACF,KAAKZ,QAAQ,CAACU,KAAK;MACjBE,IAAI,gBAAG,oBAAC,wBAAwB,OAAG;MACnC;EAAM;EAGV,oBACE,oBAAC,iBAAiB,eACZN,SAAS;IACb,SAAS,EAAEV,UAAU,wBAEnBY,KAAK,KAAKT,QAAQ,CAACc,OAAO,wCAA4C,EACtEN,QAAQ,KAAKP,QAAQ,CAACW,GAAG,8BAAkC,EAC3DJ,QAAQ,KAAKP,QAAQ,CAACU,KAAK,gCAAoC,EAC/DD,SAAS,IAAI,CAAC,CAACN,KAAK,oCAAwC,EAC5DE,SAAS,CACT;IACF,KAAK,EAAEI,SAAS,IAAIN,KAAM;IAC1B,cAAYC;EAAU,IAErBQ,IAAI,CACa;AAExB,CAAC"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.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  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = 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      className={classNames(\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","SizeType","Platform","PanelHeaderButton","styles","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon","COMPACT","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,OAAOC,YAAY,oDAAoD;AAMvE;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,MAAK,EACL,cAAcC,YAAY,OAAO,CAAA,EACjCC,UAAS,EACT,GAAGC,WACoB,GAAK;IAC5B,MAAMC,WAAWV;IACjB,MAAM,EAAEW,OAAQ,OAAM,EAAE,GAAGZ;IAC3B,iFAAiF;IACjF,wGAAwG;IACxG,MAAMa,YAAYF,aAAaR,SAASW,KAAK,IAAIH,aAAaR,SAASY,GAAG;IAE1E,IAAIC,qBAAO,oBAACpB;IACZ,OAAQe;QACN,KAAKR,SAASY,GAAG;YACfC,qBAAO,oBAACnB;YACR,KAAM;QACR,KAAKM,SAASW,KAAK;YACjBE,qBAAO,oBAAClB;YACR,KAAM;IACV;IAEA,qBACE,oBAACM;QACE,GAAGM,SAAS;QACbD,WAAWV,WACTa,UAAUV,SAASe,OAAO,IAAIZ,MAAM,CAAC,iCAAiC,EACtEM,aAAaR,SAASY,GAAG,IAAIV,MAAM,CAAC,uBAAuB,EAC3DM,aAAaR,SAASW,KAAK,IAAIT,MAAM,CAAC,yBAAyB,EAC/DQ,aAAa,CAAC,CAACN,SAASF,MAAM,CAAC,6BAA6B,EAC5DI;QAEFF,OAAOM,aAAaN;QACpBW,cAAYV;OAEXQ;AAGP,EAAE"}