@vkontakte/vkui 4.28.1 → 4.30.0

package/src/components/Alert/Alert.tsx

@@ -8,10 +8,10 @@ import { ANDROID, VKCOM, IOS } from "../../lib/platform";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
-import Button, { ButtonProps } from "../Button/Button";
+import { Button, ButtonProps } from "../Button/Button";
 import { hasReactNode } from "../../lib/utils";
 import Headline from "../Typography/Headline/Headline";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import { Caption } from "../Typography/Caption/Caption";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
@@ -19,6 +19,11 @@ import {
   AdaptivityContextInterface,
   AdaptivityProps,
 } from "../AdaptivityProvider/AdaptivityContext";
+import { withContext } from "../../hoc/withContext";
+import {
+  ScrollContext,
+  ScrollContextInterface,
+} from "../AppRoot/ScrollContext";
 import "./Alert.css";
 
 export type AlertActionInterface = AlertAction &
@@ -40,6 +45,8 @@ export interface AlertProps
   header?: React.ReactNode;
   text?: React.ReactNode;
   onClose?: VoidFunction;
+  /** @ignore */
+  scroll?: ScrollContextInterface;
 }
 
 export type TAlertProps = AlertProps & AdaptivityContextInterface;
@@ -50,7 +57,7 @@ export interface AlertState {
 
 type TransitionEndHandler = (e?: TransitionEvent) => void;
 
-type ItemClickHander = (item: AlertActionInterface) => () => void;
+type ItemClickHandler = (item: AlertActionInterface) => () => void;
 
 class AlertComponent extends React.Component<TAlertProps, AlertState> {
   constructor(props: TAlertProps) {
@@ -61,6 +68,14 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
     };
   }
 
+  componentDidMount() {
+    this.props.scroll?.enableScrollLock();
+  }
+
+  componentWillUnmount() {
+    this.props.scroll?.disableScrollLock();
+  }
+
   element: React.RefObject<HTMLDivElement>;
 
   private transitionFinishTimeout: number | undefined = undefined;
@@ -76,7 +91,7 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
       : 300;
   }
 
-  onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {
+  onItemClick: ItemClickHandler = (item: AlertActionInterface) => () => {
     const { action, autoclose } = item;
 
     if (autoclose) {
@@ -259,6 +274,7 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
           onClick={this.stopPropagation}
           onClose={this.onClose}
           timeout={this.timeout}
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames(getClassName("Alert", platform), {
             "Alert--v": resolvedActionsLayout === "vertical",
             "Alert--h": resolvedActionsLayout === "horizontal",
@@ -281,8 +297,12 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
   }
 }
 
-export const Alert = withPlatform(
-  withAdaptivity(AlertComponent, {
-    viewWidth: true,
-  })
+export const Alert = withContext(
+  withPlatform(
+    withAdaptivity(AlertComponent, {
+      viewWidth: true,
+    })
+  ),
+  ScrollContext,
+  "scroll"
 );

package/src/components/AppRoot/AppRoot.tsx

@@ -21,6 +21,7 @@ import { warnOnce } from "../../lib/warnOnce";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
 import { useInsets } from "../../hooks/useInsets";
 import { Insets } from "@vkontakte/vk-bridge";
+import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import "./AppRoot.css";
 
 // Используйте classList, но будьте осторожны
@@ -60,6 +61,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     );
     const { window, document } = useDOM();
     const insets = useInsets();
+    const { appearance } = React.useContext(ConfigProviderContext);
 
     const initialized = React.useRef(false);
     if (!initialized.current) {
@@ -72,10 +74,13 @@ export const AppRoot = withAdaptivity<AppRootProps>(
 
     if (process.env.NODE_ENV === "development") {
       if (scroll !== "global" && mode !== "embedded") {
-        warn("Scroll modes only supported in embedded mode");
+        warn(
+          `Свойство scroll="${scroll}" поддерживается только в режиме embedded`,
+          "error"
+        );
       }
       if (_mode && _embedded) {
-        warn(`mode="${mode}" overrides embedded`);
+        warn(`Свойство mode="${mode}" приоритетнее, чем "embedded"`);
       }
     }
 
@@ -155,6 +160,16 @@ export const AppRoot = withAdaptivity<AppRootProps>(
       return () => container?.classList.remove("vkui--sizeX-regular");
     }, [sizeX]);
 
+    useIsomorphicLayoutEffect(() => {
+      if (mode !== "full" || appearance === undefined) {
+        return noop;
+      }
+      document!.documentElement.style.setProperty("color-scheme", appearance);
+
+      return () =>
+        document!.documentElement.style.removeProperty("color-scheme");
+    }, [appearance]);
+
     const scrollController = React.useMemo<ScrollContextInterface>(
       () =>
         scroll === "contain"
@@ -189,6 +204,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     ) : (
       <div
         ref={rootRef}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("AppRoot", {
           "AppRoot--no-mouse": !hasMouse,
         })}

package/src/components/AppRoot/ScrollContext.ts

@@ -1,21 +1,39 @@
 import * as React from "react";
 import { noop } from "../../lib/utils";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { clamp } from "../../helpers/math";
 
+const clearDisableScrollStyle = (node: HTMLElement) => {
+  Object.assign(node.style, {
+    position: "",
+    top: "",
+    left: "",
+    right: "",
+    overflowY: "",
+    overflowX: "",
+  });
+};
+
 export interface ScrollContextInterface {
   getScroll(): { x: number; y: number };
   scrollTo(x?: number, y?: number): void;
+  enableScrollLock(): void;
+  disableScrollLock(): void;
 }
 
 export const ScrollContext = React.createContext<ScrollContextInterface>({
   getScroll: () => ({ x: 0, y: 0 }),
   scrollTo: noop,
+  enableScrollLock: noop,
+  disableScrollLock: noop,
 });
 
+export const useScroll = () => React.useContext(ScrollContext);
+
 export const globalScrollController = (
   window: Window | undefined,
   document: HTMLDocument | undefined
-) => ({
+): ScrollContextInterface => ({
   getScroll: () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
   scrollTo: (x = 0, y = 0) => {
     // Some iOS versions do not normalize scroll — do it manually.
@@ -24,11 +42,39 @@ export const globalScrollController = (
       y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0
     );
   },
+  enableScrollLock: () => {
+    const scrollY = window!.pageYOffset;
+    const scrollX = window!.pageXOffset;
+    const overflowY =
+      window!.innerWidth > document!.documentElement.clientWidth
+        ? "scroll"
+        : "";
+    const overflowX =
+      window!.innerHeight > document!.documentElement.clientHeight
+        ? "scroll"
+        : "";
+
+    Object.assign(document!.body.style, {
+      position: "fixed",
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: "0",
+      overflowY,
+      overflowX,
+    });
+  },
+  disableScrollLock: () => {
+    const scrollY = document!.body.style.top;
+    const scrollX = document!.body.style.left;
+
+    clearDisableScrollStyle(document!.body);
+    window!.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+  },
 });
 
 export const elementScrollController = (
   elRef: React.RefObject<HTMLElement>
-) => ({
+): ScrollContextInterface => ({
   getScroll: () => ({
     x: elRef.current?.scrollLeft ?? 0,
     y: elRef.current?.scrollTop ?? 0,
@@ -41,4 +87,46 @@ export const elementScrollController = (
       y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0
     );
   },
+  enableScrollLock: () => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+    const scrollY = el.scrollTop;
+    const scrollX = el.scrollLeft;
+    const overflowY = el.scrollWidth > el.clientWidth ? "scroll" : "";
+    const overflowX = el.scrollHeight > el.clientHeight ? "scroll" : "";
+
+    Object.assign(el.style, {
+      position: "absolute",
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: "0",
+      overflowY,
+      overflowX,
+    });
+  },
+  disableScrollLock: () => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+
+    const scrollY = el.style.top;
+    const scrollX = el.style.left;
+
+    clearDisableScrollStyle(el);
+    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+  },
 });
+
+export const useScrollLock = (enabled = true) => {
+  const { enableScrollLock, disableScrollLock } = useScroll();
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) {
+      enableScrollLock();
+      return disableScrollLock;
+    }
+    return noop;
+  }, [enableScrollLock, disableScrollLock, enabled]);
+};

package/src/components/Avatar/Avatar.tsx

@@ -96,6 +96,7 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Avatar", platform),
         `Avatar--type-${mode}`,
@@ -135,6 +136,7 @@ const Avatar: React.FC<AvatarProps> = ({
       {overlayIcon && (
         <Tappable
           Component="button"
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Avatar__overlay", {
             "Avatar__overlay--visible": overlayAction === "always",
             "Avatar__overlay--light": overlayMode === "light",
@@ -150,6 +152,7 @@ const Avatar: React.FC<AvatarProps> = ({
       )}
       {badge && (
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Avatar__badge", {
             "Avatar__badge--large": size >= 96,
             "Avatar__badge--shadow":

package/src/components/Banner/Banner.tsx

@@ -14,9 +14,9 @@ import {
 import Tappable from "../Tappable/Tappable";
 import IconButton from "../IconButton/IconButton";
 import Headline from "../Typography/Headline/Headline";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import "./Banner.css";
 
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -127,6 +127,7 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
   return (
     <section
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Banner", platform),
         `Banner--md-${mode}`,

package/src/components/Button/Button.css

@@ -516,11 +516,11 @@
  *
  * FIXME Следует поправить компонент на уровне уровне дизайн-системы
  *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
- *  1. Есть привзяка к компоненту `.Button--lvl-tertiary`. Главная проблема, т.к. отступы в `ButtonGroup.css` не зависят от типа кнопки.
+ *  1. Есть привязка к компоненту `.Button--lvl-tertiary`. Главная проблема, т.к. отступы в `ButtonGroup.css` не зависят от типа кнопки.
  *  2. `margin-top` следует выставить обёртке `.Banner__actions`. Нужно иметь ввиду, что значение отступа меняются в зависимости от типа кнопки (см. п. 1)
- *  2. `margin-right` добавляет лишний оступ,
+ *  2. `margin-right` добавляет лишний отступ,
  *  3. `6px` конфликтуют со значениями в `gap`,
- *  4. У обёртки `.Banner__actions` выставлен отрицительный внешний снизу в 6px.
+ *  4. У обёртки `.Banner__actions` выставлен отрицательный внешний снизу в 6px.
  */
 .Banner__actions > .Button {
   margin-top: 12px;
@@ -560,19 +560,21 @@
  * FIXME Следует поправить компонент на уровне уровне дизайн-системы
  *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
  *  1. `flex: 1` конфликтует с `stretched={false}`.
- *  2. `margin-right` добавляет лишний оступ,
+ *  2. `margin-right` добавляет лишний отступ,
  *  3. `6px` конфликтуют со значениями в `gap`,
- *  4. У обёртки `.ModalCardBase__actions` выставлены отрицительные внешние отступы слева/справа в 6px.
+ *  4. У обёртки `.ModalCardBase__actions` выставлены отрицательные внешние отступы слева/справа в 6px.
  */
 .ModalCardBase__actions .Button {
   flex: 1;
   margin-left: 6px;
   margin-right: 6px;
+  width: 0;
 }
 
 .ModalCardBase__actions--v .Button {
   margin-left: 0;
   margin-right: 0;
+  width: 100%;
 }
 
 .ModalCardBase__actions--v .Button + .Button {
@@ -585,9 +587,9 @@
  *
  * ====================
  *
- * @depracated Пользователям следует использовать `ButtonGroup` (см. пример `RichCell/Readme.md`).
+ * @deprecated Пользователям следует использовать `ButtonGroup` (см. пример `RichCell/Readme.md`).
  *
- * TODO Сейчас стиль сохранён для обртаной совместимости. Удалить в следующей мажорной версии.
+ * TODO Сейчас стиль сохранён для обратной совместимости. Удалить в 5.0.0.
  */
 .RichCell__actions > .Button + .Button {
   margin-left: 8px;

package/src/components/Button/Button.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { Caption } from "../Typography/Caption/Caption";
 import { HasAlign, HasComponent } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -141,25 +141,26 @@ function resolveButtonAppearance(
   };
 }
 
-const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
+const ButtonComponent: React.FC<ButtonProps> = ({
+  size = "s",
+  mode = "primary",
+  appearance,
+  stretched = false,
+  align = "center",
+  children,
+  before,
+  after,
+  getRootRef,
+  sizeY,
+  Component = "button",
+  loading,
+  onClick,
+  stopPropagation = true,
+  ...restProps
+}) => {
   const platform = usePlatform();
-  const {
-    size,
-    mode,
-    appearance,
-    stretched,
-    align,
-    children,
-    before,
-    after,
-    getRootRef,
-    sizeY,
-    Component = "button",
-    loading,
-    onClick,
-    ...restProps
-  } = props;
   const hasIcons = Boolean(before || after);
+  const hasIconOnly = !children && Boolean(after) !== Boolean(before);
   const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(
     appearance,
     mode
@@ -172,6 +173,7 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
       Component={restProps.href ? "a" : Component}
       onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
+      stopPropagation={stopPropagation}
       vkuiClass={classNames(
         "Button",
         `Button--sz-${size}`,
@@ -179,13 +181,9 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
         `Button--clr-${resolvedAppearance}`,
         `Button--aln-${align}`,
         `Button--sizeY-${sizeY}`,
-        {
-          ["Button--stretched"]: stretched,
-          ["Button--with-icon"]: hasIcons,
-          ["Button--singleIcon"]: Boolean(
-            (!children && !after && before) || (!children && after && !before)
-          ),
-        }
+        stretched && "Button--stretched",
+        hasIcons && "Button--with-icon",
+        hasIconOnly && "Button--singleIcon"
       )}
       getRootRef={getRootRef}
       hoverMode={hasNewTokens ? "Button--hover" : "background"}
@@ -211,15 +209,6 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
   );
 };
 
-Button.defaultProps = {
-  mode: "primary",
-  align: "center",
-  size: "s",
-  stretched: false,
-  stopPropagation: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Button, {
+export const Button = withAdaptivity(ButtonComponent, {
   sizeY: true,
 });

package/src/components/Calendar/Calendar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { isSameMonth, isSameDay } from "date-fns";
+import { isSameMonth, isSameDay } from "../../lib/date";
 import {
   CalendarHeader,
   CalendarHeaderProps,
@@ -28,6 +28,8 @@ export interface CalendarProps
       | "nextMonthAriaLabel"
       | "changeMonthAriaLabel"
       | "changeYearAriaLabel"
+      | "onNextMonth"
+      | "onPrevMonth"
     >,
     HasRootRef<HTMLDivElement> {
   value?: Date;
@@ -43,6 +45,15 @@ export interface CalendarProps
   onChange?(value?: Date): void;
   shouldDisableDate?(value: Date): boolean;
   onClose?(): void;
+  /**
+   * Дата отображаемого месяца.
+   * При использовании обновление даты должно происходить вне компонента.
+   */
+  viewDate?: Date;
+  /**
+   * Изменение даты в шапке календаря.
+   */
+  onHeaderChange?(value: Date): void;
 }
 
 const warn = warnOnce("Calendar");
@@ -68,6 +79,10 @@ export const Calendar: React.FC<CalendarProps> = ({
   showNeighboringMonth,
   changeDayAriaLabel = "Изменить день",
   size = "m",
+  viewDate: externalViewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
   ...props
 }) => {
   const {
@@ -80,7 +95,15 @@ export const Calendar: React.FC<CalendarProps> = ({
     isDayFocused,
     isDayDisabled,
     resetSelectedDay,
-  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
+  } = useCalendar({
+    value,
+    disableFuture,
+    disablePast,
+    shouldDisableDate,
+    onHeaderChange,
+    onNextMonth,
+    onPrevMonth,
+  });
 
   useIsomorphicLayoutEffect(() => {
     if (value) {
@@ -94,12 +117,13 @@ export const Calendar: React.FC<CalendarProps> = ({
     size === "s"
   ) {
     warn(
-      "Нельзя включить селекты выбора месяца/года если размер календаря 's'"
+      "Нельзя включить селекты выбора месяца/года, если размер календаря 's'",
+      "error"
     );
   }
 
   if (process.env.NODE_ENV === "development" && enableTime && size === "s") {
-    warn("Нельзя включить выбор времени если размер календаря 's'");
+    warn("Нельзя включить выбор времени, если размер календаря 's'", "error");
   }
 
   const handleKeyDown = React.useCallback(
@@ -139,7 +163,7 @@ export const Calendar: React.FC<CalendarProps> = ({
       vkuiClass={classNames("Calendar", `Calendar--size-${size}`)}
     >
       <CalendarHeader
-        viewDate={viewDate}
+        viewDate={externalViewDate || viewDate}
         onChange={setViewDate}
         onNextMonth={setNextMonth}
         onPrevMonth={setPrevMonth}
@@ -151,7 +175,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         changeYearAriaLabel={changeYearAriaLabel}
       />
       <CalendarDays
-        viewDate={viewDate}
+        viewDate={externalViewDate || viewDate}
         value={value}
         weekStartsOn={weekStartsOn}
         isDayFocused={isDayFocused}

package/src/components/Calendar/Readme.md

@@ -1,7 +1,7 @@
 Компонент выбора даты.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-import { format } from "date-fns";
+import { format } from "../../lib/date";
 
 const Example = () => {
   const [value, setValue] = useState(new Date());
@@ -17,7 +17,7 @@ const Example = () => {
     <FormLayout>
       <FormLayoutGroup mode="vertical">
         <FormItem top="Выбранная дата">
-          {format(value, "yyyy-MM-dd HH:mm:ss")}
+          {format(value, "YYYY-MM-DD HH:mm:ss")}
         </FormItem>
         <FormItem top="Выбор времени">
           <Checkbox

package/src/components/CalendarDay/CalendarDay.tsx

@@ -66,6 +66,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
 
     return (
       <Tappable
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("CalendarDay", `CalendarDay--size-${size}`, {
           "CalendarDay--today": today,
           "CalendarDay--selected": selected && !disabled,
@@ -92,6 +93,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
         onLeave={handleLeave}
       >
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("CalendarDay__hinted", {
             "CalendarDay__hinted--active": hinted,
             "CalendarDay__hinted--selection-start": hintedSelectionStart,
@@ -99,6 +101,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
           })}
         >
           <div
+            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames("CalendarDay__inner", {
               "CalendarDay__inner--active": active && !disabled,
             })}

package/src/components/CalendarDays/CalendarDays.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { isSameDay, isSameMonth } from "date-fns";
+import { isSameDay, isSameMonth } from "../../lib/date";
 import { CalendarDay } from "../CalendarDay/CalendarDay";
 import { getDaysNames, getWeeks } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { setMonth, setYear, subMonths, addMonths } from "date-fns";
+import { setMonth, setYear, subMonths, addMonths } from "../../lib/date";
 import {
   Icon20ChevronLeftOutline,
   Icon20ChevronRightOutline,
@@ -7,15 +7,16 @@ import {
 } from "@vkontakte/icons";
 import Tappable from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
-import CustomSelect, {
+import {
+  CustomSelect,
   CustomSelectProps,
   SelectType,
 } from "../CustomSelect/CustomSelect";
-import CustomSelectOption from "../CustomSelectOption/CustomSelectOption";
+import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption";
 import { SizeType } from "../../hoc/withAdaptivity";
 import { getMonths, getYears } from "../../lib/calendar";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
-import Text from "../Typography/Text/Text";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
 import "./CalendarHeader.css";
 
 export interface CalendarHeaderProps
@@ -29,7 +30,13 @@ export interface CalendarHeaderProps
   changeMonthAriaLabel?: string;
   changeYearAriaLabel?: string;
   onChange(viewDate: Date): void;
+  /**
+   * Нажатие на кнопку переключения на следующий месяц.
+   */
   onNextMonth?(): void;
+  /**
+   * Нажатие на кнопку переключения на предыдущий месяц.
+   */
   onPrevMonth?(): void;
 }
 
@@ -101,22 +108,22 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
       <div vkuiClass="CalendarHeader__pickers">
         {disablePickers ? (
           <React.Fragment>
-            <Text
-              weight="medium"
+            <Paragraph
+              weight="2"
               vkuiClass="CalendarHeader__pickers-placeholder"
             >
               {new Intl.DateTimeFormat(locale, {
                 month: "long",
               }).format(viewDate)}
-            </Text>
-            <Text
-              weight="medium"
+            </Paragraph>
+            <Paragraph
+              weight="2"
               vkuiClass="CalendarHeader__pickers-placeholder"
             >
               {new Intl.DateTimeFormat(locale, {
                 year: "numeric",
               }).format(viewDate)}
-            </Text>
+            </Paragraph>
           </React.Fragment>
         ) : (
           <React.Fragment>