@vkontakte/vkui 5.1.2 → 5.2.1

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "primary", "label", "className"];
 import * as React from 'react';
-import { Tappable } from '../Tappable/Tappable';
 import { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';
-import { warnOnce } from '../../lib/warnOnce';
 import { usePlatform } from '../../hooks/usePlatform';
-import { getTitleFromChildren } from '../../lib/utils';
 import { Platform } from '../../lib/platform';
+import { getTitleFromChildren } from '../../lib/utils';
+import { warnOnce } from '../../lib/warnOnce';
+import { Tappable } from '../Tappable/Tappable';
 import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import "./PanelHeaderButton.module.css";

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderButton.js","names":["React","Tappable","classNames","isPrimitiveReactNode","warnOnce","usePlatform","getTitleFromChildren","Platform","Text","Title","getPlatformClassName","platform","ButtonTypography","primary","children","IOS","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { 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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"}
+{"version":3,"file":"PanelHeaderButton.js","names":["React","classNames","isPrimitiveReactNode","usePlatform","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","getPlatformClassName","platform","ButtonTypography","primary","children","IOS","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href"],"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { 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/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css

@@ -1 +1 @@
-.vkuiPanelHeaderButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;box-shadow:none;color:currentColor;display:block;margin:0;padding:0;position:relative}.vkuiPanelHeaderButton[disabled]{opacity:.6}.vkuiPanelHeaderButton .vkuiCounter{padding:0;position:absolute;right:2px;top:8px}.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 12px}.vkuiPanelHeaderButton--ios{align-items:center;display:flex;font-size:17px;position:relative}.vkuiPanelHeaderButton--ios.vkuiPanelHeaderButton--primitive{height:44px;line-height:44px}.vkuiPanelHeaderButton--ios .vkuiIcon--24{padding:10px}.vkuiPanelHeaderButton--ios .vkuiIcon--28{padding:8px}.vkuiPanelHeaderButton--android.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderButton--android .vkuiIcon--24{padding:12px}.vkuiPanelHeaderButton--android .vkuiIcon--28{padding:10px}.vkuiPanelHeaderButton--vkcom{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiPanelHeaderButton--vkcom>:not(.vkuiCounter){opacity:.7;transition:opacity .3s}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--active>:not(.vkuiCounter),.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--hover>:not(.vkuiCounter){opacity:1}.vkuiPanelHeaderButton--vkcom{align-items:center;display:flex;padding:10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderBack--sizeX-compact.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}@media not (min-width:768px){.vkuiPanelHeaderBack--sizeX-none.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}}
+.vkuiPanelHeaderButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;box-shadow:none;color:currentColor;display:block;margin:0;padding:0;position:relative}.vkuiPanelHeaderButton[disabled]{opacity:.6}.vkuiPanelHeaderButton .vkuiCounter{padding:0;position:absolute;right:2px;top:8px}.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 12px}.vkuiPanelHeaderButton--ios{align-items:center;display:flex;font-size:17px;position:relative}.vkuiPanelHeaderButton--ios.vkuiPanelHeaderButton--primitive{height:44px;line-height:44px}.vkuiPanelHeaderButton--ios .vkuiIcon--24{padding:10px}.vkuiPanelHeaderButton--ios .vkuiIcon--28{padding:8px}.vkuiPanelHeaderButton--android.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderButton--android .vkuiIcon--24{padding:12px}.vkuiPanelHeaderButton--android .vkuiIcon--28{padding:10px}.vkuiPanelHeaderButton--vkcom{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiPanelHeaderButton--vkcom>:not(.vkuiCounter){opacity:.7;transition:opacity .3s}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--active>:not(.vkuiCounter),.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--hover>:not(.vkuiCounter){opacity:1}.vkuiPanelHeaderButton--vkcom{align-items:center;display:flex;padding:10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderBack--sizeX-compact.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}@media (max-width:767.9px){.vkuiPanelHeaderBack--sizeX-none.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}}

package/dist/cssm/components/PanelHeaderClose/PanelHeaderClose.js

@@ -3,10 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children"];
 import * as React from 'react';
 import { Icon28CancelOutline } from '@vkontakte/icons';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
+import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { getTitleFromChildren } from '../../lib/utils';
-import { usePlatform } from '../../hooks/usePlatform';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderClose

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

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

package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js

@@ -4,12 +4,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "style", "aside", "status", "before", "children", "onClick"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Tappable } from '../Tappable/Tappable';
-import { usePlatform } from '../../hooks/usePlatform';
 import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
-import { Platform } from '../../lib/platform';
 import { Text } from '../Typography/Text/Text';
 import "./PanelHeaderContent.module.css";
 var PanelHeaderChildren = function PanelHeaderChildren(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContent.js","names":["React","classNames","hasReactNode","Tappable","usePlatform","getPlatformClassName","Footnote","Headline","Platform","Text","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","ANDROID"],"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Platform } from '../../lib/platform';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps {\n  hasStatus: boolean;\n  hasBefore: boolean;\n  children?: React.ReactNode;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        getPlatformClassName(styles['PanelHeaderContent'], platform),\n        className,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div className={styles['PanelHeaderContent__children']}>\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,IAAI,QAAQ,yBAAyB;AAAC;AAe/C,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqE;EAAA,IAA/DC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAIU,QAAQ,KAAKN,QAAQ,CAACO,KAAK,EAAE;IAC/B,oBACE,oBAAC,IAAI;MAAC,SAAS,EAAC,KAAK;MAAC,MAAM,EAAC;IAAG,GAC7BF,QAAQ,CACJ;EAEX;EAEA,OAAOF,SAAS,IAAIC,SAAS,gBAC3B,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,MAAM,EAAC;EAAG,GACjCC,QAAQ,CACA,gBAEX;IAAK,SAAS;EAA4C,GAAEA,QAAQ,CACrE;AACH,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkB,QASA;EAAA,IAR7BC,SAAS,SAATA,SAAS;IACTC,KAAK,SAALA,KAAK;IACLC,KAAK,SAALA,KAAK;IACLC,MAAM,SAANA,MAAM;IACNC,MAAM,SAANA,MAAM;IACNR,QAAQ,SAARA,QAAQ;IACRS,OAAO,SAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGF,OAAO,GAAGnB,QAAQ,GAAG,KAAK;EAC9C,IAAMsB,SAAS,GAAGH,OAAO,GAAG,CAAC,CAAC,GAAGC,SAAS;EAC1C,IAAMT,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAMsB,OAAO,GAAGJ,OAAO,mCAEdC,SAAS;IACZD,OAAO,EAAPA,OAAO;IACPK,iBAAiB,EAAE,GAAG;IACtBC,SAAS,EAAEd,QAAQ,KAAKN,QAAQ,CAACqB,GAAG;IACpCC,UAAU,EAAE;EAAS,KAEvB,CAAC,CAAC;EAEN,oBACE,wCACML,SAAS;IACb,KAAK,EAAEP,KAAM;IACb,SAAS,EAAEjB,UAAU,2BAEnBI,oBAAoB,2BAA+BS,QAAQ,CAAC,EAC5DG,SAAS;EACT,IAEDf,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAuC,GAAEA,MAAM,CAAO,eAC7F,oBAAC,WAAW,eACNK,OAAO;IACX,SAAS,EAAEzB,UAAU,+BAEnB,CAACoB,MAAM,IAAIP,QAAQ,KAAKN,QAAQ,CAACuB,OAAO,0CAA8C;EACtF,IAED7B,YAAY,CAACkB,MAAM,CAAC,iBACnB,oBAAC,QAAQ;IAAC,SAAS;EAAuC,GAAEA,MAAM,CACnE,eACD;IAAK,SAAS;EAAyC,gBACrD,oBAAC,mBAAmB;IAAC,SAAS,EAAElB,YAAY,CAACkB,MAAM,CAAE;IAAC,SAAS,EAAElB,YAAY,CAACmB,MAAM;EAAE,GACnFR,QAAQ,CACW,EACrBX,YAAY,CAACiB,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAsC,GAAEA,KAAK,CAC5D,CACG,EACLjB,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAsC,EAAG,CACpE,CACV;AAEV,CAAC"}
+{"version":3,"file":"PanelHeaderContent.js","names":["React","classNames","hasReactNode","getPlatformClassName","usePlatform","Platform","Tappable","Footnote","Headline","Text","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","PanelHeaderContent","className","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","ANDROID"],"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { 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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,IAAI,QAAQ,yBAAyB;AAAC;AAe/C,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqE;EAAA,IAA/DC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAIU,QAAQ,KAAKT,QAAQ,CAACU,KAAK,EAAE;IAC/B,oBACE,oBAAC,IAAI;MAAC,SAAS,EAAC,KAAK;MAAC,MAAM,EAAC;IAAG,GAC7BF,QAAQ,CACJ;EAEX;EAEA,OAAOF,SAAS,IAAIC,SAAS,gBAC3B,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,MAAM,EAAC;EAAG,GACjCC,QAAQ,CACA,gBAEX;IAAK,SAAS;EAA4C,GAAEA,QAAQ,CACrE;AACH,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkB,QASA;EAAA,IAR7BC,SAAS,SAATA,SAAS;IACTC,KAAK,SAALA,KAAK;IACLC,KAAK,SAALA,KAAK;IACLC,MAAM,SAANA,MAAM;IACNC,MAAM,SAANA,MAAM;IACNR,QAAQ,SAARA,QAAQ;IACRS,OAAO,SAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGF,OAAO,GAAGhB,QAAQ,GAAG,KAAK;EAC9C,IAAMmB,SAAS,GAAGH,OAAO,GAAG,CAAC,CAAC,GAAGC,SAAS;EAC1C,IAAMT,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAMsB,OAAO,GAAGJ,OAAO,mCAEdC,SAAS;IACZD,OAAO,EAAPA,OAAO;IACPK,iBAAiB,EAAE,GAAG;IACtBC,SAAS,EAAEd,QAAQ,KAAKT,QAAQ,CAACwB,GAAG;IACpCC,UAAU,EAAE;EAAS,KAEvB,CAAC,CAAC;EAEN,oBACE,wCACML,SAAS;IACb,KAAK,EAAEP,KAAM;IACb,SAAS,EAAEjB,UAAU,2BAEnBE,oBAAoB,2BAA+BW,QAAQ,CAAC,EAC5DG,SAAS;EACT,IAEDf,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAuC,GAAEA,MAAM,CAAO,eAC7F,oBAAC,WAAW,eACNK,OAAO;IACX,SAAS,EAAEzB,UAAU,+BAEnB,CAACoB,MAAM,IAAIP,QAAQ,KAAKT,QAAQ,CAAC0B,OAAO,0CAA8C;EACtF,IAED7B,YAAY,CAACkB,MAAM,CAAC,iBACnB,oBAAC,QAAQ;IAAC,SAAS;EAAuC,GAAEA,MAAM,CACnE,eACD;IAAK,SAAS;EAAyC,gBACrD,oBAAC,mBAAmB;IAAC,SAAS,EAAElB,YAAY,CAACkB,MAAM,CAAE;IAAC,SAAS,EAAElB,YAAY,CAACmB,MAAM;EAAE,GACnFR,QAAQ,CACW,EACrBX,YAAY,CAACiB,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAsC,GAAEA,KAAK,CAC5D,CACG,EACLjB,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAsC,EAAG,CACpE,CACV;AAEV,CAAC"}

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

@@ -1 +1 @@
-.vkuiPanelHeaderContent{align-items:center;box-sizing:border-box;display:flex;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:100%;justify-content:flex-start;line-height:normal;max-width:100%}.vkuiPanelHeaderContent__before{flex-shrink:0;margin-right:12px}.vkuiPanelHeaderContent__in{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100%;justify-content:center;min-width:0}.vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent__status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiPanelHeaderContent__status{color:#818c99;color:var(--vkui--color_text_secondary);margin-top:1px;max-width:100%;order:1}.vkuiPanelHeaderContent__children{align-items:center;display:flex;max-width:100%}.vkuiPanelHeaderContent__children-in{flex-grow:0;min-width:0}.vkuiPanelHeaderContent__aside{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;justify-content:flex-start;margin-left:2px}.vkuiPanelHeaderContent__width{width:1000px}.vkuiPanelHeaderContent__in--centered{align-items:center}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-size:21px}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500;line-height:56px;line-height:var(--vkui--size_panel_header_height--regular)}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in{font-size:23px}.vkuiPanelHeader--no-before .vkuiPanelHeaderContent--vkcom{padding-left:16px}
+.vkuiPanelHeaderContent{align-items:center;box-sizing:border-box;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:100%;justify-content:flex-start;line-height:normal;max-width:100%}.vkuiPanelHeaderContent__before{flex-shrink:0;margin-right:12px}.vkuiPanelHeaderContent__in{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100%;justify-content:center;min-width:0}.vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent__status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiPanelHeaderContent__status{color:#818c99;color:var(--vkui--color_text_secondary);margin-top:1px;max-width:100%;order:1}.vkuiPanelHeaderContent__children{align-items:center;display:flex;max-width:100%}.vkuiPanelHeaderContent__children-in{flex-grow:0;min-width:0}.vkuiPanelHeaderContent__aside{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;justify-content:flex-start;margin-left:2px}.vkuiPanelHeaderContent__width{width:1000px}.vkuiPanelHeaderContent__in--centered{align-items:center}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-size:21px}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500;line-height:56px;line-height:var(--vkui--size_panel_header_height--regular)}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in{font-size:23px}.vkuiPanelHeader--no-before .vkuiPanelHeaderContent--vkcom{padding-left:16px}

package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js

@@ -1,20 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "onClose", "opened", "className"];
+var _sizeXClassNames;
 import * as React from 'react';
-import { FixedLayout } from '../FixedLayout/FixedLayout';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useTimeout } from '../../hooks/useTimeout';
+import { SizeType } from '../../lib/adaptivity';
 import { useDOM } from '../../lib/dom';
 import { Platform } from '../../lib/platform';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useTimeout } from '../../hooks/useTimeout';
-import { usePlatform } from '../../hooks/usePlatform';
 import { useScrollLock } from '../AppRoot/ScrollContext';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
+import { FixedLayout } from '../FixedLayout/FixedLayout';
 import "./PanelHeaderContext.module.css";
+var sizeXClassNames = (_sizeXClassNames = {
+  none: "vkuiPanelHeaderContext--sizeX-none"
+}, _defineProperty(_sizeXClassNames, SizeType.COMPACT, "vkuiPanelHeaderContext--sizeX-compact"), _defineProperty(_sizeXClassNames, SizeType.REGULAR, "vkuiPanelHeaderContext--sizeX-regular"), _sizeXClassNames);
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
  */
@@ -34,7 +39,8 @@ export var PanelHeaderContext = function PanelHeaderContext(_ref) {
     setVisible = _React$useState2[1];
   var closing = visible && !opened;
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   var elementRef = React.useRef(null);
   useIsomorphicLayoutEffect(function () {
     opened && setVisible(true);
@@ -60,7 +66,7 @@ export var PanelHeaderContext = function PanelHeaderContext(_ref) {
     return closing ? animationFallback.set() : animationFallback.clear();
   }, [animationFallback, closing]);
   return /*#__PURE__*/React.createElement(FixedLayout, _extends({}, restProps, {
-    className: classNames("vkuiPanelHeaderContext", platform === Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", getSizeXClassName("vkuiPanelHeaderContext", sizeX), "vkuiPanelHeaderContext--rounded", className),
+    className: classNames("vkuiPanelHeaderContext", platform === Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], "vkuiPanelHeaderContext--rounded", className),
     vertical: "top"
   }), visible && /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(event) {

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContext.js","names":["React","FixedLayout","classNames","useAdaptivity","useDOM","Platform","useIsomorphicLayoutEffect","useGlobalEventListener","useTimeout","usePlatform","useScrollLock","getSizeXClassName","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","undefined"],"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport styles from './PanelHeaderContext.module.css';\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        getSizeXClassName(styles['PanelHeaderContext'], sizeX),\n        styles['PanelHeaderContext--rounded'],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{visible && children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PanelHeaderContext.js","names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","undefined"],"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { 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":"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"}

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

@@ -1 +1 @@
-.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--opened{height:100%;width:100%}.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--opened{height:auto}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--opened{height:auto}}.vkuiPanelHeaderContext__in{box-sizing:border-box;left:0;padding:8px;pointer-events:none;position:absolute;width:100%}.vkuiPanelHeaderContext__fade{background:rgba(0,0,0,.4);display:none;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiPanelHeaderContext--sizeX-compact .vkuiPanelHeaderContext__fade{display:block}@media not (min-width:768px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__fade{display:block}}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-in .2s ease}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-out .2s ease}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-in .2s ease;pointer-events:auto}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext .vkuiList{background:#fff;background:var(--vkui--color_background_content)}.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__in{padding:0}.vkuiPanelHeaderContext--rounded:not(.vkuiPanelHeaderContext--ios) .vkuiList,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__content{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__content{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}}@keyframes vkui-animation-panelheadercontext-translate-in{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes vkui-animation-panelheadercontext-translate-out{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}
+.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--opened{height:100%;width:100%}.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--opened{height:auto}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--opened{height:auto}}.vkuiPanelHeaderContext__in{box-sizing:border-box;left:0;padding:8px;pointer-events:none;position:absolute;width:100%}.vkuiPanelHeaderContext__fade{background:rgba(0,0,0,.4);display:none;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiPanelHeaderContext--sizeX-compact .vkuiPanelHeaderContext__fade{display:block}@media (max-width:767.9px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__fade{display:block}}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-in .2s ease}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-out .2s ease}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-in .2s ease;pointer-events:auto}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext .vkuiList{background:#fff;background:var(--vkui--color_background_content)}.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__in{padding:0}.vkuiPanelHeaderContext--rounded:not(.vkuiPanelHeaderContext--ios) .vkuiList,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__content{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__content{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}}@keyframes vkui-animation-panelheadercontext-translate-in{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes vkui-animation-panelheadercontext-translate-out{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}

package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isActive", "editLabel", "doneLabel"];
 import * as React from 'react';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
-import { Platform } from '../../lib/platform';
-import { Icon28EditOutline, Icon28DoneOutline } from '@vkontakte/icons';
+import { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';
 import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
  */

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

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

package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import * as React from 'react';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { Icon28DoneOutline } from '@vkontakte/icons';
-import { Platform } from '../../lib/platform';
 import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
 import { getTitleFromChildren } from '../../lib/utils';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit

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

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

package/dist/cssm/components/Placeholder/Placeholder.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["icon", "header", "action", "children", "stretched", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Title } from '../Typography/Title/Title';
 import { Headline } from '../Typography/Headline/Headline';
+import { Title } from '../Typography/Title/Title';
 import "./Placeholder.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","names":["React","classNames","hasReactNode","Title","Headline","Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,QAAQ,QAAQ,iCAAiC;AAAC;AAyB3D;AACA;AACA;AACA,OAAO,IAAMC,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,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEV,UAAU,oBAEnBS,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvCV,YAAY,CAACI,IAAI,CAAC,iBAAI;IAAK,SAAS;EAA8B,GAAEA,IAAI,CAAO,EAC/EJ,YAAY,CAACK,MAAM,CAAC,iBACnB,oBAAC,KAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACAL,YAAY,CAACO,QAAQ,CAAC,iBACrB,oBAAC,QAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACAP,YAAY,CAACM,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,MAAM,CAAO,CAClF,CACF;AAAA,CACP"}
+{"version":3,"file":"Placeholder.js","names":["React","classNames","hasReactNode","Headline","Title","Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,KAAK,QAAQ,2BAA2B;AAAC;AAwBlD;AACA;AACA;AACA,OAAO,IAAMC,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,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEV,UAAU,oBAEnBS,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvCV,YAAY,CAACI,IAAI,CAAC,iBAAI;IAAK,SAAS;EAA8B,GAAEA,IAAI,CAAO,EAC/EJ,YAAY,CAACK,MAAM,CAAC,iBACnB,oBAAC,KAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACAL,YAAY,CAACO,QAAQ,CAAC,iBACrB,oBAAC,QAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACAP,YAAY,CAACM,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,MAAM,CAAO,CAClF,CACF;AAAA,CACP"}

package/dist/cssm/components/PlatformProvider/PlatformProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
-import { TokensClassProvider } from '../../lib/tokensClassProvider';
 import { useAppearance } from '../../hooks/useAppearance';
+import { TokensClassProvider } from '../../lib/tokensClassProvider';
+import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 /**
  * Компонент, позволяющий переопределить платформу для части приложения
  *

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

@@ -1 +1 @@
-{"version":3,"file":"PlatformProvider.js","names":["React","ConfigProviderOverride","TokensClassProvider","useAppearance","PlatformProvider","value","children","appearance"],"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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,sBAAsB,QAAQ,0CAA0C;AACjF,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,SAASC,aAAa,QAAQ,2BAA2B;AAUzD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgB,OAA6C;EAAA,IAA1CC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAChD,IAAMC,UAAU,GAAGJ,aAAa,EAAE;EAElC,oBACE,oBAAC,sBAAsB;IAAC,QAAQ,EAAEE;EAAM,gBACtC,oBAAC,mBAAmB;IAAC,QAAQ,EAAEA,KAAM;IAAC,UAAU,EAAEE;EAAW,GAC1DD,QAAQ,CACW,CACC;AAE7B"}
+{"version":3,"file":"PlatformProvider.js","names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance"],"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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,mBAAmB,QAAQ,+BAA+B;AACnE,SAASC,sBAAsB,QAAQ,0CAA0C;AAUjF;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgB,OAA6C;EAAA,IAA1CC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAChD,IAAMC,UAAU,GAAGN,aAAa,EAAE;EAElC,oBACE,oBAAC,sBAAsB;IAAC,QAAQ,EAAEI;EAAM,gBACtC,oBAAC,mBAAmB;IAAC,QAAQ,EAAEA,KAAM;IAAC,UAAU,EAAEE;EAAW,GAC1DD,QAAQ,CACW,CACC;AAE7B"}

package/dist/cssm/components/PopoutRoot/PopoutRoot.js

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["popout", "modal", "children", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { blurActiveElement, useDOM } from '../../lib/dom';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { blurActiveElement, useDOM } from '../../lib/dom';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import "./PopoutRoot.module.css";
 var PopoutRootPopout = function PopoutRootPopout(_ref) {
   var children = _ref.children;

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.js","names":["React","classNames","AppRootPortal","blurActiveElement","useDOM","useAdaptivityWithJSMediaQueries","PopoutRootPopout","children","isDesktop","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","document","useEffect"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,eAAe;AACzD,SAASC,+BAA+B,QAAQ,6CAA6C;AAAC;AAO9F,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsBF,+BAA+B,EAAE;IAA/CG,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAEP,UAAU,2BAEnBO,SAAS,sCAA0C;EACnD,GAEDD,QAAQ,CACL;AAEV,CAAC;AAMD,IAAME,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCF,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASD,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLL,QAAQ,SAARA,QAAQ;IACRM,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBX,MAAM,EAAE;IAArBY,QAAQ,WAARA,QAAQ;EAEhBhB,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpBN,MAAM,IAAIR,iBAAiB,CAACa,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEL,MAAM,CAAC,CAAC;EAEtB,oBACE,wCAASI,SAAS;IAAE,SAAS,EAAEd,UAAU,mBAAuBa,SAAS,CAAE;IAAC,GAAG,EAAED;EAAW,IACzFN,QAAQ,eACT,oBAAC,aAAa,QACX,CAAC,CAACI,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC"}
+{"version":3,"file":"PopoutRoot.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","PopoutRootPopout","children","isDesktop","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","document","useEffect"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,+BAA+B,QAAQ,6CAA6C;AAC7F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,eAAe;AAEzD,SAASC,aAAa,QAAQ,0BAA0B;AAAC;AAOzD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsBL,+BAA+B,EAAE;IAA/CM,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAEP,UAAU,2BAEnBO,SAAS,sCAA0C;EACnD,GAEDD,QAAQ,CACL;AAEV,CAAC;AAMD,IAAME,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCF,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASD,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLL,QAAQ,SAARA,QAAQ;IACRM,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBX,MAAM,EAAE;IAArBY,QAAQ,WAARA,QAAQ;EAEhBhB,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpBN,MAAM,IAAIR,iBAAiB,CAACa,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEL,MAAM,CAAC,CAAC;EAEtB,oBACE,wCAASI,SAAS;IAAE,SAAS,EAAEd,UAAU,mBAAuBa,SAAS,CAAE;IAAC,GAAG,EAAED;EAAW,IACzFN,QAAQ,eACT,oBAAC,aAAa,QACX,CAAC,CAACI,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC"}

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js

@@ -4,11 +4,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children", "onClick", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { usePlatform } from '../../hooks/usePlatform';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useTimeout } from '../../hooks/useTimeout';
 import { useDOM } from '../../lib/dom';
+import { Platform } from '../../lib/platform';
 import "./PopoutWrapper.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.js","names":["React","classNames","Platform","useTimeout","usePlatform","useGlobalEventListener","useDOM","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,MAAM,QAAQ,eAAe;AAAC;AAWvC;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGb,WAAW,EAAE;EAC9B,sBAA4BJ,KAAK,CAACkB,QAAQ,CAAC,CAACP,OAAO,CAAC;IAAA;IAA7CQ,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGrB,KAAK,CAACsB,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,GAAGvB,UAAU,CAACoB,WAAW,EAAEN,QAAQ,KAAKf,QAAQ,CAACyB,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;EAC9F3B,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,CAACT,MAAM,IAAIO,uBAAuB,CAACG,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACH,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmBb,MAAM,EAAE;IAAnBwB,MAAM,WAANA,MAAM;EACdzB,sBAAsB,CAACyB,MAAM,EAAE,WAAW,EAAE,UAACN,CAAC;IAAA,OAAKA,CAAC,CAACO,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,wCACMhB,SAAS;IACb,SAAS,EAAEf,UAAU,sBAEnBgC,MAAM,iCAA0BzB,MAAM,EAAG,EACzCyB,MAAM,iCAA0BxB,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CS,MAAM,+BAAmC,EACzCP,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEI,MAAM,GAAGe,SAAS,GAAGX,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAEP;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"PopoutWrapper.js","names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAAC;AAW9C;AACA;AACA;AACA,OAAO,IAAMC,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,GAAGd,WAAW,EAAE;EAC9B,sBAA4BH,KAAK,CAACkB,QAAQ,CAAC,CAACP,OAAO,CAAC;IAAA;IAA7CQ,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGrB,KAAK,CAACsB,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,GAAGtB,UAAU,CAACmB,WAAW,EAAEN,QAAQ,KAAKX,QAAQ,CAACqB,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;EAC9F3B,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,CAACT,MAAM,IAAIO,uBAAuB,CAACG,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACH,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmBd,MAAM,EAAE;IAAnByB,MAAM,WAANA,MAAM;EACd5B,sBAAsB,CAAC4B,MAAM,EAAE,WAAW,EAAE,UAACN,CAAC;IAAA,OAAKA,CAAC,CAACO,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,wCACMhB,SAAS;IACb,SAAS,EAAEf,UAAU,sBAEnBgC,MAAM,iCAA0BzB,MAAM,EAAG,EACzCyB,MAAM,iCAA0BxB,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CS,MAAM,+BAAmC,EACzCP,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEI,MAAM,GAAGe,SAAS,GAAGX,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAEP;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cssm/components/Popover/Popover.js

@@ -4,15 +4,15 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["action", "shown", "showDelay", "hideDelay", "offsetDistance", "content", "children", "style", "className", "getRef", "onShownChange"];
 import * as React from 'react';
-import { useDOM } from '../../lib/dom';
 import { classNames } from '@vkontakte/vkjs';
-import { Popper } from '../Popper/Popper';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useEventListener } from '../../hooks/useEventListener';
+import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useDOM } from '../../lib/dom';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { Popper } from '../Popper/Popper';
 import "./Popover.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover

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

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