@vkontakte/vkui 5.1.2 → 5.2.1

package/dist/components/Pagination/Pagination.js

@@ -1,14 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["currentPage", "siblingCount", "boundaryCount", "totalPages", "disabled", "getPageAriaLabel", "prevButtonAriaLabel", "nextButtonAriaLabel", "getRootRef", "onChange", "className"];
+var _pageSizeYClassNames;
 import * as React from 'react';
 import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePagination } from '../../hooks/usePagination';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
-import { Tappable } from '../Tappable/Tappable';
+import { SizeType } from '../../lib/adaptivity';
 import { Button } from '../Button/Button';
+import { Tappable } from '../Tappable/Tappable';
+var pageSizeYClassNames = (_pageSizeYClassNames = {
+  none: "vkuiPagination__page--sizeY-none"
+}, _defineProperty(_pageSizeYClassNames, SizeType.COMPACT, "vkuiPagination__page--sizeY-compact"), _defineProperty(_pageSizeYClassNames, SizeType.REGULAR, "vkuiPagination__page--sizeY-regular"), _pageSizeYClassNames);
 function getPageAriaLabelDefault(page, isCurrent) {
   return isCurrent ? "".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430") : "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 ".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443");
 }
@@ -36,7 +41,8 @@ export var Pagination = function Pagination(_ref) {
     className = _ref.className,
     resetProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var pages = usePagination({
     currentPage: currentPage,
     totalPages: totalPages,
@@ -66,7 +72,7 @@ export var Pagination = function Pagination(_ref) {
         return /*#__PURE__*/React.createElement("li", {
           key: page
         }, /*#__PURE__*/React.createElement("div", {
-          className: classNames("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", getSizeYClassName("vkuiPagination__page", sizeY), disabled && "vkuiPagination__page--disabled")
+          className: classNames("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", pageSizeYClassNames[sizeY], disabled && "vkuiPagination__page--disabled")
         }, "..."));
       default:
         {
@@ -74,7 +80,7 @@ export var Pagination = function Pagination(_ref) {
           return /*#__PURE__*/React.createElement("li", {
             key: page
           }, /*#__PURE__*/React.createElement(Tappable, {
-            className: classNames("vkuiPagination__page", getSizeYClassName("vkuiPagination__page", sizeY), _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
+            className: classNames("vkuiPagination__page", pageSizeYClassNames[sizeY], _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
             activeMode: "vkuiPagination__page--state-active",
             hoverMode: "vkuiPagination__page--state-hover",
             hasActive: !_isCurrent,

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","getSizeYClassName","Tappable","Button","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nimport type { HasRootRef } from '../../types';\n\nimport { classNames } from '@vkontakte/vkjs';\n\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\n\nimport { Tappable } from '../Tappable/Tappable';\nimport { Button } from '../Button/Button';\n\nimport styles from './Pagination.module.css';\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <div\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  getSizeYClassName(styles['Pagination__page'], sizeY),\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  getSizeYClassName(styles['Pagination__page'], sizeY),\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav\n      className={classNames(styles['Pagination'], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","SizeType","Button","Tappable","pageSizeYClassNames","none","COMPACT","REGULAR","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Pagination.module.css';\n\nconst pageSizeYClassNames = {\n  none: styles['Pagination__page--sizeY-none'],\n  [SizeType.COMPACT]: styles['Pagination__page--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Pagination__page--sizeY-regular'],\n};\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <div\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  pageSizeYClassNames[sizeY],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  pageSizeYClassNames[sizeY],\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav\n      className={classNames(styles['Pagination'], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Panel/Panel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
 import { NavIdProps } from '../../lib/getNavId';
+import { HasRootRef } from '../../types';
 export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, NavIdProps {
     centered?: boolean;
 }

package/dist/components/Panel/Panel.js

@@ -1,14 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["centered", "children", "getRootRef", "nav", "className"];
+var _sizeXClassNames;
 import * as React from 'react';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
 import { classNames } from '@vkontakte/vkjs';
-import { Touch } from '../Touch/Touch';
-import { TooltipContainer } from '../Tooltip/TooltipContainer';
-import { Platform } from '../../lib/platform';
-import { usePlatform } from '../../hooks/usePlatform';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { Touch } from '../Touch/Touch';
+var sizeXClassNames = (_sizeXClassNames = {
+  none: "vkuiPanel--sizeX-none"
+}, _defineProperty(_sizeXClassNames, SizeType.COMPACT, "vkuiPanel--sizeX-compact"), _defineProperty(_sizeXClassNames, SizeType.REGULAR, "vkuiPanel--sizeX-regular"), _sizeXClassNames);
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
@@ -22,10 +27,11 @@ export var Panel = function Panel(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNames("vkuiPanel", getSizeXClassName("vkuiPanel", sizeX), centered && "vkuiPanel--centered", className)
+    className: classNames("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiPanel--centered", className)
   }), /*#__PURE__*/React.createElement(Touch, {
     Component: TooltipContainer,
     className: "vkuiPanel__in"

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["React","getSizeXClassName","classNames","Touch","TooltipContainer","Platform","usePlatform","useAdaptivity","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","IOS"],"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Touch } from '../Touch/Touch';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { HasRootRef } from '../../types';\nimport { Platform } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './Panel.module.css';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        getSizeXClassName(styles['Panel'], sizeX),\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AAUzD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBS,KAAK,kBAALA,KAAK;EAEb,oBACE,wCACMF,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAET,UAAU,cAEnBD,iBAAiB,cAAkBe,KAAK,CAAC,EACzCP,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,KAAK;IAAC,SAAS,EAAET,gBAAiB;IAAC,SAAS;EAAsB,GAChEW,QAAQ,KAAKV,QAAQ,CAACY,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7CR,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC"}
+{"version":3,"file":"Panel.js","names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","IOS"],"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,KAAK,QAAQ,gBAAgB;AAGtC,IAAMC,eAAe;EACnBC,IAAI;AAA6B,qCAChCL,QAAQ,CAACM,OAAO,iEAChBN,QAAQ,CAACO,OAAO,gDAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGhB,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCkB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,wCACMF,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAEd,UAAU,cAEnBO,eAAe,CAACY,KAAK,CAAC,EACtBP,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,KAAK;IAAC,SAAS,EAAEX,gBAAiB;IAAC,SAAS;EAAsB,GAChEa,QAAQ,KAAKd,QAAQ,CAACgB,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7CR,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC"}

package/dist/components/PanelHeader/PanelHeader.js

@@ -2,18 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["before", "children", "after", "separator", "visor", "transparent", "shadow", "getRef", "getRootRef", "fixed", "className"];
 import * as React from 'react';
-import { usePlatform } from '../../hooks/usePlatform';
 import { classNames } from '@vkontakte/vkjs';
-import { FixedLayout } from '../FixedLayout/FixedLayout';
-import { Separator } from '../Separator/Separator';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';
-import { Text } from '../Typography/Text/Text';
-import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { FixedLayout } from '../FixedLayout/FixedLayout';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+import { Separator } from '../Separator/Separator';
 import { Spacing } from '../Spacing/Spacing';
+import { TooltipContainer } from '../Tooltip/TooltipContainer';
+import { Text } from '../Typography/Text/Text';
 function getPlatformClassName(platform) {
   switch (platform) {
     case 'ios':

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

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

package/dist/components/PanelHeaderBack/PanelHeaderBack.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["label", "aria-label", "className"];
 import * as React from 'react';
-import { Icon28ChevronBack, Icon28ChevronLeftOutline, Icon28ArrowLeftOutline } from '@vkontakte/icons';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
-import { Platform } from '../../lib/platform';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
-import { usePlatform } from '../../hooks/usePlatform';
+import { Icon28ArrowLeftOutline, Icon28ChevronBack, Icon28ChevronLeftOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack
  */
@@ -20,7 +20,8 @@ export var PanelHeaderBack = function PanelHeaderBack(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular
   // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
   var showLabel = platform === Platform.VKCOM || platform === Platform.IOS;
@@ -34,7 +35,7 @@ export var PanelHeaderBack = function PanelHeaderBack(_ref) {
       break;
   }
   return /*#__PURE__*/React.createElement(PanelHeaderButton, _extends({}, restProps, {
-    className: classNames("vkuiPanelHeaderBack", getSizeXClassName("vkuiPanelHeaderBack", sizeX), platform === Platform.IOS && "vkuiPanelHeaderBack--ios", platform === Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
+    className: classNames("vkuiPanelHeaderBack", sizeX === SizeType.COMPACT && "vkuiPanelHeaderBack--sizeX-compact", platform === Platform.IOS && "vkuiPanelHeaderBack--ios", platform === Platform.VKCOM && "vkuiPanelHeaderBack--vkcom", showLabel && !!label && "vkuiPanelHeaderBack--has-label", className),
     label: showLabel && label,
     "aria-label": ariaLabel
   }), icon);

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderBack.js","names":["React","Icon28ChevronBack","Icon28ChevronLeftOutline","Icon28ArrowLeftOutline","PanelHeaderButton","Platform","getSizeXClassName","usePlatform","classNames","useAdaptivity","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon"],"sources":["../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n  Icon28ArrowLeftOutline,\n} from '@vkontakte/icons';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Platform } from '../../lib/platform';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './PanelHeaderBack.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderBack'],\n        getSizeXClassName(styles['PanelHeaderBack'], sizeX),\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,sBAAsB,QACjB,kBAAkB;AACzB,SAASC,iBAAiB,QAAgC,wCAAwC;AAClG,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKE;EAAA,IAJ5BC,KAAK,QAALA,KAAK;IAAA,sBACL,YAAY;IAAEC,SAAS,+BAAG,OAAO;IACjCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGR,WAAW,EAAE;EAC9B,qBAAkBE,aAAa,EAAE;IAAzBO,KAAK,kBAALA,KAAK;EACb;EACA;EACA,IAAMC,SAAS,GAAGF,QAAQ,KAAKV,QAAQ,CAACa,KAAK,IAAIH,QAAQ,KAAKV,QAAQ,CAACc,GAAG;EAE1E,IAAIC,IAAI,gBAAG,oBAAC,sBAAsB,OAAG;EACrC,QAAQL,QAAQ;IACd,KAAKV,QAAQ,CAACc,GAAG;MACfC,IAAI,gBAAG,oBAAC,iBAAiB,OAAG;MAC5B;IACF,KAAKf,QAAQ,CAACa,KAAK;MACjBE,IAAI,gBAAG,oBAAC,wBAAwB,OAAG;MACnC;EAAM;EAGV,oBACE,oBAAC,iBAAiB,eACZN,SAAS;IACb,SAAS,EAAEN,UAAU,wBAEnBF,iBAAiB,wBAA4BU,KAAK,CAAC,EACnDD,QAAQ,KAAKV,QAAQ,CAACc,GAAG,8BAAkC,EAC3DJ,QAAQ,KAAKV,QAAQ,CAACa,KAAK,gCAAoC,EAC/DD,SAAS,IAAI,CAAC,CAACN,KAAK,oCAAwC,EAC5DE,SAAS,CACT;IACF,KAAK,EAAEI,SAAS,IAAIN,KAAM;IAC1B,cAAYC;EAAU,IAErBQ,IAAI,CACa;AAExB,CAAC"}
+{"version":3,"file":"PanelHeaderBack.js","names":["React","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","SizeType","Platform","PanelHeaderButton","PanelHeaderBack","label","ariaLabel","className","restProps","platform","sizeX","showLabel","VKCOM","IOS","icon","COMPACT"],"sources":["../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport styles from './PanelHeaderBack.module.css';\n\nexport type PanelHeaderBackProps = PanelHeaderButtonProps & {\n  'aria-label'?: string;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderBack\n */\nexport const PanelHeaderBack = ({\n  label,\n  'aria-label': ariaLabel = 'Назад',\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // так-же label нужно скрывать при platform === Platform.IOS && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === Platform.VKCOM || platform === Platform.IOS;\n\n  let icon = <Icon28ArrowLeftOutline />;\n  switch (platform) {\n    case Platform.IOS:\n      icon = <Icon28ChevronBack />;\n      break;\n    case Platform.VKCOM:\n      icon = <Icon28ChevronLeftOutline />;\n      break;\n  }\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderBack'],\n        sizeX === SizeType.COMPACT && styles['PanelHeaderBack--sizeX-compact'],\n        platform === Platform.IOS && styles['PanelHeaderBack--ios'],\n        platform === Platform.VKCOM && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n      aria-label={ariaLabel}\n    >\n      {icon}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,iBAAiB,QAAgC,wCAAwC;AAOlG;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAe,OAKE;EAAA,IAJ5BC,KAAK,QAALA,KAAK;IAAA,sBACL,YAAY;IAAEC,SAAS,+BAAG,OAAO;IACjCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCW,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB;EACA;EACA,IAAMC,SAAS,GAAGF,QAAQ,KAAKP,QAAQ,CAACU,KAAK,IAAIH,QAAQ,KAAKP,QAAQ,CAACW,GAAG;EAE1E,IAAIC,IAAI,gBAAG,oBAAC,sBAAsB,OAAG;EACrC,QAAQL,QAAQ;IACd,KAAKP,QAAQ,CAACW,GAAG;MACfC,IAAI,gBAAG,oBAAC,iBAAiB,OAAG;MAC5B;IACF,KAAKZ,QAAQ,CAACU,KAAK;MACjBE,IAAI,gBAAG,oBAAC,wBAAwB,OAAG;MACnC;EAAM;EAGV,oBACE,oBAAC,iBAAiB,eACZN,SAAS;IACb,SAAS,EAAEV,UAAU,wBAEnBY,KAAK,KAAKT,QAAQ,CAACc,OAAO,wCAA4C,EACtEN,QAAQ,KAAKP,QAAQ,CAACW,GAAG,8BAAkC,EAC3DJ,QAAQ,KAAKP,QAAQ,CAACU,KAAK,gCAAoC,EAC/DD,SAAS,IAAI,CAAC,CAACN,KAAK,oCAAwC,EAC5DE,SAAS,CACT;IACF,KAAK,EAAEI,SAAS,IAAIN,KAAM;IAC1B,cAAYC;EAAU,IAErBQ,IAAI,CACa;AAExB,CAAC"}

package/dist/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';
 function getPlatformClassName(platform) {

package/dist/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/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/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/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';
 var PanelHeaderChildren = function PanelHeaderChildren(_ref) {
   var hasStatus = _ref.hasStatus,

package/dist/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;AAe9C,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqE;EAAA,IAA/DC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAIU,QAAQ,KAAKN,QAAQ,CAACO,KAAK,EAAE;IAC/B,oBACE,oBAAC,IAAI;MAAC,SAAS,EAAC,KAAK;MAAC,MAAM,EAAC;IAAG,GAC7BF,QAAQ,CACJ;EAEX;EAEA,OAAOF,SAAS,IAAIC,SAAS,gBAC3B,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,MAAM,EAAC;EAAG,GACjCC,QAAQ,CACA,gBAEX;IAAK,SAAS;EAA4C,GAAEA,QAAQ,CACrE;AACH,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMG,kBAAkB,GAAG,SAArBA,kBAAkB,QASA;EAAA,IAR7BC,SAAS,SAATA,SAAS;IACTC,KAAK,SAALA,KAAK;IACLC,KAAK,SAALA,KAAK;IACLC,MAAM,SAANA,MAAM;IACNC,MAAM,SAANA,MAAM;IACNR,QAAQ,SAARA,QAAQ;IACRS,OAAO,SAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGF,OAAO,GAAGnB,QAAQ,GAAG,KAAK;EAC9C,IAAMsB,SAAS,GAAGH,OAAO,GAAG,CAAC,CAAC,GAAGC,SAAS;EAC1C,IAAMT,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAMsB,OAAO,GAAGJ,OAAO,mCAEdC,SAAS;IACZD,OAAO,EAAPA,OAAO;IACPK,iBAAiB,EAAE,GAAG;IACtBC,SAAS,EAAEd,QAAQ,KAAKN,QAAQ,CAACqB,GAAG;IACpCC,UAAU,EAAE;EAAS,KAEvB,CAAC,CAAC;EAEN,oBACE,wCACML,SAAS;IACb,KAAK,EAAEP,KAAM;IACb,SAAS,EAAEjB,UAAU,2BAEnBI,oBAAoB,2BAA+BS,QAAQ,CAAC,EAC5DG,SAAS;EACT,IAEDf,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAuC,GAAEA,MAAM,CAAO,eAC7F,oBAAC,WAAW,eACNK,OAAO;IACX,SAAS,EAAEzB,UAAU,+BAEnB,CAACoB,MAAM,IAAIP,QAAQ,KAAKN,QAAQ,CAACuB,OAAO,0CAA8C;EACtF,IAED7B,YAAY,CAACkB,MAAM,CAAC,iBACnB,oBAAC,QAAQ;IAAC,SAAS;EAAuC,GAAEA,MAAM,CACnE,eACD;IAAK,SAAS;EAAyC,gBACrD,oBAAC,mBAAmB;IAAC,SAAS,EAAElB,YAAY,CAACkB,MAAM,CAAE;IAAC,SAAS,EAAElB,YAAY,CAACmB,MAAM;EAAE,GACnFR,QAAQ,CACW,EACrBX,YAAY,CAACiB,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAsC,GAAEA,KAAK,CAC5D,CACG,EACLjB,YAAY,CAACmB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAsC,EAAG,CACpE,CACV;AAEV,CAAC"}
+{"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;AAe9C,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqE;EAAA,IAA/DC,SAAS,QAATA,SAAS;IAAEC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAC9B,IAAIU,QAAQ,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/components/PanelHeaderContext/PanelHeaderContext.js

@@ -1,19 +1,24 @@
 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';
+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
  */
@@ -33,7 +38,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);
@@ -59,7 +65,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/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":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,IAAMC,eAAe;EACnBC,IAAI;AAA0C,qCAC7CP,QAAQ,CAACQ,OAAO,8EAChBR,QAAQ,CAACS,OAAO,6DAClB;AAOD;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAMA;EAAA,IAL7BC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,mBACPC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBd,MAAM,EAAE;IAArBe,QAAQ,WAARA,QAAQ;EAChB,IAAMC,QAAQ,GAAGnB,WAAW,EAAE;EAC9B,sBAA8BJ,KAAK,CAACwB,QAAQ,CAACL,MAAM,CAAC;IAAA;IAA7CM,OAAO;IAAEC,UAAU;EAC1B,IAAMC,OAAO,GAAGF,OAAO,IAAI,CAACN,MAAM;EAClC,qBAA2BjB,aAAa,EAAE;IAAA,sCAAlC0B,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,UAAU,GAAG7B,KAAK,CAAC8B,MAAM,CAAiB,IAAI,CAAC;EAErDrB,yBAAyB,CAAC,YAAM;IAC9BU,MAAM,IAAIO,UAAU,CAAC,IAAI,CAAC;EAC5B,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;EAEZT,aAAa,CAACa,QAAQ,KAAKf,QAAQ,CAACuB,KAAK,IAAIZ,MAAM,CAAC;;EAEpD;EACAhB,sBAAsB,CACpBmB,QAAQ,EACR,OAAO,EACPH,MAAM,IACJ,CAACQ,OAAO,IACP,UAACK,KAAK,EAAK;IACV,IAAIH,UAAU,CAACI,OAAO,IAAI,CAACJ,UAAU,CAACI,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAS,EAAE;MAC5EH,KAAK,CAACI,eAAe,EAAE;MACvBlB,OAAO,EAAE;IACX;EACF,CAAE,EACJ;IAAEmB,OAAO,EAAE;EAAK,CAAC,CAClB;;EAED;EACA,IAAMC,cAAc,GAAG,SAAjBA,cAAc;IAAA,OAASZ,UAAU,CAAC,KAAK,CAAC;EAAA;EAC9C,IAAMa,iBAAiB,GAAGlC,UAAU,CAACiC,cAAc,EAAE,GAAG,CAAC;EACzDtC,KAAK,CAACwC,SAAS,CACb;IAAA,OAAOb,OAAO,GAAGY,iBAAiB,CAACE,GAAG,EAAE,GAAGF,iBAAiB,CAACG,KAAK,EAAE;EAAA,CAAC,EACrE,CAACH,iBAAiB,EAAEZ,OAAO,CAAC,CAC7B;EAED,oBACE,oBAAC,WAAW,eACNN,SAAS;IACb,SAAS,EAAEpB,UAAU,2BAEnBsB,QAAQ,KAAKf,QAAQ,CAACmC,GAAG,iCAAqC,EAC9DxB,MAAM,oCAAwC,EAC9CQ,OAAO,qCAAyC,EAChDf,eAAe,CAACgB,KAAK,CAAC,qCAEtBR,SAAS,CACT;IACF,QAAQ,EAAC;EAAK,IAEbK,OAAO,iBACN;IACE,OAAO,EAAE,iBAACO,KAAK,EAAK;MAClBA,KAAK,CAACI,eAAe,EAAE;MACvBlB,OAAO,EAAE;IACX,CAAE;IACF,SAAS;EAAqC,EAEjD,eACD;IACE,SAAS,8BAAmC;IAC5C,GAAG,EAAEW,UAAW;IAChB,cAAc,EAAEF,OAAO,GAAGW,cAAc,GAAGM;EAAU,gBAErD;IAAK,SAAS;EAAwC,GAAEnB,OAAO,IAAIR,QAAQ,CAAO,CAC9E,CACM;AAElB,CAAC"}

package/dist/components/PanelHeaderEdit/PanelHeaderEdit.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/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"}