@vkontakte/vkui 4.15.0 → 4.16.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.15.0",
+  "version": "4.16.2",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -14,6 +14,8 @@
     "./dist/index.js",
     "./dist/cjs/lib/polyfills.js",
     "./dist/cjs/index.js",
+    "./dist/cssm/lib/polyfills.js",
+    "./dist/cssm/index.js",
     "*.css"
   ],
   "devDependencies": {
@@ -129,7 +131,7 @@
     }
   ],
   "scripts": {
-    "prepare": "node -e '!process.env.VKUI_SKIP_PREPARE && require(`child_process`).spawn(`yarn`, [`build`], { stdio: `inherit` })'",
+    "prepublishOnly": "yarn build",
     "size": "yarn clear && concurrently 'yarn:babel' 'yarn:postcss' && size-limit",
     "size:ci": "yarn install --frozen-lockfile --ignore-scripts && yarn build:no-types",
     "styleguide": "cross-env NODE_ENV=development styleguidist server --config=styleguide/config.js",

package/postcss.config.js

@@ -8,7 +8,7 @@ const csso = require('postcss-csso');
 const checkKeyframes = require('./tasks/postcss-check-keyframes');
 const { defaultSchemeId } = require('./package.json');
 
-const animationsSource = path.join(__dirname, 'src/styles/animations.css')
+const animationsSource = path.join(__dirname, 'src/styles/animations.css');
 const cssPropSources = [
   path.join(__dirname, 'src/styles/bright_light.css'),
   path.join(__dirname, 'src/styles/constants.css'),

package/src/components/ActionSheetItem/ActionSheetItem.css

@@ -106,7 +106,8 @@
   border-top-right-radius: 14px;
 }
 
-.ActionSheetItem--ios:nth-last-child(2) {
+.ActionSheetItem--ios:not(.ActionSheetItem--desktop):nth-last-child(2),
+.ActionSheetItem--ios:last-child {
   border-bottom-left-radius: 14px;
   border-bottom-right-radius: 14px;
 }
@@ -118,7 +119,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--modal_card_background);
-  z-index: 1;
+  z-index: -1;
   content: '';
   transition: opacity .15s ease-out, background-color .15s ease-out;
 }
@@ -127,7 +128,7 @@
   position: absolute;
   right: 0;
   left: 0;
-  z-index: 1;
+  z-index: -1;
   height: 1px;
   content: '';
   top: 0;
@@ -266,11 +267,6 @@
   cursor: pointer;
 }
 
-.ActionSheetItem--desktop.ActionSheetItem--ios:nth-last-child(2) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
 /**
  * Disabled
  */

package/src/components/AppRoot/AppRoot.css

@@ -0,0 +1,20 @@
+.vkui__root--embedded {
+  transform: translate3d(0, 0, 0);
+  overflow-x: hidden;
+}
+
+.AppRoot {
+  height: 100%;
+}
+
+.vkui__root--embedded .AppRoot {
+  overflow: auto;
+}
+
+.vkui--sizeX-regular {
+  background: var(--background_page);
+}
+
+.AppRoot--no-mouse {
+  user-select: none;
+}

package/src/components/AppRoot/AppRoot.tsx

@@ -10,6 +10,9 @@ import { elementScrollController, globalScrollController, ScrollContext, ScrollC
 import { noop } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';
+import { useInsets } from '../../hooks/useInsets';
+import { Insets } from '@vkontakte/vk-bridge';
+import './AppRoot.css';
 
 // Используйте classList, но будьте осторожны
 /* eslint-disable no-restricted-properties */
@@ -36,6 +39,7 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(({
   const rootRef = React.useRef<HTMLDivElement>();
   const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement>(null);
   const { window, document } = useDOM();
+  const insets = useInsets();
 
   const initialized = React.useRef(false);
   if (!initialized.current) {
@@ -86,6 +90,32 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(({
     };
   }, []);
 
+  // setup insets
+  useIsomorphicLayoutEffect(() => {
+    if (mode === 'partial') {
+      return noop;
+    }
+
+    const parent = rootRef.current.parentElement;
+
+    for (const key in insets) {
+      if (insets.hasOwnProperty(key) && typeof insets[key as keyof Insets] === 'number') {
+        const inset = insets[key as keyof Insets];
+        parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);
+        portalRoot && portalRoot.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);
+      }
+    }
+
+    return () => {
+      for (const key in insets) {
+        if (insets.hasOwnProperty(key)) {
+          parent.style.removeProperty(`--safe-area-inset-${key}`);
+          portalRoot && portalRoot.style.removeProperty(`--safe-area-inset-${key}`);
+        }
+      }
+    };
+  }, [insets, portalRoot]);
+
   // adaptivity handler
   useIsomorphicLayoutEffect(() => {
     if (mode === 'partial' || sizeX !== SizeType.REGULAR) {

package/src/components/Banner/Banner.css

@@ -47,6 +47,10 @@
   z-index: 2;
 }
 
+.Banner__header {
+  display: block;
+}
+
 .Banner__subheader {
   display: block;
   color: var(--text_subhead);

package/src/components/Banner/Banner.tsx

@@ -127,7 +127,7 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
 
         <div vkuiClass="Banner__content">
           {hasReactNode(header) && (
-            <BannerHeader size={size} Component="h2" vkuiClass="Banner__header">{header}</BannerHeader>
+            <BannerHeader size={size} Component="span" vkuiClass="Banner__header">{header}</BannerHeader>
           )}
           {hasReactNode(subheader) && (
             <BannerSubheader Component="span" size={size} vkuiClass="Banner__subheader">{subheader}</BannerSubheader>

package/src/components/Cell/Cell.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
 import { getClassName } from '../../helpers/getClassName';
-import Touch, { TouchEvent } from '../Touch/Touch';
+import { Touch, TouchEvent } from '../Touch/Touch';
 import { ANDROID, IOS, VKCOM } from '../../lib/platform';
 import { Icon24Reorder, Icon24ReorderIos, Icon24CheckCircleOn, Icon24CheckCircleOff, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
 import SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -13,12 +13,13 @@ import Caption from '../Typography/Caption/Caption';
 import { prefixClass } from '../../lib/prefixClass';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { defaultFilterFn } from '../../lib/select';
 import './ChipsSelect.css';
 
 export interface ChipsSelectProps<Option extends ChipsInputOption> extends ChipsInputProps<Option>, AdaptivityProps {
   popupDirection?: 'top' | 'bottom';
   options?: Option[];
-  filterFn?: (value?: string, option?: Option, getOptionLabel?: Pick<ChipsInputProps<ChipsInputOption>, 'getOptionLabel'>['getOptionLabel']) => boolean;
+  filterFn?: false | ((value?: string, option?: Option, getOptionLabel?: Pick<ChipsInputProps<ChipsInputOption>, 'getOptionLabel'>['getOptionLabel']) => boolean);
   /**
    * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)
    */
@@ -60,7 +61,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(props: ChipsSelectProps<Op
     style, onFocus, onKeyDown, className, fetching, renderOption, emptyText,
     getRef, getRootRef, disabled, placeholder, tabIndex, getOptionValue, getOptionLabel, showSelected,
     getNewOptionData, renderChip, popupDirection, creatable, filterFn, inputValue, creatableText, sizeY,
-    closeAfterSelect, onChangeStart, after, ...restProps
+    closeAfterSelect, onChangeStart, after, options, ...restProps
   } = props;
 
   const { document } = useDOM();
@@ -324,11 +325,7 @@ const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   showSelected: true,
   closeAfterSelect: true,
   options: [],
-  filterFn: (value?: string, option?: ChipsInputOption, getOptionLabel?: Pick<ChipsInputProps<ChipsInputOption>, 'getOptionLabel'>['getOptionLabel']) => {
-    return (
-      !value || value && getOptionLabel(option)?.toLowerCase()?.startsWith(value?.toLowerCase())
-    );
-  },
+  filterFn: defaultFilterFn,
   renderOption({ option, ...restProps }: CustomSelectOptionProps): React.ReactNode {
     return (
       <CustomSelectOption {...restProps} />

package/src/components/ChipsSelect/Readme.md

@@ -29,7 +29,6 @@ const Example = () => {
     value: selectedColors,
     onChange: setSelectedColors,
     options: colors,
-    top:"Выберите или добавьте цвета",
     placeholder:"Не выбраны",
     creatable: true,
   };
@@ -38,7 +37,6 @@ const Example = () => {
       value: selectedColorsCopy,
       onChange: setSelectedColorsCopy,
       options: colors,
-      top:"Выберите или добавьте цвета",
       placeholder:"Не выбраны",
       creatable: true,
       creatableText: '',

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -22,7 +22,7 @@ export const useChipsSelect = <Option extends ChipsInputOption>(props: Partial<C
   };
 
   let filteredOptions = React.useMemo(() => {
-    return options.filter((option: Option) => filterFn(fieldValue, option, getOptionLabel));
+    return filterFn ? options.filter((option: Option) => filterFn(fieldValue, option, getOptionLabel)) : options;
   }, [options, filterFn, fieldValue, getOptionLabel]);
 
   filteredOptions = React.useMemo(() => {

package/src/components/CustomSelect/CustomSelect.tsx

@@ -15,6 +15,7 @@ import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
 import Caption from '../Typography/Caption/Caption';
 import { warnOnce } from '../../lib/warnOnce';
 import Spinner from '../Spinner/Spinner';
+import { defaultFilterFn } from '../../lib/select';
 import './CustomSelect.css';
 
 const findIndexAfter = (options: CustomSelectOptionInterface[], startIndex = -1) => {
@@ -77,7 +78,7 @@ export interface CustomSelectProps extends NativeSelectProps, HasPlatform, FormF
   /**
    * Функция для кастомной фильтрации. По-умолчанию поиск производится по option.label.
    */
-  filterFn?: false | ((value: string, option: CustomSelectOptionInterface) => boolean);
+  filterFn?: false | ((value: string, option: CustomSelectOptionInterface, getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string) => boolean);
   popupDirection?: 'top' | 'bottom';
   /**
    * Рендер-проп для кастомного рендера опции.
@@ -112,7 +113,7 @@ class CustomSelect extends React.Component<CustomSelectProps, CustomSelectState>
     },
     options: [],
     emptyText: 'Ничего не найдено',
-    filterFn: (value, option) => option.label.toLowerCase().includes(value.toLowerCase()),
+    filterFn: defaultFilterFn,
   };
 
   public constructor(props: CustomSelectProps) {

package/src/components/FixedLayout/FixedLayout.tsx

@@ -2,34 +2,28 @@ import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { transitionEndEventName, TransitionStartEventDetail, transitionStartEventName } from '../View/View';
-import { withContext } from '../../hoc/withContext';
-import { HasPlatform, HasRef, HasRootRef } from '../../types';
-import { withPlatform } from '../../hoc/withPlatform';
-import { withPanelContext } from '../Panel/withPanelContext';
-import { setRef } from '../../lib/utils';
-import { SplitColContext, SplitColContextProps } from '../SplitCol/SplitCol';
+import { HasRef, HasRootRef } from '../../types';
+import { SplitColContext } from '../SplitCol/SplitCol';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
-import { PanelContextProps } from '../Panel/PanelContext';
-import { DOMProps, withDOM } from '../../lib/dom';
+import { PanelContext } from '../Panel/PanelContext';
+import { useDOM } from '../../lib/dom';
 import { IOS } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
 import './FixedLayout.css';
 
 export interface FixedLayoutProps extends
   React.HTMLAttributes<HTMLDivElement>,
   HasRootRef<HTMLDivElement>,
-  HasRef<HTMLDivElement>,
-  HasPlatform {
+  HasRef<HTMLDivElement> {
   vertical?: 'top' | 'bottom';
   /**
    * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.
    * Это часто необходимо для фиксированных кнопок в нижней части экрана.
    */
   filled?: boolean;
-  /**
-   * @ignore
-   */
-  splitCol?: SplitColContextProps;
 }
 
 export interface FixedLayoutState {
@@ -41,62 +35,23 @@ export interface FixedLayoutState {
 
 const warn = warnOnce('FixedLayout');
 
-class FixedLayout extends React.Component<FixedLayoutProps & DOMProps & PanelContextProps, FixedLayoutState> {
-  state: FixedLayoutState = {
-    position: 'absolute',
-    top: null,
-    bottom: null,
-    width: '',
-  };
-
-  el: HTMLDivElement;
-
-  private onMountResizeTimeout: number;
-
-  get document() {
-    return this.props.document;
-  }
-
-  get window() {
-    return this.props.window;
-  }
-
-  get currentPanel(): HTMLElement {
-    const elem = this.props.getPanelNode();
-
-    if (process.env.NODE_ENV === 'development' && !elem) {
-      warn('Panel element not found');
-    }
-
-    return elem;
-  }
-
-  get canTargetPanelScroll() {
-    const panelEl = this.currentPanel;
-    if (!panelEl) {
-      return true; // Всегда предпологаем, что может быть скролл в случае, если нет document
-    }
-    return panelEl.scrollHeight > panelEl.clientHeight;
-  }
-
-  componentDidMount() {
-    this.onMountResizeTimeout = setTimeout(() => this.doResize());
-    this.window.addEventListener('resize', this.doResize);
-
-    this.document.addEventListener(transitionStartEventName, this.onViewTransitionStart);
-    this.document.addEventListener(transitionEndEventName, this.onViewTransitionEnd);
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.onMountResizeTimeout);
-    this.window.removeEventListener('resize', this.doResize);
-
-    this.document.removeEventListener(transitionStartEventName, this.onViewTransitionStart);
-    this.document.removeEventListener(transitionEndEventName, this.onViewTransitionEnd);
-  }
-
-  onViewTransitionStart: EventListener = (e: CustomEvent<TransitionStartEventDetail>) => {
-    let panelScroll = e.detail.scrolls[this.props.panel] || 0;
+const FixedLayout: React.FC<FixedLayoutProps> = ({
+  children, style, vertical, getRootRef, getRef, filled,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const { colRef } = React.useContext(SplitColContext);
+  const { window, document } = useDOM();
+  const { panel, getPanelNode } = React.useContext(PanelContext);
+  const [transitionOverrideStyle, setTransitionOverrideStyle] = React.useState<React.CSSProperties>({});
+  const [width, setWidth] = React.useState<string>(null);
+  const elRef = useExternRef(getRootRef);
+
+  const doResize = () => setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : null);
+  React.useEffect(doResize, []);
+  useGlobalEventListener(window, 'resize', doResize);
+  useGlobalEventListener(document, transitionStartEventName, (e: CustomEvent<TransitionStartEventDetail>) => {
+    let panelScroll = e.detail.scrolls[panel] || 0;
 
     // support for unstable ViewInfinite
     if (Array.isArray(panelScroll)) {
@@ -104,89 +59,48 @@ class FixedLayout extends React.Component<FixedLayoutProps & DOMProps & PanelCon
       panelScroll = scrolls[scrolls.length - 1];
     }
 
-    const fromPanelHasScroll = this.props.panel === e.detail.from && panelScroll > 0;
-    const toPanelHasScroll = this.props.panel === e.detail.to && panelScroll > 0;
+    const fromPanelHasScroll = panel === e.detail.from && panelScroll > 0;
+    const toPanelHasScroll = panel === e.detail.to && panelScroll > 0;
 
     // если переход назад на Android - анимация только у панели с которой уходим (detail.from), и подстраиваться под скролл надо только на ней
     // на iOS переход между панелями горизонтальный, поэтому там нужно подстраивать хедеры на обеих панелях
-    const panelAnimated = this.props.platform === IOS || !(this.props.panel === e.detail.to && e.detail.isBack);
+    const panelAnimated = platform === IOS || !(panel === e.detail.to && e.detail.isBack);
+
+    const currentPanel = getPanelNode();
+    if (process.env.NODE_ENV === 'development' && !currentPanel) {
+      warn('Panel element not found');
+    }
+    // Всегда предпологаем, что может быть скролл в случае, если нет document
+    const canTargetPanelScroll = !currentPanel || currentPanel.scrollHeight > currentPanel.clientHeight;
 
     // Для панелей, с которых уходим всегда выставляется скролл
     // Для панелей на которые приходим надо смотреть, есть ли браузерный скролл и применяется ли к ней анимация перехода:
-    if (fromPanelHasScroll || toPanelHasScroll && this.canTargetPanelScroll && panelAnimated) {
-      this.setState({
+    if (fromPanelHasScroll || toPanelHasScroll && canTargetPanelScroll && panelAnimated) {
+      setTransitionOverrideStyle({
         position: 'absolute',
-        top: this.props.vertical === 'top' || fromPanelHasScroll ? this.el.offsetTop + panelScroll : null,
-        bottom: this.props.vertical === 'bottom' && !fromPanelHasScroll ? -panelScroll : null,
-        width: '',
+        top: vertical === 'top' || fromPanelHasScroll ? elRef.current.offsetTop + panelScroll : null,
+        bottom: vertical === 'bottom' && !fromPanelHasScroll ? -panelScroll : null,
       });
     }
-  };
-
-  onViewTransitionEnd: VoidFunction = () => {
-    this.setState({
-      position: null,
-      top: null,
-      bottom: null,
-    });
-
-    this.doResize();
-  };
-
-  doResize = () => {
-    const { colRef } = this.props.splitCol;
-
-    if (colRef && colRef.current) {
-      const node: HTMLElement = colRef.current;
-      const width = node.offsetWidth;
-
-      this.setState({ width: `${width}px`, position: null });
-    } else {
-      this.setState({ width: '', position: null });
-    }
-  };
-
-  getRef: React.RefCallback<HTMLDivElement> = (element) => {
-    this.el = element;
-    setRef(element, this.props.getRootRef);
-  };
-
-  render() {
-    const {
-      children,
-      style,
-      vertical,
-      getRootRef,
-      getRef,
-      platform,
-      filled,
-      splitCol,
-      panel,
-      getPanelNode,
-      window,
-      document,
-      ...restProps
-    } = this.props;
-
-    return (
-      <TooltipContainer
-        {...restProps}
-        fixed
-        ref={this.getRef}
-        vkuiClass={classNames(getClassName('FixedLayout', platform), {
-          'FixedLayout--filled': filled,
-          [`FixedLayout--${vertical}`]: !!vertical,
-        })}
-        style={{ ...style, ...this.state }}
-      >
-        <div vkuiClass="FixedLayout__in" ref={getRef}>{children}</div>
-      </TooltipContainer>
-    );
-  }
-}
-
-export default withContext(
-  withPlatform(withPanelContext(withDOM<FixedLayoutProps>(FixedLayout))),
-  SplitColContext,
-  'splitCol',
-);
+  });
+  useGlobalEventListener(document, transitionEndEventName, () => {
+    setTransitionOverrideStyle({});
+    doResize();
+  });
+
+  return (
+    <TooltipContainer
+      {...restProps}
+      fixed
+      ref={elRef}
+      vkuiClass={classNames(getClassName('FixedLayout', platform), {
+        'FixedLayout--filled': filled,
+      }, `FixedLayout--${vertical}`)}
+      style={{ ...style, ...transitionOverrideStyle, width }}
+    >
+      <div vkuiClass="FixedLayout__in" ref={getRef}>{children}</div>
+    </TooltipContainer>
+  );
+};
+
+export default FixedLayout;

package/src/components/Gallery/Gallery.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
-import Touch, { TouchEventHandler, TouchEvent } from '../Touch/Touch';
+import { Touch, TouchEventHandler, TouchEvent } from '../Touch/Touch';
 import { classNames } from '../../lib/classNames';
 import { withPlatform } from '../../hoc/withPlatform';
 import { HasAlign, HasPlatform, HasRef, HasRootRef } from '../../types';

package/src/components/Header/Header.tsx

@@ -93,7 +93,7 @@ const Header: React.FC<HeaderProps> = ({
       vkuiClass={classNames(getClassName('Header', platform), `Header--mode-${mode}`, { 'Header--pi': isPrimitiveReactNode(indicator) })}
     >
       <div vkuiClass="Header__main">
-        <HeaderContent vkuiClass="Header__content" Component="h3" mode={mode} platform={platform}>
+        <HeaderContent vkuiClass="Header__content" Component="span" mode={mode} platform={platform}>
           <span vkuiClass={classNames('Header__content-in', { 'Header__content-in--multiline': multiline })}>{children}</span>
           {hasReactNode(indicator) && (
             <Caption

package/src/components/ModalCardBase/ModalCardBase.css

@@ -15,6 +15,10 @@
   pointer-events: initial;
 }
 
+.ModalCardBase__container--softwareKeyboardOpened {
+  margin-bottom: 0;
+}
+
 .ModalCardBase__header,
 .ModalCardBase__subheader {
   text-align: center;

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -11,6 +11,7 @@ import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { IOS } from '../../lib/platform';
 import ModalDismissButton from '../ModalDismissButton/ModalDismissButton';
 import { Icon24Dismiss } from '@vkontakte/icons';
+import { useKeyboard } from '../../hooks/useKeyboard';
 import './ModalCardBase.css';
 
 export interface ModalCardBaseProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
@@ -61,6 +62,7 @@ export const ModalCardBase: React.FC<ModalCardBaseProps> = withAdaptivity(({
 }: ModalCardBaseProps & AdaptivityProps) => {
   const platform = usePlatform();
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isSoftwareKeyboardOpened = useKeyboard().isOpened;
 
   const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
   const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;
@@ -73,7 +75,9 @@ export const ModalCardBase: React.FC<ModalCardBaseProps> = withAdaptivity(({
       })}
       ref={getRootRef}
     >
-      <div vkuiClass="ModalCardBase__container">
+      <div vkuiClass={classNames('ModalCardBase__container', {
+        'ModalCardBase__container--softwareKeyboardOpened': isSoftwareKeyboardOpened,
+      })}>
         {hasReactNode(icon) && <div vkuiClass="ModalCardBase__icon">{icon}</div>}
         {hasReactNode(header) && <Title level="2" weight="semibold" vkuiClass="ModalCardBase__header">{header}</Title>}
         {hasReactNode(subheader) && <Headline weight="regular" vkuiClass="ModalCardBase__subheader">{subheader}</Headline>}

package/src/components/ModalPage/ModalPage.tsx

@@ -5,7 +5,6 @@ import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContex
 import { usePlatform } from '../../hooks/usePlatform';
 import { withAdaptivity, AdaptivityProps, ViewHeight, ViewWidth } from '../../hoc/withAdaptivity';
 import ModalDismissButton from '../ModalDismissButton/ModalDismissButton';
-import { Ref } from '../../types';
 import { multiRef } from '../../lib/utils';
 import { ModalType } from '../ModalRoot/types';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
@@ -26,7 +25,7 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Ad
    * Если высота контента в модальной странице может поменяться, нужно установить это свойство
    */
   dynamicContentHeight?: boolean;
-  getModalContentRef?: Ref<HTMLDivElement>;
+  getModalContentRef?: React.Ref<HTMLDivElement>;
 }
 
 const warn = warnOnce('ModalPage');

package/src/components/ModalRoot/ModalRoot.css

@@ -53,3 +53,13 @@
   box-sizing: border-box;
   z-index: 1;
 }
+
+@keyframes vkui-animation-fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/components/ModalRoot/ModalRoot.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Touch, { TouchEvent } from '../Touch/Touch';
+import { Touch, TouchEvent } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';

package/src/components/Panel/Panel.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
-import Touch from '../Touch/Touch';
+import { Touch } from '../Touch/Touch';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import { HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';

package/src/components/PanelHeaderContent/PanelHeaderContent.css

@@ -24,7 +24,8 @@
 }
 
 .PanelHeaderContent__status,
-.PanelHeaderContent__children-in {
+.PanelHeaderContent__children-in,
+.PanelHeaderContent__children .Headline {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -49,8 +49,8 @@ const PanelHeaderContent: React.FunctionComponent<PanelHeaderContentProps> = ({
           </Caption>
         }
         <div vkuiClass="PanelHeaderContent__children">
-          {hasReactNode(status)
-            ? <Headline vkuiClass="PanelHeaderContent__children-in" Component="span" weight="medium">
+          {hasReactNode(status) ?
+            <Headline Component="span" weight="medium">
               {children}
             </Headline>
             : <span vkuiClass="PanelHeaderContent__children-in">{children}</span>