@vkontakte/vkui 5.3.2 → 5.4.0

package/dist/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","onEnter","modalState","transitionState","modalsState","onExit","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","dispatchTransition","process","env","NODE_ENV","isCard","CARD","onEntered","useCallback","onExited","delayEnter","getModalState","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","onEnter","modalState","transitionState","modalsState","onExit","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","dispatchTransition","process","env","NODE_ENV","isCard","CARD","onEntered","useCallback","onExited","delayEnter","getModalState","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"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"}

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

@@ -19,7 +19,7 @@ var sizeYClassNames = _define_property({
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */ var NativeSelect = function(_param) {
-    var style = _param.style, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, align = _param.align, placeholder = _param.placeholder, children = _param.children, className = _param.className, getRef = _param.getRef, getRootRef = _param.getRootRef, disabled = _param.disabled, multiline = _param.multiline, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? "default" : _param_selectType, status = _param.status, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _object_without_properties(_param, [
+    var style = _param.style, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, align = _param.align, placeholder = _param.placeholder, children = _param.children, className = _param.className, getRef = _param.getRef, getRootRef = _param.getRootRef, disabled = _param.disabled, multiline = _param.multiline, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? "default" : _param_selectType, status = _param.status, _param_icon = _param.icon, icon = _param_icon === void 0 ? /*#__PURE__*/ React.createElement(DropdownIcon, null) : _param_icon, before = _param.before, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _object_without_properties(_param, [
         "style",
         "defaultValue",
         "align",
@@ -32,6 +32,8 @@ var sizeYClassNames = _define_property({
         "multiline",
         "selectType",
         "status",
+        "icon",
+        "before",
         "onChange",
         "value"
     ]);
@@ -58,11 +60,12 @@ var sizeYClassNames = _define_property({
     ]);
     return /*#__PURE__*/ React.createElement(FormField, {
         Component: "label",
-        className: classNames("vkuiSelect", "vkuiInternalNativeSelect", empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", (placeholder === null || placeholder === void 0 ? void 0 : placeholder.length) && "vkuiSelect--hasPlaceholder", align === "center" && "vkuiSelect--align-center", align === "right" && "vkuiSelect--align-right", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        className: classNames("vkuiSelect", "vkuiInternalNativeSelect", before && "vkuiSelect--hasBefore", empty && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align === "center" && "vkuiSelect--align-center", align === "right" && "vkuiSelect--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", _object_spread_props(_object_spread({}, restProps), {
         disabled: disabled,

package/dist/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","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","onChange","onChangeProp","value","valueProp","restProps","useState","title","setTitle","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;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAoBnB;;CAEC,GACD,IAAMC,eAAe,iBAgBI;QAfvBC,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAdHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0B5B,mCAAAA,MAAM+B,QAAQ,CAAC,SAAlCC,QAAmBhC,oBAAZiC,WAAYjC;IAC1B,IAA0BA,oCAAAA,MAAM+B,QAAQ,CAAC,KAAK,OAAvCG,QAAmBlC,qBAAZmC,WAAYnC;IAC1B,IAA0BG,sCAAAA,kBAAkB;QAC1CY,cAAAA;QACAO,UAAAA;QACAI,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmBzB,uBAAZuB,WAAYvB;IAM1B,IAAMiC,YAAYhC,aAAagB;IAC/B,IAA2BlB,iBAAAA,wCAAAA,eAAnBmC,OAAAA,0CAAQ;IAEhB/B,0BAA0B,WAAM;YACP8B;QAAvB,IAAME,iBAAiBF,CAAAA,qBAAAA,UAAUG,OAAO,cAAjBH,gCAAAA,KAAAA,IAAAA,mBAAmBI,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBL,SAASK,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMX,eAAe,IAAI;QAC7D,CAAC;IACH,GAAG;QAACW;QAAOV;KAAS;IAEpB,qBACE,oBAACV;QACCmC,WAAU;QACVxB,WAAWlB,yBAET,4BACAiC,8BACAX,sCACAN,CAAAA,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAa2B,MAAM,AAAD,mCAClB5B,UAAU,wCACVA,UAAU,sCACVqB,UAAUhC,SAASwC,OAAO,IAAInC,eAAe,CAAC2B,MAAM,EACpDlB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVwB,qBAAO,oBAACvC;QACRkB,QAAQA;qBAER,oBAACsB,kDACKjB;QACJR,UAAUA;QACVH,SAAS;QACTO,UAAUA;QACVE,OAAOA;QACPoB,KAAKZ;QAEJnB,6BAAe,oBAACgC;QAAOrB,OAAM;OAAIX,cACjCC,yBAEH,oBAACgC;QAAI/B,SAAS;qBACZ,oBAACV;QAAiBU,SAAS;QAA2BK,YAAYA;OAC/DQ;AAKX;AAEA,SAASnB,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","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","useState","title","setTitle","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;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAwBnB;;CAEC,GACD,IAAMC,eAAe,iBAkBI;QAjBvBC,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,6BACAC,MAAAA,8CAAO,oBAACnB,mCACRoB,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0B9B,mCAAAA,MAAMiC,QAAQ,CAAC,SAAlCC,QAAmBlC,oBAAZmC,WAAYnC;IAC1B,IAA0BA,oCAAAA,MAAMiC,QAAQ,CAAC,KAAK,OAAvCG,QAAmBpC,qBAAZqC,WAAYrC;IAC1B,IAA0BG,sCAAAA,kBAAkB;QAC1CY,cAAAA;QACAO,UAAAA;QACAM,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmB3B,uBAAZyB,WAAYzB;IAM1B,IAAMmC,YAAYlC,aAAagB;IAC/B,IAA2BlB,iBAAAA,wCAAAA,eAAnBqC,OAAAA,0CAAQ;IAEhBjC,0BAA0B,WAAM;YACPgC;QAAvB,IAAME,iBAAiBF,CAAAA,qBAAAA,UAAUG,OAAO,cAAjBH,gCAAAA,KAAAA,IAAAA,mBAAmBI,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBL,SAASK,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMb,eAAe,IAAI;QAC7D,CAAC;IACH,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACV;QACCqC,WAAU;QACV1B,WAAWlB,yBAET,4BACA0B,mCACAS,8BACAb,sCACAP,UAAU,wCACVA,UAAU,sCACVuB,UAAUlC,SAASyC,OAAO,IAAIpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;qBAER,oBAACuB,kDACKhB;QACJV,UAAUA;QACVH,SAAS;QACTS,UAAUA;QACVE,OAAOA;QACPmB,KAAKX;QAEJrB,6BAAe,oBAACiC;QAAOpB,OAAM;OAAIb,cACjCC,yBAEH,oBAACiC;QAAIhC,SAAS;qBACZ,oBAACV;QAAiBU,SAAS;QAA2BK,YAAYA;OAC/DU;AAKX;AAEA,SAASrB,YAAY,GAAG"}

package/dist/components/Panel/Panel.js

@@ -28,10 +28,10 @@ var sizeXClassNames = (_obj = {
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
         ref: getRootRef,
-        className: classNames("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiPanel--centered", className)
+        className: classNames("vkuiPanel", sizeXClassNames[sizeX], centered && "vkuiInternalPanel--centered", className)
     }), /*#__PURE__*/ React.createElement(Touch, {
         Component: TooltipContainer,
-        className: "vkuiPanel__in"
+        className: classNames("vkuiPanel__in", "vkuiInternalPanel__in")
     }, platform === Platform.IOS && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiInternalPanel__fade"
     }), /*#__PURE__*/ React.createElement("div", {

package/dist/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","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;IAGf;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBL,SAASM,OAAO,gDAFK,MAGrBN,SAASO,OAAO,+BAHK;AAaxB;;CAEC,GACD,OAAO,IAAMC,QAAQ,iBAOH;iCANhBC,UAAAA,wCAAW,KAAK,oBAChBC,kBAAAA,UACAC,oBAAAA,YACAC,aAAAA,KACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWhB;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKH;QACJI,KAAKP;QACLE,WAAWhB,wBAETO,eAAe,CAACY,MAAM,EACtBP,mCACAI;sBAGF,oBAACV;QAAMgB,WAAWjB;QAAkBW,SAAS;OAC1CE,aAAad,SAASmB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,SAAS;QACbJ,yBAAW,oBAACQ;QAAIJ,SAAS;OAA8BH,YAAkBA,QAAQ,gBAClF,oBAACO;QAAIJ,SAAS;;AAItB,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","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;IAGf;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBL,SAASM,OAAO,gDAFK,MAGrBN,SAASO,OAAO,+BAHK;AAaxB;;CAEC,GACD,OAAO,IAAMC,QAAQ,iBAOH;iCANhBC,UAAAA,wCAAW,KAAK,oBAChBC,kBAAAA,UACAC,oBAAAA,YACAC,aAAAA,KACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWhB;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnBkB,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKH;QACJI,KAAKP;QACLE,WAAWhB,wBAETO,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;sBAGF,oBAACV;QACCgB,WAAWjB;QACXW,WAAWhB,4BAAgC;OAE1CkB,aAAad,SAASmB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,SAAS;QACbJ,yBAAW,oBAACQ;QAAIJ,SAAS;OAA8BH,YAAkBA,QAAQ,gBAClF,oBAACO;QAAIJ,SAAS;;AAItB,EAAE"}

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

@@ -17,13 +17,26 @@ import { TooltipContainer } from "../Tooltip/TooltipContainer";
 import { Text } from "../Typography/Text/Text";
 var platformClassNames = {
     ios: classNames("vkuiPanelHeader--ios", "vkuiInternalPanelHeader--ios"),
-    android: "vkuiPanelHeader--android",
+    android: classNames("vkuiPanelHeader--android", "vkuiInternalPanelHeader--android"),
     vkcom: classNames("vkuiPanelHeader--vkcom", "vkuiInternalPanelHeader--vkcom")
 };
 var sizeXClassNames = {
     none: "vkuiPanelHeader--sizeX-none",
     regular: "vkuiPanelHeader--sizeX-regular"
 };
+var PanelHeaderContent = function(param) {
+    var children = param.children, _param_Component = param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, id = param.id;
+    var platform = usePlatform();
+    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
+        weight: "2",
+        Component: Component,
+        id: id
+    }, children) : /*#__PURE__*/ React.createElement(Component, {
+        className: "vkuiPanelHeader__content-in",
+        id: id
+    }, children);
+};
+PanelHeaderContent.displayName = "PanelHeaderContent";
 var PanelHeaderIn = function(param) {
     var before = param.before, after = param.after, separator = param.separator, children = param.children;
     var webviewType = useConfigProvider().webviewType;
@@ -36,11 +49,7 @@ var PanelHeaderIn = function(param) {
         className: classNames("vkuiPanelHeader__before", "vkuiInternalPanelHeader__before")
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiPanelHeader__content"
-    }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
-        weight: "2"
-    }, children) : /*#__PURE__*/ React.createElement("span", {
-        className: "vkuiPanelHeader__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("vkuiPanelHeader__after", "vkuiInternalPanelHeader__after")
     }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/ React.createElement(Separator, {
         className: "vkuiPanelHeader__separator",
@@ -73,7 +82,7 @@ var PanelHeaderIn = function(param) {
         className: classNames("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && classNames("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && classNames("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
         ref: isFixed ? getRootRef : getRef
     }), isFixed ? /*#__PURE__*/ React.createElement(FixedLayout, {
-        className: "vkuiPanelHeader__fixed",
+        className: classNames("vkuiPanelHeader__fixed", "vkuiInternalPanelHeader__fixed"),
         vertical: "top",
         getRootRef: getRef
     }, /*#__PURE__*/ React.createElement(PanelHeaderIn, {
@@ -91,5 +100,6 @@ var PanelHeaderIn = function(param) {
         size: 16
     })));
 };
+PanelHeader.Content = PanelHeaderContent;
 
 //# sourceMappingURL=PanelHeader.js.map

package/dist/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","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","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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"}

package/dist/components/PanelHeaderButton/PanelHeaderButton.js

@@ -69,7 +69,7 @@ var warn = warnOnce("PanelHeaderButton");
         hoverMode: hoverMode,
         activeEffectDelay: 200,
         activeMode: activeMode,
-        className: classNames("vkuiPanelHeaderButton", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className)
+        className: classNames("vkuiInternalPanelHeaderButton", "vkuiPanelHeaderButton", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isPrimitive && "vkuiPanelHeaderButton--primitive", !isPrimitive && !isPrimitiveLabel && "vkuiPanelHeaderButton--notPrimitive", className)
     }), isPrimitive ? /*#__PURE__*/ React.createElement(ButtonTypography, {
         primary: primary
     }, children) : children, isPrimitiveLabel ? /*#__PURE__*/ React.createElement(ButtonTypography, {

package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","IOS","Component","level","weight","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href","activeEffectDelay","hasOwnProperty"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAWA,IAAMC,mBAAmB,gBAAkD;QAA/CC,gBAAAA,SAASC,iBAAAA;IACnC,IAAMC,WAAWd;IAEjB,IAAIc,aAAab,SAASc,GAAG,EAAE;QAC7B,qBACE,oBAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQN,UAAU,MAAM,GAAG;WAC1DC;IAGP,CAAC;IAED,qBAAO,oBAACR;QAAKa,QAAQJ,aAAab,SAASkB,KAAK,GAAGC,YAAY,GAAG;OAAGP;AACvE;AAEA,IAAMQ,OAAOlB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMmB,oBAAoB,iBAMH;QAL5BT,kBAAAA,kCACAD,SAAAA,sCAAU,KAAK,mBACfW,eAAAA,OACAC,mBAAAA,WACGC;QAJHZ;QACAD;QACAW;QACAC;;IAGA,IAAME,cAAc3B,qBAAqBc;IACzC,IAAMc,mBAAmB5B,qBAAqBwB;IAC9C,IAAMT,WAAWd;IAEjB,IAAI4B;IACJ,IAAIC;IAEJ,OAAQf;QACN,KAAKb,SAASc,GAAG;YACfa,YAAY;YACZC,aAAa;YACb,KAAM;QACR,KAAK5B,SAASkB,KAAK;YACjBS;YACAC;YACA,KAAM;QACR;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBC,QACxBhC,qBAAqBW,aACnBX,qBAAqBqB,UACrBE,SAAS,CAAC,aAAa,IACvBA,SAAS,CAAC,kBAAkB;QAGhC,IAAI,CAACQ,mBAAmB;YACtBZ,KACE,sMACA;QAEJ,CAAC;IACH,CAAC;IAED,qBACE,oBAACjB;QACCY,WAAWS,UAAUU,IAAI,GAAG,MAAM,QAAQ;OACtCV;QACJG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAW1B,oCAETS,mBAAmB8B,cAAc,CAACvB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9BiB,mDACA,CAACA,eAAe,CAACC,2DACjBH;QAGDE,4BAAc,oBAACf;QAAiBC,SAASA;OAAUC,YAA+BA,QAAQ,EAC1Fc,iCACC,oBAAChB;QAAiBC,SAASA;QAASY,SAAS;OAC1CD,SAGHA,KACD;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === Platform.VKCOM ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.VKCOM:\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        'vkuiInternalPanelHeaderButton',\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","IOS","Component","level","weight","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href","activeEffectDelay","hasOwnProperty"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAGlD,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAWA,IAAMC,mBAAmB,gBAAkD;QAA/CC,gBAAAA,SAASC,iBAAAA;IACnC,IAAMC,WAAWd;IAEjB,IAAIc,aAAab,SAASc,GAAG,EAAE;QAC7B,qBACE,oBAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQN,UAAU,MAAM,GAAG;WAC1DC;IAGP,CAAC;IAED,qBAAO,oBAACR;QAAKa,QAAQJ,aAAab,SAASkB,KAAK,GAAGC,YAAY,GAAG;OAAGP;AACvE;AAEA,IAAMQ,OAAOlB,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMmB,oBAAoB,iBAMH;QAL5BT,kBAAAA,kCACAD,SAAAA,sCAAU,KAAK,mBACfW,eAAAA,OACAC,mBAAAA,WACGC;QAJHZ;QACAD;QACAW;QACAC;;IAGA,IAAME,cAAc3B,qBAAqBc;IACzC,IAAMc,mBAAmB5B,qBAAqBwB;IAC9C,IAAMT,WAAWd;IAEjB,IAAI4B;IACJ,IAAIC;IAEJ,OAAQf;QACN,KAAKb,SAASc,GAAG;YACfa,YAAY;YACZC,aAAa;YACb,KAAM;QACR,KAAK5B,SAASkB,KAAK;YACjBS;YACAC;YACA,KAAM;QACR;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBC,QACxBhC,qBAAqBW,aACnBX,qBAAqBqB,UACrBE,SAAS,CAAC,aAAa,IACvBA,SAAS,CAAC,kBAAkB;QAGhC,IAAI,CAACQ,mBAAmB;YACtBZ,KACE,sMACA;QAEJ,CAAC;IACH,CAAC;IAED,qBACE,oBAACjB;QACCY,WAAWS,UAAUU,IAAI,GAAG,MAAM,QAAQ;OACtCV;QACJG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAW1B,WACT,0DAEAS,mBAAmB8B,cAAc,CAACvB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9BiB,mDACA,CAACA,eAAe,CAACC,2DACjBH;QAGDE,4BAAc,oBAACf;QAAiBC,SAASA;OAAUC,YAA+BA,QAAQ,EAC1Fc,iCACC,oBAAChB;QAAiBC,SAASA;QAASY,SAAS;OAC1CD,SAGHA,KACD;AAGP,EAAE"}

package/dist/components/PanelHeaderContent/PanelHeaderContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps {\n  hasStatus: boolean;\n  hasBefore: boolean;\n  children?: React.ReactNode;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        className,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div\n          className={classNames(\n            'vkuiInternalPanelHeaderContent__children',\n            styles['PanelHeaderContent__children'],\n          )}\n        >\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","Tappable","Footnote","Headline","Text","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","Component","weight","div","className","PanelHeaderContent","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","hasOwnProperty","ANDROID"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAcA,IAAMC,sBAAsB,gBAAkE;QAA/DC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWd;IACjB,IAAIc,aAAab,SAASc,KAAK,EAAE;QAC/B,qBACE,oBAACV;YAAKW,WAAU;YAAMC,QAAO;WAC1BJ;IAGP,CAAC;IAED,OAAOF,aAAaC,0BAClB,oBAACR;QAASY,WAAU;QAAMC,QAAO;OAC9BJ,0BAGH,oBAACK;QAAIC,SAAS;OAA8CN,SAC7D;AACH;AAEA;;CAEC,GACD,OAAO,IAAMO,qBAAqB,iBASH;QAR7BD,mBAAAA,WACAE,eAAAA,OACAC,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAX,kBAAAA,UACAY,iBAAAA,SACGC;QAPHP;QACAE;QACAC;QACAC;QACAC;QACAX;QACAY;;IAGA,IAAME,cAAcF,UAAUvB,WAAW,KAAK;IAC9C,IAAM0B,YAAYH,UAAU,CAAC,IAAIC,SAAS;IAC1C,IAAMZ,WAAWd;IACjB,IAAM6B,UAAUJ,UACZ,wCACKC;QACHD,SAAAA;QACAK,mBAAmB;QACnBC,WAAWjB,aAAab,SAAS+B,GAAG;QACpCC,YAAY;SAEd,CAAC,CAAC;IAEN,qBACE,oBAACf,+CACKU;QACJP,OAAOA;QACPF,WAAWrB,qCAETQ,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BW;QAGDpB,aAAayB,yBAAW,oBAACN;QAAIC,SAAS;OAAyCK,uBAChF,oBAACG,qDACKE;QACJV,WAAWrB,yCAET,CAAC0B,UAAUV,aAAab,SAASkC,OAAO;QAGzCpC,aAAawB,yBACZ,oBAACpB;QAASgB,SAAS;OAAyCI,uBAE9D,oBAACL;QACCC,WAAWrB,WACT;qBAIF,oBAACY;QAAoBC,WAAWZ,aAAawB;QAASX,WAAWb,aAAayB;OAC3EX,WAEFd,aAAauB,wBACZ,oBAACJ;QAAIC,SAAS;OAAwCG,SAGzDvB,aAAayB,yBAAW,oBAACN;QAAIC,SAAS;;AAI/C,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n  hasStatus: boolean;\n  hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        className,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div\n          className={classNames(\n            'vkuiInternalPanelHeaderContent__children',\n            styles['PanelHeaderContent__children'],\n          )}\n        >\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","Tappable","Footnote","Headline","Text","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","Component","weight","div","className","PanelHeaderContent","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","hasOwnProperty","ANDROID"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAaA,IAAMC,sBAAsB,gBAAkE;QAA/DC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWd;IACjB,IAAIc,aAAab,SAASc,KAAK,EAAE;QAC/B,qBACE,oBAACV;YAAKW,WAAU;YAAMC,QAAO;WAC1BJ;IAGP,CAAC;IAED,OAAOF,aAAaC,0BAClB,oBAACR;QAASY,WAAU;QAAMC,QAAO;OAC9BJ,0BAGH,oBAACK;QAAIC,SAAS;OAA8CN,SAC7D;AACH;AAEA;;CAEC,GACD,OAAO,IAAMO,qBAAqB,iBASH;QAR7BD,mBAAAA,WACAE,eAAAA,OACAC,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAX,kBAAAA,UACAY,iBAAAA,SACGC;QAPHP;QACAE;QACAC;QACAC;QACAC;QACAX;QACAY;;IAGA,IAAME,cAAcF,UAAUvB,WAAW,KAAK;IAC9C,IAAM0B,YAAYH,UAAU,CAAC,IAAIC,SAAS;IAC1C,IAAMZ,WAAWd;IACjB,IAAM6B,UAAUJ,UACZ,wCACKC;QACHD,SAAAA;QACAK,mBAAmB;QACnBC,WAAWjB,aAAab,SAAS+B,GAAG;QACpCC,YAAY;SAEd,CAAC,CAAC;IAEN,qBACE,oBAACf,+CACKU;QACJP,OAAOA;QACPF,WAAWrB,qCAETQ,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BW;QAGDpB,aAAayB,yBAAW,oBAACN;QAAIC,SAAS;OAAyCK,uBAChF,oBAACG,qDACKE;QACJV,WAAWrB,yCAET,CAAC0B,UAAUV,aAAab,SAASkC,OAAO;QAGzCpC,aAAawB,yBACZ,oBAACpB;QAASgB,SAAS;OAAyCI,uBAE9D,oBAACL;QACCC,WAAWrB,WACT;qBAIF,oBAACY;QAAoBC,WAAWZ,aAAawB;QAASX,WAAWb,aAAayB;OAC3EX,WAEFd,aAAauB,wBACZ,oBAACJ;QAAIC,SAAS;OAAwCG,SAGzDvB,aAAayB,yBAAW,oBAACN;QAAIC,SAAS;;AAI/C,EAAE"}

package/dist/components/PanelHeaderContext/PanelHeaderContext.js

@@ -61,7 +61,7 @@ var sizeXClassNames = (_obj = {
         closing
     ]);
     return /*#__PURE__*/ React.createElement(FixedLayout, _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiPanelHeaderContext", platform === Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], "vkuiPanelHeaderContext--rounded", className),
+        className: classNames("vkuiPanelHeaderContext", platform === Platform.IOS && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], className),
         vertical: "top"
     }), visible && /*#__PURE__*/ React.createElement("div", {
         onClick: function(event) {
@@ -73,9 +73,9 @@ var sizeXClassNames = (_obj = {
         className: "vkuiPanelHeaderContext__in",
         ref: elementRef,
         onAnimationEnd: closing ? onAnimationEnd : undefined
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, visible && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiPanelHeaderContext__content"
-    }, visible && children)));
+    }, children)));
 };
 
 //# sourceMappingURL=PanelHeaderContext.js.map

package/dist/components/PanelHeaderContext/PanelHeaderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        styles['PanelHeaderContext--rounded'],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{visible && children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;IAGjC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBP,SAASQ,OAAO,6DAFK,MAGrBR,SAASS,OAAO,4CAHK;AAWxB;;CAEC,GACD,OAAO,IAAMC,qBAAqB,iBAMH;QAL7BC,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,KAAK,kBACdC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaf,SAAbe;IACR,IAAMC,WAAWnB;IACjB,IAA8BJ,mCAAAA,MAAMwB,QAAQ,CAACL,aAAtCM,UAAuBzB,oBAAd0B,aAAc1B;IAC9B,IAAM2B,UAAUF,WAAW,CAACN;IAC5B,IAA2BjB,iBAAAA,wCAAAA,eAAnB0B,OAAAA,0CAAQ;IAChB,IAAMC,aAAa7B,MAAM8B,MAAM,CAAiB,IAAI;IAEpDrB,0BAA0B,WAAM;QAC9BU,UAAUO,WAAW,IAAI;IAC3B,GAAG;QAACP;KAAO;IAEXT,cAAca,aAAaf,SAASuB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BhB,uBACEmB,UACA,SACAH,UACE,CAACQ,WACA,SAACK,OAAU;QACV,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF,CAAC;IACH,GACF;QAAEmB,SAAS,IAAI;IAAC;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMZ,WAAW,KAAK;;IAC7C,IAAMa,oBAAoBlC,WAAWiC,gBAAgB;IACrDtC,MAAMwC,SAAS,CACb;eAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,EAAE;OACpE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAAChB,qDACKU;QACJD,WAAWnB,qCAETsB,aAAaf,SAASmC,GAAG,mCACzBxB,4CACAQ,8CACAf,eAAe,CAACgB,MAAM,qCAEtBR;QAEFwB,UAAS;QAERnB,yBACC,oBAACoB;QACCC,SAAS,SAACd,OAAU;YAClBA,MAAMI,eAAe;YACrBlB;QACF;QACAE,SAAS;sBAGb,oBAACyB;QACCzB,SAAS;QACT2B,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU,SAAS;qBAEpD,oBAACH;QAAIzB,SAAS;OAA0CK,WAAWR;AAI3E,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;IAGjC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBP,SAASQ,OAAO,6DAFK,MAGrBR,SAASS,OAAO,4CAHK;AAWxB;;CAEC,GACD,OAAO,IAAMC,qBAAqB,iBAMH;QAL7BC,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,KAAK,kBACdC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaf,SAAbe;IACR,IAAMC,WAAWnB;IACjB,IAA8BJ,mCAAAA,MAAMwB,QAAQ,CAACL,aAAtCM,UAAuBzB,oBAAd0B,aAAc1B;IAC9B,IAAM2B,UAAUF,WAAW,CAACN;IAC5B,IAA2BjB,iBAAAA,wCAAAA,eAAnB0B,OAAAA,0CAAQ;IAChB,IAAMC,aAAa7B,MAAM8B,MAAM,CAAiB,IAAI;IAEpDrB,0BAA0B,WAAM;QAC9BU,UAAUO,WAAW,IAAI;IAC3B,GAAG;QAACP;KAAO;IAEXT,cAAca,aAAaf,SAASuB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BhB,uBACEmB,UACA,SACAH,UACE,CAACQ,WACA,SAACK,OAAU;QACV,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF,CAAC;IACH,GACF;QAAEmB,SAAS,IAAI;IAAC;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMZ,WAAW,KAAK;;IAC7C,IAAMa,oBAAoBlC,WAAWiC,gBAAgB;IACrDtC,MAAMwC,SAAS,CACb;eAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,EAAE;OACpE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAAChB,qDACKU;QACJD,WAAWnB,qCAETsB,aAAaf,SAASmC,GAAG,mCACzBxB,4CACAQ,8CACAf,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;QAERnB,yBACC,oBAACoB;QACCC,SAAS,SAACd,OAAU;YAClBA,MAAMI,eAAe;YACrBlB;QACF;QACAE,SAAS;sBAGb,oBAACyB;QACCzB,SAAS;QACT2B,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU,SAAS;OAEnDvB,yBAAW,oBAACoB;QAAIzB,SAAS;OAA0CH;AAI5E,EAAE"}

package/dist/components/PlatformProvider/PlatformProvider.d.ts

@@ -10,7 +10,7 @@ export interface PlatformProviderProps {
 /**
  * Компонент, позволяющий переопределить платформу для части приложения
  *
- * @version 5.1.0
+ * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */
 export declare function PlatformProvider({ value, children }: PlatformProviderProps): JSX.Element;

package/dist/components/PlatformProvider/PlatformProvider.js

@@ -5,7 +5,7 @@ import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride
 /**
  * Компонент, позволяющий переопределить платформу для части приложения
  *
- * @version 5.1.0
+ * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */ export function PlatformProvider(param) {
     var value = param.value, children = param.children;

package/dist/components/PlatformProvider/PlatformProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @version 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,KAA0C,EAAE;QAA1CC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACxC,IAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT,CAAC"}
+{"version":3,"sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,KAA0C,EAAE;QAA1CC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACxC,IAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT,CAAC"}

package/dist/components/PopoutWrapper/PopoutWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === 'vkui-animation-full-fade-in') {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,gBAAgB,iBAUH;+BATxBC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,KAAK,2CACfC,SAAAA,sCAAU,IAAI,yCACdC,OAAAA,kCAAQ,IAAI,iBACZC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,QAAQ,CAAC,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,MAAM,CAAiB,IAAI;IAE/C,IAAMC,cAAc,SAACC,GAA6B;QAChD,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAK,+BAA+B;YAC3DL,UAAU,IAAI;QAChB,CAAC;IACH;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,GAAG,GAAG,MAAM,GAAG;IAC7F3B,MAAM4B,SAAS,CAAC,WAAM;QACpB,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB,WAAW;QAChDkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}
+{"version":3,"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,gBAAgB,iBAUH;+BATxBC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,KAAK,2CACfC,SAAAA,sCAAU,IAAI,yCACdC,OAAAA,kCAAQ,IAAI,iBACZC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,QAAQ,CAAC,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,MAAM,CAAiB,IAAI;IAE/C,IAAMC,cAAc,SAACC,GAA6B;QAChD,IAAI,CAACA,KAAKA,EAAEC,aAAa,oCAA4C;YACnEL,UAAU,IAAI;QAChB,CAAC;IACH;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,GAAG,GAAG,MAAM,GAAG;IAC7F3B,MAAM4B,SAAS,CAAC,WAAM;QACpB,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB,WAAW;QAChDkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { FocusTrapProps } from '../FocusTrap/FocusTrap';
 import { PopperCommonProps } from '../Popper/Popper';
-export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {
+export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName' | 'content'>, Pick<FocusTrapProps, 'restoreFocus'> {
     /**
      * Механика вызова всплывающего окна.
      *
@@ -46,4 +47,4 @@ export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowCl
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export declare const Popover: ({ action, shown: shownProp, showDelay, hideDelay, offsetDistance, content, children, style: styleProp, className, getRef, onShownChange, ...restProps }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ action, shown: shownProp, showDelay, hideDelay, offsetDistance, content, children, style: styleProp, className, getRef, onShownChange, restoreFocus, ...restProps }: PopoverProps) => JSX.Element;