@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type DirectionContextType = boolean | undefined;
+export declare const NavTransitionDirectionProvider: ({ children, isBack: isBackProp, }: React.PropsWithChildren<{
+    isBack: DirectionContextType;
+}>) => React.JSX.Element;
+export type TransitionDirection = undefined | 'forwards' | 'backwards';
+export declare const useNavDirection: () => TransitionDirection;
+export {};

package/dist/cjs/components/NavTransitionDirectionContext/NavTransitionDirectionContext.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    NavTransitionDirectionProvider: function() {
+        return NavTransitionDirectionProvider;
+    },
+    useNavDirection: function() {
+        return useNavDirection;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var TransitionDirectionContext = /*#__PURE__*/ _react.default.createContext(undefined);
+var NavTransitionDirectionProvider = function(param) {
+    var children = param.children, isBackProp = param.isBack;
+    var parentIsBack = _react.default.useContext(TransitionDirectionContext);
+    // if local isBack is undefined then transition happend on the parent side (probably Root)
+    var isBack = isBackProp !== undefined ? isBackProp : parentIsBack;
+    // 'direction' should always represent the direction state of the panel on mount
+    // save the on mount value of the panel to the state
+    // to make sure we don't trigger new re-render for the panel
+    // due to change in the prop passed to provider
+    var _React_useState = _sliced_to_array._(_react.default.useState(isBack), 1), isBackOnMount = _React_useState[0];
+    return /*#__PURE__*/ _react.default.createElement(TransitionDirectionContext.Provider, {
+        value: isBackOnMount
+    }, children);
+};
+var useNavDirection = function() {
+    var isBack = _react.default.useContext(TransitionDirectionContext);
+    var transitionDirection = isBack === undefined ? undefined : isBack ? "backwards" : "forwards";
+    return transitionDirection;
+};
+
+//# sourceMappingURL=NavTransitionDirectionContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.tsx"],"sourcesContent":["import React from 'react';\n\ntype DirectionContextType = boolean | undefined;\n\nconst TransitionDirectionContext = React.createContext<DirectionContextType>(undefined);\n\nexport const NavTransitionDirectionProvider = ({\n  children,\n  isBack: isBackProp,\n}: React.PropsWithChildren<{ isBack: DirectionContextType }>) => {\n  const parentIsBack = React.useContext(TransitionDirectionContext);\n  // if local isBack is undefined then transition happend on the parent side (probably Root)\n  const isBack = isBackProp !== undefined ? isBackProp : parentIsBack;\n\n  // 'direction' should always represent the direction state of the panel on mount\n  // save the on mount value of the panel to the state\n  // to make sure we don't trigger new re-render for the panel\n  // due to change in the prop passed to provider\n  const [isBackOnMount] = React.useState<DirectionContextType>(isBack);\n\n  return (\n    <TransitionDirectionContext.Provider value={isBackOnMount}>\n      {children}\n    </TransitionDirectionContext.Provider>\n  );\n};\n\nexport type TransitionDirection = undefined | 'forwards' | 'backwards';\n\nexport const useNavDirection = (): TransitionDirection => {\n  const isBack = React.useContext(TransitionDirectionContext);\n  const transitionDirection = isBack === undefined ? undefined : isBack ? 'backwards' : 'forwards';\n\n  return transitionDirection;\n};\n"],"names":["NavTransitionDirectionProvider","useNavDirection","TransitionDirectionContext","React","createContext","undefined","children","isBack","isBackProp","parentIsBack","useContext","useState","isBackOnMount","Provider","value","transitionDirection"],"mappings":";;;;;;;;;;;IAMaA,8BAA8B;eAA9BA;;IAuBAC,eAAe;eAAfA;;;;;8DA7BK;AAIlB,IAAMC,2CAA6BC,cAAK,CAACC,aAAa,CAAuBC;AAEtE,IAAML,iCAAiC;QAC5CM,iBAAAA,UACAC,AAAQC,mBAARD;IAEA,IAAME,eAAeN,cAAK,CAACO,UAAU,CAACR;IACtC,0FAA0F;IAC1F,IAAMK,SAASC,eAAeH,YAAYG,aAAaC;IAEvD,gFAAgF;IAChF,oDAAoD;IACpD,4DAA4D;IAC5D,+CAA+C;IAC/C,IAAwBN,qCAAAA,cAAK,CAACQ,QAAQ,CAAuBJ,aAAtDK,gBAAiBT;IAExB,qBACE,6BAACD,2BAA2BW,QAAQ;QAACC,OAAOF;OACzCN;AAGP;AAIO,IAAML,kBAAkB;IAC7B,IAAMM,SAASJ,cAAK,CAACO,UAAU,CAACR;IAChC,IAAMa,sBAAsBR,WAAWF,YAAYA,YAAYE,SAAS,cAAc;IAEtF,OAAOQ;AACT"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { HasRootRef } from '../../types';
-export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, HasRootRef<HTMLElement> {
+import type { HTMLAttributesWithRootRef } from '../../types';
+export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {
     /**
      * Текущая страница.
      */
@@ -41,4 +41,4 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/Pagination
  */
-export declare const Pagination: ({ currentPage, siblingCount, boundaryCount, totalPages, disabled, getPageAriaLabel, prevButtonAriaLabel, nextButtonAriaLabel, getRootRef, onChange, ...resetProps }: PaginationProps) => React.JSX.Element;
+export declare const Pagination: ({ currentPage, siblingCount, boundaryCount, totalPages, disabled, getPageAriaLabel, prevButtonAriaLabel, nextButtonAriaLabel, onChange, ...resetProps }: PaginationProps) => React.JSX.Element;

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,9 @@ 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 _NavIdContext = require("../NavIdContext/NavIdContext");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _TooltipContainer = require("../Tooltip/TooltipContainer");
 var _Touch = require("../Touch/Touch");
 var _obj;
@@ -26,18 +29,18 @@ 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(_NavIdContext.NavPanelIdContext.Provider, {
+        value: restProps.id || nav
+    }, /*#__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")
@@ -49,7 +52,7 @@ var Panel = function(_param) {
         className: "vkuiInternalPanel__fade"
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiPanel__in-after"
-    })));
+    }))));
 };
 
 //# sourceMappingURL=Panel.js.map

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 { NavPanelIdContext } from '../NavIdContext/NavIdContext';\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    <NavPanelIdContext.Provider value={restProps.id || nav}>\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    </NavPanelIdContext.Provider>\n  );\n};\n"],"names":["Panel","sizeXClassNames","none","SizeType","COMPACT","REGULAR","centered","children","nav","restProps","platform","usePlatform","useAdaptivity","sizeX","layout","React","useContext","AppRootContext","NavPanelIdContext","Provider","value","id","RootComponent","baseClassName","classNames","Touch","Component","TooltipContainer","className","div","Platform","IOS"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;+DA5BU;oBACI;6BACG;2BACF;0BACH;wBAEA;8BAEM;4BACG;6BACJ;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,+BAAiB,CAACC,QAAQ;QAACC,OAAOX,UAAUY,EAAE,IAAIb;qBACjD,qBAACc,4BAAa,8CACRb;QACJc,eAAeC,IAAAA,gBAAU,eAEvBvB,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZQ;sBAGF,qBAACW,YAAK;QACJC,WAAWC,kCAAgB;QAC3BC,WAAWJ,IAAAA,gBAAU,mBAAsB;qBAE3C,qBAACK;QAAID,SAAS;QACbtB,yBAAW,qBAACuB;QAAID,SAAS;OAA8BrB,YAAkBA,UACzEG,aAAaoB,kBAAQ,CAACC,GAAG,kBAAI,qBAACF;QAAID,WAAU;sBAC7C,qBAACC;QAAID,SAAS;;AAKxB"}

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");
@@ -79,7 +80,7 @@ var PanelHeaderIn = function(param) {
     }));
 };
 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",
@@ -90,16 +91,15 @@ var PanelHeader = function(_param) {
         "getRef",
         "getRootRef",
         "fixed",
-        "className",
         "typographyProps"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     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"), !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",