@vkontakte/vkui 7.2.1 → 7.3.1

package/src/components/CalendarDay/CalendarDay.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CalendarDay.module.css"],"names":["content","host","hidden","sizeS","disabled","notSameMonth","selected","selectionStart","hintedSelectionStart","selectionEnd","hintedSelectionEnd","dayNumber","today","rtl","innerActive","inner","hinted","hintedActive","hostHovered","hostActivated"],"mappings":"AAAA;AAAA,E,aAAAA,S,WAAA;AAAA,E,aAQAC,M,WARA;AAAA,E,aASAC,Q,WATA;AAAA,E,aAeAA,Q,WAfA;AAAA,E,aAgBAF,S,WAhBA;AAAA,E,aAoBAG,O,WApBA;AAAA,E,aAwBAC,U,WAxBA;AAAA,E,aAyBAC,c,WAzBA;AAAA,E,aA6BAC,U,WA7BA;AAAA,E,aAiCAC,gB,WAjCA;AAAA,E,aAiCeD,U,WAjCf;AAAA,E,aAkCAE,sB,WAlCA;AAAA,E,aAuCAC,c,WAvCA;AAAA,E,aAuCaH,U,WAvCb;AAAA,E,aAwCAI,oB,WAxCA;AAAA,E,aA6CAC,W,WA7CA;AAAA,E,aAiDAC,O,WAjDA;AAAA,E,aAqDAA,O,WArDA;AAAA,E,aAqDOD,W,WArDP;AAAA,E,aA+DAE,K,WA/DA;AAAA,E,aA+DKD,O,WA/DL;AAAA,E,aA+DYD,W,WA/DZ;AAAA,E,aAmEAC,O,WAnEA;AAAA,E,aAmEOE,a,WAnEP;AAAA,E,aAmEoBH,W,WAnEpB;AAAA,E,aAuEAI,O,WAvEA;AAAA,E,aAwEAC,Q,WAxEA;AAAA,E,aAgFAD,O,WAhFA;AAAA,E,aAoFAE,c,WApFA;AAAA,E,aAqFAC,a,WArFA;AAAA,E,aAqFkBD,c,WArFlB;AAAA,E,aAqFiCF,O,WArFjC;AAAA,E,aAyFAI,e,WAzFA;AAAA,E,aAyFoBF,c,WAzFpB;AAAA,E,aAyFmCF,O,WAzFnC;AAAA,E,aA6FAD,a,WA7FA;AAAA,E,aAkGAI,a,WAlGA;AAAA,E,aAkGaH,O,WAlGb;AAAA,E,aAkGmBD,a,WAlGnB;AAAA,E,aAsGAK,e,WAtGA;AAAA,E,aAsGeJ,O,WAtGf;AAAA,E,aAsGqBD,a,WAtGrB;AAAA;AAAA","file":"CalendarDay.module.css.d.ts","sourceRoot":""}

package/src/components/CalendarDay/CalendarDay.tsx

@@ -2,7 +2,10 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
+import { mergeCalls } from '../../lib/mergeCalls';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { Tappable } from '../Tappable/Tappable';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -10,39 +13,97 @@ import styles from './CalendarDay.module.css';
 
 export type CalendarDayElementProps = Omit<
   React.AllHTMLAttributes<HTMLElement>,
-  'onChange' | 'size' | 'disabled' | 'selected'
+  'onChange' | 'size' | 'disabled' | 'selected' | 'onFocus'
 >;
 
 export type CalendarDayTestsProps = {
   /**
-   * Передает атрибут `data-testid` для дня в календаре
+   * Передает атрибут `data-testid` для дня в календаре.
    */
   testId?: string | ((day: Date) => string);
 };
 
 export interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {
+  /**
+   * Дата, которую представляет этот день.
+   */
   day: Date;
+  /**
+   * Является ли день сегодняшним.
+   */
   today?: boolean;
+  /**
+   * Выбран ли день (в режиме одиночного выбора или как часть диапазона).
+   */
   selected?: boolean;
+  /**
+   * Является ли день началом выделенного диапазона.
+   */
   selectionStart?: boolean;
+  /**
+   * Является ли день концом выделенного диапазона.
+   */
   selectionEnd?: boolean;
+  /**
+   * Подсветить день как начало предполагаемого диапазона (при наведении).
+   */
   hintedSelectionStart?: boolean;
+  /**
+   * Подсветить день как конец предполагаемого диапазона (при наведении).
+   */
   hintedSelectionEnd?: boolean;
+  /**
+   * Активен ли день (текущая дата в календаре).
+   */
   active?: boolean;
+  /**
+   * Скрыть день (например, дни соседних месяцев).
+   */
   hidden?: boolean;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
   disabled?: boolean;
+  /**
+   * Находится ли день в фокусе (клавиатурная навигация).
+   */
   focused?: boolean;
+  /**
+   * Подсвечен ли день (ховер).
+   */
   hinted?: boolean;
+  /**
+   * Принадлежит ли день текущему отображаемому месяцу.
+   */
   sameMonth?: boolean;
+  /**
+   * Размер компонента.
+   */
   size?: 's' | 'm';
+  /**
+   * Обработчик выбора/изменения дня.
+   */
   onChange: (value: Date) => void;
+  /**
+   * Обработчик наведения на день.
+   */
   onEnter?: (value: Date) => void;
+  /**
+   * Обработчик снятия ховера с дня.
+   */
   onLeave?: (value: Date) => void;
-  // Функция отрисовки контента в ячейке дня
+  /**
+   * Обработчик фокуса на дне.
+   */
+  onFocus?: (value: Date) => void;
+  /**
+   * Кастомизация отображения содержимого дня.
+   */
   renderDayContent?: (day: Date) => React.ReactNode;
 }
 
-export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
+// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
+export const CalendarDay = React.memo(
   ({
     day,
     today,
@@ -56,6 +117,8 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
     focused,
     onEnter,
     onLeave,
+    onFocus,
+    onBlur,
     hinted,
     hintedSelectionStart,
     hintedSelectionEnd,
@@ -64,6 +127,8 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
     children,
     renderDayContent,
     testId,
+    role,
+    'aria-colindex': colIndex,
     ...restProps
   }: CalendarDayProps) => {
     const { locale, direction } = useConfigProvider();
@@ -71,17 +136,24 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
     const onClick = React.useCallback(() => onChange(day), [day, onChange]);
     const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);
     const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);
+    const handleFocus = React.useCallback(() => onFocus?.(day), [day, onFocus]);
+
+    const focusVisibleMode = active ? 'outside' : 'inside';
+    const { focusVisible, ...focusEvents } = useFocusVisible();
+    const focusVisibleClassNames = useFocusVisibleClassName({
+      focusVisible,
+      mode: focusVisibleMode,
+    });
+    const focusHandlers = mergeCalls(focusEvents, { onFocus: handleFocus, onBlur });
 
     const label = new Intl.DateTimeFormat(locale, {
       weekday: 'long',
-      year: 'numeric',
       month: 'long',
       day: 'numeric',
     }).format(day);
 
     React.useEffect(() => {
       if (focused && ref.current) {
-        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));
         ref.current.focus();
       }
     }, [focused]);
@@ -99,7 +171,13 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
     }, [renderDayContent, day, children, label]);
 
     if (hidden) {
-      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;
+      return (
+        <div
+          role={role}
+          aria-colindex={colIndex}
+          className={classNames(styles.hidden, size === 's' && styles.sizeS)}
+        />
+      );
     }
 
     return (
@@ -108,19 +186,21 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
           styles.host,
           size === 's' && styles.sizeS,
           direction === 'rtl' && styles.rtl,
+          focusVisibleClassNames,
         )}
+        role={role}
+        aria-colindex={colIndex}
         hoverMode={styles.hostHovered}
         activeMode={styles.hostActivated}
         hasActive={false}
         onClick={onClick}
         disabled={disabled}
-        tabIndex={-1}
         getRootRef={ref}
-        focusVisibleMode={active ? 'outside' : 'inside'}
         onPointerEnter={handleEnter}
         onPointerLeave={handleLeave}
         data-testid={typeof testId === 'string' ? testId : testId?.(day)}
         {...restProps}
+        {...focusHandlers}
       >
         <div
           className={classNames(
@@ -152,4 +232,6 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
   },
 );
 
-CalendarDay.displayName = 'CalendarDay';
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(CalendarDay, 'CalendarDay');
+}

package/src/components/CalendarDays/CalendarDays.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CalendarDays.module.css"],"names":["host","row","rowSizeS","rowDay","weekday"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAOAC,K,WAPA;AAAA,E,aAaAA,K,WAbA;AAAA,E,aAaqBC,U,WAbrB;AAAA,E,aAiBAD,K,WAjBA;AAAA,E,aAiB0BC,U,WAjB1B;AAAA,E,aAiBqCC,Q,WAjBrC;AAAA,E,aAqBAF,K,WArBA;AAAA,E,aAqB4BC,U,WArB5B;AAAA,E,aAqBuCC,Q,WArBvC;AAAA,E,aAyBAC,S,WAzBA;AAAA;AAAA","file":"CalendarDays.module.css.d.ts","sourceRoot":""}

package/src/components/CalendarDays/CalendarDays.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { isSameDay, isSameMonth } from 'date-fns';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useTodayDate } from '../../hooks/useTodayDate';
 import { getDaysNames, getWeeks } from '../../lib/calendar';
 import type { HTMLAttributesWithRootRef } from '../../types';
@@ -16,11 +15,12 @@ import {
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CalendarDays.module.css';
 
 export type CalendarDaysTestsProps = {
   /**
-   * Передает атрибут `data-testid` для дня в календаре
+   * Передает атрибут `data-testid` для дня в календаре.
    */
   dayTestId?: CalendarDayTestsProps['testId'];
 };
@@ -29,25 +29,90 @@ export interface CalendarDaysProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
     Pick<CalendarDayProps, 'renderDayContent'>,
     CalendarDaysTestsProps {
+  /**
+   * Выбранная дата или диапазон дат.
+   */
   value?: Date | Array<Date | null> | null;
+  /**
+   * Дата, определяющая отображаемый месяц.
+   */
   viewDate: Date;
+  /**
+   * День недели, с которого начинается неделя (0 - воскресенье, 6 - суббота).
+   */
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Показывать дни соседних месяцев.
+   */
   showNeighboringMonth?: boolean;
+  /**
+   * Размер календаря.
+   */
   size?: 's' | 'm';
+  /**
+   * Дополнительные свойства для элементов дней.
+   */
   dayProps?: CalendarDayElementProps;
+  /**
+   * Следить за изменениями дней для обновления UI.
+   */
   listenDayChangesForUpdate?: boolean;
+  /**
+   * Обработчик изменения выбранного дня.
+   */
   onDayChange: (value: Date) => void;
+  /**
+   * Проверяет, заблокирован ли день для выбора.
+   */
   isDayDisabled: (value: Date) => boolean;
+  /**
+   * Определяет, является ли день началом выделенного диапазона.
+   */
   isDaySelectionStart: (value: Date, dayOfWeek: number) => boolean;
+  /**
+   * Определяет, является ли день концом выделенного диапазона.
+   */
   isDaySelectionEnd: (value: Date, dayOfWeek: number) => boolean;
+  /**
+   * Определяет начало диапазона при наведении (подсветка).
+   */
   isHintedDaySelectionStart?: (value: Date, dayOfWeek: number) => boolean;
+  /**
+   * Определяет конец диапазона при наведении (подсветка).
+   */
   isHintedDaySelectionEnd?: (value: Date, dayOfWeek: number) => boolean;
+  /**
+   * Проверяет, является ли день активным (текущая дата).
+   */
   isDayActive: (value: Date) => boolean;
+  /**
+   * Проверяет, подсвечен ли день (при наведении).
+   */
   isDayHinted?: (value: Date) => boolean;
+  /**
+   * Проверяет, возможно ли сфокусироваться на дне с клавиатуры.
+   */
+  isDayFocusable?: (value: Date) => boolean;
+  /**
+   * Проверяет, выбран ли день.
+   */
   isDaySelected?: (value: Date) => boolean;
+  /**
+   * Проверяет, находится ли день в фокусе.
+   */
   isDayFocused: (value: Date) => boolean;
+  /**
+   * Обработчик события 'pointerenter' на элементе дня.
+   */
   onDayEnter?: (value: Date) => void;
+  /**
+   * Обработчик события 'pointerleave' на элементе дня.
+   */
   onDayLeave?: (value: Date) => void;
+  /**
+   * Обработчик события `focus` на элементе дня.
+   */
+  onDayFocus?: (value: Date) => void;
 }
 
 export const CalendarDays = ({
@@ -61,10 +126,12 @@ export const CalendarDays = ({
   isDaySelectionStart,
   onDayEnter,
   onDayLeave,
+  onDayFocus,
   isDayHinted,
   isHintedDaySelectionStart,
   isHintedDaySelectionEnd,
   isDayFocused,
+  isDayFocusable,
   isDayDisabled,
   size,
   showNeighboringMonth = false,
@@ -76,7 +143,6 @@ export const CalendarDays = ({
   ...props
 }: CalendarDaysProps): React.ReactNode => {
   const { locale } = useConfigProvider();
-  const ref = useExternRef(getRootRef);
   const now = useTodayDate(listenDayChangesForUpdate);
 
   const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);
@@ -89,55 +155,106 @@ export const CalendarDays = ({
   const handleDayChange = React.useCallback(
     (date: Date) => {
       onDayChange(date);
-
-      ref.current?.focus();
     },
-    [onDayChange, ref],
+    [onDayChange],
   );
 
-  return (
-    <RootComponent {...props} baseClassName={styles.host} getRootRef={ref}>
-      <div className={classNames(styles.row, size === 's' && styles.rowSizeS)}>
-        {daysNames.map((dayName) => (
-          <Footnote key={dayName} className={styles.weekday}>
-            {dayName}
-          </Footnote>
-        ))}
-      </div>
+  const viewDateLabelId = React.useId();
+  const currentMonthLabel = value
+    ? new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'long',
+      }).format(viewDate)
+    : null;
 
-      {weeks.map((week, i) => (
-        <div className={classNames(styles.row, size === 's' && styles.rowSizeS)} key={i}>
-          {week.map((day, i) => {
-            const sameMonth = isSameMonth(day, viewDate);
-            return (
-              <CalendarDay
-                key={day.toISOString()}
-                day={day}
-                today={isSameDay(day, now)}
-                active={isDayActive(day)}
-                onChange={handleDayChange}
-                hidden={!showNeighboringMonth && !sameMonth}
-                disabled={isDayDisabled(day)}
-                selectionStart={isDaySelectionStart(day, i)}
-                selectionEnd={isDaySelectionEnd(day, i)}
-                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}
-                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}
-                selected={isDaySelected?.(day)}
-                focused={isDayFocused(day)}
-                onEnter={onDayEnter}
-                onLeave={onDayLeave}
-                hinted={isDayHinted?.(day)}
-                sameMonth={sameMonth}
-                size={size}
-                renderDayContent={renderDayContent}
-                testId={dayTestId}
-                {...dayProps}
-                className={classNames(dayProps?.className, styles.rowDay)}
-              />
-            );
-          })}
+  return (
+    <React.Fragment>
+      {/*
+       * Нельзя помещать текст currentMonthLabel внутрь role="grid" или с помощью aria-label,
+       * иначе пользователи NVDA не смогут ходить по таблице
+       * с помощью горячих клавиш <Ctrl+Alt+стрелочки>.
+       * Имеется ввиду связка (применение которой визуально не видно):
+       * - из заголовка календаря прыжок в таблицу с помощью клавиши <T>
+       * - переход по ячейкам с помощью <Ctrl+Alrt+стрелочки>
+       * NVDA будет говорить, что пользователь вне ячейки таблицы.
+       * Также важно оставить aria-live="polite". Так NVDA зачитывает текущий
+       * месяц и год при переключении месяца и года в заголовке календаря.
+       */}
+      <VisuallyHidden aria-live="polite" id={viewDateLabelId}>
+        {currentMonthLabel}
+      </VisuallyHidden>
+      <RootComponent
+        role="grid"
+        {...props}
+        baseClassName={styles.host}
+        aria-labelledby={viewDateLabelId}
+      >
+        <div
+          role="row"
+          aria-rowindex={1}
+          className={classNames(styles.row, size === 's' && styles.rowSizeS)}
+        >
+          {daysNames.map(({ short: shortDayName, long: longDayName }) => (
+            <Footnote
+              role="columnheader"
+              aria-label={longDayName}
+              key={shortDayName}
+              className={styles.weekday}
+            >
+              {shortDayName}
+            </Footnote>
+          ))}
         </div>
-      ))}
-    </RootComponent>
+
+        {weeks.map((week, i) => (
+          <div
+            role="row"
+            aria-rowindex={i + 2}
+            className={classNames(styles.row, size === 's' && styles.rowSizeS)}
+            key={i}
+          >
+            {week.map((day, i) => {
+              const sameMonth = isSameMonth(day, viewDate);
+              const isHidden = !showNeighboringMonth && !sameMonth;
+              const isToday = isSameDay(day, now);
+              const isActive = isDayActive(day);
+              const isFocused = isDayFocused(day);
+              return (
+                <CalendarDay
+                  role="gridcell"
+                  aria-current={isToday ? 'date' : undefined}
+                  aria-selected={isActive ? 'true' : 'false'}
+                  aria-colindex={i + 1}
+                  tabIndex={isDayFocusable?.(day) ? 0 : -1}
+                  key={day.toISOString()}
+                  day={day}
+                  today={isToday}
+                  active={isActive}
+                  onChange={handleDayChange}
+                  hidden={isHidden}
+                  disabled={isDayDisabled(day)}
+                  selectionStart={isDaySelectionStart(day, i)}
+                  selectionEnd={isDaySelectionEnd(day, i)}
+                  hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}
+                  hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}
+                  selected={isDaySelected?.(day)}
+                  focused={isFocused}
+                  onEnter={onDayEnter}
+                  onLeave={onDayLeave}
+                  onFocus={onDayFocus}
+                  hinted={isDayHinted?.(day)}
+                  sameMonth={sameMonth}
+                  size={size}
+                  renderDayContent={renderDayContent}
+                  testId={dayTestId}
+                  {...dayProps}
+                  className={classNames(dayProps?.className, styles.rowDay)}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </RootComponent>
+    </React.Fragment>
   );
 };

package/src/components/CalendarHeader/CalendarHeader.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CalendarHeader.module.css"],"names":["host","pickers","picker","navIcon","navIconAccent","navIconNext","navIconPrev","month"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,S,WARA;AAAA,E,aAcAC,Q,WAdA;AAAA,E,aAcUA,Q,WAdV;AAAA,E,aAkBAC,S,WAlBA;AAAA,E,aA0BAC,e,WA1BA;AAAA,E,aA8BAC,a,WA9BA;AAAA,E,aAkCAC,a,WAlCA;AAAA,E,aAsCAC,O,WAtCA;AAAA;AAAA","file":"CalendarHeader.module.css.d.ts","sourceRoot":""}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -24,19 +24,19 @@ type ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'a
 
 export type CalendarHeaderTestsProps = {
   /**
-   * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря
+   * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря.
    */
   monthDropdownTestId?: string | ((monthIndex: number) => string);
   /**
-   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря
+   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.
    */
   yearDropdownTestId?: string | ((year: number) => string);
   /**
-   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря
+   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.
    */
   nextMonthButtonTestId?: string;
   /**
-   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря
+   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.
    */
   prevMonthButtonTestId?: string;
 };
@@ -44,26 +44,65 @@ export type CalendarHeaderTestsProps = {
 export interface CalendarHeaderProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
     CalendarHeaderTestsProps {
+  /**
+   * Отображаемая дата.
+   */
   viewDate: Date;
   /**
-   * Скрывает иконку для переключения на предыдущий месяц
+   * Скрывает иконку для переключения на предыдущий месяц.
    */
   prevMonthHidden?: boolean;
   /**
-   * Скрывает иконку для переключения на следующий месяц
+   * Скрывает иконку для переключения на следующий месяц.
    */
   nextMonthHidden?: boolean;
+  /**
+   * Отключает селекторы выбора месяца/года.
+   */
   disablePickers?: boolean;
+  /**
+   * `aria-label` для кнопки предыдущего месяца.
+   */
   prevMonthLabel?: string;
+  /**
+   * `aria-label` для кнопки следующего месяца.
+   */
   nextMonthLabel?: string;
+  /**
+   * `aria-label` для селектора месяца.
+   */
   changeMonthLabel?: string;
+  /**
+   * `aria-label` для селектора года.
+   */
   changeYearLabel?: string;
+  /**
+   * Кастомная иконка для кнопки предыдущего месяца.
+   */
   prevMonthIcon?: React.ReactNode;
+  /**
+   * Кастомная иконка для кнопки следующего месяца.
+   */
   nextMonthIcon?: React.ReactNode;
+  /**
+   * Дополнительные свойства для кнопки предыдущего месяца.
+   */
   prevMonthProps?: ArrowMonthProps;
+  /**
+   * Дополнительные свойства для кнопки следующего месяца.
+   */
   nextMonthProps?: ArrowMonthProps;
+  /**
+   * Функция для проверки блокировки месяца.
+   */
   isMonthDisabled?: (monthNumber: number, year?: number) => boolean;
+  /**
+   * Функция для проверки блокировки года.
+   */
   isYearDisabled?: (yearNumber: number) => boolean;
+  /**
+   * Обработчик изменения отображаемой даты.
+   */
   onChange: (viewDate: Date) => void;
   /**
    * Нажатие на кнопку переключения на следующий месяц.
@@ -164,6 +203,15 @@ export const CalendarHeader = ({
     );
   }
 
+  const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(
+    (event: React.KeyboardEvent, isOpen: boolean) => {
+      if (isOpen && event.key === 'Escape') {
+        event.stopPropagation();
+      }
+    },
+    [],
+  );
+
   return (
     <RootComponent baseClassName={styles.host} {...restProps}>
       {!prevMonthHidden && (
@@ -215,6 +263,7 @@ export const CalendarHeader = ({
                   ? monthDropdownTestId
                   : monthDropdownTestId?.(currentMonth)
               }
+              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}
             />
             <CustomSelect
               className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}
@@ -228,6 +277,7 @@ export const CalendarHeader = ({
               selectType="accent"
               aria-label={changeYearLabel}
               data-testid={yearDropdownTestId}
+              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}
             />
           </div>
         </AdaptivityProvider>

package/src/components/CalendarRange/CalendarRange.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CalendarRange.module.css"],"names":["host","inner","header"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,O,WAbA;AAAA,E,aAmBAA,O,WAnBA;AAAA,E,aAuBAC,Q,WAvBA;AAAA;AAAA","file":"CalendarRange.module.css.d.ts","sourceRoot":""}