npm - @vkontakte/vkui - Versions diffs - 5.1.2 → 5.2.1 - Mend

@vkontakte/vkui 5.1.2 → 5.2.1

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 (1245) hide show

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

@@ -15,18 +15,18 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _supportEvents = require("../../lib/supportEvents");
-var _withPlatform = require("../../hoc/withPlatform");
+var _math = require("../../helpers/math");
 var _withContext = require("../../hoc/withContext");
-var _ModalRootContext = require("./ModalRootContext");
-var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
-var _platform = require("../../lib/platform");
+var _withPlatform = require("../../hoc/withPlatform");
 var _dom = require("../../lib/dom");
 var _getNavId = require("../../lib/getNavId");
+var _platform = require("../../lib/platform");
+var _supportEvents = require("../../lib/supportEvents");
 var _warnOnce = require("../../lib/warnOnce");
+var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _FocusTrap = require("../FocusTrap/FocusTrap");
+var _ModalRootContext = require("./ModalRootContext");
 var _useModalManager = require("./useModalManager");
-var _math = require("../../helpers/math");
 var _excluded = ["id"];
 var warn = (0, _warnOnce.warnOnce)('ModalRoot');
 var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalRootDesktop.js","names":["warn","warnOnce","ModalRootDesktopComponent","props","undefined","maskElementRef","React","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","platform","Platform","IOS","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","openModal","activeModal","restoreFocusTo","document","activeElement","focus","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","innerElement","style","transition","opacity","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","transitionEvent","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","timeout","display","transitionDelay","delayEnter","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","clamp","toString","classNames","configProvider","webviewType","WebviewType","VKAPPS","modals","map","Modal","modalId","getNavId","key","Component","ModalRootDesktop","withContext","withPlatform","withDOM","withModalManager","ConfigProviderContext"],"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { HasPlatform } from '../../types';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { withContext } from '../../hoc/withContext';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport {\n ConfigProviderContext,\n ConfigProviderContextInterface,\n WebviewType,\n} from '../ConfigProvider/ConfigProviderContext';\nimport { ModalsStateEntry } from './types';\nimport { Platform } from '../../lib/platform';\nimport { DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalTransitionProps, withModalManager } from './useModalManager';\nimport { clamp } from '../../helpers/math';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport interface ModalRootProps extends HasPlatform {\n activeModal?: string \| null;\n /*\n @ignore\n /\n configProvider?: ConfigProviderContextInterface;\n children?: React.ReactNode;\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\nclass ModalRootDesktopComponent extends React.Component<\n ModalRootProps & DOMProps & ModalTransitionProps\n> {\n constructor(props: ModalRootProps & ModalTransitionProps) {\n super(props);\n\n this.maskElementRef = React.createRef();\n\n this.modalRootContext = {\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id) ?? {}, data),\n onClose: () => this.props.onExit(),\n isInsideModal: true,\n };\n }\n\n private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n private maskAnimationFrame: number \| undefined = undefined;\n private readonly modalRootContext: ModalRootContextInterface;\n private restoreFocusTo: HTMLElement \| undefined = undefined;\n\n private get timeout() {\n return this.props.platform === Platform.IOS ? 400 : 320;\n }\n\n private get modals() {\n return React.Children.toArray(this.props.children) as React.ReactElement[];\n }\n\n getModalState(id: string \| null) {\n if (id === null) {\n return undefined;\n }\n return this.props.getModalState(id);\n }\n\n componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {\n // transition phase 2: animate exiting modal\n if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {\n this.closeModal(this.props.exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {\n this.openModal(prevProps);\n }\n\n // focus restoration\n if (this.props.activeModal && !prevProps.activeModal) {\n this.restoreFocusTo = (this.props.document?.activeElement ?? undefined) as\n \| HTMLElement\n \| undefined;\n }\n if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {\n this.restoreFocusTo.focus();\n this.restoreFocusTo = undefined;\n }\n }\n\n openModal(prevProps: ModalRootProps & ModalTransitionProps) {\n const { enteringModal } = this.props;\n if (!enteringModal) {\n return;\n }\n\n const enteringState = this.getModalState(enteringModal);\n this.props.onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (this.props.enteringModal === enteringModal) {\n this.waitTransitionFinish(enteringState, () => this.props.onEntered(enteringModal));\n this.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 this.props.onEntered(enteringModal);\n }\n\n closeModal(id: string) {\n const prevModalState = this.getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!this.props.activeModal) {\n requestAnimationFrame(() => {\n this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n this.animateModalOpacity(prevModalState, false);\n this.setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n this.props.onExited(id);\n }\n\n waitTransitionFinish(modalState: ModalsStateEntry \| undefined, eventHandler: () => void) {\n if (transitionEvent.supported) {\n const onceHandler = () => {\n modalState?.innerElement?.removeEventListener(transitionEvent.name as string, onceHandler);\n eventHandler();\n };\n\n modalState?.innerElement?.addEventListener(transitionEvent.name as string, onceHandler);\n } else {\n setTimeout(eventHandler, this.timeout);\n }\n }\n\n / Анимирует сдвиг модалки /\n animateModalOpacity(modalState: ModalsStateEntry \| undefined, display: boolean) {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay =\n display && this.props.delayEnter ? `${this.timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n }\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number \| null = null) {\n if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {\n return;\n }\n\n if (this.maskAnimationFrame) {\n cancelAnimationFrame(this.maskAnimationFrame);\n }\n this.maskAnimationFrame = requestAnimationFrame(() => {\n if (this.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 this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n }\n\n render() {\n const { exitingModal, activeModal } = this.props;\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={this.modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n this.props.configProvider?.webviewType === WebviewType.VKAPPS &&\n styles['ModalRoot--vkapps'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div\n className={styles['ModalRoot__mask']}\n ref={this.maskElementRef}\n onClick={this.props.onExit}\n />\n <div className={styles['ModalRoot__viewport']}>\n {this.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={this.props.onExit}\n timeout={this.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}\n\nexport const ModalRootDesktop = withContext(\n withPlatform(withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))),\n ConfigProviderContext,\n 'configProvider',\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"ModalRootDesktop.js","names":["warn","warnOnce","ModalRootDesktopComponent","props","undefined","maskElementRef","React","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","platform","Platform","IOS","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","openModal","activeModal","restoreFocusTo","document","activeElement","focus","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","innerElement","style","transition","opacity","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","transitionEvent","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","timeout","display","transitionDelay","delayEnter","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","clamp","toString","classNames","configProvider","webviewType","WebviewType","VKAPPS","modals","map","Modal","modalId","getNavId","key","Component","ModalRootDesktop","withContext","withPlatform","withDOM","withModalManager","ConfigProviderContext"],"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { withContext } from '../../hoc/withContext';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasPlatform } from '../../types';\nimport {\n ConfigProviderContext,\n ConfigProviderContextInterface,\n WebviewType,\n} from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalsStateEntry } from './types';\nimport { ModalTransitionProps, withModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport interface ModalRootProps extends HasPlatform {\n activeModal?: string \| null;\n /*\n @ignore\n /\n configProvider?: ConfigProviderContextInterface;\n children?: React.ReactNode;\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\nclass ModalRootDesktopComponent extends React.Component<\n ModalRootProps & DOMProps & ModalTransitionProps\n> {\n constructor(props: ModalRootProps & ModalTransitionProps) {\n super(props);\n\n this.maskElementRef = React.createRef();\n\n this.modalRootContext = {\n updateModalHeight: () => undefined,\n registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id) ?? {}, data),\n onClose: () => this.props.onExit(),\n isInsideModal: true,\n };\n }\n\n private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n private maskAnimationFrame: number \| undefined = undefined;\n private readonly modalRootContext: ModalRootContextInterface;\n private restoreFocusTo: HTMLElement \| undefined = undefined;\n\n private get timeout() {\n return this.props.platform === Platform.IOS ? 400 : 320;\n }\n\n private get modals() {\n return React.Children.toArray(this.props.children) as React.ReactElement[];\n }\n\n getModalState(id: string \| null) {\n if (id === null) {\n return undefined;\n }\n return this.props.getModalState(id);\n }\n\n componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {\n // transition phase 2: animate exiting modal\n if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {\n this.closeModal(this.props.exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {\n this.openModal(prevProps);\n }\n\n // focus restoration\n if (this.props.activeModal && !prevProps.activeModal) {\n this.restoreFocusTo = (this.props.document?.activeElement ?? undefined) as\n \| HTMLElement\n \| undefined;\n }\n if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {\n this.restoreFocusTo.focus();\n this.restoreFocusTo = undefined;\n }\n }\n\n openModal(prevProps: ModalRootProps & ModalTransitionProps) {\n const { enteringModal } = this.props;\n if (!enteringModal) {\n return;\n }\n\n const enteringState = this.getModalState(enteringModal);\n this.props.onEnter();\n\n // Анимация открытия модального окна\n if (!prevProps.exitingModal) {\n requestAnimationFrame(() => {\n if (this.props.enteringModal === enteringModal) {\n this.waitTransitionFinish(enteringState, () => this.props.onEntered(enteringModal));\n this.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 this.props.onEntered(enteringModal);\n }\n\n closeModal(id: string) {\n const prevModalState = this.getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n // Анимация закрытия модального окна\n if (!this.props.activeModal) {\n requestAnimationFrame(() => {\n this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n this.animateModalOpacity(prevModalState, false);\n this.setMaskOpacity(prevModalState, 0);\n });\n\n return;\n }\n\n // Переход между модальными окнами без анимации\n this.props.onExited(id);\n }\n\n waitTransitionFinish(modalState: ModalsStateEntry \| undefined, eventHandler: () => void) {\n if (transitionEvent.supported) {\n const onceHandler = () => {\n modalState?.innerElement?.removeEventListener(transitionEvent.name as string, onceHandler);\n eventHandler();\n };\n\n modalState?.innerElement?.addEventListener(transitionEvent.name as string, onceHandler);\n } else {\n setTimeout(eventHandler, this.timeout);\n }\n }\n\n / Анимирует сдвиг модалки /\n animateModalOpacity(modalState: ModalsStateEntry \| undefined, display: boolean) {\n if (modalState?.innerElement) {\n modalState.innerElement.style.transition = '';\n modalState.innerElement.style.transitionDelay =\n display && this.props.delayEnter ? `${this.timeout}ms` : '';\n modalState.innerElement.style.opacity = display ? '1' : '0';\n }\n }\n\n / Устанавливает прозрачность для полупрозрачной подложки */\n setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number \| null = null) {\n if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {\n return;\n }\n\n if (this.maskAnimationFrame) {\n cancelAnimationFrame(this.maskAnimationFrame);\n }\n this.maskAnimationFrame = requestAnimationFrame(() => {\n if (this.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 this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n }\n });\n }\n\n render() {\n const { exitingModal, activeModal } = this.props;\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={this.modalRootContext}>\n <div\n className={classNames(\n styles['ModalRoot'],\n this.props.configProvider?.webviewType === WebviewType.VKAPPS &&\n styles['ModalRoot--vkapps'],\n styles['ModalRoot--desktop'],\n )}\n >\n <div\n className={styles['ModalRoot__mask']}\n ref={this.maskElementRef}\n onClick={this.props.onExit}\n />\n <div className={styles['ModalRoot__viewport']}>\n {this.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={this.props.onExit}\n timeout={this.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}\n\nexport const ModalRootDesktop = withContext(\n withPlatform(withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))),\n ConfigProviderContext,\n 'configProvider',\n);\n"],"mappings":"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"}

package/dist/cjs/components/ModalRoot/useModalManager.js CHANGED Viewed

@@ -13,11 +13,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var React = _interopRequireWildcard(require("react"));
-var _types = require("./types");
-var _warnOnce = require("../../lib/warnOnce");
+var _vkjs = require("@vkontakte/vkjs");
 var _getNavId = require("../../lib/getNavId");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-var _vkjs = require("@vkontakte/vkjs");
+var _warnOnce = require("../../lib/warnOnce");
+var _types = require("./types");
 function getModals(children) {
   return React.Children.toArray(children);
 }

package/dist/cjs/components/ModalRoot/useModalManager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useModalManager.js","names":["getModals","children","React","Children","toArray","warn","warnOnce","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","noop","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","getNavId","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","useIsomorphicLayoutEffect","process","env","NODE_ENV","isCard","ModalType","CARD","onEntered","useCallback","modalState","isFunction","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { noop, isFunction } from '@vkontakte/vkjs';\n\ninterface ModalTransitionState {\n activeModal?: string \| null;\n enteringModal?: string \| null;\n exitingModal?: string \| null;\n\n history?: string[];\n isBack?: boolean \| null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n onEnter: VoidFunction;\n onEntered: (id: string \| null) => void;\n onExit: VoidFunction;\n onExited: (id: string \| null) => void;\n getModalState: (id: string) => ModalsStateEntry;\n delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode \| React.ReactNode[]) {\n return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n state: ModalTransitionState,\n action: {\n type: 'setActive' \| 'entered' \| 'exited' \| 'inited';\n id: string \| null;\n },\n): ModalTransitionState {\n if (action.type === 'setActive' && action.id !== state.activeModal) {\n const nextModal = action.id;\n // preserve exiting modal if switching mid-transition\n const prevModal = state.exitingModal \|\| state.activeModal;\n let history = state.history ? [...state.history] : [];\n const isBack = Boolean(nextModal && history.includes(nextModal));\n\n if (nextModal === null) {\n history = [];\n } else if (isBack) {\n history = history.splice(0, history.indexOf(nextModal) + 1);\n } else {\n history.push(nextModal);\n }\n\n return {\n activeModal: nextModal,\n // not entering yet\n enteringModal: null,\n exitingModal: prevModal,\n history,\n isBack,\n };\n }\n if (action.type === 'entered' && action.id === state.enteringModal) {\n return { ...state, enteringModal: null };\n }\n if (action.type === 'exited' && action.id === state.exitingModal) {\n return { ...state, exitingModal: null };\n }\n if (action.type === 'inited' && action.id === state.activeModal) {\n return { ...state, enteringModal: action.id };\n }\n return state;\n}\n\n/*\n Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n * 3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n * 4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n * 3b. activeModal: m2, exitingModal: null, enteringModal: m2\n * 4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n activeModal: string \| null \| undefined,\n children: React.ReactNode \| React.ReactNode[],\n onOpen: (id: string) => void = noop,\n onOpened: (id: string) => void = noop,\n onClose: (id: string) => void = noop,\n onClosed: (id: string) => void = noop,\n initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n const modalsState = React.useRef<ModalsState>({}).current;\n getModals(children).forEach((Modal) => {\n const modalProps = Modal.props;\n const id = getNavId(modalProps, warn);\n const state: ModalsStateEntry = (id !== undefined && modalsState[id]) \|\| {\n id: id ?? null,\n };\n\n state.onOpen = Modal.props.onOpen;\n state.onOpened = Modal.props.onOpened;\n state.onClose = Modal.props.onClose;\n state.onClosed = Modal.props.onClosed;\n state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n // ModalPage props\n if (typeof modalProps.settlingHeight === 'number') {\n state.settlingHeight = modalProps.settlingHeight;\n }\n\n if (state.id !== null) {\n modalsState[state.id] = state;\n }\n });\n\n const isMissing = activeModal && !modalsState[activeModal];\n const safeActiveModal = isMissing ? null : activeModal;\n const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n activeModal: safeActiveModal,\n enteringModal: null,\n exitingModal: null,\n history: safeActiveModal ? [safeActiveModal] : [],\n isBack: false,\n });\n\n // Map props to state, render activeModal for init\n useIsomorphicLayoutEffect(() => {\n // ignore non-existent activeModal\n if (process.env.NODE_ENV === 'development' && isMissing) {\n warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');\n }\n dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });\n }, [activeModal]);\n\n // Init activeModal & set enteringModal\n useIsomorphicLayoutEffect(() => {\n if (transitionState.activeModal) {\n initModal(modalsState[transitionState.activeModal]);\n dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n }\n }, [transitionState.activeModal]);\n\n const isCard = (id: string \| null \| undefined) =>\n id != null && modalsState[id]?.type === ModalType.CARD;\n const onEntered = React.useCallback(\n (id: string \| null) => {\n if (id) {\n const modalState = modalsState[id];\n\n if (isFunction(modalState.onOpened)) {\n modalState.onOpened();\n } else if (isFunction(onOpened)) {\n onOpened(id);\n }\n }\n\n dispatchTransition({ type: 'entered', id });\n },\n [modalsState, onOpened],\n );\n const onExited = React.useCallback(\n (id: string \| null) => {\n if (id) {\n const modalState = modalsState[id];\n\n if (isFunction(modalState.onClosed)) {\n modalState.onClosed();\n } else if (isFunction(onClosed)) {\n onClosed(id);\n }\n }\n\n dispatchTransition({ type: 'exited', id });\n },\n [modalsState, onClosed],\n );\n const delayEnter = Boolean(\n transitionState.exitingModal && (isCard(activeModal) \|\| isCard(transitionState.exitingModal)),\n );\n const getModalState = React.useCallback((id: string) => modalsState[id], [modalsState]);\n\n function onEnter() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onOpen)) {\n modalState.onOpen();\n } else if (isFunction(onOpen)) {\n onOpen(modalState.id);\n }\n }\n }\n\n function onExit() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onClose)) {\n modalState.onClose();\n } else if (isFunction(onClose)) {\n onClose(modalState.id);\n }\n }\n }\n\n return {\n onEnter,\n onEntered,\n onExit,\n onExited,\n ...transitionState,\n delayEnter,\n getModalState,\n };\n}\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n return function <Props extends ModalTransitionProps>(\n Wrapped: React.ComponentType<Props>,\n ): React.ComponentType<\n Omit<Props, keyof ModalTransitionProps> & {\n activeModal?: string \| null;\n children?: React.ReactNode;\n }\n > {\n return function WithModalManager(props) {\n const transitionManager = useModalManager(\n props.activeModal,\n props.children,\n (props as any).onOpen,\n (props as any).onOpened,\n (props as any).onClose,\n (props as any).onClosed,\n initModal,\n );\n return <Wrapped {...(props as any)} {...transitionManager} />;\n };\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"useModalManager.js","names":["getModals","children","React","Children","toArray","warn","warnOnce","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","noop","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","getNavId","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","useIsomorphicLayoutEffect","process","env","NODE_ENV","isCard","ModalType","CARD","onEntered","useCallback","modalState","isFunction","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\n\ninterface ModalTransitionState {\n activeModal?: string \| null;\n enteringModal?: string \| null;\n exitingModal?: string \| null;\n\n history?: string[];\n isBack?: boolean \| null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n onEnter: VoidFunction;\n onEntered: (id: string \| null) => void;\n onExit: VoidFunction;\n onExited: (id: string \| null) => void;\n getModalState: (id: string) => ModalsStateEntry;\n delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode \| React.ReactNode[]) {\n return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n state: ModalTransitionState,\n action: {\n type: 'setActive' \| 'entered' \| 'exited' \| 'inited';\n id: string \| null;\n },\n): ModalTransitionState {\n if (action.type === 'setActive' && action.id !== state.activeModal) {\n const nextModal = action.id;\n // preserve exiting modal if switching mid-transition\n const prevModal = state.exitingModal \|\| state.activeModal;\n let history = state.history ? [...state.history] : [];\n const isBack = Boolean(nextModal && history.includes(nextModal));\n\n if (nextModal === null) {\n history = [];\n } else if (isBack) {\n history = history.splice(0, history.indexOf(nextModal) + 1);\n } else {\n history.push(nextModal);\n }\n\n return {\n activeModal: nextModal,\n // not entering yet\n enteringModal: null,\n exitingModal: prevModal,\n history,\n isBack,\n };\n }\n if (action.type === 'entered' && action.id === state.enteringModal) {\n return { ...state, enteringModal: null };\n }\n if (action.type === 'exited' && action.id === state.exitingModal) {\n return { ...state, exitingModal: null };\n }\n if (action.type === 'inited' && action.id === state.activeModal) {\n return { ...state, enteringModal: action.id };\n }\n return state;\n}\n\n/*\n Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n * 3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n * 4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n * 3b. activeModal: m2, exitingModal: null, enteringModal: m2\n * 4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n activeModal: string \| null \| undefined,\n children: React.ReactNode \| React.ReactNode[],\n onOpen: (id: string) => void = noop,\n onOpened: (id: string) => void = noop,\n onClose: (id: string) => void = noop,\n onClosed: (id: string) => void = noop,\n initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n const modalsState = React.useRef<ModalsState>({}).current;\n getModals(children).forEach((Modal) => {\n const modalProps = Modal.props;\n const id = getNavId(modalProps, warn);\n const state: ModalsStateEntry = (id !== undefined && modalsState[id]) \|\| {\n id: id ?? null,\n };\n\n state.onOpen = Modal.props.onOpen;\n state.onOpened = Modal.props.onOpened;\n state.onClose = Modal.props.onClose;\n state.onClosed = Modal.props.onClosed;\n state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n // ModalPage props\n if (typeof modalProps.settlingHeight === 'number') {\n state.settlingHeight = modalProps.settlingHeight;\n }\n\n if (state.id !== null) {\n modalsState[state.id] = state;\n }\n });\n\n const isMissing = activeModal && !modalsState[activeModal];\n const safeActiveModal = isMissing ? null : activeModal;\n const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n activeModal: safeActiveModal,\n enteringModal: null,\n exitingModal: null,\n history: safeActiveModal ? [safeActiveModal] : [],\n isBack: false,\n });\n\n // Map props to state, render activeModal for init\n useIsomorphicLayoutEffect(() => {\n // ignore non-existent activeModal\n if (process.env.NODE_ENV === 'development' && isMissing) {\n warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');\n }\n dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });\n }, [activeModal]);\n\n // Init activeModal & set enteringModal\n useIsomorphicLayoutEffect(() => {\n if (transitionState.activeModal) {\n initModal(modalsState[transitionState.activeModal]);\n dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n }\n }, [transitionState.activeModal]);\n\n const isCard = (id: string \| null \| undefined) =>\n id != null && modalsState[id]?.type === ModalType.CARD;\n const onEntered = React.useCallback(\n (id: string \| null) => {\n if (id) {\n const modalState = modalsState[id];\n\n if (isFunction(modalState.onOpened)) {\n modalState.onOpened();\n } else if (isFunction(onOpened)) {\n onOpened(id);\n }\n }\n\n dispatchTransition({ type: 'entered', id });\n },\n [modalsState, onOpened],\n );\n const onExited = React.useCallback(\n (id: string \| null) => {\n if (id) {\n const modalState = modalsState[id];\n\n if (isFunction(modalState.onClosed)) {\n modalState.onClosed();\n } else if (isFunction(onClosed)) {\n onClosed(id);\n }\n }\n\n dispatchTransition({ type: 'exited', id });\n },\n [modalsState, onClosed],\n );\n const delayEnter = Boolean(\n transitionState.exitingModal && (isCard(activeModal) \|\| isCard(transitionState.exitingModal)),\n );\n const getModalState = React.useCallback((id: string) => modalsState[id], [modalsState]);\n\n function onEnter() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onOpen)) {\n modalState.onOpen();\n } else if (isFunction(onOpen)) {\n onOpen(modalState.id);\n }\n }\n }\n\n function onExit() {\n const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n if (modalState) {\n if (isFunction(modalState.onClose)) {\n modalState.onClose();\n } else if (isFunction(onClose)) {\n onClose(modalState.id);\n }\n }\n }\n\n return {\n onEnter,\n onEntered,\n onExit,\n onExited,\n ...transitionState,\n delayEnter,\n getModalState,\n };\n}\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n return function <Props extends ModalTransitionProps>(\n Wrapped: React.ComponentType<Props>,\n ): React.ComponentType<\n Omit<Props, keyof ModalTransitionProps> & {\n activeModal?: string \| null;\n children?: React.ReactNode;\n }\n > {\n return function WithModalManager(props) {\n const transitionManager = useModalManager(\n props.activeModal,\n props.children,\n (props as any).onOpen,\n (props as any).onOpened,\n (props as any).onClose,\n (props as any).onClosed,\n initModal,\n );\n return <Wrapped {...(props as any)} {...transitionManager} />;\n };\n };\n}\n"],"mappings":"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"}

package/dist/cjs/components/NativeSelect/NativeSelect.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormFieldProps } from '../FormField/FormField';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'status'> {
     placeholder?: string;

package/dist/cjs/components/NativeSelect/NativeSelect.js CHANGED Viewed

@@ -9,20 +9,23 @@ exports.NativeSelect = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
-var _FormField = require("../FormField/FormField");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
-var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _useEnsuredControl3 = require("../../hooks/useEnsuredControl");
 var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+var _adaptivity = require("../../lib/adaptivity");
+var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
+var _FormField = require("../FormField/FormField");
 var _SelectTypography = require("../SelectTypography/SelectTypography");
 var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "className", "getRef", "getRootRef", "disabled", "multiline", "selectType", "status", "onChange", "value"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiSelect--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiSelect--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
@@ -64,8 +67,8 @@ var NativeSelect = function NativeSelect(_ref) {
     onChange = _useEnsuredControl2[1];
   var selectRef = (0, _useExternRef.useExternRef)(getRef);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX,
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     var _selectRef$current;
     var selectedOption = (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.options[selectRef.current.selectedIndex];
@@ -76,7 +79,7 @@ var NativeSelect = function NativeSelect(_ref) {
   }, [value, children]);
   return /*#__PURE__*/React.createElement(_FormField.FormField, {
     Component: "label",
-    className: (0, _vkjs.classNames)("vkuiSelect", (0, _getPlatformClassName.getPlatformClassName)("vkuiSelect", platform), empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], (0, _getSizeXClassName.getSizeXClassName)("vkuiSelect", sizeX), (0, _getSizeYClassName.getSizeYClassName)("vkuiSelect", sizeY), className),
+    className: (0, _vkjs.classNames)("vkuiSelect", (0, _getPlatformClassName.getPlatformClassName)("vkuiSelect", platform), empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align && styles["Select--align-".concat(align)], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], className),
     style: style,
     getRootRef: getRootRef,
     disabled: disabled,

package/dist/cjs/components/NativeSelect/NativeSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeSelect.js","names":["NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","onChangeProp","onChange","valueProp","value","restProps","platform","usePlatform","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","~~sizeX","~~sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","classNames","getPlatformClassName","styles","~~getSizeXClassName~~"~~,"getSizeYClassName"~~],"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~DropdownIcon~~ } from '~~../DropdownIcon~~/~~DropdownIcon~~';\nimport { ~~FormField,~~ ~~FormFieldProps~~ } from '~~../FormField~~/~~FormField~~';\nimport { ~~HasAlign,~~ ~~HasRef, HasRootRef~~ } from '../../~~types~~';\nimport { ~~getPlatformClassName~~ } from '../../~~helpers~~/~~getPlatformClassName~~';\nimport { ~~useIsomorphicLayoutEffect~~ } from '../../~~lib~~/~~useIsomorphicLayoutEffect~~';\nimport { ~~useEnsuredControl~~ } from '../../~~hooks~~/~~useEnsuredControl~~';\nimport { ~~useExternRef~~ } from '../../~~hooks~~/~~useExternRef~~';\nimport { ~~usePlatform~~ } ~~from~~ ~~'../../hooks/usePlatform';\nimport { useAdaptivity~~ } from '../../~~hooks/useAdaptivity~~';\nimport { ~~getSizeXClassName~~ } from '~~../../helpers~~/~~getSizeXClassName~~';\nimport { ~~getSizeYClassName~~ } from '~~../../helpers~~/~~getSizeYClassName~~';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nexport interface NativeSelectProps\n extends React.SelectHTMLAttributes<HTMLSelectElement>,\n HasRef<HTMLSelectElement>,\n HasRootRef<HTMLLabelElement>,\n HasAlign,\n Pick<FormFieldProps, 'status'> {\n placeholder?: string;\n multiline?: boolean;\n selectType?: SelectType;\n}\n\nexport interface SelectState {\n value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n title?: string;\n notSelected?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n style,\n defaultValue = '',\n align,\n placeholder,\n children,\n className,\n getRef,\n getRootRef,\n disabled,\n multiline,\n selectType = 'default',\n status,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: NativeSelectProps) => {\n const platform = usePlatform();\n const [title, setTitle] = React.useState('');\n const [empty, setEmpty] = React.useState(false);\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n disabled,\n onChange: onChangeProp,\n value: valueProp,\n });\n const selectRef = useExternRef(getRef);\n const { ~~sizeX,~~ sizeY } = useAdaptivity();\n\n useIsomorphicLayoutEffect(() => {\n const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n if (selectedOption) {\n setTitle(selectedOption.text);\n setEmpty(selectedOption.value === '' && placeholder != null);\n }\n }, [value, children]);\n\n return (\n <FormField\n Component=\"label\"\n className={classNames(\n styles['Select'],\n getPlatformClassName(styles['Select'], platform),\n empty && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align && styles[`Select--align-${align}`],\n ~~getSizeXClassName(styles['Select'],~~ ~~sizeX),\n getSizeYClassName(styles~~[~~'Select'~~]~~, sizeY)~~,\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={disabled}\n after={<DropdownIcon />}\n status={status}\n >\n <select\n {...restProps}\n disabled={disabled}\n className={styles['Select__el']}\n onChange={onChange}\n value={value}\n ref={selectRef}\n >\n {placeholder && <option value=\"\">{placeholder}</option>}\n {children}\n </select>\n <div className={styles['Select__container']}>\n <SelectTypography className={styles['Select__title']} selectType={selectType}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n\nexport { NativeSelect };\n"],"mappings":"~~;;;;;;;;;;;~~AAAA;AACA;AACA;AACA;~~AAEA;~~AACA;AACA;AACA;AACA;AACA;~~AACA~~;AACA;AAEA;AAAwE;~~AAoBxE~~;AACA;AACA;AACA,~~IAAMA~~,YAAY,GAAG,SAAfA,YAAY,OAgBO;EAAA,IAfvBC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,EAAE;IACjBC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IAAA,uBACTC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACIC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACFC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,sBAA0BC,KAAK,CAACC,QAAQ,CAAC,EAAE,CAAC;IAAA;IAArCC,KAAK;IAAEC,QAAQ;EACtB,uBAA0BH,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCG,KAAK;IAAEC,QAAQ;EACtB,yBAA0B,IAAAC,qCAAiB,EAAC;MAC1CxB,YAAY,EAAZA,YAAY;MACZO,QAAQ,EAARA,QAAQ;MACRK,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IALKC,KAAK;IAAEF,QAAQ;EAMtB,IAAMa,SAAS,GAAG,IAAAC,0BAAY,EAACrB,MAAM,CAAC;EACtC,~~qBAAyB~~,IAAAsB,6BAAa,GAAE;~~IAAhCC~~,~~KAAK~~,~~kBAALA,~~KAAK;~~IAAEC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEpB~~,IAAAC,oDAAyB,EAAC,YAAM;IAAA;IAC9B,IAAMC,cAAc,~~yBAAGN~~,SAAS,~~CAACO~~,OAAO,uDAAjB,mBAAmBC,OAAO,~~CAACR~~,SAAS,~~CAACO~~,OAAO,CAACE,aAAa,CAAC;IAClF,IAAIH,cAAc,EAAE;~~MAClBV~~,QAAQ,~~CAACU~~,cAAc,CAACI,IAAI,CAAC;~~MAC7BZ~~,QAAQ,~~CAACQ~~,cAAc,~~CAACjB~~,KAAK,KAAK,EAAE,IAAIZ,WAAW,IAAI,IAAI,CAAC;IAC9D;EACF,CAAC,EAAE,CAACY,KAAK,EAAEX,QAAQ,CAAC,CAAC;EAErB,oBACE,oBAAC,oBAAS;IACR,SAAS,EAAC,OAAO;IACjB,SAAS,EAAE,~~IAAAiC~~,gBAAU,gBAEnB,IAAAC,0CAAoB,~~gBAAmBrB~~,QAAQ,CAAC,EAChDM,KAAK,uBAA2B,EAChCd,SAAS,2BAA+B,EACxCP,KAAK,~~IAAIqC~~,MAAM,~~yBAAkBrC~~,KAAK,EAAG,~~EACzC~~,~~IAAAsC~~,~~oCAAiB~~,~~gBAAmBX~~,~~KAAK~~,~~CAAC~~,~~EAC1C~~,~~IAAAY~~,~~oCAAiB~~,~~gBAAmBX,~~KAAK,CAAC,~~EAC1CzB~~,SAAS,CACT;IACF,KAAK,EAAEL,KAAM;IACb,UAAU,EAAEO,UAAW;IACvB,QAAQ,EAAEC,QAAS;IACnB,KAAK,eAAE,oBAAC,0BAAY,OAAI;IACxB,MAAM,EAAEG;EAAO,gBAEf,yDACMK,SAAS;IACb,QAAQ,EAAER,QAAS;IACnB,SAAS,kBAAuB;IAChC,QAAQ,EAAEK,QAAS;IACnB,KAAK,EAAEE,KAAM;IACb,GAAG,EAAEW;EAAU,IAEdvB,WAAW,iBAAI;IAAQ,KAAK,EAAC;EAAE,GAAEA,WAAW,CAAU,EACtDC,QAAQ,CACF,eACT;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,kCAAgB;IAAC,SAAS,qBAA0B;IAAC,UAAU,EAAEM;EAAW,GAC1EW,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"NativeSelect.js","names":["sizeYClassNames","none","SizeType","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","onChangeProp","onChange","valueProp","value","restProps","platform","usePlatform","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","classNames","getPlatformClassName","styles","REGULAR"],"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n none: styles['Select--sizeY-none'],\n [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n extends React.SelectHTMLAttributes<HTMLSelectElement>,\n HasRef<HTMLSelectElement>,\n HasRootRef<HTMLLabelElement>,\n HasAlign,\n Pick<FormFieldProps, 'status'> {\n placeholder?: string;\n multiline?: boolean;\n selectType?: SelectType;\n}\n\nexport interface SelectState {\n value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n title?: string;\n notSelected?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n style,\n defaultValue = '',\n align,\n placeholder,\n children,\n className,\n getRef,\n getRootRef,\n disabled,\n multiline,\n selectType = 'default',\n status,\n onChange: onChangeProp,\n value: valueProp,\n ...restProps\n}: NativeSelectProps) => {\n const platform = usePlatform();\n const [title, setTitle] = React.useState('');\n const [empty, setEmpty] = React.useState(false);\n const [value, onChange] = useEnsuredControl({\n defaultValue,\n disabled,\n onChange: onChangeProp,\n value: valueProp,\n });\n const selectRef = useExternRef(getRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n useIsomorphicLayoutEffect(() => {\n const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n if (selectedOption) {\n setTitle(selectedOption.text);\n setEmpty(selectedOption.value === '' && placeholder != null);\n }\n }, [value, children]);\n\n return (\n <FormField\n Component=\"label\"\n className={classNames(\n styles['Select'],\n getPlatformClassName(styles['Select'], platform),\n empty && styles['Select--empty'],\n multiline && styles['Select--multiline'],\n align && styles[`Select--align-${align}`],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n getRootRef={getRootRef}\n disabled={disabled}\n after={<DropdownIcon />}\n status={status}\n >\n <select\n {...restProps}\n disabled={disabled}\n className={styles['Select__el']}\n onChange={onChange}\n value={value}\n ref={selectRef}\n >\n {placeholder && <option value=\"\">{placeholder}</option>}\n {children}\n </select>\n <div className={styles['Select__container']}>\n <SelectTypography className={styles['Select__title']} selectType={selectType}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n\nexport { NativeSelect };\n"],"mappings":"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"}

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

@@ -8,15 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pagination = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _usePagination = require("../../hooks/usePagination");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _Tappable = require("../Tappable/Tappable");
+var _adaptivity = require("../../lib/adaptivity");
 var _Button = require("../Button/Button");
+var _Tappable = require("../Tappable/Tappable");
 var _excluded = ["currentPage", "siblingCount", "boundaryCount", "totalPages", "disabled", "getPageAriaLabel", "prevButtonAriaLabel", "nextButtonAriaLabel", "getRootRef", "onChange", "className"];
+var _pageSizeYClassNames;
+var pageSizeYClassNames = (_pageSizeYClassNames = {
+  none: "vkuiPagination__page--sizeY-none"
+}, (0, _defineProperty2.default)(_pageSizeYClassNames, _adaptivity.SizeType.COMPACT, "vkuiPagination__page--sizeY-compact"), (0, _defineProperty2.default)(_pageSizeYClassNames, _adaptivity.SizeType.REGULAR, "vkuiPagination__page--sizeY-regular"), _pageSizeYClassNames);
 function getPageAriaLabelDefault(page, isCurrent) {
   return isCurrent ? "".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430") : "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 ".concat(page, " \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443");
 }
@@ -44,7 +49,8 @@ var Pagination = function Pagination(_ref) {
     className = _ref.className,
     resetProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var pages = (0, _usePagination.usePagination)({
     currentPage: currentPage,
     totalPages: totalPages,
@@ -74,7 +80,7 @@ var Pagination = function Pagination(_ref) {
         return /*#__PURE__*/React.createElement("li", {
           key: page
         }, /*#__PURE__*/React.createElement("div", {
-          className: (0, _vkjs.classNames)("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", (0, _getSizeYClassName.getSizeYClassName)("vkuiPagination__page", sizeY), disabled && "vkuiPagination__page--disabled")
+          className: (0, _vkjs.classNames)("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", pageSizeYClassNames[sizeY], disabled && "vkuiPagination__page--disabled")
         }, "..."));
       default:
         {
@@ -82,7 +88,7 @@ var Pagination = function Pagination(_ref) {
           return /*#__PURE__*/React.createElement("li", {
             key: page
           }, /*#__PURE__*/React.createElement(_Tappable.Tappable, {
-            className: (0, _vkjs.classNames)("vkuiPagination__page", (0, _getSizeYClassName.getSizeYClassName)("vkuiPagination__page", sizeY), _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
+            className: (0, _vkjs.classNames)("vkuiPagination__page", pageSizeYClassNames[sizeY], _isCurrent && "vkuiPagination__page--current", disabled && "vkuiPagination__page--disabled"),
             activeMode: "vkuiPagination__page--state-active",
             hoverMode: "vkuiPagination__page--state-hover",
             hasActive: !_isCurrent,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","names":["getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","useAdaptivity","sizeY","pages","usePagination","isFirstPage","isLastPage","handlePrevClick","React","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","classNames","getSizeYClassName","undefined","map"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nimport type { HasRootRef } from '../../types';\n\nimport { classNames } from '@vkontakte/vkjs';\n\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\n\nimport { Tappable } from '../Tappable/Tappable';\nimport { Button } from '../Button/Button';\n\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 className,\n ...resetProps\n}: PaginationProps) => {\n const { sizeY } = 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 <div\n className={classNames(\n styles['Pagination__page'],\n styles['Pagination__page--type-ellipsis'],\n getSizeYClassName(styles['Pagination__page'], sizeY),\n disabled && styles['Pagination__page--disabled'],\n )}\n >\n ...\n </div>\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 getSizeYClassName(styles['Pagination__page'], sizeY),\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 {page}\n </Tappable>\n </li>\n );\n }\n }\n },\n [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n );\n\n return (\n <nav\n className={classNames(styles['Pagination'], className)}\n role=\"navigation\"\n aria-label=\"Навигация по страницам\"\n ref={getRootRef}\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 </nav>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Pagination.js","names":["pageSizeYClassNames","none","SizeType","COMPACT","REGULAR","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","useAdaptivity","sizeY","pages","usePagination","isFirstPage","isLastPage","handlePrevClick","React","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","classNames","undefined","map"],"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 styles from './Pagination.module.css';\n\nconst pageSizeYClassNames = {\n none: styles['Pagination__page--sizeY-none'],\n [SizeType.COMPACT]: styles['Pagination__page--sizeY-compact'],\n [SizeType.REGULAR]: styles['Pagination__page--sizeY-regular'],\n};\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 className,\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 <div\n className={classNames(\n styles['Pagination__page'],\n styles['Pagination__page--type-ellipsis'],\n pageSizeYClassNames[sizeY],\n disabled && styles['Pagination__page--disabled'],\n )}\n >\n ...\n </div>\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 pageSizeYClassNames[sizeY],\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 {page}\n </Tappable>\n </li>\n );\n }\n }\n },\n [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n );\n\n return (\n <nav\n className={classNames(styles['Pagination'], className)}\n role=\"navigation\"\n aria-label=\"Навигация по страницам\"\n ref={getRootRef}\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 </nav>\n );\n};\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
 import { NavIdProps } from '../../lib/getNavId';
+import { HasRootRef } from '../../types';
 export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, NavIdProps {
     centered?: boolean;
 }

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

@@ -8,15 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.Panel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _vkjs = require("@vkontakte/vkjs");
-var _Touch = require("../Touch/Touch");
-var _TooltipContainer = require("../Tooltip/TooltipContainer");
-var _platform = require("../../lib/platform");
-var _usePlatform = require("../../hooks/usePlatform");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
+var _platform = require("../../lib/platform");
+var _TooltipContainer = require("../Tooltip/TooltipContainer");
+var _Touch = require("../Touch/Touch");
 var _excluded = ["centered", "children", "getRootRef", "nav", "className"];
+var _sizeXClassNames;
+var sizeXClassNames = (_sizeXClassNames = {
+  none: "vkuiPanel--sizeX-none"
+}, (0, _defineProperty2.default)(_sizeXClassNames, _adaptivity.SizeType.COMPACT, "vkuiPanel--sizeX-compact"), (0, _defineProperty2.default)(_sizeXClassNames, _adaptivity.SizeType.REGULAR, "vkuiPanel--sizeX-regular"), _sizeXClassNames);
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
@@ -30,10 +35,11 @@ var Panel = function Panel(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
+    _useAdaptivity$sizeX = _useAdaptivity.sizeX,
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
-    className: (0, _vkjs.classNames)("vkuiPanel", (0, _getSizeXClassName.getSizeXClassName)("vkuiPanel", sizeX), centered && "vkuiPanel--centered", className)
+    className: (0, _vkjs.classNames)("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiPanel--centered", className)
   }), /*#__PURE__*/React.createElement(_Touch.Touch, {
     Component: _TooltipContainer.TooltipContainer,
     className: "vkuiPanel__in"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Panel.js","names":["Panel","centered","children","getRootRef","nav","className","restProps","platform","usePlatform","useAdaptivity","sizeX","classNames","~~getSizeXClassName","~~TooltipContainer","Platform","IOS"],"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~getSizeXClassName~~ } from '~~../../helpers~~/~~getSizeXClassName~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~Touch~~ } from '~~../Touch~~/~~Touch~~';\nimport { ~~TooltipContainer~~ } from '~~../Tooltip~~/~~TooltipContainer~~';\nimport { ~~HasRootRef~~ } from '../../~~types~~';\nimport { Platform } from '../../lib/platform';\nimport { ~~usePlatform~~ } from '../../~~hooks/usePlatform~~';\nimport { ~~NavIdProps~~ } from '~~../../lib~~/~~getNavId~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\nimport styles from './Panel.module.css';\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 } = useAdaptivity();\n\n return (\n <div\n {...restProps}\n ref={getRootRef}\n className={classNames(\n styles['Panel'],\n ~~getSizeXClassName(styles~~[~~'Panel'~~]~~, sizeX)~~,\n centered && styles['Panel--centered'],\n className,\n )}\n >\n <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n <div className={styles['Panel__in-before']} />\n {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n <div className={styles['Panel__in-after']} />\n </Touch>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;~~AAEA~~;~~AAA0D~~;~~AAU1D~~;AACA;AACA;AACO,~~IAAMA~~,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,oBACE,sDACMJ,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAE,IAAAQ,gBAAU,~~eAEnB~~,~~IAAAC~~,~~oCAAiB~~,~~eAAkBF,~~KAAK,CAAC,~~EACzCT~~,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,YAAK;IAAC,SAAS,~~EAAEQ~~,kCAAiB;IAAC,SAAS;EAAsB,~~GAChEN~~,QAAQ,~~KAAKO~~,kBAAQ,CAACC,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,~~EAC7Cd~~,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"Panel.js","names":["sizeXClassNames","none","SizeType","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","usePlatform","useAdaptivity","sizeX","classNames","TooltipContainer","Platform","IOS"],"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 && styles['Panel--centered'],\n className,\n )}\n >\n <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n {platform === Platform.IOS && <div className={styles['Panel__fade']} />}\n <div className={styles['Panel__in-before']} />\n {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n <div className={styles['Panel__in-after']} />\n </Touch>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AAAuC;AAAA;AAGvC,IAAMA,eAAe;EACnBC,IAAI;AAA6B,mDAChCC,oBAAQ,CAACC,OAAO,+EAChBD,oBAAQ,CAACE,OAAO,gDAClB;AASD;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAOA;EAAA,yBANhBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,GAAG,QAAHA,GAAG;IACHC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,sDACMJ,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAE,IAAAQ,gBAAU,eAEnBhB,eAAe,CAACe,KAAK,CAAC,EACtBT,QAAQ,yBAA6B,EACrCI,SAAS;EACT,iBAEF,oBAAC,YAAK;IAAC,SAAS,EAAEO,kCAAiB;IAAC,SAAS;EAAsB,GAChEL,QAAQ,KAAKM,kBAAQ,CAACC,GAAG,iBAAI;IAAK,SAAS;EAAwB,EAAG,eACvE;IAAK,SAAS;EAA6B,EAAG,EAC7Cb,QAAQ,gBAAG;IAAK,SAAS;EAA4B,GAAEC,QAAQ,CAAO,GAAGA,QAAQ,eAClF;IAAK,SAAS;EAA4B,EAAG,CACvC,CACJ;AAEV,CAAC;AAAC"}

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

@@ -9,18 +9,18 @@ exports.PanelHeader = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _usePlatform = require("../../hooks/usePlatform");
 var _vkjs = require("@vkontakte/vkjs");
-var _FixedLayout = require("../FixedLayout/FixedLayout");
-var _Separator = require("../Separator/Separator");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
+var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
-var _Text = require("../Typography/Text/Text");
-var _TooltipContainer = require("../Tooltip/TooltipContainer");
+var _FixedLayout = require("../FixedLayout/FixedLayout");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
+var _Separator = require("../Separator/Separator");
 var _Spacing = require("../Spacing/Spacing");
+var _TooltipContainer = require("../Tooltip/TooltipContainer");
+var _Text = require("../Typography/Text/Text");
 var _excluded = ["before", "children", "after", "separator", "visor", "transparent", "shadow", "getRef", "getRootRef", "fixed", "className"];
 function getPlatformClassName(platform) {
   switch (platform) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeader.js","names":["getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","useConfigProvider","webviewType","React","useContext","ModalRootContext","isInsideModal","usePlatform","Platform","VKCOM","WebviewType","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","classNames","VKAPPS"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~usePlatform~~ } from '~~../../hooks~~/~~usePlatform~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~FixedLayout~~ } from '~~../FixedLayout~~/~~FixedLayout~~';\nimport { ~~Separator~~ } from '~~../Separator~~/~~Separator~~';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { ~~Text~~ } from '../~~Typography~~/~~Text/Text~~';\nimport { ~~TooltipContainer~~ } from '../~~Tooltip~~/~~TooltipContainer~~';\nimport { ~~ModalRootContext~~ } from '../~~ModalRoot~~/~~ModalRootContext~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\nimport { ~~useAdaptivityConditionalRender~~ } from '~~../../hooks~~/~~useAdaptivityConditionalRender~~';\nimport { ~~Spacing~~ } from '../~~Spacing~~/~~Spacing~~';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n switch (platform) {\n case 'ios':\n return styles['PanelHeader--ios'];\n case 'vkcom':\n return styles['PanelHeader--vkcom'];\n default:\n return styles['PanelHeader--android'];\n }\n}\n\nconst sizeXClassNames = {\n compact: '',\n regular: styles['PanelHeader--sizeX-regular'],\n none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRef<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n before?: React.ReactNode;\n after?: React.ReactNode;\n separator?: boolean;\n transparent?: boolean;\n shadow?: boolean;\n /*\n Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n /\n visor?: boolean;\n /\n Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n /\n fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n const { webviewType } = useConfigProvider();\n const { isInsideModal } = React.useContext(ModalRootContext);\n const platform = usePlatform();\n\n return (\n <React.Fragment>\n <TooltipContainer fixed className={styles['PanelHeader__in']}>\n <div className={styles['PanelHeader__before']}>{before}</div>\n <div className={styles['PanelHeader__content']}>\n {platform === Platform.VKCOM ? (\n <Text weight=\"2\">{children}</Text>\n ) : (\n <span className={styles['PanelHeader__content-in']}>{children}</span>\n )}\n </div>\n <div className={styles['PanelHeader__after']}>\n {(webviewType === WebviewType.INTERNAL \|\| isInsideModal) && after}\n </div>\n </TooltipContainer>\n {separator && platform === Platform.VKCOM && <Separator wide />}\n </React.Fragment>\n );\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n before,\n children,\n after,\n separator = true,\n visor = true,\n transparent = false,\n shadow,\n getRef,\n getRootRef,\n fixed,\n className,\n ...restProps\n}: PanelHeaderProps) => {\n const platform = usePlatform();\n const { webviewType } = useConfigProvider();\n const { isInsideModal } = React.useContext(ModalRootContext);\n const { sizeX = 'none' } = useAdaptivity();\n const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['PanelHeader'],\n getPlatformClassName(platform),\n transparent && styles['PanelHeader--trnsp'],\n shadow && styles['PanelHeader--shadow'],\n visor && styles['PanelHeader--vis'],\n separator && visor && styles['PanelHeader--sep'],\n webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n !before && styles['PanelHeader--no-before'],\n !after && styles['PanelHeader--no-after'],\n isFixed && styles['PanelHeader--fixed'],\n sizeXClassNames[sizeX],\n className,\n )}\n ref={isFixed ? getRootRef : getRef}\n >\n {isFixed ? (\n <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n <PanelHeaderIn before={before} after={after} separator={separator}>\n {children}\n </PanelHeaderIn>\n </FixedLayout>\n ) : (\n <PanelHeaderIn before={before} after={after} separator={separator}>\n {children}\n </PanelHeaderIn>\n )}\n {separator && visor && platform !== Platform.VKCOM && (\n <React.Fragment>\n {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n {adaptiveSizeX.regular && (\n <Spacing className={adaptiveSizeX.regular.className} size={16} />\n )}\n </React.Fragment>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAA6C~~;~~AAG7C~~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"}
1	+ {"version":3,"file":"PanelHeader.js","names":["getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","useConfigProvider","webviewType","React","useContext","ModalRootContext","isInsideModal","usePlatform","Platform","VKCOM","WebviewType","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","classNames","VKAPPS"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n switch (platform) {\n case 'ios':\n return styles['PanelHeader--ios'];\n case 'vkcom':\n return styles['PanelHeader--vkcom'];\n default:\n return styles['PanelHeader--android'];\n }\n}\n\nconst sizeXClassNames = {\n compact: '',\n regular: styles['PanelHeader--sizeX-regular'],\n none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRef<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n before?: React.ReactNode;\n after?: React.ReactNode;\n separator?: boolean;\n transparent?: boolean;\n shadow?: boolean;\n /*\n Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n /\n visor?: boolean;\n /\n Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n /\n fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n const { webviewType } = useConfigProvider();\n const { isInsideModal } = React.useContext(ModalRootContext);\n const platform = usePlatform();\n\n return (\n <React.Fragment>\n <TooltipContainer fixed className={styles['PanelHeader__in']}>\n <div className={styles['PanelHeader__before']}>{before}</div>\n <div className={styles['PanelHeader__content']}>\n {platform === Platform.VKCOM ? (\n <Text weight=\"2\">{children}</Text>\n ) : (\n <span className={styles['PanelHeader__content-in']}>{children}</span>\n )}\n </div>\n <div className={styles['PanelHeader__after']}>\n {(webviewType === WebviewType.INTERNAL \|\| isInsideModal) && after}\n </div>\n </TooltipContainer>\n {separator && platform === Platform.VKCOM && <Separator wide />}\n </React.Fragment>\n );\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n before,\n children,\n after,\n separator = true,\n visor = true,\n transparent = false,\n shadow,\n getRef,\n getRootRef,\n fixed,\n className,\n ...restProps\n}: PanelHeaderProps) => {\n const platform = usePlatform();\n const { webviewType } = useConfigProvider();\n const { isInsideModal } = React.useContext(ModalRootContext);\n const { sizeX = 'none' } = useAdaptivity();\n const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['PanelHeader'],\n getPlatformClassName(platform),\n transparent && styles['PanelHeader--trnsp'],\n shadow && styles['PanelHeader--shadow'],\n visor && styles['PanelHeader--vis'],\n separator && visor && styles['PanelHeader--sep'],\n webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n !before && styles['PanelHeader--no-before'],\n !after && styles['PanelHeader--no-after'],\n isFixed && styles['PanelHeader--fixed'],\n sizeXClassNames[sizeX],\n className,\n )}\n ref={isFixed ? getRootRef : getRef}\n >\n {isFixed ? (\n <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n <PanelHeaderIn before={before} after={after} separator={separator}>\n {children}\n </PanelHeaderIn>\n </FixedLayout>\n ) : (\n <PanelHeaderIn before={before} after={after} separator={separator}>\n {children}\n </PanelHeaderIn>\n )}\n {separator && visor && platform !== Platform.VKCOM && (\n <React.Fragment>\n {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n {adaptiveSizeX.regular && (\n <Spacing className={adaptiveSizeX.regular.className} size={16} />\n )}\n </React.Fragment>\n )}\n </div>\n );\n};\n"],"mappings":"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"}