@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/components/Pagination/Pagination.js

@@ -2,20 +2,16 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 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 { SizeType } from "../../lib/adaptivity";
 import { Button } from "../Button/Button";
-import { Tappable } from "../Tappable/Tappable";
-import { Text } from "../Typography/Text/Text";
-function getPageAriaLabelDefault(page, isCurrent) {
-    return isCurrent ? "".concat(page, " страница") : "Перейти на ".concat(page, " страницу");
-}
+import { RootComponent } from "../RootComponent/RootComponent";
+import { PaginationPageButton } from "./PaginationPage/PaginationPageButton";
+import { PaginationPageEllipsis } from "./PaginationPage/PaginationPageEllipsis";
+import { getPageAriaLabelDefault } from "./utils";
 /**
  * @see https://vkcom.github.io/VKUI/#/Pagination
  */ export 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 ? 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",
@@ -24,10 +20,8 @@ function getPageAriaLabelDefault(page, isCurrent) {
         "getPageAriaLabel",
         "prevButtonAriaLabel",
         "nextButtonAriaLabel",
-        "getRootRef",
         "onChange"
     ]);
-    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var pages = usePagination({
         currentPage: currentPage,
         totalPages: totalPages,
@@ -67,42 +61,32 @@ function getPageAriaLabelDefault(page, isCurrent) {
             case "end-ellipsis":
                 return /*#__PURE__*/ React.createElement("li", {
                     key: page
-                }, /*#__PURE__*/ React.createElement(Text, {
-                    className: classNames("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", sizeY === "none" && "vkuiPagination__page--sizeY-none", sizeY === SizeType.COMPACT && "vkuiPagination__page--sizeY-compact", disabled && "vkuiPagination__page--disabled")
-                }, "…"));
+                }, /*#__PURE__*/ React.createElement(PaginationPageEllipsis, {
+                    disabled: disabled
+                }));
             default:
                 {
                     var isCurrent = page === currentPage;
                     return /*#__PURE__*/ React.createElement("li", {
                         key: page
-                    }, /*#__PURE__*/ React.createElement(Tappable, {
-                        className: classNames("vkuiPagination__page", sizeY === "none" && "vkuiPagination__page--sizeY-none", sizeY === 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, {
-                        normalize: false
-                    }, page)));
+                    }, /*#__PURE__*/ React.createElement(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, _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/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":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","SizeType","Button","Tappable","Text","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","li","key","className","COMPACT","activeMode","hoverMode","hasActive","hasHover","focusVisibleMode","data-page","aria-current","undefined","aria-label","onClick","normalize","nav","role","ref","ul","size","before","width","appearance","mode","map","after"],"mappings":"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"}
+{"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":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","usePagination","Button","RootComponent","PaginationPageButton","PaginationPageEllipsis","getPageAriaLabelDefault","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","onChange","resetProps","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","page","currentTarget","dataset","Number","handleNextClick","renderPages","li","key","isCurrent","onClick","Component","role","aria-label","ul","className","size","before","width","appearance","mode","map","after"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,yBAAyB,QAAQ,mBAAmB;AACvF,SAA6BC,aAAa,QAAQ,4BAA4B;AAE9E,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,oBAAoB,QAAQ,wCAAwC;AAC7E,SAASC,sBAAsB,QAAQ,0CAA0C;AACjF,SAASC,uBAAuB,QAAQ,UAAU;AA0ClD;;CAEC,GACD,OAAO,IAAMC,aAAa;oCACxBC,aAAAA,8CAAc,qDACdC,cAAAA,gDAAe,uDACfC,eAAAA,kDAAgB,qDAChBC,YAAAA,4CAAa,uBACbC,kBAAAA,2CACAC,kBAAAA,wDAAmBP,uFACnBQ,qBAAAA,8DAAsB,mGACtBC,qBAAAA,8DAAsB,8DACtBC,kBAAAA,UACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,QAAQjB,cAAc;QAC1BO,aAAAA;QACAG,YAAAA;QACAF,cAAAA;QACAC,eAAAA;IACF;IACA,IAAMS,cAAcX,gBAAgB;IACpC,IAAMY,aAAaZ,gBAAgBG;IAEnC,IAAMU,kBAAkBvB,MAAMwB,WAAW,CAAC;QACxC,IAAIN,YAAY,CAACG,aAAa;YAC5BH,SAASR,cAAc;QACzB;IACF,GAAG;QAACA;QAAaW;QAAaH;KAAS;IAEvC,IAAMO,cAAczB,MAAMwB,WAAW,CACnC,SAACE;YAECR;QADA,IAAMS,OAAeD,MAAME,aAAa,CAACC,OAAO,CAACF,IAAI,IAAI;SACzDT,YAAAA,sBAAAA,gCAAAA,UAAWY,OAAOH;IACpB,GACA;QAACT;KAAS;IAGZ,IAAMa,kBAAkB/B,MAAMwB,WAAW,CAAC;QACxC,IAAIN,YAAY,CAACI,YAAY;YAC3BJ,SAASR,cAAc;QACzB;IACF,GAAG;QAACA;QAAaY;QAAYJ;KAAS;IAEtC,IAAMc,cAAchC,MAAMwB,WAAW,CACnC,SAACG;QACC,OAAQA;YACN,KAAK;YACL,KAAK;gBACH,qBACE,oBAACM;oBAAGC,KAAKP;iCACP,oBAACpB;oBAAuBO,UAAUA;;YAGxC;gBAAS;oBACP,IAAMqB,YAAYR,SAASjB;oBAC3B,qBACE,oBAACuB;wBAAGC,KAAKP;qCACP,oBAACrB;wBACCS,kBAAkBA;wBAClBoB,WAAWA;wBACXC,SAASX;wBACTX,UAAUA;uBAETa;gBAIT;QACF;IACF,GACA;QAACjB;QAAaI;QAAUC;QAAkBU;KAAY;IAGxD,qBACE,oBAACpB;QACCgC,WAAU;QACVC,MAAK;QACLC,cAAW;OACPpB,2BAEJ,oBAACqB;QAAGC,SAAS;qBACX,oBAACR;QAAGQ,SAAS;qBACX,oBAACrC;QACCsC,MAAK;QACLC,sBAAQ,oBAAC1C;YAAyB2C,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLhC,UAAUO,eAAeP;QACzByB,cAAYvB;QACZoB,SAASb;SAGZH,MAAM2B,GAAG,CAACf,4BACX,oBAACC;QAAGQ,SAAS;qBACX,oBAACrC;QACCsC,MAAK;QACLM,qBAAO,oBAAC9C;YAA0B0C,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLhC,UAAUQ,cAAcR;QACxByB,cAAYtB;QACZmB,SAASL;;AAMrB,EAAE"}

package/dist/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/components/Pagination/PaginationPage/PaginationPageButton.js

@@ -0,0 +1,37 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { Tappable } from "../../Tappable/Tappable";
+import { Text } from "../../Typography/Text/Text";
+import { getPageAriaLabelDefault } from "../utils";
+import { usePaginationPageClassNames } from "./usePaginationPageClasses";
+export 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 ? getPageAriaLabelDefault : _param_getPageAriaLabel, children = _param.children, className = _param.className, disabled = _param.disabled, restProps = _object_without_properties(_param, [
+        "isCurrent",
+        "getPageAriaLabel",
+        "children",
+        "className",
+        "disabled"
+    ]);
+    var paginationClassNames = usePaginationPageClassNames({
+        isCurrent: isCurrent,
+        disabled: disabled
+    });
+    return /*#__PURE__*/ React.createElement(Tappable, _object_spread({
+        className: 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, {
+        normalize: false
+    }, children));
+};
+
+//# sourceMappingURL=PaginationPageButton.js.map

package/dist/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":["React","classNames","Tappable","Text","getPageAriaLabelDefault","usePaginationPageClassNames","PaginationPageButton","isCurrent","getPageAriaLabel","children","className","disabled","restProps","paginationClassNames","activeMode","hoverMode","hasActive","hasHover","focusVisibleMode","data-page","aria-current","undefined","aria-label","normalize"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,IAAI,QAAQ,6BAA6B;AAClD,SAASC,uBAAuB,QAAQ,WAAW;AACnD,SAASC,2BAA2B,QAAQ,6BAA6B;AAezE,OAAO,IAAMC,uBAAuB;kCAClCC,WAAAA,0CAAY,2DACZC,kBAAAA,wDAAmBJ,mDACnBK,kBAAAA,UACAC,mBAAAA,WACAC,kBAAAA,UACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,uBAAuBR,4BAA4B;QAAEE,WAAAA;QAAWI,UAAAA;IAAS;IAE/E,qBACE,oBAACT;QACCQ,WAAWT,WAAWY,sBAAsBH;QAC5CI,UAAU;QACVC,SAAS;QACTC,WAAW,CAACT;QACZU,UAAU,CAACV;QACXW,kBAAiB;QACjBC,aAAWV;QACXW,gBAAcb,YAAY,OAAOc;QACjCC,cAAYd,iBAAiBC,UAAUF;QACvCI,UAAUA;OACNC,0BAEJ,oBAACT;QAAKoB,WAAW;OAAQd;AAG/B,EAAE"}

package/dist/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/components/Pagination/PaginationPage/PaginationPageEllipsis.js

@@ -0,0 +1,21 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { Text } from "../../Typography/Text/Text";
+import { usePaginationPageClassNames } from "./usePaginationPageClasses";
+export var PaginationPageEllipsis = function(_param) {
+    var className = _param.className, disabled = _param.disabled, restProps = _object_without_properties(_param, [
+        "className",
+        "disabled"
+    ]);
+    var paginationClassNames = usePaginationPageClassNames({
+        isCurrent: false,
+        disabled: disabled
+    });
+    return /*#__PURE__*/ React.createElement(Text, _object_spread({
+        className: classNames(paginationClassNames, "vkuiPaginationPage--type-ellipsis", className)
+    }, restProps), "…");
+};
+
+//# sourceMappingURL=PaginationPageEllipsis.js.map

package/dist/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":["React","classNames","Text","usePaginationPageClassNames","PaginationPageEllipsis","className","disabled","restProps","paginationClassNames","isCurrent"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,IAAI,QAAQ,6BAA6B;AAClD,SAASC,2BAA2B,QAAQ,6BAA6B;AASzE,OAAO,IAAMC,yBAAyB;QACpCC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAME,uBAAuBL,4BAA4B;QAAEM,WAAW;QAAOH,UAAAA;IAAS;IAEtF,qBACE,oBAACJ;QACCG,WAAWJ,WACTO,2DAEAH;OAEEE,YACL;AAIL,EAAE"}

package/dist/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/components/Pagination/PaginationPage/usePaginationPageClasses.js

@@ -0,0 +1,10 @@
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
+import { SizeType } from "../../../lib/adaptivity";
+export function usePaginationPageClassNames(param) {
+    var isCurrent = param.isCurrent, disabled = param.disabled;
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    return classNames("vkuiPaginationPage", sizeY === "none" && "vkuiPaginationPage--sizeY-none", sizeY === SizeType.COMPACT && "vkuiPaginationPage--sizeY-compact", isCurrent && "vkuiPaginationPage--current", disabled && "vkuiPaginationPage--disabled");
+}
+
+//# sourceMappingURL=usePaginationPageClasses.js.map

package/dist/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":["classNames","useAdaptivity","SizeType","usePaginationPageClassNames","isCurrent","disabled","sizeY","COMPACT"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AAQnD,OAAO,SAASC,4BAA4B,KAGT;QAFjCC,YAD0C,MAC1CA,WACAC,WAF0C,MAE1CA;IAEA,IAA2BJ,iBAAAA,wCAAAA,eAAnBK,OAAAA,0CAAQ;IAEhB,OAAON,iCAELM,UAAU,4CACVA,UAAUJ,SAASK,OAAO,yCAC1BH,4CACAC;AAEJ"}

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

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

package/dist/components/Pagination/utils.js

@@ -0,0 +1,5 @@
+export function getPageAriaLabelDefault(page, isCurrent) {
+    return isCurrent ? "".concat(page, " страница") : "Перейти на ".concat(page, " страницу");
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/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":"AAAA,OAAO,SAASA,wBAAwBC,IAAY,EAAEC,SAAkB;IACtE,OAAOA,YAAY,AAAC,GAAO,OAALD,MAAK,eAAa,AAAC,cAAkB,OAALA,MAAK;AAC7D"}

package/dist/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/components/Panel/Panel.js

@@ -8,6 +8,8 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
+import { AppRootContext } from "../AppRoot/AppRootContext";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
 import { Touch } from "../Touch/Touch";
 var _obj;
@@ -17,18 +19,16 @@ var sizeXClassNames = (_obj = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */ export 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 = usePlatform();
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
-        className: classNames("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiInternalPanel--centered", className)
+    var layout = React.useContext(AppRootContext).layout;
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiInternalPanel--centered", layout && "vkuiPanel--layoutSetting")
     }), /*#__PURE__*/ React.createElement(Touch, {
         Component: TooltipContainer,
         className: classNames("vkuiPanel__in", "vkuiInternalPanel__in")

package/dist/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":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;IAGf;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBL,SAASM,OAAO,gDAFK,MAGrBN,SAASO,OAAO,+BAHK;AAaxB;;CAEC,GACD,OAAO,IAAMC,QAAQ;iCACnBC,UAAAA,wCAAW,yBACXC,kBAAAA,UACAC,oBAAAA,YACAC,aAAAA,KACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWhB;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKH;QACJI,KAAKP;QACLE,WAAWhB,wBAETO,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;sBAGF,oBAACV;QACCgB,WAAWjB;QACXW,WAAWhB,4BAAgC;qBAE3C,oBAACoB;QAAIJ,SAAS;QACbJ,yBAAW,oBAACQ;QAAIJ,SAAS;OAA8BH,YAAkBA,UACzEK,aAAad,SAASmB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,SAAS;;AAItB,EAAE"}
+{"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":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","AppRootContext","RootComponent","TooltipContainer","Touch","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","nav","restProps","platform","sizeX","layout","useContext","baseClassName","Component","className","div","IOS"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;IAGf;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBP,SAASQ,OAAO,gDAFK,MAGrBR,SAASS,OAAO,+BAHK;AAUxB;;CAEC,GACD,OAAO,IAAMC,QAAQ;iCAAGC,UAAAA,wCAAW,yBAAOC,kBAAAA,UAAUC,aAAAA,KAAQC;QAApCH;QAAkBC;QAAUC;;IAClD,IAAME,WAAWhB;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAChB,IAAM,AAAEC,SAAWrB,MAAMsB,UAAU,CAAChB,gBAA5Be;IAER,qBACE,oBAACd,uDACKW;QACJK,eAAetB,wBAEbS,eAAe,CAACU,MAAM,EACtBL,YAAY,+BACZM;sBAGF,oBAACZ;QACCe,WAAWhB;QACXiB,WAAWxB,4BAAgC;qBAE3C,oBAACyB;QAAID,SAAS;QACbV,yBAAW,oBAACW;QAAID,SAAS;OAA8BT,YAAkBA,UACzEG,aAAad,SAASsB,GAAG,kBAAI,oBAACD;QAAID,WAAU;sBAC7C,oBAACC;QAAID,SAAS;;AAItB,EAAE"}

package/dist/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/components/PanelHeader/PanelHeader.js

@@ -8,9 +8,10 @@ import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditi
 import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
-import { useConfigProvider, WebviewType } from "../ConfigProvider/ConfigProviderContext";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { ModalRootContext } from "../ModalRoot/ModalRootContext";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Separator } from "../Separator/Separator";
 import { Spacing } from "../Spacing/Spacing";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
@@ -30,9 +31,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 = useConfigProvider().webviewType;
+    var _useConfigProvider = useConfigProvider(), hasCustomPanelHeaderAfter = _useConfigProvider.hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth = _useConfigProvider.customPanelHeaderAfterMinWidth;
     var isInsideModal = React.useContext(ModalRootContext).isInsideModal;
     var platform = 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
@@ -53,9 +61,9 @@ var PanelHeaderIn = function(param) {
         className: 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: classNames("vkuiPanelHeader__after", "vkuiInternalPanelHeader__after")
-    }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/ React.createElement(Separator, {
+    }, afterSlotProps))), separator && platform === Platform.VKCOM && /*#__PURE__*/ React.createElement(Separator, {
         className: "vkuiPanelHeader__separator",
         wide: true
     }));
@@ -63,7 +71,7 @@ var PanelHeaderIn = function(param) {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
  */ export 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",
@@ -74,18 +82,15 @@ var PanelHeaderIn = function(param) {
         "getRef",
         "getRootRef",
         "fixed",
-        "className",
         "typographyProps"
     ]);
     var platform = usePlatform();
-    var webviewType = useConfigProvider().webviewType;
-    var isInsideModal = React.useContext(ModalRootContext).isInsideModal;
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
     var _useAdaptivityConditionalRender = useAdaptivityConditionalRender(), adaptiveSizeX = _useAdaptivityConditionalRender.sizeX;
     var isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && classNames("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && classNames("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && classNames("vkuiPanelHeader--no-before", "vkuiInternalPanelHeader--no-before"), !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
-        ref: isFixed ? getRootRef : getRef
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && classNames("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && classNames("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), !before && classNames("vkuiPanelHeader--no-before", "vkuiInternalPanelHeader--no-before"), !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX]),
+        getRootRef: isFixed ? getRootRef : getRef
     }), isFixed ? /*#__PURE__*/ React.createElement(FixedLayout, {
         className: classNames("vkuiPanelHeader__fixed", "vkuiInternalPanelHeader__fixed"),
         vertical: "top",

package/dist/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":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","LegacyPanelHeaderContent","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","isInsideModal","useContext","platform","typographyNode","isValidElement","type","displayName","VKCOM","weight","className","Fragment","fixed","div","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","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":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","FixedLayout","ModalRootContext","RootComponent","Separator","Spacing","TooltipContainer","Text","LegacyPanelHeaderContent","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","useContext","platform","afterSlotProps","style","minWidth","typographyNode","isValidElement","type","displayName","VKCOM","weight","className","Fragment","fixed","div","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","baseClassName","hasOwnProperty","COMPACT","vertical","compact","size","Content"],"mappings":"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"}

package/dist/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/components/PanelHeaderContent/PanelHeaderContent.js

@@ -5,6 +5,7 @@ import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 import { Footnote } from "../Typography/Footnote/Footnote";
 import { Headline } from "../Typography/Headline/Headline";
@@ -35,9 +36,7 @@ var PanelHeaderChildren = function(param) {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
  */ export 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",
@@ -53,9 +52,8 @@ var PanelHeaderChildren = function(param) {
         hasActive: platform === Platform.IOS,
         activeMode: "opacity"
     }) : {};
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, rootProps), {
-        style: style,
-        className: classNames("vkuiPanelHeaderContent", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, rootProps), {
+        baseClassName: classNames("vkuiPanelHeaderContent", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android)
     }), hasReactNode(before) && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiPanelHeaderContent__before"
     }, before), /*#__PURE__*/ React.createElement(InComponent, _object_spread_props(_object_spread({}, inProps), {