npm - @vkontakte/vkui - Versions diffs - 5.1.2 → 5.2.1 - Mend

@vkontakte/vkui 5.1.2 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1245) hide show

package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.js CHANGED Viewed

@@ -10,12 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
-var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
-var _platform = require("../../lib/platform");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
-var _usePlatform = require("../../hooks/usePlatform");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
+var _platform = require("../../lib/platform");
+var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
 var _excluded = ["label", "aria-label", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
@@ -28,7 +28,8 @@ var PanelHeaderBack = function PanelHeaderBack(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
+    _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.Platform.VKCOM || platform === _platform.Platform.IOS;
@@ -42,7 +43,7 @@ var PanelHeaderBack = function PanelHeaderBack(_ref) {
       break;
   }
   return /*#__PURE__*/React.createElement(_PanelHeaderButton.PanelHeaderButton, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiPanelHeaderBack", (0, _getSizeXClassName.getSizeXClassName)("vkuiPanelHeaderBack", sizeX), platform === _platform.Platform.IOS && "vkuiPanelHeaderBack--ios", platform === _platform.Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
+    className: (0, _vkjs.classNames)("vkuiPanelHeaderBack", sizeX === _adaptivity.SizeType.COMPACT && "vkuiPanelHeaderBack--sizeX-compact", platform === _platform.Platform.IOS && "vkuiPanelHeaderBack--ios", platform === _platform.Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
     label: showLabel && label,
     "aria-label": ariaLabel
   }), icon);

package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderBack.js","names":["PanelHeaderBack","label","ariaLabel","className","restProps","platform","usePlatform","useAdaptivity","sizeX","showLabel","Platform","VKCOM","IOS","icon","classNames","~~getSizeXClassName~~"],"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ~~Icon28ChevronBack~~,\n ~~Icon28ChevronLeftOutline~~,\n ~~Icon28ArrowLeftOutline~~,\n} from '@vkontakte/icons';\nimport { ~~PanelHeaderButton,~~ ~~PanelHeaderButtonProps~~ } from '~~../PanelHeaderButton~~/~~PanelHeaderButton~~';\nimport { ~~Platform~~ } from '../../~~lib~~/~~platform~~';\nimport { ~~getSizeXClassName~~ } from '../../~~helpers~~/~~getSizeXClassName~~';\nimport { ~~usePlatform~~ } from '../../~~hooks~~/~~usePlatform~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\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 } = 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 ~~getSizeXClassName(~~styles['PanelHeaderBack']~~, sizeX)~~,\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;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;~~AAA0D~~;~~AAO1D~~;AACA;AACA;AACO,IAAMA,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,GAAG,IAAAC,wBAAW,GAAE;EAC9B,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EACb~~;EACA;EACA,IAAMC,SAAS,GAAGJ,QAAQ,KAAKK,kBAAQ,CAACC,KAAK,IAAIN,QAAQ,KAAKK,kBAAQ,CAACE,GAAG;EAE1E,IAAIC,IAAI,gBAAG,oBAAC,6BAAsB,OAAG;EACrC,QAAQR,QAAQ;IACd,KAAKK,kBAAQ,CAACE,GAAG;MACfC,IAAI,gBAAG,oBAAC,wBAAiB,OAAG;MAC5B;IACF,KAAKH,kBAAQ,CAACC,KAAK;MACjBE,IAAI,gBAAG,oBAAC,+BAAwB,OAAG;MACnC;EAAM;EAGV,oBACE,oBAAC,oCAAiB,6BACZT,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,~~yBAEnB~~,~~IAAAC~~,~~oCAAiB~~,~~yBAA4BP~~,~~KAAK~~,~~CAAC~~,~~EACnDH~~,QAAQ,KAAKK,kBAAQ,CAACE,GAAG,8BAAkC,EAC3DP,QAAQ,KAAKK,kBAAQ,CAACC,KAAK,gCAAoC,EAC/DF,SAAS,IAAI,CAAC,CAACR,KAAK,oCAAwC,EAC5DE,SAAS,CACT;IACF,KAAK,EAAEM,SAAS,IAAIR,KAAM;IAC1B,cAAYC;EAAU,IAErBW,IAAI,CACa;AAExB,CAAC;AAAC"}
1	+ {"version":3,"file":"PanelHeaderBack.js","names":["PanelHeaderBack","label","ariaLabel","className","restProps","platform","usePlatform","useAdaptivity","sizeX","showLabel","Platform","VKCOM","IOS","icon","classNames","SizeType","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;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AAAmG;AAOnG;AACA;AACA;AACO,IAAMA,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,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB;EACA;EACA,IAAMC,SAAS,GAAGJ,QAAQ,KAAKK,kBAAQ,CAACC,KAAK,IAAIN,QAAQ,KAAKK,kBAAQ,CAACE,GAAG;EAE1E,IAAIC,IAAI,gBAAG,oBAAC,6BAAsB,OAAG;EACrC,QAAQR,QAAQ;IACd,KAAKK,kBAAQ,CAACE,GAAG;MACfC,IAAI,gBAAG,oBAAC,wBAAiB,OAAG;MAC5B;IACF,KAAKH,kBAAQ,CAACC,KAAK;MACjBE,IAAI,gBAAG,oBAAC,+BAAwB,OAAG;MACnC;EAAM;EAGV,oBACE,oBAAC,oCAAiB,6BACZT,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,yBAEnBN,KAAK,KAAKO,oBAAQ,CAACC,OAAO,wCAA4C,EACtEX,QAAQ,KAAKK,kBAAQ,CAACE,GAAG,8BAAkC,EAC3DP,QAAQ,KAAKK,kBAAQ,CAACC,KAAK,gCAAoC,EAC/DF,SAAS,IAAI,CAAC,CAACR,KAAK,oCAAwC,EAC5DE,SAAS,CACT;IACF,KAAK,EAAEM,SAAS,IAAIR,KAAM;IAC1B,cAAYC;EAAU,IAErBW,IAAI,CACa;AAExB,CAAC;AAAC"}

package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js CHANGED Viewed

@@ -9,12 +9,12 @@ exports.PanelHeaderButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _Tappable = require("../Tappable/Tappable");
 var _vkjs = require("@vkontakte/vkjs");
-var _warnOnce = require("../../lib/warnOnce");
 var _usePlatform = require("../../hooks/usePlatform");
-var _utils = require("../../lib/utils");
 var _platform = require("../../lib/platform");
+var _utils = require("../../lib/utils");
+var _warnOnce = require("../../lib/warnOnce");
+var _Tappable = require("../Tappable/Tappable");
 var _Text = require("../Typography/Text/Text");
 var _Title = require("../Typography/Title/Title");
 var _excluded = ["children", "primary", "label", "className"];

package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderButton.js","names":["getPlatformClassName","platform","ButtonTypography","primary","children","usePlatform","Platform","IOS","VKCOM","undefined","warn","warnOnce","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveReactNode","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","getTitleFromChildren","href","classNames"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~TappableProps~~, ~~Tappable~~ } from '~~../Tappable~~/~~Tappable~~';\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\nfunction getPlatformClassName(platform: string): string {\n switch (platform) {\n case 'ios':\n return styles['PanelHeaderButton--ios'];\n case 'vkcom':\n return styles['PanelHeaderButton--vkcom'];\n default:\n return styles['PanelHeaderButton--android'];\n }\n}\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(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":"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"}
1	+ {"version":3,"file":"PanelHeaderButton.js","names":["getPlatformClassName","platform","ButtonTypography","primary","children","usePlatform","Platform","IOS","VKCOM","undefined","warn","warnOnce","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveReactNode","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","getTitleFromChildren","href","classNames"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n switch (platform) {\n case 'ios':\n return styles['PanelHeaderButton--ios'];\n case 'vkcom':\n return styles['PanelHeaderButton--vkcom'];\n default:\n return styles['PanelHeaderButton--android'];\n }\n}\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(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":"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"}

package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js CHANGED Viewed

@@ -10,10 +10,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
-var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
+var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _utils = require("../../lib/utils");
-var _usePlatform = require("../../hooks/usePlatform");
+var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
 var _excluded = ["children"];
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose

package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderClose.js","names":["PanelHeaderClose","children","restProps","platform","usePlatform","getTitleFromChildren","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;AACA;AACA;AACA;AACA;AACA;~~AAAsD~~;~~AAEtD~~;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsE;EAAA,yBAAhEC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAKC,SAAS;EAClE,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,oBACE,oBAAC,oCAAiB;IAAC,cAAY,IAAAC,2BAAoB,EAACJ,QAAQ;EAAE,GAAKC,SAAS,GACzEC,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAGN,QAAQ,gBAAG,oBAAC,0BAAmB,OAAG,CAC7C;AAExB,CAAC;AAAC"}
1	+ {"version":3,"file":"PanelHeaderClose.js","names":["PanelHeaderClose","children","restProps","platform","usePlatform","getTitleFromChildren","Platform","IOS"],"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\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;AACA;AACA;AACA;AACA;AACA;AAAmG;AAEnG;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAsE;EAAA,yBAAhEC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAKC,SAAS;EAClE,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,oBACE,oBAAC,oCAAiB;IAAC,cAAY,IAAAC,2BAAoB,EAACJ,QAAQ;EAAE,GAAKC,SAAS,GACzEC,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAGN,QAAQ,gBAAG,oBAAC,0BAAmB,OAAG,CAC7C;AAExB,CAAC;AAAC"}

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

@@ -11,12 +11,12 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _Tappable = require("../Tappable/Tappable");
-var _usePlatform = require("../../hooks/usePlatform");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
+var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
+var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Headline = require("../Typography/Headline/Headline");
-var _platform = require("../../lib/platform");
 var _Text = require("../Typography/Text/Text");
 var _excluded = ["className", "style", "aside", "status", "before", "children", "onClick"];
 var PanelHeaderChildren = function PanelHeaderChildren(_ref) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderContent.js","names":["PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Platform","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","classNames","getPlatformClassName","hasReactNode","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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+C;AAe/C,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqE;EAAA,IAA/DC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAID,QAAQ,KAAKE,kBAAQ,CAACC,KAAK,EAAE;IAC/B,oBACE,oBAAC,UAAI;MAAC,SAAS,EAAC,KAAK;MAAC,MAAM,EAAC;IAAG,GAC7BJ,QAAQ,CACJ;EAEX;EAEA,OAAOF,SAAS,IAAIC,SAAS,gBAC3B,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,MAAM,EAAC;EAAG,GACjCC,QAAQ,CACA,gBAEX;IAAK,SAAS;EAA4C,GAAEA,QAAQ,CACrE;AACH,CAAC;;AAED;AACA;AACA;AACO,IAAMK,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;IACNV,QAAQ,SAARA,QAAQ;IACRW,OAAO,SAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGF,OAAO,GAAGG,kBAAQ,GAAG,KAAK;EAC9C,IAAMC,SAAS,GAAGJ,OAAO,GAAG,CAAC,CAAC,GAAGC,SAAS;EAC1C,IAAMX,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMc,OAAO,GAAGL,OAAO,+DAEdC,SAAS;IACZD,OAAO,EAAPA,OAAO;IACPM,iBAAiB,EAAE,GAAG;IACtBC,SAAS,EAAEjB,QAAQ,KAAKE,kBAAQ,CAACgB,GAAG;IACpCC,UAAU,EAAE;EAAS,KAEvB,CAAC,CAAC;EAEN,oBACE,sDACML,SAAS;IACb,KAAK,EAAER,KAAM;IACb,SAAS,EAAE,IAAAc,gBAAU,4BAEnB,IAAAC,0CAAoB,4BAA+BrB,QAAQ,CAAC,EAC5DK,SAAS;EACT,IAED,IAAAiB,kBAAY,EAACb,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAuC,GAAEA,MAAM,CAAO,eAC7F,oBAAC,WAAW,6BACNM,OAAO;IACX,SAAS,EAAE,IAAAK,gBAAU,gCAEnB,CAACX,MAAM,IAAIT,QAAQ,KAAKE,kBAAQ,CAACqB,OAAO,0CAA8C;EACtF,IAED,IAAAD,kBAAY,EAACd,MAAM,CAAC,iBACnB,oBAAC,kBAAQ;IAAC,SAAS;EAAuC,GAAEA,MAAM,CACnE,eACD;IAAK,SAAS;EAAyC,gBACrD,oBAAC,mBAAmB;IAAC,SAAS,EAAE,IAAAc,kBAAY,EAACd,MAAM,CAAE;IAAC,SAAS,EAAE,IAAAc,kBAAY,EAACb,MAAM;EAAE,GACnFV,QAAQ,CACW,EACrB,IAAAuB,kBAAY,EAACf,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAsC,GAAEA,KAAK,CAC5D,CACG,EACL,IAAAe,kBAAY,EAACb,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAsC,EAAG,CACpE,CACV;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"PanelHeaderContent.js","names":["PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Platform","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","classNames","getPlatformClassName","hasReactNode","ANDROID"],"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+C;AAe/C,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqE;EAAA,IAA/DC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAID,QAAQ,KAAKE,kBAAQ,CAACC,KAAK,EAAE;IAC/B,oBACE,oBAAC,UAAI;MAAC,SAAS,EAAC,KAAK;MAAC,MAAM,EAAC;IAAG,GAC7BJ,QAAQ,CACJ;EAEX;EAEA,OAAOF,SAAS,IAAIC,SAAS,gBAC3B,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,MAAM,EAAC;EAAG,GACjCC,QAAQ,CACA,gBAEX;IAAK,SAAS;EAA4C,GAAEA,QAAQ,CACrE;AACH,CAAC;;AAED;AACA;AACA;AACO,IAAMK,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;IACNV,QAAQ,SAARA,QAAQ;IACRW,OAAO,SAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGF,OAAO,GAAGG,kBAAQ,GAAG,KAAK;EAC9C,IAAMC,SAAS,GAAGJ,OAAO,GAAG,CAAC,CAAC,GAAGC,SAAS;EAC1C,IAAMX,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMc,OAAO,GAAGL,OAAO,+DAEdC,SAAS;IACZD,OAAO,EAAPA,OAAO;IACPM,iBAAiB,EAAE,GAAG;IACtBC,SAAS,EAAEjB,QAAQ,KAAKE,kBAAQ,CAACgB,GAAG;IACpCC,UAAU,EAAE;EAAS,KAEvB,CAAC,CAAC;EAEN,oBACE,sDACML,SAAS;IACb,KAAK,EAAER,KAAM;IACb,SAAS,EAAE,IAAAc,gBAAU,4BAEnB,IAAAC,0CAAoB,4BAA+BrB,QAAQ,CAAC,EAC5DK,SAAS;EACT,IAED,IAAAiB,kBAAY,EAACb,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAuC,GAAEA,MAAM,CAAO,eAC7F,oBAAC,WAAW,6BACNM,OAAO;IACX,SAAS,EAAE,IAAAK,gBAAU,gCAEnB,CAACX,MAAM,IAAIT,QAAQ,KAAKE,kBAAQ,CAACqB,OAAO,0CAA8C;EACtF,IAED,IAAAD,kBAAY,EAACd,MAAM,CAAC,iBACnB,oBAAC,kBAAQ;IAAC,SAAS;EAAuC,GAAEA,MAAM,CACnE,eACD;IAAK,SAAS;EAAyC,gBACrD,oBAAC,mBAAmB;IAAC,SAAS,EAAE,IAAAc,kBAAY,EAACd,MAAM,CAAE;IAAC,SAAS,EAAE,IAAAc,kBAAY,EAACb,MAAM;EAAE,GACnFV,QAAQ,CACW,EACrB,IAAAuB,kBAAY,EAACf,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAsC,GAAEA,KAAK,CAC5D,CACG,EACL,IAAAe,kBAAY,EAACb,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAsC,EAAG,CACpE,CACV;AAEV,CAAC;AAAC"}

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

@@ -9,19 +9,24 @@ exports.PanelHeaderContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _FixedLayout = require("../FixedLayout/FixedLayout");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+var _usePlatform = require("../../hooks/usePlatform");
+var _useTimeout = require("../../hooks/useTimeout");
+var _adaptivity = require("../../lib/adaptivity");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
-var _useTimeout = require("../../hooks/useTimeout");
-var _usePlatform = require("../../hooks/usePlatform");
 var _ScrollContext = require("../AppRoot/ScrollContext");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
+var _FixedLayout = require("../FixedLayout/FixedLayout");
 var _excluded = ["children", "onClose", "opened", "className"];
+var _sizeXClassNames;
+var sizeXClassNames = (_sizeXClassNames = {
+  none: "vkuiPanelHeaderContext--sizeX-none"
+}, (0, _defineProperty2.default)(_sizeXClassNames, _adaptivity.SizeType.COMPACT, "vkuiPanelHeaderContext--sizeX-compact"), (0, _defineProperty2.default)(_sizeXClassNames, _adaptivity.SizeType.REGULAR, "vkuiPanelHeaderContext--sizeX-regular"), _sizeXClassNames);
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
  */
@@ -41,7 +46,8 @@ var PanelHeaderContext = function PanelHeaderContext(_ref) {
     setVisible = _React$useState2[1];
   var closing = visible && !opened;
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   var elementRef = React.useRef(null);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     opened && setVisible(true);
@@ -67,7 +73,7 @@ var PanelHeaderContext = function PanelHeaderContext(_ref) {
     return closing ? animationFallback.set() : animationFallback.clear();
   }, [animationFallback, closing]);
   return /*#__PURE__*/React.createElement(_FixedLayout.FixedLayout, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiPanelHeaderContext", platform === _platform.Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", (0, _getSizeXClassName.getSizeXClassName)("vkuiPanelHeaderContext", sizeX), "vkuiPanelHeaderContext--rounded", className),
+    className: (0, _vkjs.classNames)("vkuiPanelHeaderContext", platform === _platform.Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], "vkuiPanelHeaderContext--rounded", className),
     vertical: "top"
   }), visible && /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(event) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderContext.js","names":["PanelHeaderContext","children","onClose","opened","className","restProps","useDOM","document","platform","usePlatform","React","useState","visible","setVisible","closing","useAdaptivity","sizeX","elementRef","useRef","useIsomorphicLayoutEffect","useScrollLock","Platform","VKCOM","useGlobalEventListener","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useTimeout","useEffect","set","clear","classNames","IOS","~~getSizeXClassName","~~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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAAoE~~;~~AAQpE~~;AACA;AACA;AACO,~~IAAMA~~,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,cAAqB,IAAAC,WAAM,GAAE;IAArBC,QAAQ,WAARA,QAAQ;EAChB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA8BC,KAAK,CAACC,QAAQ,CAACR,MAAM,CAAC;IAAA;IAA7CS,OAAO;IAAEC,UAAU;EAC1B,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACT,MAAM;EAClC,~~qBAAkB~~,IAAAY,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EACb~~,IAAMC,UAAU,GAAGP,KAAK,CAACQ,MAAM,CAAiB,IAAI,CAAC;EAErD,IAAAC,oDAAyB,EAAC,YAAM;IAC9BhB,MAAM,IAAIU,UAAU,CAAC,IAAI,CAAC;EAC5B,CAAC,EAAE,CAACV,MAAM,CAAC,CAAC;EAEZ,IAAAiB,4BAAa,EAACZ,QAAQ,KAAKa,kBAAQ,CAACC,KAAK,IAAInB,MAAM,CAAC;;EAEpD;EACA,IAAAoB,8CAAsB,EACpBhB,QAAQ,EACR,OAAO,EACPJ,MAAM,IACJ,CAACW,OAAO,IACP,UAACU,KAAK,EAAK;IACV,IAAIP,UAAU,CAACQ,OAAO,IAAI,CAACR,UAAU,CAACQ,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAS,EAAE;MAC5EH,KAAK,CAACI,eAAe,EAAE;MACvB1B,OAAO,EAAE;IACX;EACF,CAAE,EACJ;IAAE2B,OAAO,EAAE;EAAK,CAAC,CAClB;;EAED;EACA,IAAMC,cAAc,GAAG,SAAjBA,cAAc;IAAA,OAASjB,UAAU,CAAC,KAAK,CAAC;EAAA;EAC9C,IAAMkB,iBAAiB,GAAG,IAAAC,sBAAU,EAACF,cAAc,EAAE,GAAG,CAAC;EACzDpB,KAAK,CAACuB,SAAS,CACb;IAAA,OAAOnB,OAAO,GAAGiB,iBAAiB,CAACG,GAAG,EAAE,GAAGH,iBAAiB,CAACI,KAAK,EAAE;EAAA,CAAC,EACrE,CAACJ,iBAAiB,EAAEjB,OAAO,CAAC,CAC7B;EAED,oBACE,oBAAC,wBAAW,6BACNT,SAAS;IACb,SAAS,EAAE,IAAA+B,gBAAU,4BAEnB5B,QAAQ,KAAKa,kBAAQ,CAACgB,GAAG,iCAAqC,EAC9DlC,MAAM,oCAAwC,EAC9CW,OAAO,qCAAyC,~~EAChD~~,~~IAAAwB~~,~~oCAAiB~~,~~4BAA+BtB,~~KAAK,CAAC,~~qCAEtDZ~~,SAAS,CACT;IACF,QAAQ,EAAC;EAAK,IAEbQ,OAAO,iBACN;IACE,OAAO,EAAE,iBAACY,KAAK,EAAK;MAClBA,KAAK,CAACI,eAAe,EAAE;MACvB1B,OAAO,EAAE;IACX,CAAE;IACF,SAAS;EAAqC,EAEjD,eACD;IACE,SAAS,8BAAmC;IAC5C,GAAG,EAAEe,UAAW;IAChB,cAAc,EAAEH,OAAO,GAAGgB,cAAc,~~GAAGS~~;EAAU,gBAErD;IAAK,SAAS;EAAwC,~~GAAE3B~~,OAAO,IAAIX,QAAQ,CAAO,CAC9E,CACM;AAElB,CAAC;AAAC"}
1	+ {"version":3,"file":"PanelHeaderContext.js","names":["sizeXClassNames","none","SizeType","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","useDOM","document","platform","usePlatform","React","useState","visible","setVisible","closing","useAdaptivity","sizeX","elementRef","useRef","useIsomorphicLayoutEffect","useScrollLock","Platform","VKCOM","useGlobalEventListener","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useTimeout","useEffect","set","clear","classNames","IOS","undefined"],"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n none: styles['PanelHeaderContext--sizeX-none'],\n [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\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 = 'none' } = 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 sizeXClassNames[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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAyD;AAAA;AAGzD,IAAMA,eAAe;EACnBC,IAAI;AAA0C,mDAC7CC,oBAAQ,CAACC,OAAO,4FAChBD,oBAAQ,CAACE,OAAO,6DAClB;AAOD;AACA;AACA;AACO,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,cAAqB,IAAAC,WAAM,GAAE;IAArBC,QAAQ,WAARA,QAAQ;EAChB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA8BC,KAAK,CAACC,QAAQ,CAACR,MAAM,CAAC;IAAA;IAA7CS,OAAO;IAAEC,UAAU;EAC1B,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACT,MAAM;EAClC,qBAA2B,IAAAY,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,UAAU,GAAGP,KAAK,CAACQ,MAAM,CAAiB,IAAI,CAAC;EAErD,IAAAC,oDAAyB,EAAC,YAAM;IAC9BhB,MAAM,IAAIU,UAAU,CAAC,IAAI,CAAC;EAC5B,CAAC,EAAE,CAACV,MAAM,CAAC,CAAC;EAEZ,IAAAiB,4BAAa,EAACZ,QAAQ,KAAKa,kBAAQ,CAACC,KAAK,IAAInB,MAAM,CAAC;;EAEpD;EACA,IAAAoB,8CAAsB,EACpBhB,QAAQ,EACR,OAAO,EACPJ,MAAM,IACJ,CAACW,OAAO,IACP,UAACU,KAAK,EAAK;IACV,IAAIP,UAAU,CAACQ,OAAO,IAAI,CAACR,UAAU,CAACQ,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAS,EAAE;MAC5EH,KAAK,CAACI,eAAe,EAAE;MACvB1B,OAAO,EAAE;IACX;EACF,CAAE,EACJ;IAAE2B,OAAO,EAAE;EAAK,CAAC,CAClB;;EAED;EACA,IAAMC,cAAc,GAAG,SAAjBA,cAAc;IAAA,OAASjB,UAAU,CAAC,KAAK,CAAC;EAAA;EAC9C,IAAMkB,iBAAiB,GAAG,IAAAC,sBAAU,EAACF,cAAc,EAAE,GAAG,CAAC;EACzDpB,KAAK,CAACuB,SAAS,CACb;IAAA,OAAOnB,OAAO,GAAGiB,iBAAiB,CAACG,GAAG,EAAE,GAAGH,iBAAiB,CAACI,KAAK,EAAE;EAAA,CAAC,EACrE,CAACJ,iBAAiB,EAAEjB,OAAO,CAAC,CAC7B;EAED,oBACE,oBAAC,wBAAW,6BACNT,SAAS;IACb,SAAS,EAAE,IAAA+B,gBAAU,4BAEnB5B,QAAQ,KAAKa,kBAAQ,CAACgB,GAAG,iCAAqC,EAC9DlC,MAAM,oCAAwC,EAC9CW,OAAO,qCAAyC,EAChDnB,eAAe,CAACqB,KAAK,CAAC,qCAEtBZ,SAAS,CACT;IACF,QAAQ,EAAC;EAAK,IAEbQ,OAAO,iBACN;IACE,OAAO,EAAE,iBAACY,KAAK,EAAK;MAClBA,KAAK,CAACI,eAAe,EAAE;MACvB1B,OAAO,EAAE;IACX,CAAE;IACF,SAAS;EAAqC,EAEjD,eACD;IACE,SAAS,8BAAmC;IAC5C,GAAG,EAAEe,UAAW;IAChB,cAAc,EAAEH,OAAO,GAAGgB,cAAc,GAAGQ;EAAU,gBAErD;IAAK,SAAS;EAAwC,GAAE1B,OAAO,IAAIX,QAAQ,CAAO,CAC9E,CACM;AAElB,CAAC;AAAC"}

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

@@ -9,10 +9,10 @@ exports.PanelHeaderEdit = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
-var _platform = require("../../lib/platform");
 var _icons = require("@vkontakte/icons");
 var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
+var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
 var _excluded = ["isActive", "editLabel", "doneLabel"];
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderEdit.js","names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","usePlatform","Platform","IOS"],"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * 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;AACA;AACA;AACA;AACA;~~AAAsD~~;~~AAiBtD~~;AACA;AACA;AACO,IAAMA,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,GAAGM,wBAAiB,GAAGC,wBAAiB;EACpE,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,oCAAiB;IAAC,cAAYL;EAAQ,GAAKD,SAAS,GAClDK,QAAQ,KAAKE,kBAAQ,CAACC,GAAG,GAAGP,OAAO,gBAAG,oBAAC,WAAW,OAAG,CACpC;AAExB,CAAC;AAAC"}
1	+ {"version":3,"file":"PanelHeaderEdit.js","names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","usePlatform","Platform","IOS"],"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\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;AACA;AACA;AACA;AACA;AAAmG;AAiBnG;AACA;AACA;AACO,IAAMA,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,GAAGM,wBAAiB,GAAGC,wBAAiB;EACpE,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,oCAAiB;IAAC,cAAYL;EAAQ,GAAKD,SAAS,GAClDK,QAAQ,KAAKE,kBAAQ,CAACC,GAAG,GAAGP,OAAO,gBAAG,oBAAC,WAAW,OAAG,CACpC;AAExB,CAAC;AAAC"}

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

@@ -9,11 +9,11 @@ exports.PanelHeaderSubmit = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
 var _icons = require("@vkontakte/icons");
-var _platform = require("../../lib/platform");
 var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
 var _utils = require("../../lib/utils");
+var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
 var _excluded = ["children"];
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","getTitleFromChildren","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;AACA;AACA;AACA;AACA;AACA;~~AAAuD~~;~~AAEvD~~;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,oCAAiB;IAAC,cAAY,IAAAC,2BAAoB,EAACJ,QAAQ,CAAE;IAAC,OAAO;EAAA,GAAKC,SAAS,GACjFC,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAGN,QAAQ,gBAAG,oBAAC,wBAAiB,OAAG,CAC3C;AAExB,CAAC;AAAC"}
1	+ {"version":3,"file":"PanelHeaderSubmit.js","names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","getTitleFromChildren","Platform","IOS"],"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\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;AACA;AACA;AACA;AACA;AACA;AAAmG;AAEnG;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,oCAAiB;IAAC,cAAY,IAAAC,2BAAoB,EAACJ,QAAQ,CAAE;IAAC,OAAO;EAAA,GAAKC,SAAS,GACjFC,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAGN,QAAQ,gBAAG,oBAAC,wBAAiB,OAAG,CAC3C;AAExB,CAAC;AAAC"}

package/dist/cjs/components/Placeholder/Placeholder.js CHANGED Viewed

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _Title = require("../Typography/Title/Title");
 var _Headline = require("../Typography/Headline/Headline");
+var _Title = require("../Typography/Title/Title");
 var _excluded = ["icon", "header", "action", "children", "stretched", "getRootRef", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder

package/dist/cjs/components/Placeholder/Placeholder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Placeholder.js","names":["Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps","classNames","hasReactNode"],"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { ~~Title~~ } from '~~../Typography/Title/Title~~';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { ~~HasRootRef~~ } from '~~../../types~~';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Иконка\n /\n icon?: React.ReactNode;\n /\n Заголовок плейсхолдера\n /\n header?: React.ReactNode;\n /\n Кнопка действия\n /\n action?: React.ReactNode;\n /\n Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n /\n stretched?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n icon,\n header,\n action,\n children,\n stretched,\n getRootRef,\n className,\n ...restProps\n}: PlaceholderProps) => (\n <div\n {...restProps}\n ref={getRootRef}\n className={classNames(\n styles['Placeholder'],\n stretched && styles['Placeholder--stretched'],\n className,\n )}\n >\n <div className={styles['Placeholder__in']}>\n {hasReactNode(icon) && <div className={styles['Placeholder__icon']}>{icon}</div>}\n {hasReactNode(header) && (\n <Title level=\"2\" weight=\"2\" className={styles['Placeholder__header']}>\n {header}\n </Title>\n )}\n {hasReactNode(children) && (\n <Headline weight=\"3\" className={styles['Placeholder__text']}>\n {children}\n </Headline>\n )}\n {hasReactNode(action) && <div className={styles['Placeholder__action']}>{action}</div>}\n </div>\n </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;~~AACA~~;AACA;~~AAA2D~~;~~AAyB3D~~;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW;EAAA,IACtBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,sDACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAE,IAAAG,gBAAU,qBAEnBJ,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvC,IAAAG,kBAAY,EAACT,IAAI,CAAC,iBAAI;IAAK,SAAS;EAA8B,GAAEA,IAAI,CAAO,EAC/E,IAAAS,kBAAY,EAACR,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACA,IAAAQ,kBAAY,EAACN,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACA,IAAAM,kBAAY,EAACP,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,MAAM,CAAO,CAClF,CACF;AAAA,CACP;AAAC"}
1	+ {"version":3,"file":"Placeholder.js","names":["Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps","classNames","hasReactNode"],"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Иконка\n /\n icon?: React.ReactNode;\n /\n Заголовок плейсхолдера\n /\n header?: React.ReactNode;\n /\n Кнопка действия\n /\n action?: React.ReactNode;\n /\n Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n /\n stretched?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n icon,\n header,\n action,\n children,\n stretched,\n getRootRef,\n className,\n ...restProps\n}: PlaceholderProps) => (\n <div\n {...restProps}\n ref={getRootRef}\n className={classNames(\n styles['Placeholder'],\n stretched && styles['Placeholder--stretched'],\n className,\n )}\n >\n <div className={styles['Placeholder__in']}>\n {hasReactNode(icon) && <div className={styles['Placeholder__icon']}>{icon}</div>}\n {hasReactNode(header) && (\n <Title level=\"2\" weight=\"2\" className={styles['Placeholder__header']}>\n {header}\n </Title>\n )}\n {hasReactNode(children) && (\n <Headline weight=\"3\" className={styles['Placeholder__text']}>\n {children}\n </Headline>\n )}\n {hasReactNode(action) && <div className={styles['Placeholder__action']}>{action}</div>}\n </div>\n </div>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AAAkD;AAwBlD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW;EAAA,IACtBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,sDACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAE,IAAAG,gBAAU,qBAEnBJ,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvC,IAAAG,kBAAY,EAACT,IAAI,CAAC,iBAAI;IAAK,SAAS;EAA8B,GAAEA,IAAI,CAAO,EAC/E,IAAAS,kBAAY,EAACR,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACA,IAAAQ,kBAAY,EAACN,QAAQ,CAAC,iBACrB,oBAAC,kBAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACA,IAAAM,kBAAY,EAACP,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,MAAM,CAAO,CAClF,CACF;AAAA,CACP;AAAC"}

package/dist/cjs/components/PlatformProvider/PlatformProvider.js CHANGED Viewed

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PlatformProvider = PlatformProvider;
 var _react = _interopRequireDefault(require("react"));
-var _ConfigProviderOverride = require("../ConfigProvider/ConfigProviderOverride");
-var _tokensClassProvider = require("../../lib/tokensClassProvider");
 var _useAppearance = require("../../hooks/useAppearance");
+var _tokensClassProvider = require("../../lib/tokensClassProvider");
+var _ConfigProviderOverride = require("../ConfigProvider/ConfigProviderOverride");
 /**
  * Компонент, позволяющий переопределить платформу для части приложения
  *

package/dist/cjs/components/PlatformProvider/PlatformProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlatformProvider.js","names":["PlatformProvider","value","children","appearance","useAppearance"],"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~ConfigProviderOverride~~ } from '~~../ConfigProvider~~/~~ConfigProviderOverride~~';\nimport { ~~TokensClassProvider~~ } from '../../lib/~~tokensClassProvider~~';\nimport { ~~PlatformType~~ } from '../../lib/~~platform~~';\nimport { ~~useAppearance~~ } from '~~../../hooks~~/~~useAppearance~~';\n\nexport interface PlatformProviderProps {\n /*\n Платформа\n /\n value: PlatformType;\n children: React.ReactNode;\n}\n\n/\n Компонент, позволяющий переопределить платформу для части приложения\n \n @version 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n const appearance = useAppearance();\n\n return (\n <ConfigProviderOverride platform={value}>\n <TokensClassProvider platform={value} appearance={appearance}>\n {children}\n </TokensClassProvider>\n </ConfigProviderOverride>\n );\n}\n"],"mappings":";;;;;;;AAAA;AACA;AACA;~~AAEA;~~AAUA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAgB,OAA6C;EAAA,IAA1CC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAChD,IAAMC,UAAU,GAAG,IAAAC,4BAAa,GAAE;EAElC,oBACE,6BAAC,8CAAsB;IAAC,QAAQ,EAAEH;EAAM,gBACtC,6BAAC,wCAAmB;IAAC,QAAQ,EAAEA,KAAM;IAAC,UAAU,EAAEE;EAAW,GAC1DD,QAAQ,CACW,CACC;AAE7B"}
1	+ {"version":3,"file":"PlatformProvider.js","names":["PlatformProvider","value","children","appearance","useAppearance"],"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n /*\n Платформа\n /\n value: PlatformType;\n children: React.ReactNode;\n}\n\n/\n Компонент, позволяющий переопределить платформу для части приложения\n \n @version 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n const appearance = useAppearance();\n\n return (\n <ConfigProviderOverride platform={value}>\n <TokensClassProvider platform={value} appearance={appearance}>\n {children}\n </TokensClassProvider>\n </ConfigProviderOverride>\n );\n}\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AAUA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,gBAAgB,OAA6C;EAAA,IAA1CC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAChD,IAAMC,UAAU,GAAG,IAAAC,4BAAa,GAAE;EAElC,oBACE,6BAAC,8CAAsB;IAAC,QAAQ,EAAEH;EAAM,gBACtC,6BAAC,wCAAmB;IAAC,QAAQ,EAAEA,KAAM;IAAC,UAAU,EAAEE;EAAW,GAC1DD,QAAQ,CACW,CACC;AAE7B"}

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

@@ -10,9 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _AppRootPortal = require("../AppRoot/AppRootPortal");
-var _dom = require("../../lib/dom");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _dom = require("../../lib/dom");
+var _AppRootPortal = require("../AppRoot/AppRootPortal");
 var _excluded = ["popout", "modal", "children", "getRootRef", "className"];
 var PopoutRootPopout = function PopoutRootPopout(_ref) {
   var children = _ref.children;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoutRoot.js","names":["PopoutRootPopout","children","useAdaptivityWithJSMediaQueries","isDesktop","classNames","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","useDOM","document","React","useEffect","blurActiveElement"],"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~HasRootRef~~ } from '../../~~types~~';\nimport { ~~AppRootPortal~~ } from '~~../AppRoot~~/~~AppRootPortal~~';\nimport { ~~blurActiveElement,~~ ~~useDOM~~ } from '../../~~lib/dom~~';\nimport { ~~useAdaptivityWithJSMediaQueries~~ } from '~~../../hooks~~/~~useAdaptivityWithJSMediaQueries~~';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n return (\n <div\n className={classNames(\n styles['PopoutRoot__popout'],\n isDesktop && styles['PopoutRoot__popout--absolute'],\n )}\n >\n {children}\n </div>\n );\n};\n\ninterface PopoutRootModalProps {\n children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n popout?: React.ReactNode;\n modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n popout,\n modal,\n children,\n getRootRef,\n className,\n ...restProps\n}: PopoutRootProps) => {\n const { document } = useDOM();\n\n React.useEffect(() => {\n popout && blurActiveElement(document);\n }, [document, popout]);\n\n return (\n <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n {children}\n <AppRootPortal>\n {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n </AppRootPortal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;~~AAEA;~~AACA;AACA;~~AAA8F~~;~~AAO9F~~,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,4BAEnBD,SAAS,sCAA0C;EACnD,GAEDF,QAAQ,CACL;AAEV,CAAC;AAMD,IAAMI,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCJ,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASM,IAAMK,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLP,QAAQ,SAARA,QAAQ;IACRQ,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqB,IAAAC,WAAM,GAAE;IAArBC,QAAQ,WAARA,QAAQ;EAEhBC,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBR,MAAM,IAAI,IAAAS,sBAAiB,EAACH,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEN,MAAM,CAAC,CAAC;EAEtB,oBACE,sDAASI,SAAS;IAAE,SAAS,EAAE,IAAAP,gBAAU,oBAAuBM,SAAS,CAAE;IAAC,GAAG,EAAED;EAAW,IACzFR,QAAQ,eACT,oBAAC,4BAAa,QACX,CAAC,CAACM,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"PopoutRoot.js","names":["PopoutRootPopout","children","useAdaptivityWithJSMediaQueries","isDesktop","classNames","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","useDOM","document","React","useEffect","blurActiveElement"],"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n return (\n <div\n className={classNames(\n styles['PopoutRoot__popout'],\n isDesktop && styles['PopoutRoot__popout--absolute'],\n )}\n >\n {children}\n </div>\n );\n};\n\ninterface PopoutRootModalProps {\n children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n popout?: React.ReactNode;\n modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n popout,\n modal,\n children,\n getRootRef,\n className,\n ...restProps\n}: PopoutRootProps) => {\n const { document } = useDOM();\n\n React.useEffect(() => {\n popout && blurActiveElement(document);\n }, [document, popout]);\n\n return (\n <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n {children}\n <AppRootPortal>\n {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n </AppRootPortal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAyD;AAOzD,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,4BAEnBD,SAAS,sCAA0C;EACnD,GAEDF,QAAQ,CACL;AAEV,CAAC;AAMD,IAAMI,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCJ,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASM,IAAMK,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLP,QAAQ,SAARA,QAAQ;IACRQ,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqB,IAAAC,WAAM,GAAE;IAArBC,QAAQ,WAARA,QAAQ;EAEhBC,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBR,MAAM,IAAI,IAAAS,sBAAiB,EAACH,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEN,MAAM,CAAC,CAAC;EAEtB,oBACE,sDAASI,SAAS;IAAE,SAAS,EAAE,IAAAP,gBAAU,oBAAuBM,SAAS,CAAE;IAAC,GAAG,EAAED;EAAW,IACzFR,QAAQ,eACT,oBAAC,4BAAa,QACX,CAAC,CAACM,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC;AAAC"}

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

@@ -11,11 +11,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _platform = require("../../lib/platform");
-var _useTimeout = require("../../hooks/useTimeout");
-var _usePlatform = require("../../hooks/usePlatform");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+var _usePlatform = require("../../hooks/usePlatform");
+var _useTimeout = require("../../hooks/useTimeout");
 var _dom = require("../../lib/dom");
+var _platform = require("../../lib/platform");
 var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children", "onClick", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoutWrapper.js","names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","useDOM","window","useGlobalEventListener","preventDefault","passive","classNames","styles","undefined"],"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~Platform~~ } from '../../~~lib~~/~~platform~~';\nimport { ~~useTimeout~~ } from '../../hooks/~~useTimeout~~';\nimport { ~~usePlatform~~ } from '../../hooks/~~usePlatform~~';\nimport { ~~useGlobalEventListener~~ } from '../../~~hooks~~/~~useGlobalEventListener~~';\nimport { ~~useDOM~~ } from '../../lib/~~dom~~';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n hasMask?: boolean;\n fixed?: boolean;\n alignY?: 'top' \| 'center' \| 'bottom';\n alignX?: 'left' \| 'center' \| 'right';\n closing?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n alignY = 'center',\n alignX = 'center',\n closing = false,\n hasMask = true,\n fixed = true,\n children,\n onClick,\n className,\n ...restProps\n}: PopoutWrapperProps) => {\n const platform = usePlatform();\n const [opened, setOpened] = React.useState(!hasMask);\n const elRef = React.useRef<HTMLDivElement>(null);\n\n const onFadeInEnd = (e?: React.AnimationEvent) => {\n if (!e \|\| e.animationName === 'vkui-animation-full-fade-in') {\n setOpened(true);\n }\n };\n const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n React.useEffect(() => {\n !opened && animationFinishFallback.set();\n }, [animationFinishFallback, opened]);\n\n const { window } = useDOM();\n useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n passive: false,\n });\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['PopoutWrapper'],\n styles[`PopoutWrapper--alignY-${alignY}`],\n styles[`PopoutWrapper--alignX-${alignX}`],\n closing && styles['PopoutWrapper--closing'],\n opened && styles['PopoutWrapper--opened'],\n fixed && styles['PopoutWrapper--fixed'],\n hasMask && styles['PopoutWrapper--masked'],\n className,\n )}\n onAnimationEnd={opened ? undefined : onFadeInEnd}\n ref={elRef}\n >\n <div className={styles['PopoutWrapper__container']}>\n <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n <div className={styles['PopoutWrapper__content']}>{children}</div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAAuC~~;~~AAWvC~~;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAUA;EAAA,uBATxBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,oBACjBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,oBACfC,OAAO;IAAPA,OAAO,6BAAG,IAAI;IAAA,kBACdC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACZC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA4BC,KAAK,CAACC,QAAQ,CAAC,CAACT,OAAO,CAAC;IAAA;IAA7CU,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGJ,KAAK,CAACK,MAAM,CAAiB,IAAI,CAAC;EAEhD,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAwB,EAAK;IAChD,IAAI,CAACA,CAAC,IAAIA,CAAC,CAACC,aAAa,KAAK,6BAA6B,EAAE;MAC3DL,SAAS,CAAC,IAAI,CAAC;IACjB;EACF,CAAC;EACD,IAAMM,uBAAuB,GAAG,IAAAC,sBAAU,EAACJ,WAAW,EAAER,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;EAC9FZ,KAAK,CAACa,SAAS,CAAC,YAAM;IACpB,CAACX,MAAM,IAAIO,uBAAuB,CAACK,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACL,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmB,IAAAa,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EACd,IAAAC,8CAAsB,EAACD,MAAM,EAAE,WAAW,EAAE,UAACT,CAAC;IAAA,OAAKA,CAAC,CAACW,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,sDACMtB,SAAS;IACb,SAAS,EAAE,IAAAuB,gBAAU,uBAEnBC,MAAM,iCAA0BhC,MAAM,EAAG,EACzCgC,MAAM,iCAA0B/B,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CW,MAAM,+BAAmC,EACzCT,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEM,MAAM,GAAGoB,SAAS,GAAGhB,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAET;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"PopoutWrapper.js","names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","useDOM","window","useGlobalEventListener","preventDefault","passive","classNames","styles","undefined"],"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n hasMask?: boolean;\n fixed?: boolean;\n alignY?: 'top' \| 'center' \| 'bottom';\n alignX?: 'left' \| 'center' \| 'right';\n closing?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n alignY = 'center',\n alignX = 'center',\n closing = false,\n hasMask = true,\n fixed = true,\n children,\n onClick,\n className,\n ...restProps\n}: PopoutWrapperProps) => {\n const platform = usePlatform();\n const [opened, setOpened] = React.useState(!hasMask);\n const elRef = React.useRef<HTMLDivElement>(null);\n\n const onFadeInEnd = (e?: React.AnimationEvent) => {\n if (!e \|\| e.animationName === 'vkui-animation-full-fade-in') {\n setOpened(true);\n }\n };\n const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n React.useEffect(() => {\n !opened && animationFinishFallback.set();\n }, [animationFinishFallback, opened]);\n\n const { window } = useDOM();\n useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n passive: false,\n });\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['PopoutWrapper'],\n styles[`PopoutWrapper--alignY-${alignY}`],\n styles[`PopoutWrapper--alignX-${alignX}`],\n closing && styles['PopoutWrapper--closing'],\n opened && styles['PopoutWrapper--opened'],\n fixed && styles['PopoutWrapper--fixed'],\n hasMask && styles['PopoutWrapper--masked'],\n className,\n )}\n onAnimationEnd={opened ? undefined : onFadeInEnd}\n ref={elRef}\n >\n <div className={styles['PopoutWrapper__container']}>\n <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n <div className={styles['PopoutWrapper__content']}>{children}</div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8C;AAW9C;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAUA;EAAA,uBATxBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,oBACjBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,oBACfC,OAAO;IAAPA,OAAO,6BAAG,IAAI;IAAA,kBACdC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACZC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA4BC,KAAK,CAACC,QAAQ,CAAC,CAACT,OAAO,CAAC;IAAA;IAA7CU,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGJ,KAAK,CAACK,MAAM,CAAiB,IAAI,CAAC;EAEhD,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAwB,EAAK;IAChD,IAAI,CAACA,CAAC,IAAIA,CAAC,CAACC,aAAa,KAAK,6BAA6B,EAAE;MAC3DL,SAAS,CAAC,IAAI,CAAC;IACjB;EACF,CAAC;EACD,IAAMM,uBAAuB,GAAG,IAAAC,sBAAU,EAACJ,WAAW,EAAER,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;EAC9FZ,KAAK,CAACa,SAAS,CAAC,YAAM;IACpB,CAACX,MAAM,IAAIO,uBAAuB,CAACK,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACL,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmB,IAAAa,WAAM,GAAE;IAAnBC,MAAM,WAANA,MAAM;EACd,IAAAC,8CAAsB,EAACD,MAAM,EAAE,WAAW,EAAE,UAACT,CAAC;IAAA,OAAKA,CAAC,CAACW,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,sDACMtB,SAAS;IACb,SAAS,EAAE,IAAAuB,gBAAU,uBAEnBC,MAAM,iCAA0BhC,MAAM,EAAG,EACzCgC,MAAM,iCAA0B/B,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CW,MAAM,+BAAmC,EACzCT,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEM,MAAM,GAAGoB,SAAS,GAAGhB,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAET;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -11,15 +11,15 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _dom = require("../../lib/dom");
 var _vkjs = require("@vkontakte/vkjs");
-var _Popper = require("../Popper/Popper");
-var _FocusTrap = require("../FocusTrap/FocusTrap");
-var _useTimeout = require("../../hooks/useTimeout");
-var _useExternRef = require("../../hooks/useExternRef");
 var _useEventListener = require("../../hooks/useEventListener");
+var _useExternRef = require("../../hooks/useExternRef");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePatchChildrenRef3 = require("../../hooks/usePatchChildrenRef");
+var _useTimeout = require("../../hooks/useTimeout");
+var _dom = require("../../lib/dom");
+var _FocusTrap = require("../FocusTrap/FocusTrap");
+var _Popper = require("../Popper/Popper");
 var _excluded = ["action", "shown", "showDelay", "hideDelay", "offsetDistance", "content", "children", "style", "className", "getRef", "onShownChange"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","classNames","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' \| 'arrowClassName'> {\n /*\n Механика вызова всплывающего окна.\n \n - `\"click\"` – показывается/скрывается только при нажатии.\n * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n \n > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n * > и выпадающего окна.\n /\n action?: 'click' \| 'hover';\n /\n Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n /\n shown?: boolean;\n /\n Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n \n > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n /\n showDelay?: number;\n /\n Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n \n > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n /\n hideDelay?: number;\n /\n Содержимое всплывающего окна.\n /\n content?: React.ReactNode;\n /\n Целевой элемент. Всплывающее окно появится возле него.\n \n > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n /\n children?: React.ReactElement;\n /\n Вызывается при каждом изменении видимости всплывающего окна.\n /\n onShownChange?(shown: boolean): void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n action = 'click',\n shown: shownProp,\n showDelay = 150,\n hideDelay = 150,\n offsetDistance = 8,\n content,\n children,\n style: styleProp,\n className,\n getRef,\n onShownChange,\n ...restProps\n}: PopoverProps) => {\n const { document } = useDOM();\n\n const hoverable = action === 'hover';\n const hovered = React.useRef(false);\n const [computedShown, setComputedShown] = React.useState(shownProp \|\| false);\n const [dropdownNode, setPopperNode] = React.useState<HTMLElement \| null>(null);\n\n const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n const [childRef, child] = usePatchChildrenRef(children);\n\n const setShown = (value: boolean) => {\n if (typeof shownProp !== 'boolean') {\n setComputedShown(value);\n }\n typeof onShownChange === 'function' && onShownChange(value);\n };\n\n const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n const handleTargetEnter = () => {\n hovered.current = true;\n hideTimeout.clear();\n showTimeout.set();\n };\n\n const handleTargetClick = () => {\n if (hovered.current && shown) {\n return;\n }\n setShown(!shown);\n };\n\n const handleTargetLeave = () => {\n hovered.current = false;\n showTimeout.clear();\n hideTimeout.set();\n };\n\n const handleContentKeyDownEscape = () => {\n setShown(false);\n };\n\n const handleOutsideClick = (e: MouseEvent) => {\n if (\n dropdownNode &&\n !childRef.current?.contains(e.target as Node) &&\n !dropdownNode.contains(e.target as Node)\n ) {\n setShown(false);\n }\n };\n\n useGlobalEventListener(document, 'click', handleOutsideClick, {\n capture: true,\n passive: true,\n });\n const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n const targetClickEvent = useEventListener('click', handleTargetClick);\n const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n React.useEffect(() => {\n if (!childRef.current) {\n return;\n }\n\n targetClickEvent.add(childRef.current);\n }, [childRef, targetClickEvent]);\n\n React.useEffect(() => {\n if (!childRef.current) {\n return;\n }\n\n if (hoverable) {\n targetEnterListener.add(childRef.current);\n targetLeaveListener.add(childRef.current);\n }\n\n return () => {\n targetEnterListener.remove();\n targetLeaveListener.remove();\n };\n }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n return (\n <React.Fragment>\n {child}\n {shown && (\n <Popper\n {...restProps}\n className={classNames(styles['Popover'], className)}\n targetRef={childRef}\n getRef={patchedPopperRef}\n offsetDistance={offsetDistance}\n style={\n // Reason: Typescript ругается на CSS Custom Properties в объекте\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n {\n ...styleProp,\n '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n } as React.CSSProperties\n }\n renderContent={({ className: wrapperClassName }) => (\n <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n {content}\n </FocusTrap>\n )}\n onMouseOver={hoverable ? hideTimeout.clear : undefined}\n onMouseOut={hoverable ? handleTargetLeave : undefined}\n />\n )}\n </React.Fragment>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.js","names":["Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","useDOM","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","classNames","wrapperClassName","undefined"],"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' \| 'arrowClassName'> {\n /*\n Механика вызова всплывающего окна.\n \n - `\"click\"` – показывается/скрывается только при нажатии.\n * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n \n > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n * > и выпадающего окна.\n /\n action?: 'click' \| 'hover';\n /\n Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n /\n shown?: boolean;\n /\n Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n \n > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n /\n showDelay?: number;\n /\n Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n \n > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n /\n hideDelay?: number;\n /\n Содержимое всплывающего окна.\n /\n content?: React.ReactNode;\n /\n Целевой элемент. Всплывающее окно появится возле него.\n \n > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n /\n children?: React.ReactElement;\n /\n Вызывается при каждом изменении видимости всплывающего окна.\n /\n onShownChange?(shown: boolean): void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n action = 'click',\n shown: shownProp,\n showDelay = 150,\n hideDelay = 150,\n offsetDistance = 8,\n content,\n children,\n style: styleProp,\n className,\n getRef,\n onShownChange,\n ...restProps\n}: PopoverProps) => {\n const { document } = useDOM();\n\n const hoverable = action === 'hover';\n const hovered = React.useRef(false);\n const [computedShown, setComputedShown] = React.useState(shownProp \|\| false);\n const [dropdownNode, setPopperNode] = React.useState<HTMLElement \| null>(null);\n\n const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n const [childRef, child] = usePatchChildrenRef(children);\n\n const setShown = (value: boolean) => {\n if (typeof shownProp !== 'boolean') {\n setComputedShown(value);\n }\n typeof onShownChange === 'function' && onShownChange(value);\n };\n\n const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n const handleTargetEnter = () => {\n hovered.current = true;\n hideTimeout.clear();\n showTimeout.set();\n };\n\n const handleTargetClick = () => {\n if (hovered.current && shown) {\n return;\n }\n setShown(!shown);\n };\n\n const handleTargetLeave = () => {\n hovered.current = false;\n showTimeout.clear();\n hideTimeout.set();\n };\n\n const handleContentKeyDownEscape = () => {\n setShown(false);\n };\n\n const handleOutsideClick = (e: MouseEvent) => {\n if (\n dropdownNode &&\n !childRef.current?.contains(e.target as Node) &&\n !dropdownNode.contains(e.target as Node)\n ) {\n setShown(false);\n }\n };\n\n useGlobalEventListener(document, 'click', handleOutsideClick, {\n capture: true,\n passive: true,\n });\n const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n const targetClickEvent = useEventListener('click', handleTargetClick);\n const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n React.useEffect(() => {\n if (!childRef.current) {\n return;\n }\n\n targetClickEvent.add(childRef.current);\n }, [childRef, targetClickEvent]);\n\n React.useEffect(() => {\n if (!childRef.current) {\n return;\n }\n\n if (hoverable) {\n targetEnterListener.add(childRef.current);\n targetLeaveListener.add(childRef.current);\n }\n\n return () => {\n targetEnterListener.remove();\n targetLeaveListener.remove();\n };\n }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n return (\n <React.Fragment>\n {child}\n {shown && (\n <Popper\n {...restProps}\n className={classNames(styles['Popover'], className)}\n targetRef={childRef}\n getRef={patchedPopperRef}\n offsetDistance={offsetDistance}\n style={\n // Reason: Typescript ругается на CSS Custom Properties в объекте\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n {\n ...styleProp,\n '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n } as React.CSSProperties\n }\n renderContent={({ className: wrapperClassName }) => (\n <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n {content}\n </FocusTrap>\n )}\n onMouseOver={hoverable ? hideTimeout.clear : undefined}\n onMouseOut={hoverable ? handleTargetLeave : undefined}\n />\n )}\n </React.Fragment>\n );\n};\n"],"mappings":"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"}