@vkontakte/vkui 7.2.1 → 7.3.1

package/dist/components/CalendarDays/CalendarDays.js

@@ -6,15 +6,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { isSameDay, isSameMonth } from "date-fns";
-import { useExternRef } from "../../hooks/useExternRef.js";
 import { useTodayDate } from "../../hooks/useTodayDate.js";
 import { getDaysNames, getWeeks } from "../../lib/calendar.js";
 import { CalendarDay } from "../CalendarDay/CalendarDay.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 export const CalendarDays = (_param)=>{
-    var { viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth = false, dayProps, listenDayChangesForUpdate = false, getRootRef, renderDayContent, dayTestId } = _param, props = _object_without_properties(_param, [
+    var { viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, onDayFocus, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayFocusable, isDayDisabled, size, showNeighboringMonth = false, dayProps, listenDayChangesForUpdate = false, getRootRef, renderDayContent, dayTestId } = _param, props = _object_without_properties(_param, [
         "viewDate",
         "value",
         "weekStartsOn",
@@ -25,10 +25,12 @@ export const CalendarDays = (_param)=>{
         "isDaySelectionStart",
         "onDayEnter",
         "onDayLeave",
+        "onDayFocus",
         "isDayHinted",
         "isHintedDaySelectionStart",
         "isHintedDaySelectionEnd",
         "isDayFocused",
+        "isDayFocusable",
         "isDayDisabled",
         "size",
         "showNeighboringMonth",
@@ -39,7 +41,6 @@ export const CalendarDays = (_param)=>{
         "dayTestId"
     ]);
     const { locale } = useConfigProvider();
-    const ref = useExternRef(getRootRef);
     const now = useTodayDate(listenDayChangesForUpdate);
     const weeks = React.useMemo(()=>getWeeks(viewDate, weekStartsOn), [
         weekStartsOn,
@@ -51,55 +52,84 @@ export const CalendarDays = (_param)=>{
         weekStartsOn
     ]);
     const handleDayChange = React.useCallback((date)=>{
-        var _ref_current;
         onDayChange(date);
-        (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
     }, [
-        onDayChange,
-        ref
+        onDayChange
     ]);
-    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, props), {
-        baseClassName: "vkuiCalendarDays__host",
-        getRootRef: ref,
+    const viewDateLabelId = React.useId();
+    const currentMonthLabel = value ? new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'long'
+    }).format(viewDate) : null;
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: classNames("vkuiCalendarDays__row", size === 's' && "vkuiCalendarDays__rowSizeS"),
-                children: daysNames.map((dayName)=>/*#__PURE__*/ _jsx(Footnote, {
-                        className: "vkuiCalendarDays__weekday",
-                        children: dayName
-                    }, dayName))
+            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                "aria-live": "polite",
+                id: viewDateLabelId,
+                children: currentMonthLabel
             }),
-            weeks.map((week, i)=>/*#__PURE__*/ _jsx("div", {
-                    className: classNames("vkuiCalendarDays__row", size === 's' && "vkuiCalendarDays__rowSizeS"),
-                    children: week.map((day, i)=>{
-                        const sameMonth = isSameMonth(day, viewDate);
-                        return /*#__PURE__*/ _jsx(CalendarDay, _object_spread_props(_object_spread({
-                            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 === null || isHintedDaySelectionStart === void 0 ? void 0 : isHintedDaySelectionStart(day, i),
-                            hintedSelectionEnd: isHintedDaySelectionEnd === null || isHintedDaySelectionEnd === void 0 ? void 0 : isHintedDaySelectionEnd(day, i),
-                            selected: isDaySelected === null || isDaySelected === void 0 ? void 0 : isDaySelected(day),
-                            focused: isDayFocused(day),
-                            onEnter: onDayEnter,
-                            onLeave: onDayLeave,
-                            hinted: isDayHinted === null || isDayHinted === void 0 ? void 0 : isDayHinted(day),
-                            sameMonth: sameMonth,
-                            size: size,
-                            renderDayContent: renderDayContent,
-                            testId: dayTestId
-                        }, dayProps), {
-                            className: classNames(dayProps === null || dayProps === void 0 ? void 0 : dayProps.className, "vkuiCalendarDays__rowDay")
-                        }), day.toISOString());
-                    })
-                }, i))
+            /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+                role: "grid"
+            }, props), {
+                baseClassName: "vkuiCalendarDays__host",
+                "aria-labelledby": viewDateLabelId,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        role: "row",
+                        "aria-rowindex": 1,
+                        className: classNames("vkuiCalendarDays__row", size === 's' && "vkuiCalendarDays__rowSizeS"),
+                        children: daysNames.map(({ short: shortDayName, long: longDayName })=>/*#__PURE__*/ _jsx(Footnote, {
+                                role: "columnheader",
+                                "aria-label": longDayName,
+                                className: "vkuiCalendarDays__weekday",
+                                children: shortDayName
+                            }, shortDayName))
+                    }),
+                    weeks.map((week, i)=>/*#__PURE__*/ _jsx("div", {
+                            role: "row",
+                            "aria-rowindex": i + 2,
+                            className: classNames("vkuiCalendarDays__row", size === 's' && "vkuiCalendarDays__rowSizeS"),
+                            children: 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 /*#__PURE__*/ _jsx(CalendarDay, _object_spread_props(_object_spread({
+                                    role: "gridcell",
+                                    "aria-current": isToday ? 'date' : undefined,
+                                    "aria-selected": isActive ? 'true' : 'false',
+                                    "aria-colindex": i + 1,
+                                    tabIndex: (isDayFocusable === null || isDayFocusable === void 0 ? void 0 : isDayFocusable(day)) ? 0 : -1,
+                                    day: day,
+                                    today: isToday,
+                                    active: isActive,
+                                    onChange: handleDayChange,
+                                    hidden: isHidden,
+                                    disabled: isDayDisabled(day),
+                                    selectionStart: isDaySelectionStart(day, i),
+                                    selectionEnd: isDaySelectionEnd(day, i),
+                                    hintedSelectionStart: isHintedDaySelectionStart === null || isHintedDaySelectionStart === void 0 ? void 0 : isHintedDaySelectionStart(day, i),
+                                    hintedSelectionEnd: isHintedDaySelectionEnd === null || isHintedDaySelectionEnd === void 0 ? void 0 : isHintedDaySelectionEnd(day, i),
+                                    selected: isDaySelected === null || isDaySelected === void 0 ? void 0 : isDaySelected(day),
+                                    focused: isFocused,
+                                    onEnter: onDayEnter,
+                                    onLeave: onDayLeave,
+                                    onFocus: onDayFocus,
+                                    hinted: isDayHinted === null || isDayHinted === void 0 ? void 0 : isDayHinted(day),
+                                    sameMonth: sameMonth,
+                                    size: size,
+                                    renderDayContent: renderDayContent,
+                                    testId: dayTestId
+                                }, dayProps), {
+                                    className: classNames(dayProps === null || dayProps === void 0 ? void 0 : dayProps.className, "vkuiCalendarDays__rowDay")
+                                }), day.toISOString());
+                            })
+                        }, i))
+                ]
+            }))
         ]
-    }));
+    });
 };
 
 //# sourceMappingURL=CalendarDays.js.map

package/dist/components/CalendarDays/CalendarDays.js.map

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

package/dist/components/CalendarHeader/CalendarHeader.d.ts

@@ -3,43 +3,82 @@ import type { HTMLAttributesWithRootRef } from '../../types';
 type ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;
 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;
 };
 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;
     /**
      * Нажатие на кнопку переключения на следующий месяц.

package/dist/components/CalendarHeader/CalendarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;AAE5F,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,wBAAwB;IAC1B,QAAQ,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACjD,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,GAAI,qZA2B5B,mBAAmB,KAAG,KAAK,CAAC,SAmJ9B,CAAC"}
+{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;AAE5F,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,wBAAwB;IAC1B;;OAEG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAClE;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACjD;;OAEG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,GAAI,qZA2B5B,mBAAmB,KAAG,KAAK,CAAC,SA8J9B,CAAC"}

package/dist/components/CalendarHeader/CalendarHeader.js

@@ -93,6 +93,11 @@ export const CalendarHeader = (_param)=>{
     if (isMonthDisabled && !prevMonthHidden) {
         prevMonthHidden = isMonthDisabled(currentMonth === 0 ? 11 : currentMonth - 1, currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear);
     }
+    const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback((event, isOpen)=>{
+        if (isOpen && event.key === 'Escape') {
+            event.stopPropagation();
+        }
+    }, []);
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
         baseClassName: "vkuiCalendarHeader__host"
     }, restProps), {
@@ -147,7 +152,8 @@ export const CalendarHeader = (_param)=>{
                             forceDropdownPortal: false,
                             selectType: "accent",
                             "aria-label": changeMonthLabel,
-                            "data-testid": typeof monthDropdownTestId === 'string' ? monthDropdownTestId : monthDropdownTestId === null || monthDropdownTestId === void 0 ? void 0 : monthDropdownTestId(currentMonth)
+                            "data-testid": typeof monthDropdownTestId === 'string' ? monthDropdownTestId : monthDropdownTestId === null || monthDropdownTestId === void 0 ? void 0 : monthDropdownTestId(currentMonth),
+                            onInputKeyDown: stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen
                         }),
                         /*#__PURE__*/ _jsx(CustomSelect, {
                             className: classNames("vkuiCalendarHeader__picker", 'vkuiInternalCalendarHeader__picker'),
@@ -160,7 +166,8 @@ export const CalendarHeader = (_param)=>{
                             forceDropdownPortal: false,
                             selectType: "accent",
                             "aria-label": changeYearLabel,
-                            "data-testid": yearDropdownTestId
+                            "data-testid": yearDropdownTestId,
+                            onInputKeyDown: stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen
                         })
                     ]
                 })

package/dist/components/CalendarHeader/CalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { addMonths, setMonth, setYear, subMonths } from 'date-fns';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря\n   */\n  monthDropdownTestId?: string | ((monthIndex: number) => string);\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря\n   */\n  yearDropdownTestId?: string | ((year: number) => string);\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря\n   */\n  nextMonthButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря\n   */\n  prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц\n   */\n  prevMonthHidden?: boolean;\n  /**\n   * Скрывает иконку для переключения на следующий месяц\n   */\n  nextMonthHidden?: boolean;\n  disablePickers?: boolean;\n  prevMonthLabel?: string;\n  nextMonthLabel?: string;\n  changeMonthLabel?: string;\n  changeYearLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n  isYearDisabled?: (yearNumber: number) => boolean;\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: () => void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonthHidden: prevMonthHiddenProp = false,\n  nextMonthHidden: nextMonthHiddenProp = false,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  isMonthDisabled,\n  isYearDisabled,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n  const { locale, direction } = useConfigProvider();\n\n  const onMonthsChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setMonth(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setYear(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n\n  const currentYear = viewDate.getFullYear();\n  const currentMonth = viewDate.getMonth();\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles.month}>{label}</span>,\n        disabled: isMonthDisabled && isMonthDisabled(value),\n      })),\n    [locale, isMonthDisabled],\n  );\n\n  const years = React.useMemo(\n    () =>\n      getYears(currentYear, 100).map((year) => ({\n        ...year,\n        disabled: isYearDisabled && isYearDisabled(year.value),\n      })),\n    [currentYear, isYearDisabled],\n  );\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n            onClick={onPrevMonth}\n            data-testid={prevMonthButtonTestId}\n            {...restPrevMonthProps}\n          >\n            <VisuallyHidden>\n              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n          weight=\"2\"\n        >\n          <span className={styles.month}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY=\"compact\">\n          <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentMonth}\n              options={months}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthLabel}\n              data-testid={\n                typeof monthDropdownTestId === 'string'\n                  ? monthDropdownTestId\n                  : monthDropdownTestId?.(currentMonth)\n              }\n            />\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentYear}\n              options={years}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearLabel}\n              data-testid={yearDropdownTestId}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n            onClick={onNextMonth}\n            data-testid={nextMonthButtonTestId}\n            {...restNextMonthProps}\n          >\n            <VisuallyHidden>\n              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","addMonths","setMonth","setYear","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","direction","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","disabled","years","year","formatter","Intl","DateTimeFormat","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","baseClassName","sizeX","onClick","data-testid","format","weight","sizeY","div","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { addMonths, setMonth, setYear, subMonths } from 'date-fns';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря.\n   */\n  monthDropdownTestId?: string | ((monthIndex: number) => string);\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.\n   */\n  yearDropdownTestId?: string | ((year: number) => string);\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.\n   */\n  nextMonthButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.\n   */\n  prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  /**\n   * Отображаемая дата.\n   */\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц.\n   */\n  prevMonthHidden?: boolean;\n  /**\n   * Скрывает иконку для переключения на следующий месяц.\n   */\n  nextMonthHidden?: boolean;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean;\n  /**\n   * `aria-label` для кнопки предыдущего месяца.\n   */\n  prevMonthLabel?: string;\n  /**\n   * `aria-label` для кнопки следующего месяца.\n   */\n  nextMonthLabel?: string;\n  /**\n   * `aria-label` для селектора месяца.\n   */\n  changeMonthLabel?: string;\n  /**\n   * `aria-label` для селектора года.\n   */\n  changeYearLabel?: string;\n  /**\n   * Кастомная иконка для кнопки предыдущего месяца.\n   */\n  prevMonthIcon?: React.ReactNode;\n  /**\n   * Кастомная иконка для кнопки следующего месяца.\n   */\n  nextMonthIcon?: React.ReactNode;\n  /**\n   * Дополнительные свойства для кнопки предыдущего месяца.\n   */\n  prevMonthProps?: ArrowMonthProps;\n  /**\n   * Дополнительные свойства для кнопки следующего месяца.\n   */\n  nextMonthProps?: ArrowMonthProps;\n  /**\n   * Функция для проверки блокировки месяца.\n   */\n  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n  /**\n   * Функция для проверки блокировки года.\n   */\n  isYearDisabled?: (yearNumber: number) => boolean;\n  /**\n   * Обработчик изменения отображаемой даты.\n   */\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: () => void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonthHidden: prevMonthHiddenProp = false,\n  nextMonthHidden: nextMonthHiddenProp = false,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  isMonthDisabled,\n  isYearDisabled,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n  const { locale, direction } = useConfigProvider();\n\n  const onMonthsChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setMonth(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setYear(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n\n  const currentYear = viewDate.getFullYear();\n  const currentMonth = viewDate.getMonth();\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles.month}>{label}</span>,\n        disabled: isMonthDisabled && isMonthDisabled(value),\n      })),\n    [locale, isMonthDisabled],\n  );\n\n  const years = React.useMemo(\n    () =>\n      getYears(currentYear, 100).map((year) => ({\n        ...year,\n        disabled: isYearDisabled && isYearDisabled(year.value),\n      })),\n    [currentYear, isYearDisabled],\n  );\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n    (event: React.KeyboardEvent, isOpen: boolean) => {\n      if (isOpen && event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    [],\n  );\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n            onClick={onPrevMonth}\n            data-testid={prevMonthButtonTestId}\n            {...restPrevMonthProps}\n          >\n            <VisuallyHidden>\n              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n          weight=\"2\"\n        >\n          <span className={styles.month}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY=\"compact\">\n          <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentMonth}\n              options={months}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthLabel}\n              data-testid={\n                typeof monthDropdownTestId === 'string'\n                  ? monthDropdownTestId\n                  : monthDropdownTestId?.(currentMonth)\n              }\n              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n            />\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentYear}\n              options={years}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearLabel}\n              data-testid={yearDropdownTestId}\n              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n            onClick={onNextMonth}\n            data-testid={nextMonthButtonTestId}\n            {...restNextMonthProps}\n          >\n            <VisuallyHidden>\n              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","addMonths","setMonth","setYear","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","direction","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","disabled","years","year","formatter","Intl","DateTimeFormat","month","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen","event","isOpen","key","stopPropagation","baseClassName","sizeX","onClick","data-testid","format","weight","sizeY","div","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","onInputKeyDown"],"mappings":"AAAA;;;;;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,yBAAyB,QACpB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,QAAQ,WAAW;AACnE,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,wBAAqB;AAE7F,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,YAAY,QAA0B,kCAA+B;AAC9E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,SAASC,cAAc,QAAQ,sCAAmC;AAiGlE,OAAO,MAAMC,iBAAiB;QAAC,EAC7BC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBC,sBAAsB,KAAK,EAC5CC,iBAAiBC,sBAAsB,KAAK,EAC5CC,iBAAiB,KAAK,EACtBC,WAAW,EACXC,WAAW,EACXC,iBAAiB,CAAC,CAAC,EACnBC,iBAAiB,CAAC,CAAC,EACnBC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,mBAAmB,gBAAgB,EACnCC,kBAAkB,cAAc,EAChCC,8BACE,KAAClC;QAAyBmC,SAAS;QAAwBC,OAAO;QAAIC,QAAQ;MAC/E,EACDC,8BACE,KAACrC;QAA0BkC,SAAS;QAAwBC,OAAO;QAAIC,QAAQ;MAChF,EACDE,eAAe,EACfC,cAAc,EACdC,mBAAmB,EACnBC,kBAAkB,EAClBC,qBAAqB,EACrBC,qBAAqB,EAED,WADjBC;QAzBH1B;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAGAI;QAGAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,MAAM,EAAEC,SAAS,EAAE,GAAGnC;IAE9B,MAAMoC,iBAAiBlD,MAAMmD,WAAW,CACtC,CAACC,GAAmCC,WAClC/B,SAAShB,SAASe,UAAUiC,OAAOD,aACrC;QAAC/B;QAAUD;KAAS;IAEtB,MAAMkC,eAAevD,MAAMmD,WAAW,CACpC,CAACC,GAAmCC,WAClC/B,SAASf,QAAQc,UAAUiC,OAAOD,aACpC;QAAC/B;QAAUD;KAAS;IAGtB,MAAMmC,cAAcnC,SAASoC,WAAW;IACxC,MAAMC,eAAerC,SAASsC,QAAQ;IAEtC,MAAMC,SAAS5D,MAAM6D,OAAO,CAC1B,IACElD,UAAUqC,QAAQc,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAM,CAAA;gBAC3CD;gBACAC,qBAAO,KAACC;oBAAK5B,SAAS;8BAAiB2B;;gBACvCE,UAAUzB,mBAAmBA,gBAAgBsB;YAC/C,CAAA,IACF;QAACf;QAAQP;KAAgB;IAG3B,MAAM0B,QAAQnE,MAAM6D,OAAO,CACzB,IACEjD,SAAS4C,aAAa,KAAKM,GAAG,CAAC,CAACM,OAAU,wCACrCA;gBACHF,UAAUxB,kBAAkBA,eAAe0B,KAAKL,KAAK;iBAEzD;QAACP;QAAad;KAAe;IAG/B,MAAM2B,YAAY,IAAIC,KAAKC,cAAc,CAACvB,QAAQ;QAChDoB,MAAM;QACNI,OAAO;IACT;IAEA,MAAM,EAAEnC,WAAWoC,kBAAkB,EAAyB,GAAG3C,gBAAvB4C,gDAAuB5C;QAAzDO;;IACR,MAAM,EAAEA,WAAWsC,kBAAkB,EAAyB,GAAG5C,gBAAvB6C,gDAAuB7C;QAAzDM;;IAER,IAAIZ,kBACFC,uBAAwBgC,iBAAiB,MAAMF,gBAAgB/C;IACjE,IAAIgC,mBAAmB,CAAChB,iBAAiB;QACvCA,kBAAkBgB,gBAChBiB,iBAAiB,KAAK,IAAIA,eAAe,GACzCA,iBAAiB,KAAKmB,KAAKC,GAAG,CAACtB,cAAc,GAAG/C,oBAAoB+C;IAExE;IAEA,IAAIjC,kBACFC,uBAAwBkC,iBAAiB,KAAKF,gBAAgB9C;IAChE,IAAI+B,mBAAmB,CAAClB,iBAAiB;QACvCA,kBAAkBkB,gBAChBiB,iBAAiB,IAAI,KAAKA,eAAe,GACzCA,iBAAiB,IAAImB,KAAKE,GAAG,CAACvB,cAAc,GAAG9C,oBAAoB8C;IAEvE;IAEA,MAAMwB,uDAAuDhF,MAAMmD,WAAW,CAC5E,CAAC8B,OAA4BC;QAC3B,IAAIA,UAAUD,MAAME,GAAG,KAAK,UAAU;YACpCF,MAAMG,eAAe;QACvB;IACF,GACA,EAAE;IAGJ,qBACE,MAACpE;QAAcqE,aAAa;OAAmBtC;;YAC5C,CAACxB,iCACA,KAACV;gBAAmByE,OAAM;0BACxB,cAAA,MAACrE;oBACCoE,eAAejF,6EAA+CqE;oBAC9Dc,SAAS1D;oBACT2D,eAAa3C;mBACT6B;;sCAEJ,MAACvD;;gCACEa;gCAAe;gCAAGqC,UAAUoB,MAAM,CAACjF,UAAUa,UAAU;;;wBAEzD4B,cAAc,QAAQb,gBAAgBI;;;;YAI5Cb,+BACC,MAACT;gBACCmB,WAAWjC,0CAA2B;gBACtCsF,QAAO;;kCAEP,KAACzB;wBAAK5B,SAAS;kCACZ,IAAIiC,KAAKC,cAAc,CAACvB,QAAQ;4BAC/BwB,OAAO;wBACT,GAAGiB,MAAM,CAACpE;;oBACL;oBAEN,IAAIiD,KAAKC,cAAc,CAACvB,QAAQ;wBAC/BoB,MAAM;oBACR,GAAGqB,MAAM,CAACpE;;+BAGZ,KAACR;gBAAmB8E,OAAM;0BACxB,cAAA,MAACC;oBAAIvD,WAAWjC,0CAA2B;;sCACzC,KAACW;4BACCsB,WAAWjC,yCAA0B;4BACrC2D,OAAOL;4BACPmC,SAASjC;4BACTkC,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAAC/F;4BACPqB,UAAU4B;4BACV+C,qBAAqB;4BACrBC,YAAW;4BACXC,cAAYjE;4BACZsD,eACE,OAAO7C,wBAAwB,WAC3BA,sBACAA,gCAAAA,0CAAAA,oBAAsBe;4BAE5B0C,gBAAgBpB;;sCAElB,KAACjE;4BACCsB,WAAWjC,yCAA0B;4BACrC2D,OAAOP;4BACPqC,SAAS1B;4BACT2B,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAAC/F;4BACPqB,UAAUiC;4BACV0C,qBAAqB;4BACrBC,YAAW;4BACXC,cAAYhE;4BACZqD,eAAa5C;4BACbwD,gBAAgBpB;;;;;YAKvB,CAACvD,iCACA,KAACZ;gBAAmByE,OAAM;0BACxB,cAAA,MAACrE;oBACCoE,eAAejF,6EAA+CuE;oBAC9DY,SAAS3D;oBACT4D,eAAa1C;mBACT8B;;sCAEJ,MAACzD;;gCACEc;gCAAe;gCAAGoC,UAAUoB,MAAM,CAACpF,UAAUgB,UAAU;;;wBAEzD4B,cAAc,QAAQT,gBAAgBJ;;;;;;AAMnD,EAAE"}

package/dist/components/CalendarRange/CalendarRange.d.ts

@@ -5,28 +5,60 @@ import { type CalendarHeaderProps, type CalendarHeaderTestsProps } from '../Cale
 export type DateRangeType = [Date | null, Date | null];
 export type CalendarRangeTestsProps = CalendarDaysTestsProps & {
     /**
-     * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части
+     * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.
      */
     leftPartHeaderTestsData?: CalendarHeaderTestsProps;
     /**
-     * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части
+     * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.
      */
     rightPartHeaderTestsData?: CalendarHeaderTestsProps;
 };
 export interface CalendarRangeProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>, Pick<CalendarHeaderProps, 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>, CalendarRangeTestsProps {
+    /**
+     * Текущий выбранный промежуток.
+     */
     value?: DateRangeType | null;
+    /**
+     * Начальный промежуток при монтировании.
+     */
     defaultValue?: DateRangeType | null;
+    /**
+     * Запрещает выбор даты в прошлом.
+     * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
+     */
     disablePast?: boolean;
+    /**
+     * Запрещает выбор даты в будущем.
+     * Применяется, если не задано `shouldDisableDate`.
+     */
     disableFuture?: boolean;
+    /**
+     * Отключает селекторы выбора месяца/года.
+     */
     disablePickers?: boolean;
+    /**
+     * `aria-label` для изменения дня.
+     */
     changeDayLabel?: string;
+    /**
+     * День недели, с которого начинается неделя.
+     */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Обработчик изменения выбранного промежутка.
+     */
     onChange?: (value: DateRangeType | undefined) => void;
+    /**
+     * Функция для проверки запрета выбора даты.
+     */
     shouldDisableDate?: (value: Date) => boolean;
+    /**
+     * @deprecated Свойство не используется.
+     */
     onClose?: () => void;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */
-export declare const CalendarRange: ({ value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, disablePickers, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, changeDayLabel, prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef, ...props }: CalendarRangeProps) => React.ReactNode;
+export declare const CalendarRange: ({ value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, weekStartsOn, disablePickers, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, changeDayLabel, prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef, ...props }: CalendarRangeProps) => React.ReactNode;
 //# sourceMappingURL=CalendarRange.d.ts.map

package/dist/components/CalendarRange/CalendarRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAI1C,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,GAAG;IAC7D;;OAEG;IACH,uBAAuB,CAAC,EAAE,wBAAwB,CAAC;IACnD;;OAEG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;CACrD,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAClF,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,GAAG,kBAAkB,CAAC,EACzE,uBAAuB;IACzB,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,sXAwB3B,kBAAkB,KAAG,KAAK,CAAC,SAqN7B,CAAC"}
+{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAI1C,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,GAAG;IAC7D;;OAEG;IACH,uBAAuB,CAAC,EAAE,wBAAwB,CAAC;IACnD;;OAEG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;CACrD,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAClF,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,GAAG,kBAAkB,CAAC,EACzE,uBAAuB;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,6WAuB3B,kBAAkB,KAAG,KAAK,CAAC,SA6N7B,CAAC"}

package/dist/components/CalendarRange/CalendarRange.js

@@ -7,7 +7,9 @@ import * as React from "react";
 import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, startOfDay, subMonths } from "date-fns";
 import { useCalendar } from "../../hooks/useCalendar.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
-import { isFirstDay, isLastDay, navigateDate } from "../../lib/calendar.js";
+import { Keys, pressedKey } from "../../lib/accessibility.js";
+import { isFirstDay, isLastDay, navigateDate, NAVIGATION_KEYS } from "../../lib/calendar.js";
+import { isHTMLElement } from "../../lib/dom.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -23,14 +25,13 @@ const getIsDaySelected = (day, value)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */ export const CalendarRange = (_param)=>{
-    var { value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef } = _param, props = _object_without_properties(_param, [
+    var { value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef } = _param, props = _object_without_properties(_param, [
         "value",
         "defaultValue",
         "onChange",
         "disablePast",
         "disableFuture",
         "shouldDisableDate",
-        "onClose",
         "weekStartsOn",
         "disablePickers",
         "prevMonthLabel",
@@ -64,19 +65,21 @@ const getIsDaySelected = (day, value)=>{
     const [hintedDate, setHintedDate] = React.useState();
     const secondViewDate = addMonths(viewDate, 1);
     const handleKeyDown = React.useCallback((event)=>{
-        if ([
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight'
-        ].includes(event.key)) {
+        const key = pressedKey(event);
+        if (key && NAVIGATION_KEYS.includes(key)) {
             event.preventDefault();
+            const newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value === null || value === void 0 ? void 0 : value[1], key);
+            if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate) && !isSameMonth(newFocusedDay, addMonths(viewDate, 1))) {
+                setViewDate(newFocusedDay);
+            }
+            setFocusedDay(newFocusedDay);
+            return;
         }
-        const newFocusedDay = navigateDate(focusedDay !== null && focusedDay !== void 0 ? focusedDay : value === null || value === void 0 ? void 0 : value[1], event.key);
-        if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate) && !isSameMonth(newFocusedDay, addMonths(viewDate, 1))) {
-            setViewDate(newFocusedDay);
+        if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {
+            var _event_target_click, _event_target;
+            event.preventDefault();
+            (_event_target_click = (_event_target = event.target).click) === null || _event_target_click === void 0 ? void 0 : _event_target_click.call(_event_target);
         }
-        setFocusedDay(newFocusedDay);
     }, [
         focusedDay,
         setFocusedDay,