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

package/dist/cssm/components/ModalRoot/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["import { DOMContextInterface } from '../../lib/dom';\nimport { HasPlatform } from '../../types';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\n\nexport enum ModalType {\n  PAGE = 'page',\n  CARD = 'card',\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string | null;\n  /**\n   * Событие начала открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Событие открытия модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Событие начала закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Событие закрытия модалки.\n   */\n  onClosed?: VoidFunction;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n\nexport interface ModalRootProps {\n  activeModal?: string | null;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?(modalId: string): void;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?(modalId: string): void;\n}\n\nexport interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n}\n"],"names":["ModalType","PAGE","CARD"],"mappings":"WAIO;UAAKA,SAAS;IAATA,UACVC,UAAO;IADGD,UAEVE,UAAO;GAFGF,cAAAA"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["import { DOMContextInterface } from '../../lib/dom';\nimport { HasPlatform } from '../../types';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\n\nexport enum ModalType {\n  PAGE = 'page',\n  CARD = 'card',\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n  bottomInset?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string | null;\n  /**\n   * Событие начала открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Событие открытия модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Событие начала закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Событие закрытия модалки.\n   */\n  onClosed?: VoidFunction;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n\nexport interface ModalRootProps {\n  activeModal?: string | null;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?(modalId: string): void;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?(modalId: string): void;\n}\n\nexport interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n}\n"],"names":["ModalType","PAGE","CARD"],"mappings":"WAIO;UAAKA,SAAS;IAATA,UACVC,UAAO;IADGD,UAEVE,UAAO;GAFGF,cAAAA"}

package/dist/cssm/components/NavIdContext/NavIdContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NavViewIdContext: React.Context<string | undefined>;
+export declare const NavPanelIdContext: React.Context<string | undefined>;

package/dist/cssm/components/NavIdContext/NavIdContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const NavViewIdContext = /*#__PURE__*/ React.createContext(undefined);
+export const NavPanelIdContext = /*#__PURE__*/ React.createContext(undefined);
+
+//# sourceMappingURL=NavIdContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/NavIdContext/NavIdContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport const NavViewIdContext = React.createContext<string | undefined>(undefined);\nexport const NavPanelIdContext = React.createContext<string | undefined>(undefined);\n"],"names":["React","NavViewIdContext","createContext","undefined","NavPanelIdContext"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAE1B,OAAO,MAAMC,iCAAmBD,MAAME,aAAa,CAAqBC,WAAW;AACnF,OAAO,MAAMC,kCAAoBJ,MAAME,aAAa,CAAqBC,WAAW"}

package/dist/cssm/components/NavIdContext/useNavId.d.ts

@@ -0,0 +1,4 @@
+export declare const useNavId: () => {
+    view: string | undefined;
+    panel: string | undefined;
+};

package/dist/cssm/components/NavIdContext/useNavId.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavPanelIdContext, NavViewIdContext } from './NavIdContext';
+export const useNavId = ()=>({
+        view: React.useContext(NavViewIdContext),
+        panel: React.useContext(NavPanelIdContext)
+    });
+
+//# sourceMappingURL=useNavId.js.map

package/dist/cssm/components/NavIdContext/useNavId.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/NavIdContext/useNavId.ts"],"sourcesContent":["import React from 'react';\nimport { NavPanelIdContext, NavViewIdContext } from './NavIdContext';\n\nexport const useNavId = () => ({\n  view: React.useContext(NavViewIdContext),\n  panel: React.useContext(NavPanelIdContext),\n});\n"],"names":["React","NavPanelIdContext","NavViewIdContext","useNavId","view","useContext","panel"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,iBAAiB;AAErE,OAAO,MAAMC,WAAW,IAAO,CAAA;QAC7BC,MAAMJ,MAAMK,UAAU,CAACH;QACvBI,OAAON,MAAMK,UAAU,CAACJ;IAC1B,CAAA,EAAG"}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+const TransitionDirectionContext = /*#__PURE__*/ React.createContext(undefined);
+export const NavTransitionDirectionProvider = ({ children, isBack: isBackProp })=>{
+    const parentIsBack = React.useContext(TransitionDirectionContext);
+    // if local isBack is undefined then transition happend on the parent side (probably Root)
+    const 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
+    const [isBackOnMount] = React.useState(isBack);
+    return /*#__PURE__*/ React.createElement(TransitionDirectionContext.Provider, {
+        value: isBackOnMount
+    }, children);
+};
+export const useNavDirection = ()=>{
+    const isBack = React.useContext(TransitionDirectionContext);
+    const transitionDirection = isBack === undefined ? undefined : isBack ? 'backwards' : 'forwards';
+    return transitionDirection;
+};
+
+//# sourceMappingURL=NavTransitionDirectionContext.js.map

package/dist/cssm/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":["React","TransitionDirectionContext","createContext","undefined","NavTransitionDirectionProvider","children","isBack","isBackProp","parentIsBack","useContext","isBackOnMount","useState","Provider","value","useNavDirection","transitionDirection"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAI1B,MAAMC,2CAA6BD,MAAME,aAAa,CAAuBC;AAE7E,OAAO,MAAMC,iCAAiC,CAAC,EAC7CC,QAAQ,EACRC,QAAQC,UAAU,EACwC;IAC1D,MAAMC,eAAeR,MAAMS,UAAU,CAACR;IACtC,0FAA0F;IAC1F,MAAMK,SAASC,eAAeJ,YAAYI,aAAaC;IAEvD,gFAAgF;IAChF,oDAAoD;IACpD,4DAA4D;IAC5D,+CAA+C;IAC/C,MAAM,CAACE,cAAc,GAAGV,MAAMW,QAAQ,CAAuBL;IAE7D,qBACE,oBAACL,2BAA2BW,QAAQ;QAACC,OAAOH;OACzCL;AAGP,EAAE;AAIF,OAAO,MAAMS,kBAAkB;IAC7B,MAAMR,SAASN,MAAMS,UAAU,CAACR;IAChC,MAAMc,sBAAsBT,WAAWH,YAAYA,YAAYG,SAAS,cAAc;IAEtF,OAAOS;AACT,EAAE"}

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

@@ -1,20 +1,15 @@
 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';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { PaginationPageButton } from './PaginationPage/PaginationPageButton';
+import { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';
+import { getPageAriaLabelDefault } from './utils';
 import styles from './Pagination.module.css';
-function getPageAriaLabelDefault(page, isCurrent) {
-    return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;
-}
 /**
  * @see https://vkcom.github.io/VKUI/#/Pagination
- */ export const Pagination = ({ currentPage = 1, siblingCount = 1, boundaryCount = 1, totalPages = 1, disabled, getPageAriaLabel = getPageAriaLabelDefault, prevButtonAriaLabel = 'Перейти на предыдущую страницу', nextButtonAriaLabel = 'Перейти на следующую страницу', getRootRef, onChange, ...resetProps })=>{
-    const { sizeY = 'none' } = useAdaptivity();
+ */ export const Pagination = ({ currentPage = 1, siblingCount = 1, boundaryCount = 1, totalPages = 1, disabled, getPageAriaLabel = getPageAriaLabelDefault, prevButtonAriaLabel = 'Перейти на предыдущую страницу', nextButtonAriaLabel = 'Перейти на следующую страницу', onChange, ...resetProps })=>{
     const pages = usePagination({
         currentPage,
         totalPages,
@@ -53,42 +48,32 @@ function getPageAriaLabelDefault(page, isCurrent) {
             case 'end-ellipsis':
                 return /*#__PURE__*/ React.createElement("li", {
                     key: page
-                }, /*#__PURE__*/ React.createElement(Text, {
-                    className: classNames(styles['Pagination__page'], styles['Pagination__page--type-ellipsis'], sizeY === 'none' && styles['Pagination__page--sizeY-none'], sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'], disabled && styles['Pagination__page--disabled'])
-                }, "…"));
+                }, /*#__PURE__*/ React.createElement(PaginationPageEllipsis, {
+                    disabled: disabled
+                }));
             default:
                 {
                     const isCurrent = page === currentPage;
                     return /*#__PURE__*/ React.createElement("li", {
                         key: page
-                    }, /*#__PURE__*/ React.createElement(Tappable, {
-                        className: classNames(styles['Pagination__page'], sizeY === 'none' && styles['Pagination__page--sizeY-none'], sizeY === SizeType.COMPACT && styles['Pagination__page--sizeY-compact'], isCurrent && styles['Pagination__page--current'], disabled && styles['Pagination__page--disabled']),
-                        activeMode: styles['Pagination__page--state-active'],
-                        hoverMode: styles['Pagination__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", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        Component: "nav",
         role: "navigation",
         "aria-label": "Навигация по страницам",
-        ref: getRootRef,
         ...resetProps
     }, /*#__PURE__*/ React.createElement("ul", {
         className: styles['Pagination__list']

package/dist/cssm/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","styles","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","styles","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;AAClD,OAAOC,YAAY,0BAA0B;AAyC7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,cAAc,CAAC,EACfC,eAAe,CAAC,EAChBC,gBAAgB,CAAC,EACjBC,aAAa,CAAC,EACdC,QAAQ,EACRC,mBAAmBR,uBAAuB,EAC1CS,sBAAsB,gCAAgC,EACtDC,sBAAsB,+BAA+B,EACrDC,QAAQ,EACR,GAAGC,YACa;IAChB,MAAMC,QAAQlB,cAAc;QAC1BQ;QACAG;QACAF;QACAC;IACF;IACA,MAAMS,cAAcX,gBAAgB;IACpC,MAAMY,aAAaZ,gBAAgBG;IAEnC,MAAMU,kBAAkBxB,MAAMyB,WAAW,CAAC;QACxC,IAAIN,YAAY,CAACG,aAAa;YAC5BH,SAASR,cAAc;QACzB;IACF,GAAG;QAACA;QAAaW;QAAaH;KAAS;IAEvC,MAAMO,cAAc1B,MAAMyB,WAAW,CACnC,CAACE;QACC,MAAMC,OAAeD,MAAME,aAAa,CAACC,OAAO,CAACF,IAAI,IAAI;QACzDT,WAAWY,OAAOH;IACpB,GACA;QAACT;KAAS;IAGZ,MAAMa,kBAAkBhC,MAAMyB,WAAW,CAAC;QACxC,IAAIN,YAAY,CAACI,YAAY;YAC3BJ,SAASR,cAAc;QACzB;IACF,GAAG;QAACA;QAAaY;QAAYJ;KAAS;IAEtC,MAAMc,cAAcjC,MAAMyB,WAAW,CACnC,CAACG;QACC,OAAQA;YACN,KAAK;YACL,KAAK;gBACH,qBACE,oBAACM;oBAAGC,KAAKP;iCACP,oBAACrB;oBAAuBQ,UAAUA;;YAGxC;gBAAS;oBACP,MAAMqB,YAAYR,SAASjB;oBAC3B,qBACE,oBAACuB;wBAAGC,KAAKP;qCACP,oBAACtB;wBACCU,kBAAkBA;wBAClBoB,WAAWA;wBACXC,SAASX;wBACTX,UAAUA;uBAETa;gBAIT;QACF;IACF,GACA;QAACjB;QAAaI;QAAUC;QAAkBU;KAAY;IAGxD,qBACE,oBAACrB;QACCiC,WAAU;QACVC,MAAK;QACLC,cAAW;QACV,GAAGpB,UAAU;qBAEd,oBAACqB;QAAGC,WAAWjC,MAAM,CAAC,mBAAmB;qBACvC,oBAACyB;QAAGQ,WAAWjC,MAAM,CAAC,kCAAkC;qBACtD,oBAACL;QACCuC,MAAK;QACLC,sBAAQ,oBAAC3C;YAAyB4C,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLhC,UAAUO,eAAeP;QACzByB,cAAYvB;QACZoB,SAASb;SAGZH,MAAM2B,GAAG,CAACf,4BACX,oBAACC;QAAGQ,WAAWjC,MAAM,CAAC,kCAAkC;qBACtD,oBAACL;QACCuC,MAAK;QACLM,qBAAO,oBAAC/C;YAA0B2C,OAAO;;QACzCC,YAAW;QACXC,MAAK;QACLhC,UAAUQ,cAAcR;QACxByB,cAAYtB;QACZmB,SAASL;;AAMrB,EAAE"}

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

@@ -12,54 +12,3 @@
 .Pagination__nextButtonContainer {
   margin-left: 8px;
 }
-
-/* Page styles */
-
-.Pagination__page {
-  box-sizing: border-box;
-  padding-right: 8px;
-  padding-left: 8px;
-  width: 100%;
-  min-width: 40px;
-  border-radius: var(--vkui--size_border_radius--regular);
-  text-align: center;
-  color: var(--vkui--color_text_secondary);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  height: var(--vkui--size_button_large_height--regular);
-  line-height: var(--vkui--size_button_large_height--regular);
-}
-
-.Pagination__page--state-hover {
-  background-color: var(--vkui--color_transparent--hover);
-}
-
-.Pagination__page--state-active,
-.Pagination__page--current {
-  color: var(--vkui--color_text_primary);
-  background-color: var(--vkui--color_transparent--active);
-}
-
-.Pagination__page--disabled {
-  opacity: var(--vkui--opacity_disable);
-}
-
-.Pagination__page--sizeY-compact {
-  line-height: var(--vkui--size_button_large_height--compact);
-  height: var(--vkui--size_button_large_height--compact);
-}
-
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Pagination__page--sizeY-none {
-    line-height: var(--vkui--size_button_large_height--compact);
-    height: var(--vkui--size_button_large_height--compact);
-  }
-}
-
-.Pagination__page--type-ellipsis {
-  min-width: 16px;
-  padding-right: 0;
-  padding-left: 0;
-}

package/dist/cssm/components/Pagination/PaginationPage/PaginationPage.module.css

@@ -0,0 +1,43 @@
+/* Page styles */
+.PaginationPage {
+  box-sizing: border-box;
+  padding-right: 8px;
+  padding-left: 8px;
+  width: 100%;
+  min-width: 40px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  text-align: center;
+  color: var(--vkui--color_text_secondary);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  height: var(--vkui--size_button_large_height--regular);
+  line-height: var(--vkui--size_button_large_height--regular);
+}
+.PaginationPage--state-hover {
+  background-color: var(--vkui--color_transparent--hover);
+}
+.PaginationPage--state-active,
+.PaginationPage--current {
+  color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_transparent--active);
+}
+.PaginationPage--disabled {
+  opacity: var(--vkui--opacity_disable);
+}
+.PaginationPage--sizeY-compact {
+  line-height: var(--vkui--size_button_large_height--compact);
+  height: var(--vkui--size_button_large_height--compact);
+}
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .PaginationPage--sizeY-none {
+    line-height: var(--vkui--size_button_large_height--compact);
+    height: var(--vkui--size_button_large_height--compact);
+  }
+}
+.PaginationPage--type-ellipsis {
+  min-width: 16px;
+  padding-right: 0;
+  padding-left: 0;
+}

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

@@ -0,0 +1,30 @@
+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';
+import styles from './PaginationPage.module.css';
+export const PaginationPageButton = ({ isCurrent = false, getPageAriaLabel = getPageAriaLabelDefault, children, className, disabled, ...restProps })=>{
+    const paginationClassNames = usePaginationPageClassNames({
+        isCurrent,
+        disabled
+    });
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        className: classNames(paginationClassNames, className),
+        activeMode: styles['PaginationPage--state-active'],
+        hoverMode: styles['PaginationPage--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/cssm/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","styles","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;AACzE,OAAOC,YAAY,8BAA8B;AAcjD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,YAAY,KAAK,EACjBC,mBAAmBL,uBAAuB,EAC1CM,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACuB;IAC1B,MAAMC,uBAAuBT,4BAA4B;QAAEG;QAAWI;IAAS;IAE/E,qBACE,oBAACV;QACCS,WAAWV,WAAWa,sBAAsBH;QAC5CI,YAAYT,MAAM,CAAC,+BAA+B;QAClDU,WAAWV,MAAM,CAAC,8BAA8B;QAChDW,WAAW,CAACT;QACZU,UAAU,CAACV;QACXW,kBAAiB;QACjBC,aAAWV;QACXW,gBAAcb,YAAY,OAAOc;QACjCC,cAAYd,iBAAiBC,UAAUF;QACvCI,UAAUA;QACT,GAAGC,SAAS;qBAEb,oBAACV;QAAKqB,WAAW;OAAQd;AAG/B,EAAE"}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Text } from '../../Typography/Text/Text';
+import { usePaginationPageClassNames } from './usePaginationPageClasses';
+import styles from './PaginationPage.module.css';
+export const PaginationPageEllipsis = ({ className, disabled, ...restProps })=>{
+    const paginationClassNames = usePaginationPageClassNames({
+        isCurrent: false,
+        disabled
+    });
+    return /*#__PURE__*/ React.createElement(Text, {
+        className: classNames(paginationClassNames, styles['PaginationPage--type-ellipsis'], className),
+        ...restProps
+    }, "…");
+};
+
+//# sourceMappingURL=PaginationPageEllipsis.js.map

package/dist/cssm/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","styles","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;AACzE,OAAOC,YAAY,8BAA8B;AAQjD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACyB;IAC5B,MAAMC,uBAAuBN,4BAA4B;QAAEO,WAAW;QAAOH;IAAS;IAEtF,qBACE,oBAACL;QACCI,WAAWL,WACTQ,sBACAL,MAAM,CAAC,gCAAgC,EACvCE;QAED,GAAGE,SAAS;OACd;AAIL,EAAE"}

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

@@ -0,0 +1,10 @@
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { SizeType } from '../../../lib/adaptivity';
+import styles from './PaginationPage.module.css';
+export function usePaginationPageClassNames({ isCurrent, disabled }) {
+    const { sizeY = 'none' } = useAdaptivity();
+    return classNames(styles['PaginationPage'], sizeY === 'none' && styles['PaginationPage--sizeY-none'], sizeY === SizeType.COMPACT && styles['PaginationPage--sizeY-compact'], isCurrent && styles['PaginationPage--current'], disabled && styles['PaginationPage--disabled']);
+}
+
+//# sourceMappingURL=usePaginationPageClasses.js.map

package/dist/cssm/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","styles","usePaginationPageClassNames","isCurrent","disabled","sizeY","COMPACT"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,YAAY,8BAA8B;AAOjD,OAAO,SAASC,4BAA4B,EAC1CC,SAAS,EACTC,QAAQ,EACyB;IACjC,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGN;IAE3B,OAAOD,WACLG,MAAM,CAAC,iBAAiB,EACxBI,UAAU,UAAUJ,MAAM,CAAC,6BAA6B,EACxDI,UAAUL,SAASM,OAAO,IAAIL,MAAM,CAAC,gCAAgC,EACrEE,aAAaF,MAAM,CAAC,0BAA0B,EAC9CG,YAAYH,MAAM,CAAC,2BAA2B;AAElD"}

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

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

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

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

package/dist/cssm/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,CAAC,EAAED,KAAK,SAAS,CAAC,GAAG,CAAC,WAAW,EAAEA,KAAK,SAAS,CAAC;AACvE"}

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

@@ -4,6 +4,9 @@ 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 { NavPanelIdContext } from '../NavIdContext/NavIdContext';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import { Touch } from '../Touch/Touch';
 import styles from './Panel.module.css';
@@ -14,13 +17,15 @@ const sizeXClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
- */ export const Panel = ({ centered = false, children, getRootRef, nav, className, ...restProps })=>{
+ */ export const Panel = ({ centered = false, children, nav, ...restProps })=>{
     const platform = usePlatform();
     const { sizeX = 'none' } = useAdaptivity();
-    return /*#__PURE__*/ React.createElement("div", {
+    const { layout } = React.useContext(AppRootContext);
+    return /*#__PURE__*/ React.createElement(NavPanelIdContext.Provider, {
+        value: restProps.id || nav
+    }, /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        ref: getRootRef,
-        className: classNames(styles['Panel'], sizeXClassNames[sizeX], centered && 'vkuiInternalPanel--centered', className)
+        baseClassName: classNames(styles['Panel'], sizeXClassNames[sizeX], centered && 'vkuiInternalPanel--centered', layout && styles['Panel--layoutSetting'])
     }, /*#__PURE__*/ React.createElement(Touch, {
         Component: TooltipContainer,
         className: classNames(styles['Panel__in'], 'vkuiInternalPanel__in')
@@ -32,7 +37,7 @@ const sizeXClassNames = {
         className: "vkuiInternalPanel__fade"
     }), /*#__PURE__*/ React.createElement("div", {
         className: styles['Panel__in-after']
-    })));
+    }))));
 };
 
 //# sourceMappingURL=Panel.js.map

package/dist/cssm/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","styles","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;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACJ,SAASQ,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMK,QAAQ,CAAC,EACpBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,UAAU,EACVC,GAAG,EACHC,SAAS,EACT,GAAGC,WACQ;IACX,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACE,GAAGH,SAAS;QACbI,KAAKP;QACLE,WAAWjB,WACTO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;qBAGF,oBAACX;QACCiB,WAAWlB;QACXY,WAAWjB,WAAWO,MAAM,CAAC,YAAY,EAAE;qBAE3C,oBAACc;QAAIJ,WAAWV,MAAM,CAAC,mBAAmB;QACzCM,yBAAW,oBAACQ;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;OAAGO,YAAkBA,UACzEK,aAAaf,SAASoB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;;AAIjD,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 { 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":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","AppRootContext","NavPanelIdContext","RootComponent","TooltipContainer","Touch","styles","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","nav","restProps","platform","sizeX","layout","useContext","Provider","value","id","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,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AAMA;;CAEC,GACD,OAAO,MAAMK,QAAQ,CAAC,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAEC,GAAG,EAAE,GAAGC,WAAuB;IACjF,MAAMC,WAAWlB;IACjB,MAAM,EAAEmB,QAAQ,MAAM,EAAE,GAAGpB;IAC3B,MAAM,EAAEqB,MAAM,EAAE,GAAGvB,MAAMwB,UAAU,CAAClB;IAEpC,qBACE,oBAACC,kBAAkBkB,QAAQ;QAACC,OAAON,UAAUO,EAAE,IAAIR;qBACjD,oBAACX;QACE,GAAGY,SAAS;QACbQ,eAAe3B,WACbU,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACU,MAAM,EACtBL,YAAY,+BACZM,UAAUZ,MAAM,CAAC,uBAAuB;qBAG1C,oBAACD;QACCmB,WAAWpB;QACXqB,WAAW7B,WAAWU,MAAM,CAAC,YAAY,EAAE;qBAE3C,oBAACoB;QAAID,WAAWnB,MAAM,CAAC,mBAAmB;QACzCM,yBAAW,oBAACc;QAAID,WAAWnB,MAAM,CAAC,kBAAkB;OAAGO,YAAkBA,UACzEG,aAAahB,SAAS2B,GAAG,kBAAI,oBAACD;QAAID,WAAU;sBAC7C,oBAACC;QAAID,WAAWnB,MAAM,CAAC,kBAAkB;;AAKnD,EAAE"}

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

@@ -31,6 +31,8 @@
   box-sizing: border-box;
 }
 
+/* stylelint-disable selector-max-universal */
+
 .Panel__centered :global(.vkuiInternalPanelHeader--vis) + * {
   margin-top: var(--vkui--size_panel_header_height--regular);
 }
@@ -123,6 +125,8 @@
   }
 }
 
+/* stylelint-enable selector-max-universal */
+
 /**
  * CMP:
  * View
@@ -164,8 +168,8 @@
   background-color: var(--vkui--color_background_content);
 }
 
-.Panel.Panel--sizeX-regular .Panel__in,
-.Panel.Panel--sizeX-regular::before {
+.Panel--sizeX-regular .Panel__in,
+.Panel--sizeX-regular::before {
   background-color: transparent;
 }
 
@@ -175,3 +179,10 @@
     background-color: transparent;
   }
 }
+
+/* В AppRoot была установлена layout настройка  */
+
+.Panel--layoutSetting .Panel__in,
+.Panel--layoutSetting::before {
+  background-color: transparent;
+}