npm - @vkontakte/vkui - Versions diffs - 5.7.2 → 5.8.0 - Mend

@vkontakte/vkui 5.7.2 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1106) hide show

package/dist/cssm/components/ModalRoot/ModalRootContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ModalElements, ModalsStateEntry, ModalType } from './types';\n\nexport type ModalRegistryEntry = ModalElements & Required<Pick<ModalsStateEntry, 'type' \| 'id'>>;\ntype ModalRefs = { [k in keyof ModalElements]: (e: ModalElements[k]) => void };\n\nexport interface ModalRootContextInterface {\n updateModalHeight: VoidFunction;\n registerModal(data: ModalRegistryEntry): void;\n onClose?: VoidFunction;\n isInsideModal: boolean;\n}\n\nexport const ModalRootContext = React.createContext<ModalRootContextInterface>({\n updateModalHeight: () => undefined,\n registerModal: () => undefined,\n isInsideModal: false,\n});\n\n/*\n All referenced elements must be static\n */\nexport function useModalRegistry(id: string \| undefined, type: ModalType) {\n const modalContext = React.useContext(ModalRootContext);\n const elements = React.useRef<ModalElements>({}).current;\n useIsomorphicLayoutEffect(() => {\n if (id !== undefined) {\n modalContext.registerModal({ ...elements, type, id });\n // unset refs on unmount to prevent leak\n const reset = Object.keys(elements).reduce<ModalRegistryEntry>(\n (acc, k) => ({ ...acc, [k]: null }),\n { type, id },\n );\n return () => modalContext.registerModal(reset);\n }\n return undefined;\n }, []);\n\n const refs = React.useRef<Required<ModalRefs>>({\n modalElement: (e) => (elements.modalElement = e),\n innerElement: (e) => (elements.innerElement = e),\n headerElement: (e) => (elements.headerElement = e),\n contentElement: (e) => (elements.contentElement = e),\n }).current;\n return { refs };\n}\n"],"names":["React","useIsomorphicLayoutEffect","ModalRootContext","createContext","updateModalHeight","undefined","registerModal","isInsideModal","useModalRegistry","id","type","modalContext","useContext","elements","useRef","current","reset","Object","keys","reduce","acc","k","refs","modalElement","e","innerElement","headerElement","contentElement"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAahF,OAAO,MAAMC,iCAAmBF,MAAMG,aAAa,CAA4B;IAC7EC,mBAAmB,IAAMC;IACzBC,eAAe,IAAMD;IACrBE,eAAe;AACjB,GAAG;AAEH;;CAEC,GACD,OAAO,SAASC,iBAAiBC,EAAsB,EAAEC,IAAe;IACtE,MAAMC,eAAeX,MAAMY,UAAU,CAACV;IACtC,MAAMW,WAAWb,MAAMc,MAAM,CAAgB,CAAC,GAAGC,OAAO;IACxDd,0BAA0B;QACxB,IAAIQ,OAAOJ,WAAW;YACpBM,aAAaL,aAAa,CAAC;gBAAE,GAAGO,QAAQ;gBAAEH;gBAAMD;YAAG;YACnD,yCAAyC;YACzC,MAAMO,QAAQC,OAAOC,IAAI,CAACL,UAAUM,MAAM,CACxC,CAACC,KAAKC,IAAO,CAAA;oBAAE,GAAGD,GAAG;oBAAE,CAACC,EAAE,EAAE;gBAAK,CAAA,GACjC;gBAAEX;gBAAMD;YAAG;YAEb,OAAO,IAAME,aAAaL,aAAa,CAACU;QAC1C;QACA,OAAOX;IACT,GAAG,EAAE;IAEL,MAAMiB,OAAOtB,MAAMc,MAAM,CAAsB;QAC7CS,cAAc,CAACC,IAAOX,SAASU,YAAY,GAAGC;QAC9CC,cAAc,CAACD,IAAOX,SAASY,YAAY,GAAGD;QAC9CE,eAAe,CAACF,IAAOX,SAASa,aAAa,GAAGF;QAChDG,gBAAgB,CAACH,IAAOX,SAASc,cAAc,GAAGH;~~IACpD~~,GAAGT,OAAO;IACV,OAAO;QAAEO;IAAK;AAChB"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { ModalElements, ModalsStateEntry, ModalType } from './types';\n\nexport type ModalRegistryEntry = ModalElements & Required<Pick<ModalsStateEntry, 'type' \| 'id'>>;\ntype ModalRefs = { [k in keyof ModalElements]: (e: ModalElements[k]) => void };\n\nexport interface ModalRootContextInterface {\n updateModalHeight: VoidFunction;\n registerModal(data: ModalRegistryEntry): void;\n onClose?: VoidFunction;\n isInsideModal: boolean;\n}\n\nexport const ModalRootContext = React.createContext<ModalRootContextInterface>({\n updateModalHeight: () => undefined,\n registerModal: () => undefined,\n isInsideModal: false,\n});\n\n/*\n All referenced elements must be static\n */\nexport function useModalRegistry(id: string \| undefined, type: ModalType) {\n const modalContext = React.useContext(ModalRootContext);\n const elements = React.useRef<ModalElements>({}).current;\n useIsomorphicLayoutEffect(() => {\n if (id !== undefined) {\n modalContext.registerModal({ ...elements, type, id });\n // unset refs on unmount to prevent leak\n const reset = Object.keys(elements).reduce<ModalRegistryEntry>(\n (acc, k) => ({ ...acc, [k]: null }),\n { type, id },\n );\n return () => modalContext.registerModal(reset);\n }\n return undefined;\n }, []);\n\n const refs = React.useRef<Required<ModalRefs>>({\n modalElement: (e) => (elements.modalElement = e),\n innerElement: (e) => (elements.innerElement = e),\n headerElement: (e) => (elements.headerElement = e),\n contentElement: (e) => (elements.contentElement = e),\n bottomInset: (e) => (elements.bottomInset = e),\n }).current;\n return { refs };\n}\n"],"names":["React","useIsomorphicLayoutEffect","ModalRootContext","createContext","updateModalHeight","undefined","registerModal","isInsideModal","useModalRegistry","id","type","modalContext","useContext","elements","useRef","current","reset","Object","keys","reduce","acc","k","refs","modalElement","e","innerElement","headerElement","contentElement","bottomInset"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAahF,OAAO,MAAMC,iCAAmBF,MAAMG,aAAa,CAA4B;IAC7EC,mBAAmB,IAAMC;IACzBC,eAAe,IAAMD;IACrBE,eAAe;AACjB,GAAG;AAEH;;CAEC,GACD,OAAO,SAASC,iBAAiBC,EAAsB,EAAEC,IAAe;IACtE,MAAMC,eAAeX,MAAMY,UAAU,CAACV;IACtC,MAAMW,WAAWb,MAAMc,MAAM,CAAgB,CAAC,GAAGC,OAAO;IACxDd,0BAA0B;QACxB,IAAIQ,OAAOJ,WAAW;YACpBM,aAAaL,aAAa,CAAC;gBAAE,GAAGO,QAAQ;gBAAEH;gBAAMD;YAAG;YACnD,yCAAyC;YACzC,MAAMO,QAAQC,OAAOC,IAAI,CAACL,UAAUM,MAAM,CACxC,CAACC,KAAKC,IAAO,CAAA;oBAAE,GAAGD,GAAG;oBAAE,CAACC,EAAE,EAAE;gBAAK,CAAA,GACjC;gBAAEX;gBAAMD;YAAG;YAEb,OAAO,IAAME,aAAaL,aAAa,CAACU;QAC1C;QACA,OAAOX;IACT,GAAG,EAAE;IAEL,MAAMiB,OAAOtB,MAAMc,MAAM,CAAsB;QAC7CS,cAAc,CAACC,IAAOX,SAASU,YAAY,GAAGC;QAC9CC,cAAc,CAACD,IAAOX,SAASY,YAAY,GAAGD;QAC9CE,eAAe,CAACF,IAAOX,SAASa,aAAa,GAAGF;QAChDG,gBAAgB,CAACH,IAAOX,SAASc,cAAc,GAAGH;QAClDI,aAAa,CAACJ,IAAOX,SAASe,WAAW,GAAGJ;IAC9C,GAAGT,OAAO;IACV,OAAO;QAAEO;IAAK;AAChB"}

package/dist/cssm/components/ModalRoot/ModalRootDesktop.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { useDOM } from '../../lib/dom';
 import { getNavId } from '../../lib/getNavId';
 import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
-import { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { ModalRootContext } from './ModalRootContext';
 import { useModalManager } from './useModalManager';
@@ -19,7 +19,7 @@ export const ModalRootDesktop = ({ activeModal: activeModalProp, children, onOpe
     const maskAnimationFrame = React.useRef(undefined);
     const restoreFocusTo = React.useRef(undefined);
     const { document } = useDOM();
-    const { webviewType, platform } = useConfigProvider();
+    const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();
     const { activeModal, exitingModal, onExit, getModalState, enteringModal, onEnter, onEntered, onExited, history, delayEnter } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);
     const { waitTransitionFinish } = useWaitTransitionFinish();
     const prevProps = usePrevious({
@@ -124,7 +124,7 @@ export const ModalRootDesktop = ({ activeModal: activeModalProp, children, onOpe
     return /*#__PURE__*/ React.createElement(ModalRootContext.Provider, {
         value: modalRootContext
     }, /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['ModalRoot'], webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'], styles['ModalRoot--desktop'])
+        className: classNames(styles['ModalRoot'], hasCustomPanelHeaderAfter && styles['ModalRoot--hasCustomPanelHeaderAfterSlot'], styles['ModalRoot--desktop'])
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['ModalRoot__mask'],
         ref: maskElementRef,

package/dist/cssm/components/ModalRoot/ModalRootDesktop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n activeModal: activeModalProp,\n children,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootWithDOMProps) => {\n const maskElementRef = React.useRef<HTMLDivElement>(null);\n const maskAnimationFrame = React.useRef<number \| undefined>(undefined);\n const restoreFocusTo = React.useRef<HTMLElement \| undefined>(undefined);\n\n const { document } = useDOM();\n const { webviewType, platform } = useConfigProvider();\n const {\n activeModal,\n exitingModal,\n onExit,\n getModalState,\n enteringModal,\n onEnter,\n onEntered,\n onExited,\n history,\n delayEnter,\n } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n const { waitTransitionFinish } = useWaitTransitionFinish();\n const prevProps = usePrevious({\n exitingModal,\n enteringModal,\n activeModal,\n });\n const modalRootContext: ModalRootContextInterface = useObjectMemo({\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n onClose: onExit,\n isInsideModal: true,\n });\n\n const timeout = platform === Platform.IOS ? 400 : 320;\n const modals = React.Children.toArray(children) as React.ReactElement[];\n\n /* Анимирует сдвиг модального окна /\n const animateModalOpacity = (modalState: ModalsStateEntry \| undefined, display: boolean) => {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n };\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number \| null = null) => {\n if (forceOpacity === null && history?.[0] !== modalState.id) {\n return;\n }\n\n if (maskAnimationFrame.current) {\n cancelAnimationFrame(maskAnimationFrame.current);\n }\n maskAnimationFrame.current = requestAnimationFrame(() => {\n if (maskElementRef.current) {\n const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n const opacity =\n forceOpacity === null\n ? 1 - (translateYCurrent - translateY) / (100 - translateY) \|\| 0\n : forceOpacity;\n maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n };\n\n const openModal = () => {\n if (!enteringModal \|\| !prevProps) {\n return;\n }\n\n const enteringState = getModalState(enteringModal);\n onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (enteringModal === enteringModal) {\n waitTransitionFinish(\n enteringState?.innerElement,\n () => onEntered(enteringModal),\n timeout,\n );\n animateModalOpacity(enteringState, true);\n }\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n if (enteringState?.innerElement) {\n enteringState.innerElement.style.transition = 'none';\n enteringState.innerElement.style.opacity = '1';\n }\n\n onEntered(enteringModal);\n };\n\n const closeModal = (id: string) => {\n const prevModalState = getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!activeModal) {\n requestAnimationFrame(() => {\n waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);\n animateModalOpacity(prevModalState, false);\n setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n onExited(id);\n };\n\n React.useEffect(() => {\n if (!prevProps) {\n return;\n }\n\n // transition phase 2: animate exiting modal\n if (exitingModal && exitingModal !== prevProps.exitingModal) {\n closeModal(exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (enteringModal && enteringModal !== prevProps.enteringModal) {\n openModal();\n }\n\n // focus restoration\n if (activeModal && !prevProps.activeModal) {\n restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement \| undefined;\n }\n if (!activeModal && !exitingModal && restoreFocusTo.current) {\n restoreFocusTo.current.focus();\n restoreFocusTo.current = undefined;\n }\n });\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />\n <div className={styles['ModalRoot__viewport']}>\n {modals.map((Modal: React.ReactElement) => {\n const modalId = getNavId(Modal.props, warn);\n if (modalId !== activeModal && modalId !== exitingModal) {\n return null;\n }\n\n const key = `modal-${modalId}`;\n\n return (\n <FocusTrap\n restoreFocus={false}\n onClose={onExit}\n timeout={timeout}\n key={key}\n className={styles['ModalRoot__modal']}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n};\n"],"names":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","Platform","warnOnce","useConfigProvider","WebviewType","FocusTrap","ModalRootContext","useModalManager","styles","warn","ModalRootDesktop","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","webviewType","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","Provider","value","div","className","VKAPPS","ref","onClick","map","Modal","modalId","props","key","restoreFocus"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n activeModal: activeModalProp,\n children,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootWithDOMProps) => {\n const maskElementRef = React.useRef<HTMLDivElement>(null);\n const maskAnimationFrame = React.useRef<number \| undefined>(undefined);\n const restoreFocusTo = React.useRef<HTMLElement \| undefined>(undefined);\n\n const { document } = useDOM();\n const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();\n const {\n activeModal,\n exitingModal,\n onExit,\n getModalState,\n enteringModal,\n onEnter,\n onEntered,\n onExited,\n history,\n delayEnter,\n } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n const { waitTransitionFinish } = useWaitTransitionFinish();\n const prevProps = usePrevious({\n exitingModal,\n enteringModal,\n activeModal,\n });\n const modalRootContext: ModalRootContextInterface = useObjectMemo({\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n onClose: onExit,\n isInsideModal: true,\n });\n\n const timeout = platform === Platform.IOS ? 400 : 320;\n const modals = React.Children.toArray(children) as React.ReactElement[];\n\n /* Анимирует сдвиг модального окна /\n const animateModalOpacity = (modalState: ModalsStateEntry \| undefined, display: boolean) => {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n };\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number \| null = null) => {\n if (forceOpacity === null && history?.[0] !== modalState.id) {\n return;\n }\n\n if (maskAnimationFrame.current) {\n cancelAnimationFrame(maskAnimationFrame.current);\n }\n maskAnimationFrame.current = requestAnimationFrame(() => {\n if (maskElementRef.current) {\n const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n const opacity =\n forceOpacity === null\n ? 1 - (translateYCurrent - translateY) / (100 - translateY) \|\| 0\n : forceOpacity;\n maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n };\n\n const openModal = () => {\n if (!enteringModal \|\| !prevProps) {\n return;\n }\n\n const enteringState = getModalState(enteringModal);\n onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (enteringModal === enteringModal) {\n waitTransitionFinish(\n enteringState?.innerElement,\n () => onEntered(enteringModal),\n timeout,\n );\n animateModalOpacity(enteringState, true);\n }\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n if (enteringState?.innerElement) {\n enteringState.innerElement.style.transition = 'none';\n enteringState.innerElement.style.opacity = '1';\n }\n\n onEntered(enteringModal);\n };\n\n const closeModal = (id: string) => {\n const prevModalState = getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!activeModal) {\n requestAnimationFrame(() => {\n waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);\n animateModalOpacity(prevModalState, false);\n setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n onExited(id);\n };\n\n React.useEffect(() => {\n if (!prevProps) {\n return;\n }\n\n // transition phase 2: animate exiting modal\n if (exitingModal && exitingModal !== prevProps.exitingModal) {\n closeModal(exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (enteringModal && enteringModal !== prevProps.enteringModal) {\n openModal();\n }\n\n // focus restoration\n if (activeModal && !prevProps.activeModal) {\n restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement \| undefined;\n }\n if (!activeModal && !exitingModal && restoreFocusTo.current) {\n restoreFocusTo.current.focus();\n restoreFocusTo.current = undefined;\n }\n });\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n hasCustomPanelHeaderAfter && styles['ModalRoot--hasCustomPanelHeaderAfterSlot'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />\n <div className={styles['ModalRoot__viewport']}>\n {modals.map((Modal: React.ReactElement) => {\n const modalId = getNavId(Modal.props, warn);\n if (modalId !== activeModal && modalId !== exitingModal) {\n return null;\n }\n\n const key = `modal-${modalId}`;\n\n return (\n <FocusTrap\n restoreFocus={false}\n onClose={onExit}\n timeout={timeout}\n key={key}\n className={styles['ModalRoot__modal']}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n};\n"],"names":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","Platform","warnOnce","useConfigProvider","FocusTrap","ModalRootContext","useModalManager","styles","warn","ModalRootDesktop","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","hasCustomPanelHeaderAfter","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","Provider","value","div","className","ref","onClick","map","Modal","modalId","props","key","restoreFocus"],"mappings":"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"}

package/dist/cssm/components/ModalRoot/types.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export interface ModalElements {
     innerElement?: HTMLElement | null;
     headerElement?: HTMLElement | null;
     contentElement?: HTMLElement | null;
+    bottomInset?: HTMLElement | null;
 }
 export interface ModalsStateEntry extends ModalElements {
     id: string | null;

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

	@@ -1 +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"}
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 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/NavTransitionDirectionContext/NavTransitionDirectionContext.d.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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 …\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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,yBAAyB,QAAQ,mBAAmB;AACvF,~~SAASC~~,~~UAAU~~,QAAQ,~~kBAAkB~~;~~AAC7C~~,SAASC,~~aAAa~~,QAAQ,~~4BAA4B~~;~~AAC1D~~,~~SAA6BC~~,aAAa,QAAQ,~~4BAA4B~~;~~AAC9E~~,SAASC,~~QAAQ~~,QAAQ,~~uBAAuB~~;~~AAEhD~~,SAASC,~~MAAM~~,QAAQ,~~mBAAmB~~;~~AAC1C~~,SAASC,~~QAAQ,QAAQ,~~uBAAuB~~;AAChD~~,~~SAASC,IAAI,~~QAAQ,~~0BAA0B~~;~~AAC/C~~,OAAOC,YAAY,0BAA0B;~~AAE7C,SAASC,wBAAwBC,IAAY,EAAEC,SAAkB;IAC/D,OAAOA,YAAY,CAAC,EAAED,KAAK,SAAS,CAAC,GAAG,CAAC,WAAW,EAAEA,KAAK,SAAS,CAAC;AACvE;AA2CA~~;;CAEC,GACD,OAAO,~~MAAME~~,aAAa,CAAC,EACzBC,cAAc,CAAC,EACfC,eAAe,CAAC,EAChBC,gBAAgB,CAAC,EACjBC,aAAa,CAAC,EACdC,QAAQ,EACRC,~~mBAAmBT~~,uBAAuB,~~EAC1CU~~,sBAAsB,gCAAgC,EACtDC,sBAAsB,+BAA+B,EACrDC,~~UAAU,EACVC,~~QAAQ,EACR,GAAGC,YACa;IAChB,~~MAAM~~,~~EAAEC~~,~~QAAQ,MAAM,EAAE,GAAGtB;IAE3B,MAAMuB,QAAQtB,~~cAAc;~~QAC1BU~~;QACAG;QACAF;QACAC;IACF;IACA,~~MAAMW~~,~~cAAcb~~,gBAAgB;IACpC,~~MAAMc~~,~~aAAad~~,gBAAgBG;IAEnC,~~MAAMY~~,~~kBAAkB9B~~,~~MAAM+B~~,WAAW,CAAC;QACxC,~~IAAIP~~,YAAY,~~CAACI~~,aAAa;~~YAC5BJ~~,~~SAAST~~,cAAc;QACzB;IACF,GAAG;QAACA;~~QAAaa~~;~~QAAaJ~~;KAAS;IAEvC,~~MAAMQ~~,~~cAAchC~~,~~MAAM+B~~,WAAW,CACnC,CAACE;QACC,~~MAAMrB~~,~~OAAeqB~~,~~MAAMC~~,aAAa,CAACC,OAAO,~~CAACvB~~,IAAI,IAAI;~~QACzDY~~,WAAWY,~~OAAOxB~~;IACpB,GACA;~~QAACY~~;KAAS;IAGZ,MAAMa,~~kBAAkBrC~~,~~MAAM+B~~,WAAW,CAAC;QACxC,~~IAAIP~~,YAAY,~~CAACK~~,YAAY;~~YAC3BL~~,~~SAAST~~,cAAc;QACzB;IACF,GAAG;QAACA;~~QAAac~~;~~QAAYL~~;KAAS;IAEtC,MAAMc,~~cAActC~~,~~MAAM+B~~,WAAW,CACnC,~~CAACnB~~;QACC,OAAQA;YACN,KAAK;YACL,KAAK;gBACH,qBACE,~~oBAAC2B~~;oBAAGC,~~KAAK5B~~;iCACP,~~oBAACH~~;~~oBACCgC~~,~~WAAWtC,WACTO,MAAM,CAAC,mBAAmB,EAC1BA,MAAM,CAAC,kCAAkC,EACzCgB,UAAU,UAAUhB,MAAM,CAAC,+BAA+B,EAC1DgB,UAAUpB,SAASoC,OAAO,IAAIhC,MAAM,CAAC,kCAAkC,EACvES,YAAYT,MAAM,CAAC,6BAA6B~~;~~mBAEnD;YAKP;~~gBAAS;oBACP,~~MAAMG~~,~~YAAYD~~,~~SAASG~~;oBAC3B,qBACE,~~oBAACwB~~;wBAAGC,~~KAAK5B~~;qCACP,~~oBAACJ~~;~~wBACCiC~~,~~WAAWtC,WACTO,MAAM,CAAC,mBAAmB,EAC1BgB,UAAU,UAAUhB,MAAM,CAAC,+BAA+B,EAC1DgB,UAAUpB,SAASoC,OAAO,IAAIhC,MAAM,CAAC,kCAAkC,EACvEG,aAAaH,MAAM,CAAC,4BAA4B,EAChDS,YAAYT,MAAM,CAAC,6BAA6B~~;~~wBAElDiC~~,~~YAAYjC,MAAM,CAAC,iCAAiC~~;~~wBACpDkC~~,~~WAAWlC,MAAM,CAAC,gCAAgC~~;~~wBAClDmC~~,~~WAAW,CAAChC;wBACZiC,UAAU,CAACjC;wBACXkC,kBAAiB;wBACjB5B,~~UAAUA;~~wBACV6B,aAAWpC~~;~~wBACXqC,gBAAcpC,YAAY,OAAOqC~~;~~wBACjCC,cAAY/B,iBAAiBR,MAAMC;wBACnCuC,SAASpB;qCAET,oBAACvB;wBAAK4C,WAAW;uBAAQzC;gBAIjC;~~QACF;IACF,GACA;~~QAACc~~;~~QAAOX;~~QAAaI;QAAUC;~~QAAkBY~~;KAAY;~~IAG/D~~,qBACE,~~oBAACsB~~;~~QAAIC~~,MAAK;~~QAAaJ~~,cAAW;~~QAAyBK~~,~~KAAKjC;QAAa~~,~~GAAGE,~~UAAU;~~qBACxF~~,~~oBAACgC~~;~~QAAGhB~~,~~WAAW/B~~,MAAM,CAAC,mBAAmB;qBACvC,~~oBAAC6B~~;~~QAAGE~~,~~WAAW/B~~,MAAM,CAAC,kCAAkC;qBACtD,~~oBAACH~~;~~QACCmD~~,MAAK;QACLC,sBAAQ,~~oBAAC1D~~;~~YAAyB2D~~,OAAO;;QACzCC,YAAW;QACXC,MAAK;~~QACL3C~~,~~UAAUS~~,~~eAAeT~~;~~QACzBgC~~,~~cAAY9B~~;~~QACZ+B~~,~~SAAStB~~;SAGZH,~~MAAMoC~~,GAAG,~~CAACzB~~,4BACX,oBAACC;~~QAAGE~~,~~WAAW/B~~,MAAM,CAAC,kCAAkC;qBACtD,~~oBAACH~~;~~QACCmD~~,MAAK;QACLM,qBAAO,~~oBAAC9D~~;~~YAA0B0D~~,OAAO;;QACzCC,YAAW;QACXC,MAAK;~~QACL3C~~,~~UAAUU~~,~~cAAcV~~;~~QACxBgC~~,~~cAAY7B~~;~~QACZ8B~~,~~SAASf~~;;AAMrB,EAAE"}
1	+ {"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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 …\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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -4,6 +4,8 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
+import { AppRootContext } from '../AppRoot/AppRootContext';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import { Touch } from '../Touch/Touch';
 import styles from './Panel.module.css';
@@ -14,13 +16,13 @@ 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(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')