npm - @vkontakte/vkui - Versions diffs - 4.37.0 → 5.0.0 - Mend

@vkontakte/vkui 4.37.0 → 5.0.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 (3227) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalRootDesktop.js","names":["React","classNames","transitionEvent","withPlatform","withContext","ModalRootContext","ConfigProviderContext","WebviewType","ANDROID","VKCOM","getClassName","withDOM","getNavId","warnOnce","FocusTrap","withModalManager","warn","ModalRootDesktopComponent","props","undefined","maskElementRef","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","platform","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","activeModal","restoreFocusTo","document","activeElement","focus","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","supported","onceHandler","innerElement","removeEventListener","name","addEventListener","setTimeout","timeout","display","style","transitionDelay","delayEnter","opacity","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","Math","max","min","toString","configProvider","webviewType","VKAPPS","modals","map","Modal","modalId","key","Boolean","Component","ModalRootDesktop"],"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { transitionEvent } from \"../../lib/supportEvents\";\nimport { HasPlatform } from \"../../types\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { withContext } from \"../../hoc/withContext\";\nimport {\n ModalRootContext,\n ModalRootContextInterface,\n} from \"./ModalRootContext\";\nimport {\n ConfigProviderContext,\n ConfigProviderContextInterface,\n WebviewType,\n} from \"../ConfigProvider/ConfigProviderContext\";\nimport { ModalsStateEntry } from \"./types\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { getClassName } from \"../../helpers/getClassName\";\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 \"./ModalRoot.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 }) =>\n 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 === ANDROID \|\| this.props.platform === VKCOM\n ? 320\n : 400;\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 (\n this.props.exitingModal &&\n this.props.exitingModal !== prevProps.exitingModal\n ) {\n this.closeModal(this.props.exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (\n this.props.enteringModal &&\n this.props.enteringModal !== prevProps.enteringModal\n ) {\n const { enteringModal } = this.props;\n const enteringState = this.getModalState(enteringModal);\n this.props.onEnter();\n requestAnimationFrame(() => {\n if (this.props.enteringModal === enteringModal) {\n this.waitTransitionFinish(enteringState, () =>\n this.props.onEntered(enteringModal)\n );\n this.animateModalOpacity(enteringState, true);\n }\n });\n }\n\n // focus restoration\n if (this.props.activeModal && !prevProps.activeModal) {\n this.restoreFocusTo = (this.props.document?.activeElement ??\n undefined) as HTMLElement \| undefined;\n }\n if (\n !this.props.activeModal &&\n !this.props.exitingModal &&\n this.restoreFocusTo\n ) {\n this.restoreFocusTo.focus();\n this.restoreFocusTo = undefined;\n }\n }\n\n closeModal(id: string) {\n const prevModalState = this.getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n this.animateModalOpacity(prevModalState, false);\n if (!this.props.activeModal) {\n this.setMaskOpacity(prevModalState, 0);\n }\n }\n\n waitTransitionFinish(\n modalState: ModalsStateEntry \| undefined,\n eventHandler: () => void\n ) {\n if (transitionEvent.supported) {\n const onceHandler = () => {\n modalState?.innerElement?.removeEventListener(\n transitionEvent.name as string,\n onceHandler\n );\n eventHandler();\n };\n\n modalState?.innerElement?.addEventListener(\n transitionEvent.name as string,\n onceHandler\n );\n } else {\n setTimeout(eventHandler, this.timeout);\n }\n }\n\n / Анимирует сдвиг модалки /\n animateModalOpacity(\n modalState: ModalsStateEntry \| undefined,\n display: boolean\n ) {\n if (modalState?.innerElement) {\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(\n modalState: ModalsStateEntry,\n forceOpacity: number \| null = null\n ) {\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 = Math.max(\n 0,\n Math.min(100, opacity)\n ).toString();\n }\n });\n }\n\n render() {\n const { exitingModal, activeModal, enteringModal } = this.props;\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={this.modalRootContext}>\n <div\n vkuiClass={classNames(\n getClassName(\"ModalRoot\", this.props.platform),\n this.props.configProvider?.webviewType === WebviewType.VKAPPS &&\n \"ModalRoot--vkapps\",\n \"ModalRoot--desktop\"\n )}\n >\n <div\n vkuiClass=\"ModalRoot__mask\"\n ref={this.maskElementRef}\n onClick={this.props.onExit}\n />\n <div vkuiClass=\"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 vkuiClass={classNames(\n \"ModalRoot__modal\",\n !exitingModal &&\n !enteringModal &&\n modalId === activeModal &&\n \"ModalRoot__modal--active\",\n modalId === exitingModal && \"ModalRoot__modal--prev\",\n Boolean(exitingModal) &&\n modalId === activeModal &&\n \"ModalRoot__modal--next\"\n )}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n }\n}\n\nexport const ModalRootDesktop = withContext(\n withPlatform(\n withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))\n ),\n ConfigProviderContext,\n \"configProvider\"\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"ModalRootDesktop.js","names":["React","classNames","transitionEvent","withPlatform","withContext","ModalRootContext","ConfigProviderContext","WebviewType","Platform","withDOM","getNavId","warnOnce","FocusTrap","withModalManager","warn","ModalRootDesktopComponent","props","undefined","maskElementRef","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","platform","IOS","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","activeModal","restoreFocusTo","document","activeElement","focus","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","supported","onceHandler","innerElement","removeEventListener","name","addEventListener","setTimeout","timeout","display","style","transitionDelay","delayEnter","opacity","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","Math","max","min","toString","configProvider","webviewType","VKAPPS","modals","map","Modal","modalId","key","Boolean","Component","ModalRootDesktop"],"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { transitionEvent } from \"../../lib/supportEvents\";\nimport { HasPlatform } from \"../../types\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { withContext } from \"../../hoc/withContext\";\nimport {\n ModalRootContext,\n ModalRootContextInterface,\n} 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 \"./ModalRoot.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 }) =>\n 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 (\n this.props.exitingModal &&\n this.props.exitingModal !== prevProps.exitingModal\n ) {\n this.closeModal(this.props.exitingModal);\n }\n\n // transition phase 3: animate entering modal\n if (\n this.props.enteringModal &&\n this.props.enteringModal !== prevProps.enteringModal\n ) {\n const { enteringModal } = this.props;\n const enteringState = this.getModalState(enteringModal);\n this.props.onEnter();\n requestAnimationFrame(() => {\n if (this.props.enteringModal === enteringModal) {\n this.waitTransitionFinish(enteringState, () =>\n this.props.onEntered(enteringModal)\n );\n this.animateModalOpacity(enteringState, true);\n }\n });\n }\n\n // focus restoration\n if (this.props.activeModal && !prevProps.activeModal) {\n this.restoreFocusTo = (this.props.document?.activeElement ??\n undefined) as HTMLElement \| undefined;\n }\n if (\n !this.props.activeModal &&\n !this.props.exitingModal &&\n this.restoreFocusTo\n ) {\n this.restoreFocusTo.focus();\n this.restoreFocusTo = undefined;\n }\n }\n\n closeModal(id: string) {\n const prevModalState = this.getModalState(id);\n if (!prevModalState) {\n return;\n }\n\n this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n this.animateModalOpacity(prevModalState, false);\n if (!this.props.activeModal) {\n this.setMaskOpacity(prevModalState, 0);\n }\n }\n\n waitTransitionFinish(\n modalState: ModalsStateEntry \| undefined,\n eventHandler: () => void\n ) {\n if (transitionEvent.supported) {\n const onceHandler = () => {\n modalState?.innerElement?.removeEventListener(\n transitionEvent.name as string,\n onceHandler\n );\n eventHandler();\n };\n\n modalState?.innerElement?.addEventListener(\n transitionEvent.name as string,\n onceHandler\n );\n } else {\n setTimeout(eventHandler, this.timeout);\n }\n }\n\n / Анимирует сдвиг модалки /\n animateModalOpacity(\n modalState: ModalsStateEntry \| undefined,\n display: boolean\n ) {\n if (modalState?.innerElement) {\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(\n modalState: ModalsStateEntry,\n forceOpacity: number \| null = null\n ) {\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 = Math.max(\n 0,\n Math.min(100, opacity)\n ).toString();\n }\n });\n }\n\n render() {\n const { exitingModal, activeModal, enteringModal } = this.props;\n\n if (!activeModal && !exitingModal) {\n return null;\n }\n\n return (\n <ModalRootContext.Provider value={this.modalRootContext}>\n <div\n vkuiClass={classNames(\n \"ModalRoot\",\n this.props.configProvider?.webviewType === WebviewType.VKAPPS &&\n \"ModalRoot--vkapps\",\n \"ModalRoot--desktop\"\n )}\n >\n <div\n vkuiClass=\"ModalRoot__mask\"\n ref={this.maskElementRef}\n onClick={this.props.onExit}\n />\n <div vkuiClass=\"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 vkuiClass={classNames(\n \"ModalRoot__modal\",\n !exitingModal &&\n !enteringModal &&\n modalId === activeModal &&\n \"ModalRoot__modal--active\",\n modalId === exitingModal && \"ModalRoot__modal--prev\",\n Boolean(exitingModal) &&\n modalId === activeModal &&\n \"ModalRoot__modal--next\"\n )}\n >\n {Modal}\n </FocusTrap>\n );\n })}\n </div>\n </div>\n </ModalRootContext.Provider>\n );\n }\n}\n\nexport const ModalRootDesktop = withContext(\n withPlatform(\n withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))\n ),\n ConfigProviderContext,\n \"configProvider\"\n);\n"],"mappings":"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"}

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

@@ -32,7 +32,7 @@ export declare function modalTransitionReducer(state: ModalTransitionState, acti
  * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
  */
 export declare function useModalManager(activeModal: string | null | undefined, children: React.ReactNode | React.ReactNode[], onOpen?: (id: string) => void, onOpened?: (id: string) => void, onClose?: (id: string) => void, onClosed?: (id: string) => void, initModal?: (state: ModalsStateEntry) => void): ModalTransitionProps;
-export declare function withModalManager(initModal?: (a: ModalsStateEntry) => void): <Props extends ModalTransitionProps>(Wrapped: React.ComponentType<Props>) => React.ComponentType<Pick<Props, Exclude<keyof Props, "isBack" | "onEnter" | "history" | "onEntered" | "onExit" | "onExited" | "getModalState" | "delayEnter" | "activeModal" | "enteringModal" | "exitingModal">> & {
+export declare function withModalManager(initModal?: (a: ModalsStateEntry) => void): <Props extends ModalTransitionProps>(Wrapped: React.ComponentType<Props>) => React.ComponentType<Omit<Props, keyof ModalTransitionProps> & {
     activeModal?: string | null | undefined;
     children?: React.ReactNode;
 }>;

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

@@ -2,12 +2,11 @@ import * as React from "react";
 import { FormFieldProps } from "../FormField/FormField";
 import { HasAlign, HasRef, HasRootRef } from "../../types";
 import { SelectType } from "../Select/Select";
-import { AdaptivityContextInterface, AdaptivityProps } from "../AdaptivityProvider/AdaptivityContext";
 import "../Select/Select.css";
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, AdaptivityProps, Pick<FormFieldProps, "status"> {
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, "status"> {
     placeholder?: string;
     multiline?: boolean;
-    selectType?: keyof typeof SelectType;
+    selectType?: SelectType;
 }
 export interface SelectState {
     value?: React.SelectHTMLAttributes<HTMLSelectElement>["value"];
@@ -17,4 +16,5 @@ export interface SelectState {
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
-export declare const NativeSelect: React.FC<Pick<NativeSelectProps & AdaptivityContextInterface, "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "multiline" | "selectType"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+declare const NativeSelect: React.FC<NativeSelectProps>;
+export { NativeSelect };

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

@@ -1,22 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "className", "getRef", "getRootRef", "disabled", "sizeX", "sizeY", "multiline", "selectType", "status"];
+var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "className", "getRef", "getRootRef", "disabled", "multiline", "selectType", "status"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { getClassName } from "../../helpers/getClassName";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useEnsuredControl } from "../../hooks/useEnsuredControl";
 import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
-import { SelectType, SelectTypography } from "../Select/Select";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import { SelectTypography } from "../Select/Select";
 import "../Select/Select.css";
-var NativeSelectComponent = function NativeSelectComponent(_ref) {
+/**
+ * @see https://vkcom.github.io/VKUI/#/NativeSelect
+ */
+var NativeSelect = function NativeSelect(_ref) {
   var style = _ref.style,
       _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
@@ -27,11 +32,9 @@ var NativeSelectComponent = function NativeSelectComponent(_ref) {
       getRef = _ref.getRef,
       getRootRef = _ref.getRootRef,
       disabled = _ref.disabled,
-      sizeX = _ref.sizeX,
-      sizeY = _ref.sizeY,
       multiline = _ref.multiline,
       _ref$selectType = _ref.selectType,
-      selectType = _ref$selectType === void 0 ? SelectType.default : _ref$selectType,
+      selectType = _ref$selectType === void 0 ? "default" : _ref$selectType,
       status = _ref.status,
       restProps = _objectWithoutProperties(_ref, _excluded);
@@ -55,6 +58,11 @@ var NativeSelectComponent = function NativeSelectComponent(_ref) {
       onChange = _useEnsuredControl2[1];
   var selectRef = useExternRef(getRef);
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX,
+      sizeY = _useAdaptivity.sizeY;
   useIsomorphicLayoutEffect(function () {
     var _selectRef$current;
@@ -67,7 +75,7 @@ var NativeSelectComponent = function NativeSelectComponent(_ref) {
   }, [value, children]);
   return createScopedElement(FormField, {
     Component: "label",
-    vkuiClass: classNames(getClassName("Select", platform), "Select--".concat(selectType), empty && "Select--empty", multiline && "Select--multiline", align && "Select--align-".concat(align), "Select--sizeX-".concat(sizeX), "Select--sizeY-".concat(sizeY)),
+    vkuiClass: classNames(getClassName("Select", platform), empty && "Select--empty", multiline && "Select--multiline", align && "Select--align-".concat(align), getSizeXClassName("Select", sizeX), getSizeYClassName("Select", sizeY)),
     className: className,
     style: style,
     getRootRef: getRootRef,
@@ -85,17 +93,10 @@ var NativeSelectComponent = function NativeSelectComponent(_ref) {
   }, placeholder), children), createScopedElement("div", {
     vkuiClass: "Select__container"
   }, createScopedElement(SelectTypography, {
-    vkuiClass: "Select__title"
+    vkuiClass: "Select__title",
+    selectType: selectType
   }, title)));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/NativeSelect
- */
-export var NativeSelect = withAdaptivity(NativeSelectComponent, {
-  sizeX: true,
-  sizeY: true
-});
-NativeSelect.displayName = "NativeSelect";
+export { NativeSelect };
 //# sourceMappingURL=NativeSelect.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeSelect.js","names":["React","classNames","DropdownIcon","FormField","~~withAdaptivity","~~getClassName","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","~~SelectType~~","SelectTypography","~~NativeSelectComponent~~","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","~~sizeX","sizeY","~~multiline","selectType","~~default","~~status","restProps","platform","useState","title","setTitle","empty","setEmpty","value","onChange","selectRef","~~selectedOption~~","~~current~~","~~options~~","~~selectedIndex~~","~~text~~","~~NativeSelect~~","~~displayName~~"],"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { ~~withAdaptivity~~ } from \"../../~~hoc~~/~~withAdaptivity~~\";\nimport { ~~getClassName~~ } from \"../../~~helpers~~/~~getClassName~~\";\nimport { ~~useIsomorphicLayoutEffect~~ } from \"../../~~lib~~/~~useIsomorphicLayoutEffect~~\";\nimport { ~~useEnsuredControl~~ } from \"../../hooks/~~useEnsuredControl~~\";\nimport { ~~useExternRef~~ } from \"../../hooks/~~useExternRef~~\";\nimport { ~~usePlatform~~ } from \"../../hooks/~~usePlatform~~\";\nimport { ~~SelectType,~~ ~~SelectTypography~~ } from \"~~../Select~~/~~Select~~\";\nimport {~~\n AdaptivityContextInterface,\n AdaptivityProps,\n~~} from \"../~~AdaptivityProvider~~/~~AdaptivityContext~~\";\nimport \"../Select/Select.css\";\n\nexport interface NativeSelectProps\n extends React.SelectHTMLAttributes<HTMLSelectElement>,\n HasRef<HTMLSelectElement>,\n HasRootRef<HTMLLabelElement>,\n HasAlign,\n ~~AdaptivityProps,\n~~ Pick<FormFieldProps, \"status\"> {\n placeholder?: string;\n multiline?: boolean;\n selectType?: ~~keyof typeof~~ SelectType;\n}\n\nexport interface SelectState {\n value?: React.SelectHTMLAttributes<HTMLSelectElement>[\"value\"];\n title?: string;\n notSelected?: boolean;\n}\n\nconst ~~NativeSelectComponent~~ = ({\n style,\n defaultValue = \"\",\n align,\n placeholder,\n children,\n className,\n getRef,\n getRootRef,\n disabled,\n ~~sizeX,\n sizeY,\n~~ multiline,\n selectType = ~~SelectType.~~default,\n status,\n ...restProps\n}: NativeSelectProps ~~& AdaptivityContextInterface~~) => {\n const platform = usePlatform();\n const [title, setTitle] = React.useState(\"\");\n const [empty, setEmpty] = React.useState(false);\n const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n const selectRef = useExternRef(getRef);\n useIsomorphicLayoutEffect(() => {\n const selectedOption =\n 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 vkuiClass={classNames(\n getClassName(\"Select\", platform),\n ~~`Select--${selectType}`,\n~~ empty && \"Select--empty\",\n multiline && \"Select--multiline\",\n align && `Select--align-${align}`,\n `Select--sizeX~~-${sizeX}`,\~~n `Select--sizeY~~-${sizeY}`\~~n )}\n className={className}\n style={style}\n getRootRef={getRootRef}\n disabled={disabled}\n after={<DropdownIcon />}\n status={status}\n >\n <select\n {...restProps}\n disabled={disabled}\n vkuiClass=\"Select__el\"\n onChange={onChange}\n value={value}\n ref={selectRef}\n >\n {placeholder && <option value=\"\">{placeholder}</option>}\n {children}\n </select>\n <div vkuiClass=\"Select__container\">\n ~~{/* TODO v5.0.0 поправить под новую адаптивность /}\n~~ <SelectTypography vkuiClass=\"Select__title\">{title}</SelectTypography>\n </div>\n </FormField>\n );\n};\n\~~n/\n @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\~~nexport ~~const~~ NativeSelect ~~= withAdaptivity(NativeSelectComponent, {\n sizeX: true,\n sizeY: true,\n~~});\n~~\nNativeSelect.displayName = \~~"~~NativeSelect\";\n"~~],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,SAAT;AAEA,SAASC,~~cAAT;AACA,SAASC,~~YAAT;AACA,SAASC,yBAAT;AACA,SAASC,iBAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,SAASC,~~UAAT~~,~~EAAqBC~~,~~gBAArB~~;~~AAKA;;AAoBA~~,~~IAAMC~~,~~qBAAqB~~,~~GAAG~~,~~SAAxBA,qBAAwB,OAgBwB~~;~~EAAA~~,~~IAfpDC~~,~~KAeoD~~,~~QAfpDA~~,~~KAeoD;EAAA~~,~~6BAdpDC~~,~~YAcoD~~;EAAA,~~IAdpDA~~,~~YAcoD~~,~~kCAdrC~~,~~EAcqC~~;EAAA,~~IAbpDC~~,~~KAaoD,QAbpDA,KAaoD~~;EAAA,~~IAZpDC~~,~~WAYoD~~,~~QAZpDA~~,~~WAYoD~~;EAAA,~~IAXpDC~~,~~QAWoD~~,~~QAXpDA~~,~~QAWoD~~;EAAA,~~IAVpDC~~,~~SAUoD~~,~~QAVpDA~~,~~SAUoD~~;EAAA,~~IATpDC~~,~~MASoD~~,~~QATpDA~~,~~MASoD~~;EAAA,~~IARpDC~~,~~UAQoD~~,~~QARpDA~~,~~UAQoD~~;EAAA,~~IAPpDC~~,~~QAOoD~~,~~QAPpDA~~,~~QAOoD~~;EAAA,~~IANpDC~~,~~KAMoD~~,~~QANpDA~~,~~KAMoD~~;EAAA,~~IALpDC~~,~~KAKoD~~,~~QALpDA~~,~~KAKoD~~;EAAA,~~IAJpDC~~,~~SAIoD~~,~~QAJpDA~~,~~SAIoD~~;EAAA,~~2BAHpDC~~,~~UAGoD~~;EAAA,~~IAHpDA~~,~~UAGoD~~,~~gCAHvCf~~,~~UAAU,CAACgB,OAG4B~~;EAAA,~~IAFpDC~~,~~MAEoD~~,~~QAFpDA~~,~~MAEoD~~;EAAA,~~IADjDC~~,~~SACiD~~;;~~EACpD~~,IAAMC,QAAQ,~~GAAGpB~~,WAAW,EAA5B;;EACA,~~sBAA0BT~~,KAAK,~~CAAC8B~~,QAAN,CAAe,EAAf,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EACA,~~uBAA0BhC~~,KAAK,~~CAAC8B~~,QAAN,CAAe,KAAf,CAA1B;EAAA;EAAA,IAAOG,KAAP;EAAA,IAAcC,QAAd;;EACA,~~yBAA0B3B~~,iBAAiB,~~CAACqB~~,SAAD,EAAY;~~IAAEd~~,YAAY,EAAZA;EAAF,CAAZ,CAA3C;EAAA;EAAA,~~IAAOqB~~,KAAP;EAAA,IAAcC,QAAd;;EACA,IAAMC,SAAS,~~GAAG7B~~,YAAY,~~CAACW~~,MAAD,CAA9B;~~EACAb~~,yBAAyB,CAAC,YAAM;IAAA;;IAC9B,~~IAAMgC~~,cAAc,~~yBAClBD~~,SAAS,~~CAACE~~,OADQ,uDAClB,mBAAmBC,OAAnB,~~CAA2BH~~,SAAS,~~CAACE~~,OAAV,CAAkBE,aAA7C,CADF;;IAEA,IAAIH,cAAJ,EAAoB;~~MAClBN~~,QAAQ,~~CAACM~~,cAAc,CAACI,IAAhB,CAAR;~~MACAR~~,QAAQ,~~CAACI~~,cAAc,~~CAACH~~,KAAf,KAAyB,EAAzB,IAA+~~BnB~~,WAAW,IAAI,IAA/C,CAAR;IACD;EACF,CAPwB,EAOtB,~~CAACmB~~,KAAD,~~EAAQlB~~,QAAR,CAPsB,CAAzB;EASA,OACE,oBAAC,SAAD;IACE,SAAS,EAAC,OADZ;IAEE,SAAS,~~EAAEhB~~,UAAU,~~CACnBI~~,YAAY,CAAC,QAAD,~~EAAWwB~~,QAAX,CADO,~~oBAERJ~~,~~UAFQ,GAGnBQ,~~KAAK,IAAI,~~eAHU~~,~~EAInBT~~,SAAS,IAAI,~~mBAJM~~,~~EAKnBT~~,KAAK,4BAAqBA,KAArB,~~CALc~~,~~0BAMFO~~,~~KANE~~,~~2BAOFC~~,~~KAPE~~,~~EAFvB~~;~~IAWE~~,SAAS,~~EAAEL~~,~~SAXb~~;~~IAYE~~,KAAK,EAAEL,~~KAZT~~;~~IAaE~~,UAAU,EAAEO,~~UAbd~~;~~IAcE~~,QAAQ,EAAEC,~~QAdZ~~;~~IAeE~~,KAAK,EAAE,oBAAC,YAAD,~~OAfT~~;~~IAgBE~~,MAAM,~~EAAEM~~;~~EAhBV~~,~~GAkBE~~,2CACMC,SADN;IAEE,QAAQ,~~EAAEP~~,QAFZ;IAGE,SAAS,EAAC,YAHZ;IAIE,QAAQ,~~EAAEe~~,QAJZ;IAKE,KAAK,EAAED,KALT;IAME,GAAG,EAAEE;EANP,~~IAQGrB~~,WAAW,IAAI;IAAQ,KAAK,EAAC;EAAd,GAAkBA,WAAlB,CARlB,EASGC,QATH,~~CAlBF~~,~~EA6BE~~;IAAK,SAAS,EAAC;EAAf,~~GAEE~~,oBAAC,gBAAD;IAAkB,SAAS,EAAC;~~EAA5B~~,~~GAA6Cc~~,~~KAA7C~~,~~CAFF~~,~~CA7BF~~,CADF;AAoCD,CAnED;AAqEA~~;AACA;AACA;;;AACA~~,~~OAAO~~,~~IAAMY,YAAY,GAAGvC,cAAc,CAACQ,qBAAD,EAAwB;EAChEU,KAAK,EAAE,IADyD;EAEhEC,KAAK,EAAE;AAFyD,CAAxB,CAAnC;AAKPoB,YAAY,CAACC,WAAb,GAA2B,cAA3B~~"}
1	+ {"version":3,"file":"NativeSelect.js","names":["React","classNames","DropdownIcon","FormField","getClassName","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectTypography","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","restProps","platform","useState","title","setTitle","empty","setEmpty","value","onChange","selectRef","sizeX","sizeY","selectedOption","current","options","selectedIndex","text"],"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\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 { SelectType, SelectTypography } from \"../Select/Select\";\nimport \"../Select/Select.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: React.FC<NativeSelectProps> = ({\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 ...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(restProps, { defaultValue });\n const selectRef = useExternRef(getRef);\n const { sizeX, sizeY } = useAdaptivity();\n\n useIsomorphicLayoutEffect(() => {\n const selectedOption =\n 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 vkuiClass={classNames(\n getClassName(\"Select\", platform),\n empty && \"Select--empty\",\n multiline && \"Select--multiline\",\n align && `Select--align-${align}`,\n getSizeXClassName(\"Select\", sizeX),\n getSizeYClassName(\"Select\", sizeY)\n )}\n className={className}\n style={style}\n getRootRef={getRootRef}\n disabled={disabled}\n after={<DropdownIcon />}\n status={status}\n >\n <select\n {...restProps}\n disabled={disabled}\n vkuiClass=\"Select__el\"\n onChange={onChange}\n value={value}\n ref={selectRef}\n >\n {placeholder && <option value=\"\">{placeholder}</option>}\n {children}\n </select>\n <div vkuiClass=\"Select__container\">\n <SelectTypography vkuiClass=\"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/cssm/components/Pagination/Pagination.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiPagination__list{display:flex;list-style-type:none;margin:0;padding:0}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{border-radius:~~8px;border-radius:~~var(--vkui--size_border_radius--regular~~,8px~~);box-sizing:border-box;color~~:#818c99;color~~:var(--vkui--color_text_secondary~~,#818c99~~);min-width:40px;padding-left:8px;padding-right:8px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vkuiPagination__page--state-hover{background-color:~~rgba(0,16,61,.04);background-color:~~var(--vkui--color_transparent--hover~~,rgba(0,16,61,.04~~))}.vkuiPagination__page--current,.vkuiPagination__page--state-active{background-color:~~rgba(0,16,61,.08);background-color:~~var(--vkui--color_transparent--active~~,rgba(0,16,61,.08~~));color~~:#000;color~~:var(--vkui--color_text_primary~~,#000~~)}.vkuiPagination__page--disabled{opacity~~:.4;opacity~~:var(--vkui--opacity_disable~~,.4~~)}.vkuiPagination__page--sizeY-compact{font-size:~~15px;font-size:~~var(--vkui--font_text--font_size--compact~~,15px~~);height:~~36px~~;height:var(--vkui--size_button_large_height--compact,~~36px~~);~~line-~~height:~~36px~~;line-height:var(--vkui--size_button_large_height--compact~~,36px~~)}.vkuiPagination__page--sizeY-regular{font-size:~~16px;font-size:~~var(--vkui--font_text--font_size--regular~~,16px~~);height:~~44px~~;height:var(--vkui--size_button_large_height--regular,~~44px~~)~~;line~~-height:~~44px~~;line-height:var(--vkui--size_button_large_height--regular~~,44px~~)}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-left:0;padding-right:0}
1	+ .vkuiPagination__list{display:flex;list-style-type:none;margin:0;padding:0}.vkuiPagination__prevButtonContainer{margin-right:8px}.vkuiPagination__nextButtonContainer{margin-left:8px}.vkuiPagination__page{border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;color:var(--vkui--color_text_secondary);min-width:40px;padding-left:8px;padding-right:8px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vkuiPagination__page--state-hover{background-color:var(--vkui--color_transparent--hover)}.vkuiPagination__page--current,.vkuiPagination__page--state-active{background-color:var(--vkui--color_transparent--active);color:var(--vkui--color_text_primary)}.vkuiPagination__page--disabled{opacity:var(--vkui--opacity_disable)}.vkuiPagination__page--sizeY-compact{font-size:var(--vkui--font_text--font_size--compact);height:var(--vkui--size_button_large_height--compact);line-height:var(--vkui--size_button_large_height--compact)}@media (max-height:414px),(pointer:fine) and (min-width:768px){.vkuiPagination__page--sizeY-none{font-size:var(--vkui--font_text--font_size--compact);height:var(--vkui--size_button_large_height--compact);line-height:var(--vkui--size_button_large_height--compact)}}.vkuiPagination__page--sizeY-regular{font-size:var(--vkui--font_text--font_size--regular);height:var(--vkui--size_button_large_height--regular);line-height:var(--vkui--size_button_large_height--regular)}@media (max-width:767px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiPagination__page--sizeY-none{font-size:var(--vkui--font_text--font_size--regular);height:var(--vkui--size_button_large_height--regular);line-height:var(--vkui--size_button_large_height--regular)}}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-left:0;padding-right:0}

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

@@ -7,6 +7,7 @@ import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from "@vkontakte/
 import { classNames } from "../../lib/classNames";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePagination } from "../../hooks/usePagination";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
 import { Tappable } from "../Tappable/Tappable";
 import { Button } from "../Button/Button";
 import "./Pagination.css";
@@ -70,7 +71,7 @@ export var Pagination = function Pagination(_ref) {
         return createScopedElement("li", {
           key: page
         }, createScopedElement("div", {
-          vkuiClass: classNames("Pagination__page", "Pagination__page--type-ellipsis", "Pagination__page--sizeY-".concat(sizeY), disabled && "Pagination__page--disabled")
+          vkuiClass: classNames("Pagination__page", "Pagination__page--type-ellipsis", getSizeYClassName("Pagination__page", sizeY), disabled && "Pagination__page--disabled")
         }, "..."));
       default:
@@ -80,7 +81,7 @@ export var Pagination = function Pagination(_ref) {
           return createScopedElement("li", {
             key: page
           }, createScopedElement(Tappable, {
-            vkuiClass: classNames("Pagination__page", "Pagination__page--sizeY-".concat(sizeY), _isCurrent && "Pagination__page--current", disabled && "Pagination__page--disabled"),
+            vkuiClass: classNames("Pagination__page", getSizeYClassName("Pagination__page", sizeY), _isCurrent && "Pagination__page--current", disabled && "Pagination__page--disabled"),
             activeMode: "Pagination__page--state-active",
             hoverMode: "Pagination__page--state-hover",
             hasActive: !_isCurrent,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","Tappable","Button","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","undefined","map"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n Icon24ChevronCompactLeft,\n Icon24ChevronCompactRight,\n} from \"@vkontakte/icons\";\n\nimport type { HasRootRef } from \"../../types\";\n\nimport { classNames } from \"../../lib/classNames\";\n\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { PaginationPageType, usePagination } from \"../../hooks/usePagination\";\n\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Button } from \"../Button/Button\";\n\nimport \"./Pagination.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 } = 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 vkuiClass={classNames(\n \"Pagination__page\",\n \"Pagination__page--type-ellipsis\",\n `Pagination__page--sizeY~~-${sizeY}`,\~~n disabled && \"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 vkuiClass={classNames(\n \"Pagination__page\",\n `Pagination__page--sizeY~~-${sizeY}`,\~~n isCurrent && \"Pagination__page--current\",\n disabled && \"Pagination__page--disabled\"\n )}\n activeMode=\"Pagination__page--state-active\"\n hoverMode=\"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 vkuiClass=\"Pagination\"\n role=\"navigation\"\n aria-label=\"Навигация по страницам\"\n ref={getRootRef}\n {...resetProps}\n >\n <ul vkuiClass=\"Pagination__list\">\n <li vkuiClass=\"Pagination__prevButtonContainer\">\n <Button\n size=\"l\"\n before={<Icon24ChevronCompactLeft width={24} />}\n appearance=\"accent\"\n mode=\"tertiary\"\n stretched\n disabled={isFirstPage \|\| disabled}\n aria-label={prevButtonAriaLabel}\n onClick={handlePrevClick}\n />\n </li>\n {pages.map(renderPages)}\n <li vkuiClass=\"Pagination__nextButtonContainer\">\n <Button\n size=\"l\"\n after={<Icon24ChevronCompactRight width={24} />}\n appearance=\"accent\"\n mode=\"tertiary\"\n stretched\n disabled={isLastPage \|\| disabled}\n aria-label={nextButtonAriaLabel}\n onClick={handleNextClick}\n />\n </li>\n </ul>\n </nav>\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,wBADF,EAEEC,yBAFF,QAGO,kBAHP;AAOA,SAASC,UAAT;AAEA,SAASC,aAAT;AACA,SAA6BC,aAA7B;AAEA,SAASC,QAAT;AACA,SAASC,MAAT;AAEA;;AAEA,SAASC,uBAAT,CAAiCC,IAAjC,EAA+CC,SAA/C,EAA2E;EACzE,OAAOA,SAAS,aAAMD,IAAN,2HAAsCA,IAAtC,sDAAhB;AACD;;AA2CD;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAa,OAYH;EAAA,4BAXrBC,WAWqB;EAAA,IAXrBA,WAWqB,iCAXP,CAWO;EAAA,6BAVrBC,YAUqB;EAAA,IAVrBA,YAUqB,kCAVN,CAUM;EAAA,8BATrBC,aASqB;EAAA,IATrBA,aASqB,mCATL,CASK;EAAA,2BARrBC,UAQqB;EAAA,IARrBA,UAQqB,gCARR,CAQQ;EAAA,IAPrBC,QAOqB,QAPrBA,QAOqB;EAAA,iCANrBC,gBAMqB;EAAA,IANrBA,gBAMqB,sCANFT,uBAME;EAAA,iCALrBU,mBAKqB;EAAA,IALrBA,mBAKqB,sCALC,gCAKD;EAAA,iCAJrBC,mBAIqB;EAAA,IAJrBA,mBAIqB,sCAJC,+BAID;EAAA,IAHrBC,UAGqB,QAHrBA,UAGqB;EAAA,IAFrBC,QAEqB,QAFrBA,QAEqB;EAAA,IADlBC,UACkB;;EACrB,~~qBAAkBlB~~,aAAa,EAA/B;EAAA,~~IAAQmB~~,KAAR,kBAAQA,KAAR;;EAEA,IAAMC,KAAK,~~GAAGnB~~,aAAa,CAAC;~~IAC1BO~~,WAAW,EAAXA,WAD0B;IAE1BG,UAAU,EAAVA,UAF0B;IAG1BF,YAAY,EAAZA,YAH0B;IAI1BC,aAAa,EAAbA;EAJ0B,CAAD,CAA3B;EAMA,IAAMW,WAAW,GAAGb,WAAW,KAAK,CAApC;EACA,IAAMc,UAAU,GAAGd,WAAW,KAAKG,UAAnC;EAEA,IAAMY,eAAe,~~GAAG3B~~,KAAK,~~CAAC4B~~,WAAN,CAAkB,YAAM;IAC9C,IAAIP,QAAQ,IAAI,CAACI,WAAjB,EAA8B;MAC5BJ,QAAQ,CAACT,WAAW,GAAG,CAAf,CAAR;IACD;EACF,CAJuB,EAIrB,CAACA,WAAD,EAAca,WAAd,EAA2BJ,QAA3B,CAJqB,CAAxB;EAMA,IAAMQ,WAAW,~~GAAG7B~~,KAAK,~~CAAC4B~~,WAAN,CAClB,UAACE,KAAD,EAA0C;IACxC,IAAMrB,IAAY,GAAGqB,KAAK,CAACC,aAAN,CAAoBC,OAApB,CAA4BvB,IAA5B,IAAoC,GAAzD;IACAY,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGY,MAAM,CAACxB,IAAD,CAAT,CAAR;EACD,CAJiB,EAKlB,CAACY,QAAD,CALkB,CAApB;EAQA,IAAMa,eAAe,~~GAAGlC~~,KAAK,~~CAAC4B~~,WAAN,CAAkB,YAAM;IAC9C,IAAIP,QAAQ,IAAI,CAACK,UAAjB,EAA6B;MAC3BL,QAAQ,CAACT,WAAW,GAAG,CAAf,CAAR;IACD;EACF,CAJuB,EAIrB,CAACA,WAAD,EAAcc,UAAd,EAA0BL,QAA1B,CAJqB,CAAxB;EAMA,IAAMc,WAAW,~~GAAGnC~~,KAAK,~~CAAC4B~~,WAAN,CAClB,UAACnB,IAAD,EAA8B;IAC5B,QAAQA,IAAR;MACE,KAAK,gBAAL;MACA,KAAK,cAAL;QACE,OACE;UAAI,GAAG,EAAEA;QAAT,GACE;UACE,SAAS,~~EAAEN~~,UAAU,CACnB,kBADmB,EAEnB,iCAFmB,~~oCAGQoB~~,~~KAHR~~,~~GAInBP~~,QAAQ,IAAI,4BAJO;QADvB,SADF,CADF;;MAcF;QAAS;UACP,IAAMN,UAAS,GAAGD,IAAI,KAAKG,WAA3B;;UACA,OACE;YAAI,GAAG,EAAEH;UAAT,GACE,oBAAC,QAAD;YACE,SAAS,~~EAAEN~~,UAAU,CACnB,kBADmB,~~oCAEQoB~~,~~KAFR~~,~~GAGnBb~~,UAAS,IAAI,2BAHM,EAInBM,QAAQ,IAAI,4BAJO,CADvB;YAOE,UAAU,EAAC,gCAPb;YAQE,SAAS,EAAC,+BARZ;YASE,SAAS,EAAE,CAACN,UATd;YAUE,QAAQ,EAAE,CAACA,UAVb;YAWE,gBAAgB,EAAC,SAXnB;YAYE,QAAQ,EAAEM,QAZZ;YAaE,aAAWP,IAbb;YAcE,gBAAcC,UAAS,GAAG,IAAH,GAAU0B,SAdnC;YAeE,cAAYnB,gBAAgB,CAACR,IAAD,EAAOC,UAAP,CAf9B;YAgBE,OAAO,EAAEmB;UAhBX,GAkBGpB,IAlBH,CADF,CADF;QAwBD;IA3CH;EA6CD,CA/CiB,EAgDlB,CAACc,KAAD,EAAQX,WAAR,EAAqBI,QAArB,EAA+BC,gBAA/B,EAAiDY,WAAjD,CAhDkB,CAApB;EAmDA,OACE;IACE,SAAS,EAAC,YADZ;IAEE,IAAI,EAAC,YAFP;IAGE,cAAW,4HAHb;IAIE,GAAG,EAAET;EAJP,GAKME,UALN,GAOE;IAAI,SAAS,EAAC;EAAd,GACE;IAAI,SAAS,EAAC;EAAd,GACE,oBAAC,MAAD;IACE,IAAI,EAAC,GADP;IAEE,MAAM,EAAE,oBAAC,wBAAD;MAA0B,KAAK,EAAE;IAAjC,EAFV;IAGE,UAAU,EAAC,QAHb;IAIE,IAAI,EAAC,UAJP;IAKE,SAAS,MALX;IAME,QAAQ,EAAEG,WAAW,IAAIT,QAN3B;IAOE,cAAYE,mBAPd;IAQE,OAAO,EAAES;EARX,EADF,CADF,EAaGH,KAAK,CAACa,GAAN,CAAUF,WAAV,CAbH,EAcE;IAAI,SAAS,EAAC;EAAd,GACE,oBAAC,MAAD;IACE,IAAI,EAAC,GADP;IAEE,KAAK,EAAE,oBAAC,yBAAD;MAA2B,KAAK,EAAE;IAAlC,EAFT;IAGE,UAAU,EAAC,QAHb;IAIE,IAAI,EAAC,UAJP;IAKE,SAAS,MALX;IAME,QAAQ,EAAET,UAAU,IAAIV,QAN1B;IAOE,cAAYG,mBAPd;IAQE,OAAO,EAAEe;EARX,EADF,CAdF,CAPF,CADF;AAqCD,CApIM"}
1	+ {"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","getSizeYClassName","Tappable","Button","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","undefined","map"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n Icon24ChevronCompactLeft,\n Icon24ChevronCompactRight,\n} from \"@vkontakte/icons\";\n\nimport type { HasRootRef } from \"../../types\";\n\nimport { classNames } from \"../../lib/classNames\";\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 \"./Pagination.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 } = 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 vkuiClass={classNames(\n \"Pagination__page\",\n \"Pagination__page--type-ellipsis\",\n getSizeYClassName(\"Pagination__page\", sizeY),\n disabled && \"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 vkuiClass={classNames(\n \"Pagination__page\",\n getSizeYClassName(\"Pagination__page\", sizeY),\n isCurrent && \"Pagination__page--current\",\n disabled && \"Pagination__page--disabled\"\n )}\n activeMode=\"Pagination__page--state-active\"\n hoverMode=\"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 vkuiClass=\"Pagination\"\n role=\"navigation\"\n aria-label=\"Навигация по страницам\"\n ref={getRootRef}\n {...resetProps}\n >\n <ul vkuiClass=\"Pagination__list\">\n <li vkuiClass=\"Pagination__prevButtonContainer\">\n <Button\n size=\"l\"\n before={<Icon24ChevronCompactLeft width={24} />}\n appearance=\"accent\"\n mode=\"tertiary\"\n stretched\n disabled={isFirstPage \|\| disabled}\n aria-label={prevButtonAriaLabel}\n onClick={handlePrevClick}\n />\n </li>\n {pages.map(renderPages)}\n <li vkuiClass=\"Pagination__nextButtonContainer\">\n <Button\n size=\"l\"\n after={<Icon24ChevronCompactRight width={24} />}\n appearance=\"accent\"\n mode=\"tertiary\"\n stretched\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/cssm/components/Panel/Panel.css CHANGED Viewed

@@ -1,19 +1 @@
-.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:after{content:"";height:100%;z-index:1}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:after{left:0;position:absolute;top:0;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%;z-index:2}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiPanelHeader--vis+*{margin-top:56px;margin-top:var(
-    --panelheader_height,var(--vkui--size_panel_header_height--regular)
-  )}.vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis+*{margin-top:52px;margin-top:var(
-    --panelheader_height_ios,var(--vkui--size_panel_header_height--regular)
-  )}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) + 5px)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(52px + 5px);margin-top:calc(var(
-        --panelheader_height_ios,
-        var(--vkui--size_panel_header_height--regular)
-      ) + 5px)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(48px + 5px);margin-top:calc(var(
-        --panelheader_height_vkcom,
-        var(--vkui--size_panel_header_height--regular)
-      ) + 5px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) + 16px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(52px + 16px);margin-top:calc(var(
-        --panelheader_height_ios,
-        var(--vkui--size_panel_header_height--regular)
-      ) + 16px)}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(48px + 16px);margin-top:calc(var(
-        --panelheader_height_vkcom,
-        var(--vkui--size_panel_header_height--regular)
-      ) + 16px)}.vkuiEpic .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--safe-area-inset-bottom) + var(--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__separator{position:relative;z-index:3}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:after{background-color:#fff;background-color:var(
-    --background_content,var(--vkui--color_background_content)
-  )}.vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--sizeX-regular:after{background-color:initial}
+.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:after{content:"";height:100%;z-index:1}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:after{left:0;position:absolute;top:0;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%;z-index:2}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis+*,.vkuiPanel__centered .vkuiPanelHeader--vis+*{margin-top:var(--vkui--size_panel_header_height--regular)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep+*{margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiEpic .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--safe-area-inset-bottom) + var(--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__separator{position:relative;z-index:3}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:after{background-color:var(--vkui--color_background_content)}.vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--sizeX-regular:after{background-color:initial}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__in,.vkuiPanel--sizeX-none:after{background-color:initial}}

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

@@ -1,12 +1,11 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
 import { NavIdProps } from "../../lib/getNavId";
-import { AdaptivityContextInterface, AdaptivityProps } from "../AdaptivityProvider/AdaptivityContext";
 import "./Panel.css";
-export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps, NavIdProps {
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, NavIdProps {
     centered?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
-export declare const Panel: React.FC<Pick<PanelProps & AdaptivityContextInterface, "hidden" | "dir" | "nav" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRootRef" | "centered"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Panel: React.FC<PanelProps>;

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

@@ -1,36 +1,39 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["centered", "children", "getRootRef", "sizeX", "nav"];
+var _excluded = ["centered", "children", "getRootRef", "nav"];
 import { createScopedElement } from "../../lib/jsxRuntime";
+import { getSizeXClassName } from "../../helpers/getSizeXClassName";
 import { classNames } from "../../lib/classNames";
 import { Touch } from "../Touch/Touch";
 import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
-import { IOS, VKCOM } from "../../lib/platform";
+import { Platform } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Panel.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
-export var Panel = withAdaptivity(function (_ref) {
+export var Panel = function Panel(_ref) {
   var _ref$centered = _ref.centered,
       centered = _ref$centered === void 0 ? false : _ref$centered,
       children = _ref.children,
       getRootRef = _ref.getRootRef,
-      sizeX = _ref.sizeX,
       nav = _ref.nav,
       restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
+  var _useAdaptivity = useAdaptivity(),
+      sizeX = _useAdaptivity.sizeX;
   return createScopedElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    vkuiClass: classNames("Panel", platform === IOS && "Panel--ios", platform === VKCOM && "Panel--vkcom", // TODO v5.0.0 поправить под новую адаптивность
-    "Panel--sizeX-".concat(sizeX), centered && "Panel--centered")
+    vkuiClass: classNames("Panel", platform === Platform.IOS && "Panel--ios", platform === Platform.VKCOM && "Panel--vkcom", getSizeXClassName("Panel", sizeX), centered && "Panel--centered")
   }), createScopedElement(Touch, {
     Component: TooltipContainer,
     vkuiClass: "Panel__in"
-  }, platform === IOS && createScopedElement("div", {
+  }, platform === Platform.IOS && createScopedElement("div", {
     vkuiClass: "Panel__fade"
   }), createScopedElement("div", {
     vkuiClass: "Panel__in-before"
@@ -39,8 +42,5 @@ export var Panel = withAdaptivity(function (_ref) {
   }, children) : children, createScopedElement("div", {
     vkuiClass: "Panel__in-after"
   })));
-}, {
-  sizeX: true
-});
-Panel.displayName = "Panel";
+};
 //# sourceMappingURL=Panel.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Panel.js","names":["classNames","Touch","TooltipContainer","~~withAdaptivity~~","~~IOS~~","~~VKCOM~~","~~usePlatform","~~Panel","centered","children","getRootRef","~~sizeX","~~nav","restProps","platform","~~displayName~~"],"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ~~classNames~~ } from \"../../~~lib~~/~~classNames~~\";\nimport { ~~Touch~~ } from \"~~../Touch~~/~~Touch~~\";\nimport { ~~TooltipContainer~~ } from \"../~~Tooltip~~/~~TooltipContainer~~\";\nimport { ~~HasRootRef~~ } from \"~~../../types~~\";\nimport { ~~withAdaptivity~~ } from \"../../~~hoc/withAdaptivity~~\";\nimport { ~~IOS,~~ ~~VKCOM~~ } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { NavIdProps } from \"../../lib/getNavId\";\nimport {~~\n AdaptivityContextInterface,\n AdaptivityProps,\n~~} from \"~~../AdaptivityProvider~~/~~AdaptivityContext~~\";\nimport \"./Panel.css\";\n\nexport interface PanelProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n ~~AdaptivityProps,\n~~ NavIdProps {\n centered?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel ~~= withAdaptivity~~<PanelProps & ~~AdaptivityContextInterface>~~(\n ({ centered = false, children, getRootRef~~, sizeX,~~ nav, ...restProps }) => {\n const platform = usePlatform();\n\n return (\n <div\n {...restProps}\n ref={getRootRef}\n vkuiClass={classNames(\n \"Panel\",\n platform === IOS && \"Panel--ios\",\n platform === VKCOM && \"Panel--vkcom\",\n // ~~TODO v5.0.0 поправить под новую адаптивность\n `Panel--~~sizeX~~-${sizeX}`,\~~n centered && \"Panel--centered\"\n )}\n >\n <Touch Component={TooltipContainer} vkuiClass=\"Panel__in\">\n {platform === IOS && <div vkuiClass=\"Panel__fade\" />}\n <div vkuiClass=\"Panel__in-before\" />\n {centered ? (\n <div vkuiClass=\"Panel__centered\">{children}</div>\n ) : (\n children\n )}\n <div vkuiClass=\"Panel__in-after\" />\n </Touch>\n </div>\n );\n }~~,\n {\n sizeX: true,\n }\n)~~;\n~~\nPanel.displayName = \~~"~~Panel\";\n"~~],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,KAAT;AACA,SAASC,gBAAT;AAEA,SAASC,~~cAAT~~;AACA,SAASC,~~GAAT,EAAcC,KAAd~~;~~AACA~~,SAASC,~~WAAT~~;~~AAMA~~;;~~AAUA~~;AACA;AACA;AACA,OAAO,IAAMC,~~KAAK~~,~~GAAGJ~~,~~cAAc~~,~~CACjC~~,~~gBAA0E~~;EAAA,~~yBAAvEK~~,~~QAAuE~~;EAAA,~~IAAvEA~~,~~QAAuE~~,~~8BAA5D~~,~~KAA4D~~;EAAA,~~IAArDC~~,~~QAAqD~~,~~QAArDA~~,~~QAAqD~~;EAAA,~~IAA3CC~~,~~UAA2C~~,~~QAA3CA~~,~~UAA2C~~;EAAA,~~IAA/BC~~,~~KAA+B~~,~~QAA/BA~~,~~KAA+B~~;EAAA,~~IAAxBC~~,~~GAAwB,QAAxBA,GAAwB;EAAA,IAAhBC,SAAgB~~;;~~EACxE~~,IAAMC,QAAQ,GAAGR,WAAW,EAA5B;EAEA,OACE,~~wCACMO~~,SADN;IAEE,GAAG,~~EAAEH~~,UAFP;IAGE,SAAS,~~EAAEV~~,UAAU,CACnB,OADmB,~~EAEnBc~~,QAAQ,~~KAAKV~~,~~GAAb~~,~~IAAoB~~,~~YAFD~~,~~EAGnBU~~,QAAQ,KAAKT,~~KAAb~~,~~IAAsB~~,~~cAHH~~,~~EAInB;IAJmB~~,~~uBAKHM~~,~~KALG~~,~~GAMnBH~~,QAAQ,IAAI,~~iBANO~~;EAHvB,~~IAYE~~,oBAAC,KAAD;IAAO,SAAS,~~EAAEN~~,gBAAlB;IAAoC,SAAS,EAAC;EAA9C,~~GACGY~~,QAAQ,~~KAAKV~~,~~GAAb~~,~~IAAoB~~;IAAK,SAAS,EAAC;EAAf,~~EADvB~~,EAEE;IAAK,SAAS,EAAC;EAAf,EAFF,~~EAGGI~~,QAAQ,GACP;IAAK,SAAS,EAAC;EAAf,GAAkCC,QAAlC,CADO,GAGPA,QANJ,EAQE;IAAK,SAAS,EAAC;EAAf,EARF,~~CAZF~~,CADF;~~AAyBD~~,~~CA7BgC,EA8BjC;EACEE,KAAK,EAAE;AADT,CA9BiC,CAA5B;AAmCPJ,KAAK,CAACQ,WAAN,GAAoB,OAApB~~"}
1	+ {"version":3,"file":"Panel.js","names":["getSizeXClassName","classNames","Touch","TooltipContainer","Platform","usePlatform","useAdaptivity","Panel","centered","children","getRootRef","nav","restProps","platform","sizeX","IOS","VKCOM"],"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { classNames } from \"../../lib/classNames\";\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 \"./Panel.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: React.FC<PanelProps> = ({\n centered = false,\n children,\n getRootRef,\n nav,\n ...restProps\n}) => {\n const platform = usePlatform();\n const { sizeX } = useAdaptivity();\n\n return (\n <div\n {...restProps}\n ref={getRootRef}\n vkuiClass={classNames(\n \"Panel\",\n platform === Platform.IOS && \"Panel--ios\",\n platform === Platform.VKCOM && \"Panel--vkcom\",\n getSizeXClassName(\"Panel\", sizeX),\n centered && \"Panel--centered\"\n )}\n >\n <Touch Component={TooltipContainer} vkuiClass=\"Panel__in\">\n {platform === Platform.IOS && <div vkuiClass=\"Panel__fade\" />}\n <div vkuiClass=\"Panel__in-before\" />\n {centered ? (\n <div vkuiClass=\"Panel__centered\">{children}</div>\n ) : (\n children\n )}\n <div vkuiClass=\"Panel__in-after\" />\n </Touch>\n </div>\n );\n};\n"],"mappings":";;;;AACA,SAASA,iBAAT;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,gBAAT;AAEA,SAASC,QAAT;AACA,SAASC,WAAT;AAEA,SAASC,aAAT;AACA;;AASA;AACA;AACA;AACA,OAAO,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,OAMrC;EAAA,yBALJC,QAKI;EAAA,IALJA,QAKI,8BALO,KAKP;EAAA,IAJJC,QAII,QAJJA,QAII;EAAA,IAHJC,UAGI,QAHJA,UAGI;EAAA,IAFJC,GAEI,QAFJA,GAEI;EAAA,IADDC,SACC;;EACJ,IAAMC,QAAQ,GAAGR,WAAW,EAA5B;;EACA,qBAAkBC,aAAa,EAA/B;EAAA,IAAQQ,KAAR,kBAAQA,KAAR;;EAEA,OACE,wCACMF,SADN;IAEE,GAAG,EAAEF,UAFP;IAGE,SAAS,EAAET,UAAU,CACnB,OADmB,EAEnBY,QAAQ,KAAKT,QAAQ,CAACW,GAAtB,IAA6B,YAFV,EAGnBF,QAAQ,KAAKT,QAAQ,CAACY,KAAtB,IAA+B,cAHZ,EAInBhB,iBAAiB,CAAC,OAAD,EAAUc,KAAV,CAJE,EAKnBN,QAAQ,IAAI,iBALO;EAHvB,IAWE,oBAAC,KAAD;IAAO,SAAS,EAAEL,gBAAlB;IAAoC,SAAS,EAAC;EAA9C,GACGU,QAAQ,KAAKT,QAAQ,CAACW,GAAtB,IAA6B;IAAK,SAAS,EAAC;EAAf,EADhC,EAEE;IAAK,SAAS,EAAC;EAAf,EAFF,EAGGP,QAAQ,GACP;IAAK,SAAS,EAAC;EAAf,GAAkCC,QAAlC,CADO,GAGPA,QANJ,EAQE;IAAK,SAAS,EAAC;EAAf,EARF,CAXF,CADF;AAwBD,CAlCM"}

package/dist/cssm/components/PanelHeader/PanelHeader.css CHANGED Viewed

@@ -1,9 +1 @@
-.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--header_background,var(--vkui--color_background_content));display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--header_tint,var(--vkui--color_icon_accent_themed));display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--header_text,var(--vkui--color_text_primary));font-family:VK Sans Display,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-display);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(
-    --panelheader_height,var(--vkui--size_panel_header_height--regular)
-  );padding-top:0;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--header_tint,var(--vkui--color_icon_accent_themed));display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios{--panelheader_height:var(
-    --panelheader_height_ios,var(--vkui--size_panel_header_height--regular)
-  )}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{--panelheader_height:var(
-    --panelheader_height_vkcom,var(--vkui--size_panel_header_height--regular)
-  );position:relative;z-index:10}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):after{background-color:#fff;background-color:var(
-    --header_background,var(--vkui--color_background_content)
-  );bottom:0;content:"";height:1px;height:var(--thin-border);left:1px;left:var(--thin-border);position:absolute;right:1px;right:var(--thin-border)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:inset 0 0 0 1px #e1e3e6;box-shadow:0 0 0 var(--thin-border) var(--input_border) inset}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}
+.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10}.vkuiPanelHeader__in{align-items:center;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:var(--vkui--color_text_primary);font-family:var(--vkui--font_family_accent);font-family:var(--font-display);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--safe-area-inset-top)}.vkuiPanelHeader__after{box-sizing:border-box;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in):after{background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--thin-border);left:1px;left:var(--thin-border);position:absolute;right:1px;right:var(--thin-border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in):after{background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--thin-border);left:1px;left:var(--thin-border);position:absolute;right:1px;right:var(--thin-border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 0 0 1px var(--vkui--color_field_border_alpha) inset;box-shadow:0 0 0 var(--thin-border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 0 0 1px var(--vkui--color_field_border_alpha) inset;box-shadow:0 0 0 var(--thin-border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}

package/dist/cssm/components/PanelHeader/PanelHeader.d.ts CHANGED Viewed

@@ -1,18 +1,9 @@
 import * as React from "react";
 import { HasRef, HasRootRef } from "../../types";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./PanelHeader.css";
-export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps {
+export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     before?: React.ReactNode;
-    /**
-     * @deprecated Будет удалено в 5.0.0. Используйте `before`
-     */
-    left?: React.ReactNode;
     after?: React.ReactNode;
-    /**
-     * @deprecated Будет удалено в 5.0.0. Используйте `after`
-     */
-    right?: React.ReactNode;
     separator?: boolean;
     transparent?: boolean;
     shadow?: boolean;
@@ -28,4 +19,4 @@ export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
  */
-export declare const PanelHeader: React.FC<Pick<PanelHeaderProps, "fixed" | "transparent" | "left" | "right" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "separator" | "after" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "getRootRef" | "getRef" | "before" | "visor" | "shadow"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const PanelHeader: ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, ...restProps }: PanelHeaderProps) => JSX.Element;