@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/cjs/components/Pagination/Pagination.js

@@ -13,18 +13,14 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
-var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _usePagination = require("../../hooks/usePagination");
-var _adaptivity = require("../../lib/adaptivity");
 var _Button = require("../Button/Button");
-var _Tappable = require("../Tappable/Tappable");
-var _Text = require("../Typography/Text/Text");
-function getPageAriaLabelDefault(page, isCurrent) {
-    return isCurrent ? "".concat(page, " страница") : "Перейти на ".concat(page, " страницу");
-}
+var _RootComponent = require("../RootComponent/RootComponent");
+var _PaginationPageButton = require("./PaginationPage/PaginationPageButton");
+var _PaginationPageEllipsis = require("./PaginationPage/PaginationPageEllipsis");
+var _utils = require("./utils");
 var Pagination = function(_param) {
-    var _param_currentPage = _param.currentPage, currentPage = _param_currentPage === void 0 ? 1 : _param_currentPage, _param_siblingCount = _param.siblingCount, siblingCount = _param_siblingCount === void 0 ? 1 : _param_siblingCount, _param_boundaryCount = _param.boundaryCount, boundaryCount = _param_boundaryCount === void 0 ? 1 : _param_boundaryCount, _param_totalPages = _param.totalPages, totalPages = _param_totalPages === void 0 ? 1 : _param_totalPages, disabled = _param.disabled, _param_getPageAriaLabel = _param.getPageAriaLabel, getPageAriaLabel = _param_getPageAriaLabel === void 0 ? getPageAriaLabelDefault : _param_getPageAriaLabel, _param_prevButtonAriaLabel = _param.prevButtonAriaLabel, prevButtonAriaLabel = _param_prevButtonAriaLabel === void 0 ? "Перейти на предыдущую страницу" : _param_prevButtonAriaLabel, _param_nextButtonAriaLabel = _param.nextButtonAriaLabel, nextButtonAriaLabel = _param_nextButtonAriaLabel === void 0 ? "Перейти на следующую страницу" : _param_nextButtonAriaLabel, getRootRef = _param.getRootRef, onChange = _param.onChange, resetProps = _object_without_properties._(_param, [
+    var _param_currentPage = _param.currentPage, currentPage = _param_currentPage === void 0 ? 1 : _param_currentPage, _param_siblingCount = _param.siblingCount, siblingCount = _param_siblingCount === void 0 ? 1 : _param_siblingCount, _param_boundaryCount = _param.boundaryCount, boundaryCount = _param_boundaryCount === void 0 ? 1 : _param_boundaryCount, _param_totalPages = _param.totalPages, totalPages = _param_totalPages === void 0 ? 1 : _param_totalPages, disabled = _param.disabled, _param_getPageAriaLabel = _param.getPageAriaLabel, getPageAriaLabel = _param_getPageAriaLabel === void 0 ? _utils.getPageAriaLabelDefault : _param_getPageAriaLabel, _param_prevButtonAriaLabel = _param.prevButtonAriaLabel, prevButtonAriaLabel = _param_prevButtonAriaLabel === void 0 ? "Перейти на предыдущую страницу" : _param_prevButtonAriaLabel, _param_nextButtonAriaLabel = _param.nextButtonAriaLabel, nextButtonAriaLabel = _param_nextButtonAriaLabel === void 0 ? "Перейти на следующую страницу" : _param_nextButtonAriaLabel, onChange = _param.onChange, resetProps = _object_without_properties._(_param, [
         "currentPage",
         "siblingCount",
         "boundaryCount",
@@ -33,10 +29,8 @@ var Pagination = function(_param) {
         "getPageAriaLabel",
         "prevButtonAriaLabel",
         "nextButtonAriaLabel",
-        "getRootRef",
         "onChange"
     ]);
-    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var pages = (0, _usePagination.usePagination)({
         currentPage: currentPage,
         totalPages: totalPages,
@@ -76,42 +70,32 @@ var Pagination = function(_param) {
             case "end-ellipsis":
                 return /*#__PURE__*/ _react.createElement("li", {
                     key: page
-                }, /*#__PURE__*/ _react.createElement(_Text.Text, {
-                    className: (0, _vkjs.classNames)("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", sizeY === "none" && "vkuiPagination__page--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiPagination__page--sizeY-compact", disabled && "vkuiPagination__page--disabled")
-                }, "…"));
+                }, /*#__PURE__*/ _react.createElement(_PaginationPageEllipsis.PaginationPageEllipsis, {
+                    disabled: disabled
+                }));
             default:
                 {
                     var isCurrent = page === currentPage;
                     return /*#__PURE__*/ _react.createElement("li", {
                         key: page
-                    }, /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
-                        className: (0, _vkjs.classNames)("vkuiPagination__page", sizeY === "none" && "vkuiPagination__page--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiPagination__page--sizeY-compact", isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
-                        activeMode: "vkuiPagination__page--state-active",
-                        hoverMode: "vkuiPagination__page--state-hover",
-                        hasActive: !isCurrent,
-                        hasHover: !isCurrent,
-                        focusVisibleMode: "outside",
-                        disabled: disabled,
-                        "data-page": page,
-                        "aria-current": isCurrent ? true : undefined,
-                        "aria-label": getPageAriaLabel(page, isCurrent),
-                        onClick: handleClick
-                    }, /*#__PURE__*/ _react.createElement(_Text.Text, {
-                        normalize: false
-                    }, page)));
+                    }, /*#__PURE__*/ _react.createElement(_PaginationPageButton.PaginationPageButton, {
+                        getPageAriaLabel: getPageAriaLabel,
+                        isCurrent: isCurrent,
+                        onClick: handleClick,
+                        disabled: disabled
+                    }, page));
                 }
         }
     }, [
-        sizeY,
         currentPage,
         disabled,
         getPageAriaLabel,
         handleClick
     ]);
-    return /*#__PURE__*/ _react.createElement("nav", _object_spread._({
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        Component: "nav",
         role: "navigation",
-        "aria-label": "Навигация по страницам",
-        ref: getRootRef
+        "aria-label": "Навигация по страницам"
     }, resetProps), /*#__PURE__*/ _react.createElement("ul", {
         className: "vkuiPagination__list"
     }, /*#__PURE__*/ _react.createElement("li", {

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

@@ -1 +1 @@
-{"version":3,"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 { Text } from '../Typography/Text/Text';\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  ...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              <Text\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  sizeY === 'none' && styles['Pagination__page--sizeY-none'],\n                  sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                &#8230;\n              </Text>\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                  sizeY === 'none' && styles['Pagination__page--sizeY-none'],\n                  sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'],\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                <Text normalize={false}>{page}</Text>\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav role=\"navigation\" aria-label=\"Навигация по страницам\" ref={getRootRef} {...resetProps}>\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"],"names":["Pagination","getPageAriaLabelDefault","page","isCurrent","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","resetProps","useAdaptivity","sizeY","pages","usePagination","isFirstPage","isLastPage","handlePrevClick","React","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","li","key","Text","className","classNames","SizeType","COMPACT","Tappable","activeMode","hoverMode","hasActive","hasHover","focusVisibleMode","data-page","aria-current","undefined","aria-label","onClick","normalize","nav","role","ref","ul","Button","size","before","Icon24ChevronCompactLeft","width","appearance","mode","map","after","Icon24ChevronCompactRight"],"mappings":";;;;+BA4DaA;;;eAAAA;;;;;;+DA5DU;qBAC6C;oBACzC;6BACG;6BACoB;0BACzB;sBAEF;wBACE;oBACJ;AAGrB,SAASC,wBAAwBC,IAAY,EAAEC,SAAkB;IAC/D,OAAOA,YAAY,AAAC,GAAO,OAALD,MAAK,eAAa,AAAC,cAAkB,OAALA,MAAK;AAC7D;AA8CO,IAAMF,aAAa;oCACxBI,aAAAA,8CAAc,qDACdC,cAAAA,gDAAe,uDACfC,eAAAA,kDAAgB,qDAChBC,YAAAA,4CAAa,uBACbC,kBAAAA,2CACAC,kBAAAA,wDAAmBR,uFACnBS,qBAAAA,8DAAsB,mGACtBC,qBAAAA,8DAAsB,8DACtBC,oBAAAA,YACAC,kBAAAA,UACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,QAAQC,IAAAA,4BAAa,EAAC;QAC1Bd,aAAAA;QACAG,YAAAA;QACAF,cAAAA;QACAC,eAAAA;IACF;IACA,IAAMa,cAAcf,gBAAgB;IACpC,IAAMgB,aAAahB,gBAAgBG;IAEnC,IAAMc,kBAAkBC,OAAMC,WAAW,CAAC;QACxC,IAAIV,YAAY,CAACM,aAAa;YAC5BN,SAAST,cAAc;QACzB;IACF,GAAG;QAACA;QAAae;QAAaN;KAAS;IAEvC,IAAMW,cAAcF,OAAMC,WAAW,CACnC,SAACE;YAECZ;QADA,IAAMX,OAAeuB,MAAMC,aAAa,CAACC,OAAO,CAACzB,IAAI,IAAI;SACzDW,YAAAA,sBAAAA,gCAAAA,UAAWe,OAAO1B;IACpB,GACA;QAACW;KAAS;IAGZ,IAAMgB,kBAAkBP,OAAMC,WAAW,CAAC;QACxC,IAAIV,YAAY,CAACO,YAAY;YAC3BP,SAAST,cAAc;QACzB;IACF,GAAG;QAACA;QAAagB;QAAYP;KAAS;IAEtC,IAAMiB,cAAcR,OAAMC,WAAW,CACnC,SAACrB;QACC,OAAQA;YACN,KAAK;YACL,KAAK;gBACH,qBACE,qBAAC6B;oBAAGC,KAAK9B;iCACP,qBAAC+B,UAAI;oBACHC,WAAWC,IAAAA,gBAAU,iEAGnBnB,UAAU,8CACVA,UAAUoB,oBAAQ,CAACC,OAAO,2CAC1B7B;mBAEH;YAKP;gBAAS;oBACP,IAAML,YAAYD,SAASE;oBAC3B,qBACE,qBAAC2B;wBAAGC,KAAK9B;qCACP,qBAACoC,kBAAQ;wBACPJ,WAAWC,IAAAA,gBAAU,0BAEnBnB,UAAU,8CACVA,UAAUoB,oBAAQ,CAACC,OAAO,2CAC1BlC,8CACAK;wBAEF+B,UAAU;wBACVC,SAAS;wBACTC,WAAW,CAACtC;wBACZuC,UAAU,CAACvC;wBACXwC,kBAAiB;wBACjBnC,UAAUA;wBACVoC,aAAW1C;wBACX2C,gBAAc1C,YAAY,OAAO2C;wBACjCC,cAAYtC,iBAAiBP,MAAMC;wBACnC6C,SAASxB;qCAET,qBAACS,UAAI;wBAACgB,WAAW;uBAAQ/C;gBAIjC;QACF;IACF,GACA;QAACc;QAAOZ;QAAaI;QAAUC;QAAkBe;KAAY;IAG/D,qBACE,qBAAC0B;QAAIC,MAAK;QAAaJ,cAAW;QAAyBK,KAAKxC;OAAgBE,2BAC9E,qBAACuC;QAAGnB,SAAS;qBACX,qBAACH;QAAGG,SAAS;qBACX,qBAACoB,cAAM;QACLC,MAAK;QACLC,sBAAQ,qBAACC,+BAAwB;YAACC,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLpD,UAAUW,eAAeX;QACzBuC,cAAYrC;QACZsC,SAAS3B;SAGZJ,MAAM4C,GAAG,CAAC/B,4BACX,qBAACC;QAAGG,SAAS;qBACX,qBAACoB,cAAM;QACLC,MAAK;QACLO,qBAAO,qBAACC,gCAAyB;YAACL,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLpD,UAAUY,cAAcZ;QACxBuC,cAAYpC;QACZqC,SAASnB;;AAMrB"}
+{"version":3,"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { PaginationPageButton } from './PaginationPage/PaginationPageButton';\nimport { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';\nimport { getPageAriaLabelDefault } from './utils';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {\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  onChange,\n  ...resetProps\n}: PaginationProps) => {\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              <PaginationPageEllipsis disabled={disabled} />\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <PaginationPageButton\n                getPageAriaLabel={getPageAriaLabel}\n                isCurrent={isCurrent}\n                onClick={handleClick}\n                disabled={disabled}\n              >\n                {page}\n              </PaginationPageButton>\n            </li>\n          );\n        }\n      }\n    },\n    [currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <RootComponent\n      Component=\"nav\"\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\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    </RootComponent>\n  );\n};\n"],"names":["Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","getPageAriaLabelDefault","prevButtonAriaLabel","nextButtonAriaLabel","onChange","resetProps","pages","usePagination","isFirstPage","isLastPage","handlePrevClick","React","useCallback","handleClick","event","page","currentTarget","dataset","Number","handleNextClick","renderPages","li","key","PaginationPageEllipsis","isCurrent","PaginationPageButton","onClick","RootComponent","Component","role","aria-label","ul","className","Button","size","before","Icon24ChevronCompactLeft","width","appearance","mode","map","after","Icon24ChevronCompactRight"],"mappings":";;;;+BAqDaA;;;eAAAA;;;;;;+DArDU;qBAC6C;6BAClB;sBAE3B;6BACO;oCACO;sCACE;qBACC;AA6CjC,IAAMA,aAAa;oCACxBC,aAAAA,8CAAc,qDACdC,cAAAA,gDAAe,uDACfC,eAAAA,kDAAgB,qDAChBC,YAAAA,4CAAa,uBACbC,kBAAAA,2CACAC,kBAAAA,wDAAmBC,8BAAuB,gEAC1CC,qBAAAA,8DAAsB,mGACtBC,qBAAAA,8DAAsB,8DACtBC,kBAAAA,UACGC;QATHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAME,QAAQC,IAAAA,4BAAa,EAAC;QAC1BZ,aAAAA;QACAG,YAAAA;QACAF,cAAAA;QACAC,eAAAA;IACF;IACA,IAAMW,cAAcb,gBAAgB;IACpC,IAAMc,aAAad,gBAAgBG;IAEnC,IAAMY,kBAAkBC,OAAMC,WAAW,CAAC;QACxC,IAAIR,YAAY,CAACI,aAAa;YAC5BJ,SAAST,cAAc;QACzB;IACF,GAAG;QAACA;QAAaa;QAAaJ;KAAS;IAEvC,IAAMS,cAAcF,OAAMC,WAAW,CACnC,SAACE;YAECV;QADA,IAAMW,OAAeD,MAAME,aAAa,CAACC,OAAO,CAACF,IAAI,IAAI;SACzDX,YAAAA,sBAAAA,gCAAAA,UAAWc,OAAOH;IACpB,GACA;QAACX;KAAS;IAGZ,IAAMe,kBAAkBR,OAAMC,WAAW,CAAC;QACxC,IAAIR,YAAY,CAACK,YAAY;YAC3BL,SAAST,cAAc;QACzB;IACF,GAAG;QAACA;QAAac;QAAYL;KAAS;IAEtC,IAAMgB,cAAcT,OAAMC,WAAW,CACnC,SAACG;QACC,OAAQA;YACN,KAAK;YACL,KAAK;gBACH,qBACE,qBAACM;oBAAGC,KAAKP;iCACP,qBAACQ,8CAAsB;oBAACxB,UAAUA;;YAGxC;gBAAS;oBACP,IAAMyB,YAAYT,SAASpB;oBAC3B,qBACE,qBAAC0B;wBAAGC,KAAKP;qCACP,qBAACU,0CAAoB;wBACnBzB,kBAAkBA;wBAClBwB,WAAWA;wBACXE,SAASb;wBACTd,UAAUA;uBAETgB;gBAIT;QACF;IACF,GACA;QAACpB;QAAaI;QAAUC;QAAkBa;KAAY;IAGxD,qBACE,qBAACc,4BAAa;QACZC,WAAU;QACVC,MAAK;QACLC,cAAW;OACPzB,2BAEJ,qBAAC0B;QAAGC,SAAS;qBACX,qBAACX;QAAGW,SAAS;qBACX,qBAACC,cAAM;QACLC,MAAK;QACLC,sBAAQ,qBAACC,+BAAwB;YAACC,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLxC,UAAUS,eAAeT;QACzB+B,cAAY5B;QACZwB,SAAShB;SAGZJ,MAAMkC,GAAG,CAACpB,4BACX,qBAACC;QAAGW,SAAS;qBACX,qBAACC,cAAM;QACLC,MAAK;QACLO,qBAAO,qBAACC,gCAAyB;YAACL,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLxC,UAAUU,cAAcV;QACxB+B,cAAY3B;QACZuB,SAASP;;AAMrB"}

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { HasRootRef } from '../../../types';
+export interface PaginationPageButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, HasRootRef<HTMLButtonElement> {
+    isCurrent?: boolean;
+    /**
+     * Функция для переопределения и/или локализации `aria-label` атрибута.
+     * По умолчанию используется текст на "ru_RU".
+     */
+    getPageAriaLabel?(page: number, isCurrent: boolean): string;
+    children: number;
+}
+export declare const PaginationPageButton: ({ isCurrent, getPageAriaLabel, children, className, disabled, ...restProps }: PaginationPageButtonProps) => React.JSX.Element;

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PaginationPageButton", {
+    enumerable: true,
+    get: function() {
+        return PaginationPageButton;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
+var _Tappable = require("../../Tappable/Tappable");
+var _Text = require("../../Typography/Text/Text");
+var _utils = require("../utils");
+var _usePaginationPageClasses = require("./usePaginationPageClasses");
+var PaginationPageButton = function(_param) {
+    var _param_isCurrent = _param.isCurrent, isCurrent = _param_isCurrent === void 0 ? false : _param_isCurrent, _param_getPageAriaLabel = _param.getPageAriaLabel, getPageAriaLabel = _param_getPageAriaLabel === void 0 ? _utils.getPageAriaLabelDefault : _param_getPageAriaLabel, children = _param.children, className = _param.className, disabled = _param.disabled, restProps = _object_without_properties._(_param, [
+        "isCurrent",
+        "getPageAriaLabel",
+        "children",
+        "className",
+        "disabled"
+    ]);
+    var paginationClassNames = (0, _usePaginationPageClasses.usePaginationPageClassNames)({
+        isCurrent: isCurrent,
+        disabled: disabled
+    });
+    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread._({
+        className: (0, _vkjs.classNames)(paginationClassNames, className),
+        activeMode: "vkuiPaginationPage--state-active",
+        hoverMode: "vkuiPaginationPage--state-hover",
+        hasActive: !isCurrent,
+        hasHover: !isCurrent,
+        focusVisibleMode: "outside",
+        "data-page": children,
+        "aria-current": isCurrent ? true : undefined,
+        "aria-label": getPageAriaLabel(children, isCurrent),
+        disabled: disabled
+    }, restProps), /*#__PURE__*/ _react.createElement(_Text.Text, {
+        normalize: false
+    }, children));
+};
+
+//# sourceMappingURL=PaginationPageButton.js.map

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../../types';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { Text } from '../../Typography/Text/Text';\nimport { getPageAriaLabelDefault } from '../utils';\nimport { usePaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  isCurrent?: boolean;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  children: number;\n}\n\nexport const PaginationPageButton = ({\n  isCurrent = false,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  children,\n  className,\n  disabled,\n  ...restProps\n}: PaginationPageButtonProps) => {\n  const paginationClassNames = usePaginationPageClassNames({ isCurrent, disabled });\n\n  return (\n    <Tappable\n      className={classNames(paginationClassNames, className)}\n      activeMode={styles['PaginationPage--state-active']}\n      hoverMode={styles['PaginationPage--state-hover']}\n      hasActive={!isCurrent}\n      hasHover={!isCurrent}\n      focusVisibleMode=\"outside\"\n      data-page={children}\n      aria-current={isCurrent ? true : undefined}\n      aria-label={getPageAriaLabel(children, isCurrent)}\n      disabled={disabled}\n      {...restProps}\n    >\n      <Text normalize={false}>{children}</Text>\n    </Tappable>\n  );\n};\n"],"names":["PaginationPageButton","isCurrent","getPageAriaLabel","getPageAriaLabelDefault","children","className","disabled","restProps","paginationClassNames","usePaginationPageClassNames","Tappable","classNames","activeMode","hoverMode","hasActive","hasHover","focusVisibleMode","data-page","aria-current","undefined","aria-label","Text","normalize"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;+DArBU;oBACI;wBAEF;oBACJ;qBACmB;wCACI;AAerC,IAAMA,uBAAuB;kCAClCC,WAAAA,0CAAY,2DACZC,kBAAAA,wDAAmBC,8BAAuB,4BAC1CC,kBAAAA,UACAC,mBAAAA,WACAC,kBAAAA,UACGC;QALHN;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAME,uBAAuBC,IAAAA,qDAA2B,EAAC;QAAER,WAAAA;QAAWK,UAAAA;IAAS;IAE/E,qBACE,qBAACI,kBAAQ;QACPL,WAAWM,IAAAA,gBAAU,EAACH,sBAAsBH;QAC5CO,UAAU;QACVC,SAAS;QACTC,WAAW,CAACb;QACZc,UAAU,CAACd;QACXe,kBAAiB;QACjBC,aAAWb;QACXc,gBAAcjB,YAAY,OAAOkB;QACjCC,cAAYlB,iBAAiBE,UAAUH;QACvCK,UAAUA;OACNC,0BAEJ,qBAACc,UAAI;QAACC,WAAW;OAAQlB;AAG/B"}

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageEllipsis.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { HasRootRef } from '../../../types';
+export interface PaginationPageEllipsisProps extends React.HTMLAttributes<HTMLSpanElement>, HasRootRef<HTMLSpanElement> {
+    disabled?: boolean;
+}
+export declare const PaginationPageEllipsis: ({ className, disabled, ...restProps }: PaginationPageEllipsisProps) => React.JSX.Element;

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageEllipsis.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PaginationPageEllipsis", {
+    enumerable: true,
+    get: function() {
+        return PaginationPageEllipsis;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
+var _Text = require("../../Typography/Text/Text");
+var _usePaginationPageClasses = require("./usePaginationPageClasses");
+var PaginationPageEllipsis = function(_param) {
+    var className = _param.className, disabled = _param.disabled, restProps = _object_without_properties._(_param, [
+        "className",
+        "disabled"
+    ]);
+    var paginationClassNames = (0, _usePaginationPageClasses.usePaginationPageClassNames)({
+        isCurrent: false,
+        disabled: disabled
+    });
+    return /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread._({
+        className: (0, _vkjs.classNames)(paginationClassNames, "vkuiPaginationPage--type-ellipsis", className)
+    }, restProps), "…");
+};
+
+//# sourceMappingURL=PaginationPageEllipsis.js.map

package/dist/cjs/components/Pagination/PaginationPage/PaginationPageEllipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageEllipsis.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../../types';\nimport { Text } from '../../Typography/Text/Text';\nimport { usePaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageEllipsisProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    HasRootRef<HTMLSpanElement> {\n  disabled?: boolean;\n}\n\nexport const PaginationPageEllipsis = ({\n  className,\n  disabled,\n  ...restProps\n}: PaginationPageEllipsisProps) => {\n  const paginationClassNames = usePaginationPageClassNames({ isCurrent: false, disabled });\n\n  return (\n    <Text\n      className={classNames(\n        paginationClassNames,\n        styles['PaginationPage--type-ellipsis'],\n        className,\n      )}\n      {...restProps}\n    >\n      &#8230;\n    </Text>\n  );\n};\n"],"names":["PaginationPageEllipsis","className","disabled","restProps","paginationClassNames","usePaginationPageClassNames","isCurrent","Text","classNames"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;+DAbU;oBACI;oBAEN;wCACuB;AASrC,IAAMA,yBAAyB;QACpCC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAME,uBAAuBC,IAAAA,qDAA2B,EAAC;QAAEC,WAAW;QAAOJ,UAAAA;IAAS;IAEtF,qBACE,qBAACK,UAAI;QACHN,WAAWO,IAAAA,gBAAU,EACnBJ,2DAEAH;OAEEE,YACL;AAIL"}

package/dist/cjs/components/Pagination/PaginationPage/usePaginationPageClasses.d.ts

@@ -0,0 +1,5 @@
+export interface UsePaginationPageClassNamesProps {
+    isCurrent?: boolean;
+    disabled?: boolean;
+}
+export declare function usePaginationPageClassNames({ isCurrent, disabled, }: UsePaginationPageClassNamesProps): string;

package/dist/cjs/components/Pagination/PaginationPage/usePaginationPageClasses.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePaginationPageClassNames", {
+    enumerable: true,
+    get: function() {
+        return usePaginationPageClassNames;
+    }
+});
+var _vkjs = require("@vkontakte/vkjs");
+var _useAdaptivity = require("../../../hooks/useAdaptivity");
+var _adaptivity = require("../../../lib/adaptivity");
+function usePaginationPageClassNames(param) {
+    var isCurrent = param.isCurrent, disabled = param.disabled;
+    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    return (0, _vkjs.classNames)("vkuiPaginationPage", sizeY === "none" && "vkuiPaginationPage--sizeY-none", sizeY === _adaptivity.SizeType.COMPACT && "vkuiPaginationPage--sizeY-compact", isCurrent && "vkuiPaginationPage--current", disabled && "vkuiPaginationPage--disabled");
+}
+
+//# sourceMappingURL=usePaginationPageClasses.js.map

package/dist/cjs/components/Pagination/PaginationPage/usePaginationPageClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/usePaginationPageClasses.ts"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport styles from './PaginationPage.module.css';\n\nexport interface UsePaginationPageClassNamesProps {\n  isCurrent?: boolean;\n  disabled?: boolean;\n}\n\nexport function usePaginationPageClassNames({\n  isCurrent,\n  disabled,\n}: UsePaginationPageClassNamesProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return classNames(\n    styles['PaginationPage'],\n    sizeY === 'none' && styles['PaginationPage--sizeY-none'],\n    sizeY === SizeType.COMPACT && styles['PaginationPage--sizeY-compact'],\n    isCurrent && styles['PaginationPage--current'],\n    disabled && styles['PaginationPage--disabled'],\n  );\n}\n"],"names":["usePaginationPageClassNames","isCurrent","disabled","useAdaptivity","sizeY","classNames","SizeType","COMPACT"],"mappings":";;;;+BAUgBA;;;eAAAA;;;oBAVW;6BACG;0BACL;AAQlB,SAASA,4BAA4B,KAGT;QAFjCC,YAD0C,MAC1CA,WACAC,WAF0C,MAE1CA;IAEA,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,OAAOC,IAAAA,gBAAU,wBAEfD,UAAU,4CACVA,UAAUE,oBAAQ,CAACC,OAAO,yCAC1BN,4CACAC;AAEJ"}

package/dist/cjs/components/Pagination/utils.d.ts

@@ -0,0 +1 @@
+export declare function getPageAriaLabelDefault(page: number, isCurrent: boolean): string;

package/dist/cjs/components/Pagination/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPageAriaLabelDefault", {
+    enumerable: true,
+    get: function() {
+        return getPageAriaLabelDefault;
+    }
+});
+function getPageAriaLabelDefault(page, isCurrent) {
+    return isCurrent ? "".concat(page, " страница") : "Перейти на ".concat(page, " страницу");
+}
+
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Pagination/utils.ts"],"sourcesContent":["export function getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n"],"names":["getPageAriaLabelDefault","page","isCurrent"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,wBAAwBC,IAAY,EAAEC,SAAkB;IACtE,OAAOA,YAAY,AAAC,GAAO,OAALD,MAAK,eAAa,AAAC,cAAkB,OAALA,MAAK;AAC7D"}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { NavIdProps } from '../../lib/getNavId';
-import { HasRootRef } from '../../types';
-export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, NavIdProps {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
     centered?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
-export declare const Panel: ({ centered, children, getRootRef, nav, className, ...restProps }: PanelProps) => React.JSX.Element;
+export declare const Panel: ({ centered, children, nav, ...restProps }: PanelProps) => React.JSX.Element;

package/dist/cjs/components/Panel/Panel.js

@@ -19,6 +19,8 @@ var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
+var _AppRootContext = require("../AppRoot/AppRootContext");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _TooltipContainer = require("../Tooltip/TooltipContainer");
 var _Touch = require("../Touch/Touch");
 var _obj;
@@ -26,18 +28,16 @@ var sizeXClassNames = (_obj = {
     none: "vkuiPanel--sizeX-none"
 }, _define_property._(_obj, _adaptivity.SizeType.COMPACT, "vkuiPanel--sizeX-compact"), _define_property._(_obj, _adaptivity.SizeType.REGULAR, "vkuiPanel--sizeX-regular"), _obj);
 var Panel = function(_param) {
-    var _param_centered = _param.centered, centered = _param_centered === void 0 ? false : _param_centered, children = _param.children, getRootRef = _param.getRootRef, nav = _param.nav, className = _param.className, restProps = _object_without_properties._(_param, [
+    var _param_centered = _param.centered, centered = _param_centered === void 0 ? false : _param_centered, children = _param.children, nav = _param.nav, restProps = _object_without_properties._(_param, [
         "centered",
         "children",
-        "getRootRef",
-        "nav",
-        "className"
+        "nav"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeX = _useAdaptivity1.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiInternalPanel--centered", className)
+    var layout = _react.useContext(_AppRootContext.AppRootContext).layout;
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiInternalPanel--centered", layout && "vkuiPanel--layoutSetting")
     }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
         Component: _TooltipContainer.TooltipContainer,
         className: (0, _vkjs.classNames)("vkuiPanel__in", "vkuiInternalPanel__in")

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && 'vkuiInternalPanel--centered',\n        className,\n      )}\n    >\n      <Touch\n        Component={TooltipContainer}\n        className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n      >\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["Panel","sizeXClassNames","none","SizeType","COMPACT","REGULAR","centered","children","getRootRef","nav","className","restProps","platform","usePlatform","useAdaptivity","sizeX","div","ref","classNames","Touch","Component","TooltipContainer","Platform","IOS"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;+DA5BU;oBACI;6BACG;2BACF;0BACH;wBAEA;gCAEQ;qBACX;IAGE;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;sBADkB,MAErBC,oBAAQ,CAACC,OAAO,kDAFK,MAGrBD,oBAAQ,CAACE,OAAO,+BAHK;AAgBjB,IAAML,QAAQ;iCACnBM,UAAAA,wCAAW,yBACXC,kBAAAA,UACAC,oBAAAA,YACAC,aAAAA,KACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,mDACKL;QACJM,KAAKT;QACLE,WAAWQ,IAAAA,gBAAU,eAEnBjB,eAAe,CAACc,MAAM,EACtBT,YAAY,+BACZI;sBAGF,qBAACS,YAAK;QACJC,WAAWC,kCAAgB;QAC3BX,WAAWQ,IAAAA,gBAAU,mBAAsB;qBAE3C,qBAACF;QAAIN,SAAS;QACbJ,yBAAW,qBAACU;QAAIN,SAAS;OAA8BH,YAAkBA,UACzEK,aAAaU,kBAAQ,CAACC,GAAG,kBAAI,qBAACP;QAAIN,WAAU;sBAC7C,qBAACM;QAAIN,SAAS;;AAItB"}
+{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\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 extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({ centered = false, children, nav, ...restProps }: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  const { layout } = React.useContext(AppRootContext);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && 'vkuiInternalPanel--centered',\n        layout && styles['Panel--layoutSetting'],\n      )}\n    >\n      <Touch\n        Component={TooltipContainer}\n        className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n      >\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </RootComponent>\n  );\n};\n"],"names":["Panel","sizeXClassNames","none","SizeType","COMPACT","REGULAR","centered","children","nav","restProps","platform","usePlatform","useAdaptivity","sizeX","layout","React","useContext","AppRootContext","RootComponent","baseClassName","classNames","Touch","Component","TooltipContainer","className","div","Platform","IOS"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;;+DA3BU;oBACI;6BACG;2BACF;0BACH;wBAEA;8BAEM;6BACD;gCACG;qBACX;IAGE;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;sBADkB,MAErBC,oBAAQ,CAACC,OAAO,kDAFK,MAGrBD,oBAAQ,CAACE,OAAO,+BAHK;AAajB,IAAML,QAAQ;iCAAGM,UAAAA,wCAAW,yBAAOC,kBAAAA,UAAUC,aAAAA,KAAQC;QAApCH;QAAkBC;QAAUC;;IAClD,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAM,AAAEC,SAAWC,OAAMC,UAAU,CAACC,8BAAc,EAA1CH;IAER,qBACE,qBAACI,4BAAa,8CACRT;QACJU,eAAeC,IAAAA,gBAAU,eAEvBnB,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZQ;sBAGF,qBAACO,YAAK;QACJC,WAAWC,kCAAgB;QAC3BC,WAAWJ,IAAAA,gBAAU,mBAAsB;qBAE3C,qBAACK;QAAID,SAAS;QACblB,yBAAW,qBAACmB;QAAID,SAAS;OAA8BjB,YAAkBA,UACzEG,aAAagB,kBAAQ,CAACC,GAAG,kBAAI,qBAACF;QAAID,WAAU;sBAC7C,qBAACC;QAAID,SAAS;;AAItB"}

package/dist/cjs/components/PanelHeader/PanelHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasComponent, HasRef, HasRootRef } from '../../types';
-export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HasComponent, HasRef, HTMLAttributesWithRootRef } from '../../types';
+export interface PanelHeaderProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     before?: React.ReactNode;
     /**
      * Добавляет элемент справа.
@@ -28,7 +28,7 @@ export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>,
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
  */
 export declare const PanelHeader: {
-    ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, typographyProps, ...restProps }: PanelHeaderProps): React.JSX.Element;
+    ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, typographyProps, ...restProps }: PanelHeaderProps): React.JSX.Element;
     Content: {
         ({ children, Component, id, }: import("./LegacyPanelHeaderContent").LegacyPanelHeaderContentProps): React.JSX.Element;
         displayName: string;

package/dist/cjs/components/PanelHeader/PanelHeader.js

@@ -22,6 +22,7 @@ var _platform = require("../../lib/platform");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _FixedLayout = require("../FixedLayout/FixedLayout");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Separator = require("../Separator/Separator");
 var _Spacing = require("../Spacing/Spacing");
 var _TooltipContainer = require("../Tooltip/TooltipContainer");
@@ -41,9 +42,16 @@ var PanelHeaderIn = function(param) {
     var _typographyProps_Component = typographyProps.Component, Component = _typographyProps_Component === void 0 ? "span" : _typographyProps_Component, restProps = _object_without_properties._(typographyProps, [
         "Component"
     ]);
-    var webviewType = (0, _ConfigProviderContext.useConfigProvider)().webviewType;
+    var _useConfigProvider = (0, _ConfigProviderContext.useConfigProvider)(), hasCustomPanelHeaderAfter = _useConfigProvider.hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth = _useConfigProvider.customPanelHeaderAfterMinWidth;
     var isInsideModal = _react.useContext(_ModalRootContext.ModalRootContext).isInsideModal;
     var platform = (0, _usePlatform.usePlatform)();
+    var afterSlotProps = !hasCustomPanelHeaderAfter || isInsideModal ? {
+        children: after
+    } : {
+        style: {
+            minWidth: customPanelHeaderAfterMinWidth
+        }
+    };
     var typographyNode;
     // TODO [>=6]: Удалить условие
     if (/*#__PURE__*/ _react.isValidElement(children) && // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -64,15 +72,15 @@ var PanelHeaderIn = function(param) {
         className: (0, _vkjs.classNames)("vkuiPanelHeader__before", "vkuiInternalPanelHeader__before")
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiPanelHeader__content"
-    }, typographyNode), /*#__PURE__*/ _react.createElement("div", {
+    }, typographyNode), /*#__PURE__*/ _react.createElement("div", _object_spread._({
         className: (0, _vkjs.classNames)("vkuiPanelHeader__after", "vkuiInternalPanelHeader__after")
-    }, (webviewType === _ConfigProviderContext.WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === _platform.Platform.VKCOM && /*#__PURE__*/ _react.createElement(_Separator.Separator, {
+    }, afterSlotProps))), separator && platform === _platform.Platform.VKCOM && /*#__PURE__*/ _react.createElement(_Separator.Separator, {
         className: "vkuiPanelHeader__separator",
         wide: true
     }));
 };
 var PanelHeader = function(_param) {
-    var before = _param.before, children = _param.children, after = _param.after, _param_separator = _param.separator, separator = _param_separator === void 0 ? true : _param_separator, _param_visor = _param.visor, visor = _param_visor === void 0 ? true : _param_visor, _param_transparent = _param.transparent, transparent = _param_transparent === void 0 ? false : _param_transparent, shadow = _param.shadow, getRef = _param.getRef, getRootRef = _param.getRootRef, fixed = _param.fixed, className = _param.className, typographyProps = _param.typographyProps, restProps = _object_without_properties._(_param, [
+    var before = _param.before, children = _param.children, after = _param.after, _param_separator = _param.separator, separator = _param_separator === void 0 ? true : _param_separator, _param_visor = _param.visor, visor = _param_visor === void 0 ? true : _param_visor, _param_transparent = _param.transparent, transparent = _param_transparent === void 0 ? false : _param_transparent, shadow = _param.shadow, getRef = _param.getRef, getRootRef = _param.getRootRef, fixed = _param.fixed, typographyProps = _param.typographyProps, restProps = _object_without_properties._(_param, [
         "before",
         "children",
         "after",
@@ -83,18 +91,15 @@ var PanelHeader = function(_param) {
         "getRef",
         "getRootRef",
         "fixed",
-        "className",
         "typographyProps"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var webviewType = (0, _ConfigProviderContext.useConfigProvider)().webviewType;
-    var isInsideModal = _react.useContext(_ModalRootContext.ModalRootContext).isInsideModal;
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeX = _useAdaptivity1.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
     var _useAdaptivityConditionalRender1 = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)(), adaptiveSizeX = _useAdaptivityConditionalRender1.sizeX;
     var isFixed = fixed !== undefined ? fixed : platform !== _platform.Platform.VKCOM;
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && (0, _vkjs.classNames)("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && (0, _vkjs.classNames)("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), webviewType === _ConfigProviderContext.WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && (0, _vkjs.classNames)("vkuiPanelHeader--no-before", "vkuiInternalPanelHeader--no-before"), !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== _adaptivity.SizeType.COMPACT && sizeXClassNames[sizeX], className),
-        ref: isFixed ? getRootRef : getRef
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && (0, _vkjs.classNames)("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && (0, _vkjs.classNames)("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), !before && (0, _vkjs.classNames)("vkuiPanelHeader--no-before", "vkuiInternalPanelHeader--no-before"), !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== _adaptivity.SizeType.COMPACT && sizeXClassNames[sizeX]),
+        getRootRef: isFixed ? getRootRef : getRef
     }), isFixed ? /*#__PURE__*/ _react.createElement(_FixedLayout.FixedLayout, {
         className: (0, _vkjs.classNames)("vkuiPanelHeader__fixed", "vkuiInternalPanelHeader__fixed"),
         vertical: "top",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, 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 { LegacyPanelHeaderContent } from './LegacyPanelHeaderContent';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\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   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\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\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["PanelHeader","platformClassNames","ios","classNames","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","useConfigProvider","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","Platform","VKCOM","Text","weight","className","Fragment","TooltipContainer","fixed","div","WebviewType","INTERNAL","Separator","wide","visor","transparent","shadow","getRef","getRootRef","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","SizeType","COMPACT","ref","FixedLayout","vertical","compact","Spacing","size","Content"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport { LegacyPanelHeaderContent } from './LegacyPanelHeaderContent';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\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   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div\n          className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}\n          {...afterSlotProps}\n        />\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\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    </RootComponent>\n  );\n};\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["PanelHeader","platformClassNames","ios","classNames","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","useConfigProvider","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","afterSlotProps","style","minWidth","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","Platform","VKCOM","Text","weight","className","Fragment","TooltipContainer","fixed","div","Separator","wide","visor","transparent","shadow","getRef","getRootRef","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","RootComponent","baseClassName","hasOwnProperty","SizeType","COMPACT","FixedLayout","vertical","compact","Spacing","size","Content"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PanelHeaderContentProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     aside?: React.ReactNode;
     before?: React.ReactNode;
     status?: React.ReactNode;
@@ -7,4 +8,4 @@ export interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
  */
-export declare const PanelHeaderContent: ({ className, style, aside, status, before, children, onClick, ...restProps }: PanelHeaderContentProps) => React.JSX.Element;
+export declare const PanelHeaderContent: ({ aside, status, before, children, onClick, ...restProps }: PanelHeaderContentProps) => React.JSX.Element;

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

@@ -16,6 +16,7 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Headline = require("../Typography/Headline/Headline");
@@ -44,9 +45,7 @@ var PanelHeaderChildren = function(param) {
     }, children);
 };
 var PanelHeaderContent = function(_param) {
-    var className = _param.className, style = _param.style, aside = _param.aside, status = _param.status, before = _param.before, children = _param.children, onClick = _param.onClick, restProps = _object_without_properties._(_param, [
-        "className",
-        "style",
+    var aside = _param.aside, status = _param.status, before = _param.before, children = _param.children, onClick = _param.onClick, restProps = _object_without_properties._(_param, [
         "aside",
         "status",
         "before",
@@ -62,9 +61,8 @@ var PanelHeaderContent = function(_param) {
         hasActive: platform === _platform.Platform.IOS,
         activeMode: "opacity"
     }) : {};
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, rootProps), {
-        style: style,
-        className: (0, _vkjs.classNames)("vkuiPanelHeaderContent", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, rootProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiPanelHeaderContent", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android)
     }), (0, _vkjs.hasReactNode)(before) && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiPanelHeaderContent__before"
     }, before), /*#__PURE__*/ _react.createElement(InComponent, _object_spread_props._(_object_spread._({}, inProps), {