@vkontakte/vkui 5.3.1 → 5.4.0

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

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

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

@@ -2,10 +2,14 @@ import * as React from 'react';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'status'> {
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
     placeholder?: string;
     multiline?: boolean;
     selectType?: SelectType;
+    /**
+     * Иконка раскрывающегося списка
+     */
+    icon?: React.ReactNode;
 }
 export interface SelectState {
     value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];
@@ -15,5 +19,5 @@ export interface SelectState {
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
-declare const NativeSelect: ({ style, defaultValue, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, onChange: onChangeProp, value: valueProp, ...restProps }: NativeSelectProps) => JSX.Element;
+declare const NativeSelect: ({ style, defaultValue, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, icon, before, onChange: onChangeProp, value: valueProp, ...restProps }: NativeSelectProps) => JSX.Element;
 export { NativeSelect };

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

@@ -15,7 +15,7 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
- */ const NativeSelect = ({ style , defaultValue ='' , align , placeholder , children , className , getRef , getRootRef , disabled , multiline , selectType ='default' , status , onChange: onChangeProp , value: valueProp , ...restProps })=>{
+ */ const NativeSelect = ({ style , defaultValue ='' , align , placeholder , children , className , getRef , getRootRef , disabled , multiline , selectType ='default' , status , icon =/*#__PURE__*/ React.createElement(DropdownIcon, null) , before , onChange: onChangeProp , value: valueProp , ...restProps })=>{
     const [title, setTitle] = React.useState('');
     const [empty, setEmpty] = React.useState(false);
     const [value, onChange] = useEnsuredControl({
@@ -38,11 +38,12 @@ const sizeYClassNames = {
     ]);
     return /*#__PURE__*/ React.createElement(FormField, {
         Component: "label",
-        className: classNames(styles['Select'], 'vkuiInternalNativeSelect', empty && styles['Select--empty'], multiline && styles['Select--multiline'], placeholder?.length && styles['Select--hasPlaceholder'], align === 'center' && styles['Select--align-center'], align === 'right' && styles['Select--align-right'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        className: classNames(styles['Select'], 'vkuiInternalNativeSelect', before && styles['Select--hasBefore'], empty && styles['Select--empty'], multiline && styles['Select--multiline'], align === 'center' && styles['Select--align-center'], align === 'right' && styles['Select--align-right'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
         style: style,
         getRootRef: getRootRef,
         disabled: disabled,
-        after: /*#__PURE__*/ React.createElement(DropdownIcon, null),
+        before: before,
+        after: icon,
         status: status
     }, /*#__PURE__*/ React.createElement("select", {
         ...restProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        placeholder?.length && styles['Select--hasPlaceholder'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']}>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","onChange","onChangeProp","value","valueProp","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","length","REGULAR","after","select","ref","option","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAmBA;;CAEC,GACD,MAAMI,eAAe,CAAC,EACpBC,MAAK,EACLC,cAAe,GAAE,EACjBC,MAAK,EACLC,YAAW,EACXC,SAAQ,EACRC,UAAS,EACTC,OAAM,EACNC,WAAU,EACVC,SAAQ,EACRC,UAAS,EACTC,YAAa,UAAS,EACtBC,OAAM,EACNC,UAAUC,aAAY,EACtBC,OAAOC,UAAS,EAChB,GAAGC,WACe,GAAK;IACvB,MAAM,CAACC,OAAOC,SAAS,GAAGjC,MAAMkC,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGpC,MAAMkC,QAAQ,CAAC,KAAK;IAC9C,MAAM,CAACL,OAAOF,SAAS,GAAGxB,kBAAkB;QAC1Ca;QACAO;QACAI,UAAUC;QACVC,OAAOC;IACT;IACA,MAAMO,YAAYjC,aAAaiB;IAC/B,MAAM,EAAEiB,OAAQ,OAAM,EAAE,GAAGpC;IAE3BI,0BAA0B,IAAM;QAC9B,MAAMiC,iBAAiBF,UAAUG,OAAO,EAAEC,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBN,SAASM,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMX,eAAe,IAAI;QAC7D,CAAC;IACH,GAAG;QAACW;QAAOV;KAAS;IAEpB,qBACE,oBAACX;QACCoC,WAAU;QACVxB,WAAWnB,WACTS,MAAM,CAAC,SAAS,EAChB,4BACAyB,SAASzB,MAAM,CAAC,gBAAgB,EAChCc,aAAad,MAAM,CAAC,oBAAoB,EACxCQ,aAAa2B,UAAUnC,MAAM,CAAC,yBAAyB,EACvDO,UAAU,YAAYP,MAAM,CAAC,uBAAuB,EACpDO,UAAU,WAAWP,MAAM,CAAC,sBAAsB,EAClD4B,UAAUjC,SAASyC,OAAO,IAAInC,eAAe,CAAC2B,MAAM,EACpDlB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVwB,qBAAO,oBAACxC;QACRmB,QAAQA;qBAER,oBAACsB;QACE,GAAGjB,SAAS;QACbR,UAAUA;QACVH,WAAWV,MAAM,CAAC,aAAa;QAC/BiB,UAAUA;QACVE,OAAOA;QACPoB,KAAKZ;OAEJnB,6BAAe,oBAACgC;QAAOrB,OAAM;OAAIX,cACjCC,yBAEH,oBAACgC;QAAI/B,WAAWV,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBW,WAAWV,MAAM,CAAC,gBAAgB;QAAEe,YAAYA;OAC/DO;AAKX;AAEA,SAASlB,YAAY,GAAG"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']}>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","REGULAR","after","select","ref","option","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAuBA;;CAEC,GACD,MAAMI,eAAe,CAAC,EACpBC,MAAK,EACLC,cAAe,GAAE,EACjBC,MAAK,EACLC,YAAW,EACXC,SAAQ,EACRC,UAAS,EACTC,OAAM,EACNC,WAAU,EACVC,SAAQ,EACRC,UAAS,EACTC,YAAa,UAAS,EACtBC,OAAM,EACNC,oBAAO,oBAACpB,oBAAe,EACvBqB,OAAM,EACNC,UAAUC,aAAY,EACtBC,OAAOC,UAAS,EAChB,GAAGC,WACe,GAAK;IACvB,MAAM,CAACC,OAAOC,SAAS,GAAGnC,MAAMoC,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGtC,MAAMoC,QAAQ,CAAC,KAAK;IAC9C,MAAM,CAACL,OAAOF,SAAS,GAAG1B,kBAAkB;QAC1Ca;QACAO;QACAM,UAAUC;QACVC,OAAOC;IACT;IACA,MAAMO,YAAYnC,aAAaiB;IAC/B,MAAM,EAAEmB,OAAQ,OAAM,EAAE,GAAGtC;IAE3BI,0BAA0B,IAAM;QAC9B,MAAMmC,iBAAiBF,UAAUG,OAAO,EAAEC,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBN,SAASM,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMb,eAAe,IAAI;QAC7D,CAAC;IACH,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACX;QACCsC,WAAU;QACV1B,WAAWnB,WACTS,MAAM,CAAC,SAAS,EAChB,4BACAkB,UAAUlB,MAAM,CAAC,oBAAoB,EACrC2B,SAAS3B,MAAM,CAAC,gBAAgB,EAChCc,aAAad,MAAM,CAAC,oBAAoB,EACxCO,UAAU,YAAYP,MAAM,CAAC,uBAAuB,EACpDO,UAAU,WAAWP,MAAM,CAAC,sBAAsB,EAClD8B,UAAUnC,SAAS0C,OAAO,IAAIpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;qBAER,oBAACuB;QACE,GAAGhB,SAAS;QACbV,UAAUA;QACVH,WAAWV,MAAM,CAAC,aAAa;QAC/BmB,UAAUA;QACVE,OAAOA;QACPmB,KAAKX;OAEJrB,6BAAe,oBAACiC;QAAOpB,OAAM;OAAIb,cACjCC,yBAEH,oBAACiC;QAAIhC,WAAWV,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBW,WAAWV,MAAM,CAAC,gBAAgB;QAAEe,YAAYA;OAC/DS;AAKX;AAEA,SAASpB,YAAY,GAAG"}

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

@@ -1 +1,83 @@
-.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);box-sizing:border-box;color:#818c99;color:var(--vkui--color_text_secondary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);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)}.vkuiPagination__page--current,.vkuiPagination__page--state-active{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiPagination__page--disabled{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiPagination__page--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_button_large_height--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiPagination__page--sizeY-none{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_button_large_height--compact);line-height:36px;line-height:var(--vkui--size_button_large_height--compact)}}.vkuiPagination__page--sizeY-regular{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);height:44px;height:var(--vkui--size_button_large_height--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiPagination__page--sizeY-none{font-size:16px;font-size:var(--vkui--font_text--font_size--regular);height:44px;height:var(--vkui--size_button_large_height--regular);line-height:44px;line-height:var(--vkui--size_button_large_height--regular)}}.vkuiPagination__page--type-ellipsis{min-width:16px;padding-left:0;padding-right:0}
+.Pagination {
+}
+
+.Pagination__list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.Pagination__prevButtonContainer {
+  margin-right: 8px;
+}
+
+.Pagination__nextButtonContainer {
+  margin-left: 8px;
+}
+
+/* Page styles */
+
+.Pagination__page {
+  box-sizing: border-box;
+  padding-right: 8px;
+  padding-left: 8px;
+  width: 100%;
+  min-width: 40px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  text-align: center;
+  color: var(--vkui--color_text_secondary);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  font-family: var(--vkui--font_family_base);
+}
+
+.Pagination__page--state-hover {
+  background-color: var(--vkui--color_transparent--hover);
+}
+
+.Pagination__page--state-active,
+.Pagination__page--current {
+  color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_transparent--active);
+}
+
+.Pagination__page--disabled {
+  opacity: var(--vkui--opacity_disable);
+}
+
+.Pagination__page--sizeY-compact {
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--size_button_large_height--compact);
+  height: var(--vkui--size_button_large_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Pagination__page--sizeY-none {
+    font-size: var(--vkui--font_text--font_size--compact);
+    line-height: var(--vkui--size_button_large_height--compact);
+    height: var(--vkui--size_button_large_height--compact);
+  }
+}
+
+.Pagination__page--sizeY-regular {
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--size_button_large_height--regular);
+  height: var(--vkui--size_button_large_height--regular);
+}
+
+@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
+  .Pagination__page--sizeY-none {
+    font-size: var(--vkui--font_text--font_size--regular);
+    line-height: var(--vkui--size_button_large_height--regular);
+    height: var(--vkui--size_button_large_height--regular);
+  }
+}
+
+.Pagination__page--type-ellipsis {
+  min-width: 16px;
+  padding-right: 0;
+  padding-left: 0;
+}

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

@@ -20,10 +20,10 @@ const sizeXClassNames = {
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
         ref: getRootRef,
-        className: classNames(styles['Panel'], sizeXClassNames[sizeX], centered && styles['Panel--centered'], className)
+        className: classNames(styles['Panel'], sizeXClassNames[sizeX], centered && 'vkuiInternalPanel--centered', className)
     }, /*#__PURE__*/ React.createElement(Touch, {
         Component: TooltipContainer,
-        className: styles['Panel__in']
+        className: classNames(styles['Panel__in'], 'vkuiInternalPanel__in')
     }, platform === Platform.IOS && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiInternalPanel__fade"
     }), /*#__PURE__*/ React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && styles['Panel--centered'],\n        className,\n      )}\n    >\n      <Touch Component={TooltipContainer} className={styles['Panel__in']}>\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","styles","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACJ,SAASQ,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMK,QAAQ,CAAC,EACpBC,UAAW,KAAK,CAAA,EAChBC,SAAQ,EACRC,WAAU,EACVC,IAAG,EACHC,UAAS,EACT,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACE,GAAGH,SAAS;QACbI,KAAKP;QACLE,WAAWjB,WACTO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBP,YAAYN,MAAM,CAAC,kBAAkB,EACrCU;qBAGF,oBAACX;QAAMiB,WAAWlB;QAAkBY,WAAWV,MAAM,CAAC,YAAY;OAC/DY,aAAaf,SAASoB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,WAAWV,MAAM,CAAC,mBAAmB;QACzCM,yBAAW,oBAACQ;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;OAAGO,YAAkBA,QAAQ,gBAClF,oBAACO;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;;AAIjD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && 'vkuiInternalPanel--centered',\n        className,\n      )}\n    >\n      <Touch\n        Component={TooltipContainer}\n        className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n      >\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","styles","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACJ,SAASQ,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMK,QAAQ,CAAC,EACpBC,UAAW,KAAK,CAAA,EAChBC,SAAQ,EACRC,WAAU,EACVC,IAAG,EACHC,UAAS,EACT,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACE,GAAGH,SAAS;QACbI,KAAKP;QACLE,WAAWjB,WACTO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;qBAGF,oBAACX;QACCiB,WAAWlB;QACXY,WAAWjB,WAAWO,MAAM,CAAC,YAAY,EAAE;OAE1CY,aAAaf,SAASoB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,WAAWV,MAAM,CAAC,mBAAmB;QACzCM,yBAAW,oBAACQ;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;OAAGO,YAAkBA,QAAQ,gBAClF,oBAACO;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;;AAIjD,EAAE"}

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

@@ -1 +1,177 @@
-.vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel:before{content:"";height:100%}.vkuiPanel--centered .vkuiPanelHeader,.vkuiPanel:before{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%}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--vis+*,.vkuiPanel__centered .vkuiInternalPanelHeader--vis+*{margin-top:56px;margin-top:var(--vkui--size_panel_header_height--regular)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 5px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 5px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--ios.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--vkcom.vkuiInternalPanelHeader--sep+*{margin-top:calc(56px + 16px);margin-top:calc(var(--vkui--size_panel_header_height--regular) + 16px)}}.vkuiInternalEpic--hasTabbar .vkuiPanel__in{padding-bottom:calc(0px + 48px);padding-bottom:calc(var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel .vkuiPanel__in,.vkuiPanel:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in,.vkuiPanel.vkuiPanel--sizeX-regular:before{background-color:initial}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__in,.vkuiPanel--sizeX-none:before{background-color:initial}}
+.Panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.Panel::before {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  content: '';
+}
+
+.Panel__in {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.Panel__centered {
+  display: flex;
+  flex: 1 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.Panel__centered :global(.vkuiInternalPanelHeader--vis) + * {
+  margin-top: var(--vkui--size_panel_header_height--regular);
+}
+
+.Panel__centered :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--vis) + * {
+  margin-top: var(--vkui--size_panel_header_height--regular);
+}
+
+.Panel--sizeX-compact .Panel__centered :global(.vkuiInternalPanelHeader--sep) + * {
+  margin-top: calc(var(--vkui--size_panel_header_height--regular) + 5px);
+}
+
+@media (max-width: 767.9px) {
+  .Panel--sizeX-none .Panel__centered :global(.vkuiInternalPanelHeader--sep) + * {
+    margin-top: calc(var(--vkui--size_panel_header_height--regular) + 5px);
+  }
+}
+
+.Panel--sizeX-compact
+  .Panel__centered
+  :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
+  + * {
+  margin-top: calc(var(--vkui--size_panel_header_height--regular) + 5px);
+}
+
+@media (max-width: 767.9px) {
+  .Panel--sizeX-none
+    .Panel__centered
+    :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
+    + * {
+    margin-top: calc(var(--vkui--size_panel_header_height--regular) + 5px);
+  }
+}
+
+.Panel--sizeX-compact
+  .Panel__centered
+  :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
+  + * {
+  margin-top: calc(var(--vkui--size_panel_header_height--regular) + 5px);
+}
+
+@media (max-width: 767.9px) {
+  .Panel--sizeX-none
+    .Panel__centered
+    :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
+    + * {
+    margin-top: calc(var(--vkui--size_panel_header_height--regular) + 5px);
+  }
+}
+
+.Panel--sizeX-regular .Panel__centered :global(.vkuiInternalPanelHeader--sep) + * {
+  margin-top: calc(var(--vkui--size_panel_header_height--regular) + 16px);
+}
+
+@media (min-width: 768px) {
+  .Panel--sizeX-none .Panel__centered :global(.vkuiInternalPanelHeader--sep) + * {
+    margin-top: calc(var(--vkui--size_panel_header_height--regular) + 16px);
+  }
+}
+
+.Panel--sizeX-regular
+  .Panel__centered
+  :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
+  + * {
+  margin-top: calc(var(--vkui--size_panel_header_height--regular) + 16px);
+}
+
+@media (min-width: 768px) {
+  .Panel--sizeX-none
+    .Panel__centered
+    :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
+    + * {
+    margin-top: calc(var(--vkui--size_panel_header_height--regular) + 16px);
+  }
+}
+
+.Panel--sizeX-regular
+  .Panel__centered
+  :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
+  + * {
+  margin-top: calc(var(--vkui--size_panel_header_height--regular) + 16px);
+}
+
+@media (min-width: 768px) {
+  .Panel--sizeX-none
+    .Panel__centered
+    :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
+    + * {
+    margin-top: calc(var(--vkui--size_panel_header_height--regular) + 16px);
+  }
+}
+
+/**
+ * CMP:
+ * View
+ */
+
+:global(.vkuiInternalView--ios) .Panel__in {
+  padding-bottom: var(--vkui_internal--safe_area_inset_bottom);
+}
+
+:global(.vkuiInternalView--ios) .Panel__in {
+  padding: 0 var(--vkui_internal--safe_area_inset_right)
+    var(--vkui_internal--safe_area_inset_bottom) var(--vkui_internal--safe_area_inset_left);
+}
+
+/**
+ * CMP:
+ * Epic
+ */
+
+:global(.vkuiInternalEpic--hasTabbar) .Panel__in {
+  padding-bottom: var(--vkui_internal--tabbar_height);
+  padding-bottom: calc(
+    var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height)
+  );
+}
+
+.Panel__in-before {
+  height: 1px;
+  margin-bottom: -1px;
+}
+
+.Panel__in-after {
+  height: 1px;
+  margin-top: -1px;
+}
+
+.Panel .Panel__in,
+.Panel::before {
+  background-color: var(--vkui--color_background_content);
+}
+
+.Panel.Panel--sizeX-regular .Panel__in,
+.Panel.Panel--sizeX-regular::before {
+  background-color: transparent;
+}
+
+@media (min-width: 768px) {
+  .Panel--sizeX-none .Panel__in,
+  .Panel--sizeX-none::before {
+    background-color: transparent;
+  }
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
+import { HasComponent, HasRef, HasRootRef } from '../../types';
 export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     before?: React.ReactNode;
     after?: React.ReactNode;
@@ -15,7 +15,16 @@ export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     fixed?: boolean;
 }
+interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
  */
-export declare const PanelHeader: ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, ...restProps }: PanelHeaderProps) => JSX.Element;
+export declare const PanelHeader: {
+    ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, ...restProps }: PanelHeaderProps): JSX.Element;
+    Content: {
+        ({ children, Component, id }: PanelHeaderContentProps): JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -15,13 +15,25 @@ import { Text } from '../Typography/Text/Text';
 import styles from './PanelHeader.module.css';
 const platformClassNames = {
     ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),
-    android: styles['PanelHeader--android'],
+    android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),
     vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom')
 };
 const sizeXClassNames = {
     none: styles['PanelHeader--sizeX-none'],
     regular: styles['PanelHeader--sizeX-regular']
 };
+const PanelHeaderContent = ({ children , Component ='span' , id  })=>{
+    const platform = usePlatform();
+    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
+        weight: "2",
+        Component: Component,
+        id: id
+    }, children) : /*#__PURE__*/ React.createElement(Component, {
+        className: styles['PanelHeader__content-in'],
+        id: id
+    }, children);
+};
+PanelHeaderContent.displayName = 'PanelHeaderContent';
 const PanelHeaderIn = ({ before , after , separator , children  })=>{
     const { webviewType  } = useConfigProvider();
     const { isInsideModal  } = React.useContext(ModalRootContext);
@@ -33,11 +45,7 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
         className: classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: styles['PanelHeader__content']
-    }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
-        weight: "2"
-    }, children) : /*#__PURE__*/ React.createElement("span", {
-        className: styles['PanelHeader__content-in']
-    }, children)), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.isValidElement(children) && children.type.displayName === PanelHeaderContent.displayName ? children : /*#__PURE__*/ React.createElement(PanelHeaderContent, null, children)), /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')
     }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/ React.createElement(Separator, {
         className: styles['PanelHeader__separator'],
@@ -58,7 +66,7 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
         className: classNames(styles['PanelHeader'], 'vkuiInternalPanelHeader', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && styles['PanelHeader--trnsp'], shadow && styles['PanelHeader--shadow'], visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'), separator && visor && classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'), webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'], !before && styles['PanelHeader--no-before'], !after && styles['PanelHeader--no-after'], isFixed && styles['PanelHeader--fixed'], sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
         ref: isFixed ? getRootRef : getRef
     }, isFixed ? /*#__PURE__*/ React.createElement(FixedLayout, {
-        className: styles['PanelHeader__fixed'],
+        className: classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed'),
         vertical: "top",
         getRootRef: getRef
     }, /*#__PURE__*/ React.createElement(PanelHeaderIn, {
@@ -76,5 +84,6 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
         size: 16
     })));
 };
+PanelHeader.Content = PanelHeaderContent;
 
 //# sourceMappingURL=PanelHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: styles['PanelHeader--android'],\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","webviewType","isInsideModal","useContext","platform","Fragment","fixed","className","div","VKCOM","weight","span","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","restProps","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\ninterface PanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {}\n\nconst PanelHeaderContent = ({ children, Component = 'span', id }: PanelHeaderContentProps) => {\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nPanelHeaderContent.displayName = 'PanelHeaderContent';\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>\n          {/* Поддерживаем обратную совместимость для подкомпонентного подхода */}\n          {React.isValidElement(children) &&\n          (children as JSX.Element).type.displayName === PanelHeaderContent.displayName ? (\n            children\n          ) : (\n            <PanelHeaderContent>{children}</PanelHeaderContent>\n          )}\n        </div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nPanelHeader.Content = PanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderContent","children","Component","id","platform","VKCOM","weight","className","displayName","PanelHeaderIn","before","after","separator","webviewType","isInsideModal","useContext","Fragment","fixed","div","isValidElement","type","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","restProps","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","Content"],"mappings":"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"}