@vkontakte/vkui 7.2.1 → 7.3.0

package/dist/cssm/components/Calendar/Calendar.js

@@ -2,11 +2,12 @@
 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 { isSameDay, isSameMonth, startOfMonth } from "date-fns";
 import { useCalendar } from "../../hooks/useCalendar.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from "../../lib/calendar.js";
 import { convertDateFromTimeZone, convertDateToTimeZone } from "../../lib/date.js";
+import { isHTMLElement } from "../../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
@@ -17,7 +18,7 @@ import styles from "./Calendar.module.css";
 const warn = warnOnce('Calendar');
 /**
  * @see https://vkcom.github.io/VKUI/#/Calendar
- */ export const Calendar = ({ getRootRef, value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime = false, doneButtonText, doneButtonDisabled, doneButtonShow, DoneButton, weekStartsOn = 1, disablePickers, changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, changeDayLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, timezone, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props })=>{
+ */ export const Calendar = ({ getRootRef, 'value': valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onDoneButtonClick, enableTime = false, doneButtonText, doneButtonDisabled, doneButtonShow, DoneButton, weekStartsOn = 1, disablePickers, 'aria-label': ariaLabel = 'Календарь', changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, size = 'm', 'viewDate': externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, timezone, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props })=>{
     const _onChange = React.useCallback((date)=>{
         onChange?.(convertDateFromTimeZone(date, timezone) || undefined);
     }, [
@@ -33,7 +34,7 @@ const warn = warnOnce('Calendar');
         timezone,
         value
     ]);
-    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = useCalendar({
+    const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, focusableDay, setFocusableDay, isDayFocused, isDayDisabled, isMonthDisabled, isYearDisabled } = useCalendar({
         value: timeZonedValue,
         disableFuture,
         disablePast,
@@ -62,18 +63,34 @@ const warn = warnOnce('Calendar');
             'ArrowUp',
             'ArrowDown',
             'ArrowLeft',
-            'ArrowRight'
+            'ArrowRight',
+            'Home',
+            'End',
+            'PageUp',
+            'PageDown'
         ].includes(event.key)) {
             event.preventDefault();
+            const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, event.key);
+            if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
+                setViewDate(newFocusedDay);
+            }
+            setFocusedDay(newFocusedDay);
+            setFocusableDay(newFocusedDay);
+            return;
         }
-        const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, event.key);
-        if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
-            setViewDate(newFocusedDay);
+        if (event.key === 'Tab') {
+            setFocusedDay(undefined);
+            setFocusableDay(focusedDay);
+            return;
+        }
+        if ((event.key === 'Enter' || event.key === ' ') && isHTMLElement(event.target)) {
+            event.preventDefault();
+            event.target.click?.();
         }
-        setFocusedDay(newFocusedDay);
     }, [
         focusedDay,
         setFocusedDay,
+        setFocusableDay,
         setViewDate,
         timeZonedValue,
         viewDate
@@ -87,16 +104,58 @@ const warn = warnOnce('Calendar');
             });
         }
         updateValue(actualDate);
+        setFocusedDay(actualDate);
+        setFocusableDay(actualDate);
     }, [
         timeZonedValue,
         updateValue,
         maxDateTime,
-        minDateTime
+        minDateTime,
+        setFocusedDay,
+        setFocusableDay
+    ]);
+    const onDayFocus = React.useCallback((date)=>{
+        if (focusedDay && isSameDay(focusedDay, date)) {
+            return;
+        }
+        setFocusedDay(date);
+    }, [
+        focusedDay,
+        setFocusedDay
     ]);
+    // activeDay это день в календаре соответствующий значению в инпуте
     const isDayActive = React.useCallback((day)=>Boolean(timeZonedValue && isSameDay(day, timeZonedValue)), [
         timeZonedValue
     ]);
+    const isFocusableDayInViewDateMonth = focusableDay && isSameMonth(focusableDay, viewDate);
+    const isInputValueDateInViewDateMonth = timeZonedValue && isSameMonth(timeZonedValue, viewDate);
+    /**
+   * Функция позволяет проверить является ли день в календаре днём на который
+   * можно попасть с помощью Tab.
+   * Единственный день в таблице календаря у которого есть tabIndex="0"
+   * Чтобы на него можно было попасть из заголовка календаря.
+   */ const isDayFocusable = React.useCallback((day)=>{
+        // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex="0",
+        if (isFocusableDayInViewDateMonth) {
+            return isSameDay(focusableDay, day);
+        }
+        // при открытии календаря focusableDay не определён,
+        // поэтому tabIndex="0" будет у дня, соответствующего дню в инпуте
+        if (isInputValueDateInViewDateMonth) {
+            return isDayActive(day);
+        }
+        // при переключении месяца любая навигация с помощью Tab начинается
+        // с первого дня месяца.
+        return isSameDay(startOfMonth(viewDate), day);
+    }, [
+        focusableDay,
+        viewDate,
+        isDayActive,
+        isFocusableDayInViewDateMonth,
+        isInputValueDateInViewDateMonth
+    ]);
     return /*#__PURE__*/ _jsxs(RootComponent, {
+        "aria-label": ariaLabel,
         ...props,
         baseClassName: classNames(styles.host, size === 's' && styles.sizeS),
         getRootRef: getRootRef,
@@ -127,16 +186,15 @@ const warn = warnOnce('Calendar');
                 viewDate: externalViewDate || viewDate,
                 value: timeZonedValue,
                 weekStartsOn: weekStartsOn,
-                isDayFocused: isDayFocused,
-                tabIndex: 0,
-                "aria-label": changeDayLabel,
                 onKeyDown: handleKeyDown,
                 onDayChange: onDayChange,
                 isDayActive: isDayActive,
+                onDayFocus: onDayFocus,
+                isDayFocused: isDayFocused,
+                isDayFocusable: isDayFocusable,
                 isDaySelectionStart: isFirstDay,
                 isDaySelectionEnd: isLastDay,
                 isDayDisabled: isDayDisabled,
-                onBlur: resetSelectedDay,
                 showNeighboringMonth: showNeighboringMonth,
                 size: size,
                 dayProps: dayProps,

package/dist/cssm/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport {\n  type CalendarDoneButtonProps,\n  CalendarTime,\n  type CalendarTimeProps,\n  type CalendarTimeTestsProps,\n} from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport type CalendarTestsProps = CalendarDaysTestsProps &\n  CalendarHeaderTestsProps &\n  CalendarTimeTestsProps;\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n    Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarDoneButtonProps,\n    CalendarTestsProps {\n  value?: Date | null;\n  defaultValue?: Date | null;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?: (value?: Date) => void; // TODO [>=8]: поменять тип на `(value?: Date | null) => void`\n  /**\n   * Позволяет запретить выбор даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?: (value: Date) => void;\n  /**\n   * Минимальные дата и время, которые можно выбрать\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  minDateTime?: Date;\n  /**\n   * Максимальные дата и время, которые можно выбрать.\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  maxDateTime?: Date;\n  /**\n   * Свойство для отображения времени в нужной таймзоне\n   */\n  timezone?: string;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  getRootRef,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onDoneButtonClick,\n  enableTime = false,\n  doneButtonText,\n  doneButtonDisabled,\n  doneButtonShow,\n  DoneButton,\n  weekStartsOn = 1,\n  disablePickers,\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  showNeighboringMonth,\n  changeDayLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  minDateTime,\n  maxDateTime,\n  timezone,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  dayTestId,\n  ...props\n}: CalendarProps): React.ReactNode => {\n  const _onChange = React.useCallback(\n    (date: Date | null | undefined) => {\n      onChange?.(convertDateFromTimeZone(date, timezone) || undefined);\n    },\n    [onChange, timezone],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<Date | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const timeZonedValue: Date | null | undefined = React.useMemo(\n    () => convertDateToTimeZone(value, timezone),\n    [timezone, value],\n  );\n\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({\n    value: timeZonedValue,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n    minDateTime,\n    maxDateTime,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (timeZonedValue) {\n      setViewDate(timeZonedValue);\n    }\n  }, [timeZonedValue]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, timeZonedValue, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      let actualDate = setTimeEqual(date, timeZonedValue);\n      if (minDateTime || maxDateTime) {\n        actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n      }\n      updateValue(actualDate);\n    },\n    [timeZonedValue, updateValue, maxDateTime, minDateTime],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(timeZonedValue && isSameDay(day, timeZonedValue)),\n    [timeZonedValue],\n  );\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}\n      getRootRef={getRootRef}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles.header}\n        prevMonthLabel={prevMonthLabel}\n        nextMonthLabel={nextMonthLabel}\n        changeMonthLabel={changeMonthLabel}\n        changeYearLabel={changeYearLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n        isMonthDisabled={isMonthDisabled}\n        isYearDisabled={isYearDisabled}\n        nextMonthButtonTestId={nextMonthButtonTestId}\n        prevMonthButtonTestId={prevMonthButtonTestId}\n        monthDropdownTestId={monthDropdownTestId}\n        yearDropdownTestId={yearDropdownTestId}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={timeZonedValue}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n        renderDayContent={renderDayContent}\n        dayTestId={dayTestId}\n      />\n      {enableTime && timeZonedValue && size !== 's' && (\n        <div className={styles.time}>\n          <CalendarTime\n            value={timeZonedValue}\n            onChange={updateValue}\n            onDoneButtonClick={onDoneButtonClick}\n            doneButtonText={doneButtonText}\n            doneButtonDisabled={doneButtonDisabled}\n            doneButtonShow={doneButtonShow}\n            DoneButton={DoneButton}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}\n            minutesTestId={minutesTestId}\n            hoursTestId={hoursTestId}\n            doneButtonTestId={doneButtonTestId}\n          />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","useCalendar","useCustomEnsuredControl","clamp","isFirstDay","isLastDay","navigateDate","setTimeEqual","convertDateFromTimeZone","convertDateToTimeZone","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","styles","warn","Calendar","getRootRef","value","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","onDoneButtonClick","enableTime","doneButtonText","doneButtonDisabled","doneButtonShow","DoneButton","weekStartsOn","disablePickers","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","changeDayLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","timezone","minutesTestId","hoursTestId","doneButtonTestId","prevMonthButtonTestId","nextMonthButtonTestId","monthDropdownTestId","yearDropdownTestId","dayTestId","props","_onChange","useCallback","date","undefined","updateValue","timeZonedValue","useMemo","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","process","env","NODE_ENV","handleKeyDown","event","includes","key","preventDefault","newFocusedDay","onDayChange","actualDate","min","max","isDayActive","day","Boolean","baseClassName","host","sizeS","className","header","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur","div","time"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth, startOfMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';\nimport { isHTMLElement } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport {\n  type CalendarDoneButtonProps,\n  CalendarTime,\n  type CalendarTimeProps,\n  type CalendarTimeTestsProps,\n} from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport type CalendarTestsProps = CalendarDaysTestsProps &\n  CalendarHeaderTestsProps &\n  CalendarTimeTestsProps;\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n    Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarDoneButtonProps,\n    CalendarTestsProps {\n  /**\n   * Текущая выбранная дата.\n   */\n  value?: Date | null;\n  /**\n   * Начальная дата при монтировании.\n   */\n  defaultValue?: Date | null;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  /**\n   * Включает выбор времени.\n   */\n  enableTime?: boolean;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean;\n  /**\n   * `aria-label` для изменения дня.\n   *\n   * @deprecated Будет удалeно в **VKUI v8**.\n   * Использовалось для задания aria-label для контейнера дней в календаре.\n   * Теперь этот контейнер является таблицей (с помощью role=\"grid\") и\n   * в aria-label рендерится текущий открытый в календаре месяц и год.\n   */\n  changeDayLabel?: string;\n  /**\n   * День недели, с которого начинается неделя.\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  onChange?: (value?: Date) => void; // TODO [>=8]: поменять тип на `(value?: Date | null) => void`\n  /**\n   * Функция для проверки запрета выбора даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Обработчик изменения даты в шапке календаря.\n   */\n  onHeaderChange?: (value: Date) => void;\n  /**\n   * Минимальные дата и время, которые можно выбрать.\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  minDateTime?: Date;\n  /**\n   * Максимальные дата и время, которые можно выбрать.\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  maxDateTime?: Date;\n  /**\n   * Часовой пояс для отображения даты.\n   */\n  timezone?: string;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  getRootRef,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onDoneButtonClick,\n  enableTime = false,\n  doneButtonText,\n  doneButtonDisabled,\n  doneButtonShow,\n  DoneButton,\n  weekStartsOn = 1,\n  disablePickers,\n  'aria-label': ariaLabel = 'Календарь',\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  showNeighboringMonth,\n  size = 'm',\n  'viewDate': externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  minDateTime,\n  maxDateTime,\n  timezone,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  dayTestId,\n  ...props\n}: CalendarProps): React.ReactNode => {\n  const _onChange = React.useCallback(\n    (date: Date | null | undefined) => {\n      onChange?.(convertDateFromTimeZone(date, timezone) || undefined);\n    },\n    [onChange, timezone],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<Date | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const timeZonedValue: Date | null | undefined = React.useMemo(\n    () => convertDateToTimeZone(value, timezone),\n    [timezone, value],\n  );\n\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    focusableDay,\n    setFocusableDay,\n    isDayFocused,\n    isDayDisabled,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({\n    value: timeZonedValue,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n    minDateTime,\n    maxDateTime,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (timeZonedValue) {\n      setViewDate(timeZonedValue);\n    }\n  }, [timeZonedValue]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (\n        [\n          'ArrowUp',\n          'ArrowDown',\n          'ArrowLeft',\n          'ArrowRight',\n          'Home',\n          'End',\n          'PageUp',\n          'PageDown',\n        ].includes(event.key)\n      ) {\n        event.preventDefault();\n\n        const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, event.key);\n\n        if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n          setViewDate(newFocusedDay);\n        }\n        setFocusedDay(newFocusedDay);\n        setFocusableDay(newFocusedDay);\n\n        return;\n      }\n\n      if (event.key === 'Tab') {\n        setFocusedDay(undefined);\n        setFocusableDay(focusedDay);\n\n        return;\n      }\n\n      if ((event.key === 'Enter' || event.key === ' ') && isHTMLElement(event.target)) {\n        event.preventDefault();\n        event.target.click?.();\n      }\n    },\n    [focusedDay, setFocusedDay, setFocusableDay, setViewDate, timeZonedValue, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      let actualDate = setTimeEqual(date, timeZonedValue);\n      if (minDateTime || maxDateTime) {\n        actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n      }\n      updateValue(actualDate);\n      setFocusedDay(actualDate);\n      setFocusableDay(actualDate);\n    },\n    [timeZonedValue, updateValue, maxDateTime, minDateTime, setFocusedDay, setFocusableDay],\n  );\n\n  const onDayFocus = React.useCallback(\n    (date: Date) => {\n      if (focusedDay && isSameDay(focusedDay, date)) {\n        return;\n      }\n\n      setFocusedDay(date);\n    },\n    [focusedDay, setFocusedDay],\n  );\n\n  // activeDay это день в календаре соответствующий значению в инпуте\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(timeZonedValue && isSameDay(day, timeZonedValue)),\n    [timeZonedValue],\n  );\n\n  const isFocusableDayInViewDateMonth = focusableDay && isSameMonth(focusableDay, viewDate);\n  const isInputValueDateInViewDateMonth = timeZonedValue && isSameMonth(timeZonedValue, viewDate);\n  /**\n   * Функция позволяет проверить является ли день в календаре днём на который\n   * можно попасть с помощью Tab.\n   * Единственный день в таблице календаря у которого есть tabIndex=\"0\"\n   * Чтобы на него можно было попасть из заголовка календаря.\n   */\n  const isDayFocusable = React.useCallback(\n    (day: Date) => {\n      // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex=\"0\",\n      if (isFocusableDayInViewDateMonth) {\n        return isSameDay(focusableDay, day);\n      }\n\n      // при открытии календаря focusableDay не определён,\n      // поэтому tabIndex=\"0\" будет у дня, соответствующего дню в инпуте\n      if (isInputValueDateInViewDateMonth) {\n        return isDayActive(day);\n      }\n\n      // при переключении месяца любая навигация с помощью Tab начинается\n      // с первого дня месяца.\n      return isSameDay(startOfMonth(viewDate), day);\n    },\n    [\n      focusableDay,\n      viewDate,\n      isDayActive,\n      isFocusableDayInViewDateMonth,\n      isInputValueDateInViewDateMonth,\n    ],\n  );\n\n  return (\n    <RootComponent\n      aria-label={ariaLabel}\n      {...props}\n      baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}\n      getRootRef={getRootRef}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles.header}\n        prevMonthLabel={prevMonthLabel}\n        nextMonthLabel={nextMonthLabel}\n        changeMonthLabel={changeMonthLabel}\n        changeYearLabel={changeYearLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n        isMonthDisabled={isMonthDisabled}\n        isYearDisabled={isYearDisabled}\n        nextMonthButtonTestId={nextMonthButtonTestId}\n        prevMonthButtonTestId={prevMonthButtonTestId}\n        monthDropdownTestId={monthDropdownTestId}\n        yearDropdownTestId={yearDropdownTestId}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={timeZonedValue}\n        weekStartsOn={weekStartsOn}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        onDayFocus={onDayFocus}\n        isDayFocused={isDayFocused}\n        isDayFocusable={isDayFocusable}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n        renderDayContent={renderDayContent}\n        dayTestId={dayTestId}\n      />\n      {enableTime && timeZonedValue && size !== 's' && (\n        <div className={styles.time}>\n          <CalendarTime\n            value={timeZonedValue}\n            onChange={updateValue}\n            onDoneButtonClick={onDoneButtonClick}\n            doneButtonText={doneButtonText}\n            doneButtonDisabled={doneButtonDisabled}\n            doneButtonShow={doneButtonShow}\n            DoneButton={DoneButton}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}\n            minutesTestId={minutesTestId}\n            hoursTestId={hoursTestId}\n            doneButtonTestId={doneButtonTestId}\n          />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","startOfMonth","useCalendar","useCustomEnsuredControl","clamp","isFirstDay","isLastDay","navigateDate","setTimeEqual","convertDateFromTimeZone","convertDateToTimeZone","isHTMLElement","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","styles","warn","Calendar","getRootRef","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","onDoneButtonClick","enableTime","doneButtonText","doneButtonDisabled","doneButtonShow","DoneButton","weekStartsOn","disablePickers","ariaLabel","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","size","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","timezone","minutesTestId","hoursTestId","doneButtonTestId","prevMonthButtonTestId","nextMonthButtonTestId","monthDropdownTestId","yearDropdownTestId","dayTestId","props","_onChange","useCallback","date","undefined","value","updateValue","timeZonedValue","useMemo","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","focusableDay","setFocusableDay","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","process","env","NODE_ENV","handleKeyDown","event","includes","key","preventDefault","newFocusedDay","target","click","onDayChange","actualDate","min","max","onDayFocus","isDayActive","day","Boolean","isFocusableDayInViewDateMonth","isInputValueDateInViewDateMonth","isDayFocusable","aria-label","baseClassName","host","sizeS","className","header","onKeyDown","isDaySelectionStart","isDaySelectionEnd","div","time"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAAEC,WAAW,EAAEC,YAAY,QAAQ,WAAW;AAChE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,uBAAuB,QAAQ,mCAAgC;AACxE,SAASC,KAAK,EAAEC,UAAU,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,QAAQ,wBAAqB;AAC9F,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,oBAAiB;AAChF,SAASC,aAAa,QAAQ,mBAAgB;AAC9C,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SACEC,YAAY,QAGP,kCAA+B;AACtC,SACEC,cAAc,QAGT,sCAAmC;AAC1C,SAEEC,YAAY,QAGP,kCAA+B;AACtC,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAyG3C,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,WAAW,CAAC,EACvBC,UAAU,EACV,SAASC,SAAS,EAClBC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXC,aAAa,EACbC,iBAAiB,EACjBC,iBAAiB,EACjBC,aAAa,KAAK,EAClBC,cAAc,EACdC,kBAAkB,EAClBC,cAAc,EACdC,UAAU,EACVC,eAAe,CAAC,EAChBC,cAAc,EACd,cAAcC,YAAY,WAAW,EACrCC,mBAAmB,cAAc,EACjCC,qBAAqB,iBAAiB,EACtCC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,mBAAmB,gBAAgB,EACnCC,kBAAkB,cAAc,EAChCC,oBAAoB,EACpBC,OAAO,GAAG,EACV,YAAYC,gBAAgB,EAC5BC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,aAAa,EACbC,cAAc,EACdC,cAAc,EACdC,QAAQ,EACRC,yBAAyB,EACzBC,gBAAgB,EAChBC,WAAW,EACXC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,qBAAqB,EACrBC,qBAAqB,EACrBC,mBAAmB,EACnBC,kBAAkB,EAClBC,SAAS,EACT,GAAGC,OACW;IACd,MAAMC,YAAYvE,MAAMwE,WAAW,CACjC,CAACC;QACC9C,WAAWf,wBAAwB6D,MAAMZ,aAAaa;IACxD,GACA;QAAC/C;QAAUkC;KAAS;IAGtB,MAAM,CAACc,OAAOC,YAAY,GAAGtE,wBAAiD;QAC5EqE,OAAOlD;QACPC;QACAC,UAAU4C;IACZ;IAEA,MAAMM,iBAA0C7E,MAAM8E,OAAO,CAC3D,IAAMjE,sBAAsB8D,OAAOd,WACnC;QAACA;QAAUc;KAAM;IAGnB,MAAM,EACJI,QAAQ,EACRC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,YAAY,EACZC,eAAe,EACfC,YAAY,EACZC,aAAa,EACbC,eAAe,EACfC,cAAc,EACf,GAAGrF,YAAY;QACdsE,OAAOE;QACPhD;QACAD;QACAE;QACAmB;QACAC;QACAC;QACAQ;QACAC;IACF;IAEA7C,0BAA0B;QACxB,IAAI8D,gBAAgB;YAClBG,YAAYH;QACd;IACF,GAAG;QAACA;KAAe;IAEnB,IAAIc,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB,CAACvD,kBAAkBS,SAAS,KAAK;QAC7EzB,KAAK,yEAAyE;IAChF;IAEA,IAAIqE,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB7D,cAAce,SAAS,KAAK;QACxEzB,KAAK,4DAA4D;IACnE;IAEA,MAAMwE,gBAAgB9F,MAAMwE,WAAW,CACrC,CAACuB;QACC,IACE;YACE;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACD,CAACC,QAAQ,CAACD,MAAME,GAAG,GACpB;YACAF,MAAMG,cAAc;YAEpB,MAAMC,gBAAgBzF,aAAayE,cAAcN,gBAAgBkB,MAAME,GAAG;YAE1E,IAAIE,iBAAiB,CAAChG,YAAYgG,eAAepB,WAAW;gBAC1DC,YAAYmB;YACd;YACAf,cAAce;YACdb,gBAAgBa;YAEhB;QACF;QAEA,IAAIJ,MAAME,GAAG,KAAK,OAAO;YACvBb,cAAcV;YACdY,gBAAgBH;YAEhB;QACF;QAEA,IAAI,AAACY,CAAAA,MAAME,GAAG,KAAK,WAAWF,MAAME,GAAG,KAAK,GAAE,KAAMnF,cAAciF,MAAMK,MAAM,GAAG;YAC/EL,MAAMG,cAAc;YACpBH,MAAMK,MAAM,CAACC,KAAK;QACpB;IACF,GACA;QAAClB;QAAYC;QAAeE;QAAiBN;QAAaH;QAAgBE;KAAS;IAGrF,MAAMuB,cAActG,MAAMwE,WAAW,CACnC,CAACC;QACC,IAAI8B,aAAa5F,aAAa8D,MAAMI;QACpC,IAAIlB,eAAeC,aAAa;YAC9B2C,aAAahG,MAAMgG,YAAY;gBAAEC,KAAK7C;gBAAa8C,KAAK7C;YAAY;QACtE;QACAgB,YAAY2B;QACZnB,cAAcmB;QACdjB,gBAAgBiB;IAClB,GACA;QAAC1B;QAAgBD;QAAahB;QAAaD;QAAayB;QAAeE;KAAgB;IAGzF,MAAMoB,aAAa1G,MAAMwE,WAAW,CAClC,CAACC;QACC,IAAIU,cAAcjF,UAAUiF,YAAYV,OAAO;YAC7C;QACF;QAEAW,cAAcX;IAChB,GACA;QAACU;QAAYC;KAAc;IAG7B,mEAAmE;IACnE,MAAMuB,cAAc3G,MAAMwE,WAAW,CACnC,CAACoC,MAAcC,QAAQhC,kBAAkB3E,UAAU0G,KAAK/B,kBACxD;QAACA;KAAe;IAGlB,MAAMiC,gCAAgCzB,gBAAgBlF,YAAYkF,cAAcN;IAChF,MAAMgC,kCAAkClC,kBAAkB1E,YAAY0E,gBAAgBE;IACtF;;;;;GAKC,GACD,MAAMiC,iBAAiBhH,MAAMwE,WAAW,CACtC,CAACoC;QACC,2GAA2G;QAC3G,IAAIE,+BAA+B;YACjC,OAAO5G,UAAUmF,cAAcuB;QACjC;QAEA,oDAAoD;QACpD,kEAAkE;QAClE,IAAIG,iCAAiC;YACnC,OAAOJ,YAAYC;QACrB;QAEA,mEAAmE;QACnE,wBAAwB;QACxB,OAAO1G,UAAUE,aAAa2E,WAAW6B;IAC3C,GACA;QACEvB;QACAN;QACA4B;QACAG;QACAC;KACD;IAGH,qBACE,MAAC3F;QACC6F,cAAY1E;QACX,GAAG+B,KAAK;QACT4C,eAAejH,WAAWoB,OAAO8F,IAAI,EAAEpE,SAAS,OAAO1B,OAAO+F,KAAK;QACnE5F,YAAYA;;0BAEZ,KAACN;gBACC6D,UAAU/B,oBAAoB+B;gBAC9BpD,UAAUqD;gBACV9B,aAAagC;gBACb/B,aAAa8B;gBACb3C,gBAAgBA,kBAAkBS,SAAS;gBAC3CsE,WAAWhG,OAAOiG,MAAM;gBACxB5E,gBAAgBA;gBAChBC,gBAAgBA;gBAChBC,kBAAkBA;gBAClBC,iBAAiBA;gBACjBO,eAAeA;gBACfC,eAAeA;gBACfC,gBAAgBA;gBAChBC,gBAAgBA;gBAChBkC,iBAAiBA;gBACjBC,gBAAgBA;gBAChBxB,uBAAuBA;gBACvBD,uBAAuBA;gBACvBE,qBAAqBA;gBACrBC,oBAAoBA;;0BAEtB,KAACnD;gBACC8D,UAAU/B,oBAAoB+B;gBAC9BJ,OAAOE;gBACPxC,cAAcA;gBACdkF,WAAWzB;gBACXQ,aAAaA;gBACbK,aAAaA;gBACbD,YAAYA;gBACZnB,cAAcA;gBACdyB,gBAAgBA;gBAChBQ,qBAAqBhH;gBACrBiH,mBAAmBhH;gBACnB+E,eAAeA;gBACf1C,sBAAsBA;gBACtBC,MAAMA;gBACNS,UAAUA;gBACVC,2BAA2BA;gBAC3BC,kBAAkBA;gBAClBW,WAAWA;;YAEZrC,cAAc6C,kBAAkB9B,SAAS,qBACxC,KAAC2E;gBAAIL,WAAWhG,OAAOsG,IAAI;0BACzB,cAAA,KAACxG;oBACCwD,OAAOE;oBACPlD,UAAUiD;oBACV7C,mBAAmBA;oBACnBE,gBAAgBA;oBAChBC,oBAAoBA;oBACpBC,gBAAgBA;oBAChBC,YAAYA;oBACZI,kBAAkBA;oBAClBC,oBAAoBA;oBACpB+C,eAAe7B,eAAeC,cAAc4B,gBAAgBd;oBAC5DZ,eAAeA;oBACfC,aAAaA;oBACbC,kBAAkBA;;;;;AAM9B,EAAE"}

package/dist/cssm/components/CalendarDay/CalendarDay.js

@@ -2,12 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker.js";
+import { useFocusVisible } from "../../hooks/useFocusVisible.js";
+import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
+import { mergeCalls } from "../../lib/mergeCalls.js";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./CalendarDay.module.css";
-export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, children, renderDayContent, testId, ...restProps })=>{
+// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
+export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, onFocus, onBlur, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, children, renderDayContent, testId, role, 'aria-colindex': colIndex, ...restProps })=>{
     const { locale, direction } = useConfigProvider();
     const ref = React.useRef(null);
     const onClick = React.useCallback(()=>onChange(day), [
@@ -22,17 +26,27 @@ export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onC
         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();
         }
     }, [
@@ -62,23 +76,26 @@ export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onC
     ]);
     if (hidden) {
         return /*#__PURE__*/ _jsx("div", {
+            role: role,
+            "aria-colindex": colIndex,
             className: classNames(styles.hidden, size === 's' && styles.sizeS)
         });
     }
     return /*#__PURE__*/ _jsx(Tappable, {
-        baseClassName: classNames(styles.host, size === 's' && styles.sizeS, direction === 'rtl' && styles.rtl),
+        baseClassName: classNames(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,
         children: /*#__PURE__*/ _jsx("div", {
             className: classNames(styles.content, size === 's' && styles.sizeS, today && styles.today, selected && !disabled && styles.selected, selectionStart && styles.selectionStart, selectionEnd && styles.selectionEnd, disabled && styles.disabled, !sameMonth && styles.notSameMonth),
             children: /*#__PURE__*/ _jsx("div", {
@@ -91,6 +108,8 @@ export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onC
         })
     });
 });
-CalendarDay.displayName = 'CalendarDay';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(CalendarDay, 'CalendarDay');
+}
 
 //# sourceMappingURL=CalendarDay.js.map

package/dist/cssm/components/CalendarDay/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дня в календаре\n   */\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange: (value: Date) => void;\n  onEnter?: (value: Date) => void;\n  onLeave?: (value: Date) => void;\n  // Функция отрисовки контента в ячейке дня\n  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    children,\n    renderDayContent,\n    testId,\n    ...restProps\n  }: CalendarDayProps) => {\n    const { locale, direction } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;\n    }\n\n    return (\n      <Tappable\n        baseClassName={classNames(\n          styles.host,\n          size === 's' && styles.sizeS,\n          direction === 'rtl' && styles.rtl,\n        )}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","VisuallyHidden","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","children","renderDayContent","testId","restProps","locale","direction","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","bubbles","focus","content","useMemo","div","className","dayNumber","span","aria-hidden","getDate","sizeS","baseClassName","host","rtl","hoverMode","hostHovered","activeMode","hostActivated","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","notSameMonth","hintedActive","inner","innerActive","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gCAAgC,QAAQ,yCAAsC;AACvF,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAoC9C,OAAO,MAAMC,4BAA0CP,MAAMQ,IAAI,CAC/D,CAAC,EACCC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,YAAY,EACZC,OAAO,EACPC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,oBAAoB,EACpBC,kBAAkB,EAClBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,gBAAgB,EAChBC,MAAM,EACN,GAAGC,WACc;IACjB,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAG5B;IAC9B,MAAM6B,MAAMhC,MAAMiC,MAAM,CAAc;IACtC,MAAMC,UAAUlC,MAAMmC,WAAW,CAAC,IAAMvB,SAASH,MAAM;QAACA;QAAKG;KAAS;IACtE,MAAMwB,cAAcpC,MAAMmC,WAAW,CAAC,IAAMhB,UAAUV,MAAM;QAACA;QAAKU;KAAQ;IAC1E,MAAMkB,cAAcrC,MAAMmC,WAAW,CAAC,IAAMf,UAAUX,MAAM;QAACA;QAAKW;KAAQ;IAE1E,MAAMkB,QAAQ,IAAIC,KAAKC,cAAc,CAACV,QAAQ;QAC5CW,SAAS;QACTC,MAAM;QACNC,OAAO;QACPlC,KAAK;IACP,GAAGmC,MAAM,CAACnC;IAEVT,MAAM6C,SAAS,CAAC;QACd,IAAI3B,WAAWc,IAAIc,OAAO,EAAE;YAC1Bd,IAAIc,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAM9C,kCAAkC;gBAAE+C,SAAS;YAAK;YACtFjB,IAAIc,OAAO,CAACI,KAAK;QACnB;IACF,GAAG;QAAChC;KAAQ;IAEZ,MAAMiC,UAAUnD,MAAMoD,OAAO,CAAC;QAC5B,IAAIzB,kBAAkB;YACpB,OAAOA,iBAAiBlB;QAC1B;QACA,qBACE,MAAC4C;YAAIC,WAAWhD,OAAOiD,SAAS;;8BAC9B,KAAClD;8BAAgBqB,YAAYY;;8BAC7B,KAACkB;oBAAKC,aAAW;8BAAEhD,IAAIiD,OAAO;;;;IAGpC,GAAG;QAAC/B;QAAkBlB;QAAKiB;QAAUY;KAAM;IAE3C,IAAIzB,QAAQ;QACV,qBAAO,KAACwC;YAAIC,WAAWrD,WAAWK,OAAOO,MAAM,EAAEY,SAAS,OAAOnB,OAAOqD,KAAK;;IAC/E;IAEA,qBACE,KAACvD;QACCwD,eAAe3D,WACbK,OAAOuD,IAAI,EACXpC,SAAS,OAAOnB,OAAOqD,KAAK,EAC5B5B,cAAc,SAASzB,OAAOwD,GAAG;QAEnCC,WAAWzD,OAAO0D,WAAW;QAC7BC,YAAY3D,OAAO4D,aAAa;QAChCC,WAAW;QACXjC,SAASA;QACTpB,UAAUA;QACVsD,UAAU,CAAC;QACXC,YAAYrC;QACZsC,kBAAkBvD,SAAS,YAAY;QACvCwD,gBAAgBnC;QAChBoC,gBAAgBnC;QAChBoC,eAAa,OAAO7C,WAAW,WAAWA,SAASA,SAASnB;QAC3D,GAAGoB,SAAS;kBAEb,cAAA,KAACwB;YACCC,WAAWrD,WACTK,OAAO6C,OAAO,EACd1B,SAAS,OAAOnB,OAAOqD,KAAK,EAC5BjD,SAASJ,OAAOI,KAAK,EACrBC,YAAY,CAACG,YAAYR,OAAOK,QAAQ,EACxCK,kBAAkBV,OAAOU,cAAc,EACvCC,gBAAgBX,OAAOW,YAAY,EACnCH,YAAYR,OAAOQ,QAAQ,EAC3B,CAACU,aAAalB,OAAOoE,YAAY;sBAGnC,cAAA,KAACrB;gBACCC,WAAWrD,WACTK,OAAOe,MAAM,EACbA,UAAUf,OAAOqE,YAAY,EAC7BrD,wBAAwBhB,OAAOgB,oBAAoB,EACnDC,sBAAsBjB,OAAOiB,kBAAkB;0BAGjD,cAAA,KAAC8B;oBAAIC,WAAWrD,WAAWK,OAAOsE,KAAK,EAAE7D,UAAU,CAACD,YAAYR,OAAOuE,WAAW;8BAC/E1B;;;;;AAMb,GACA;AAEF5C,YAAYuE,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected' | 'onFocus'\n>;\n\nexport type CalendarDayTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дня в календаре.\n   */\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\n  /**\n   * Дата, которую представляет этот день.\n   */\n  day: Date;\n  /**\n   * Является ли день сегодняшним.\n   */\n  today?: boolean;\n  /**\n   * Выбран ли день (в режиме одиночного выбора или как часть диапазона).\n   */\n  selected?: boolean;\n  /**\n   * Является ли день началом выделенного диапазона.\n   */\n  selectionStart?: boolean;\n  /**\n   * Является ли день концом выделенного диапазона.\n   */\n  selectionEnd?: boolean;\n  /**\n   * Подсветить день как начало предполагаемого диапазона (при наведении).\n   */\n  hintedSelectionStart?: boolean;\n  /**\n   * Подсветить день как конец предполагаемого диапазона (при наведении).\n   */\n  hintedSelectionEnd?: boolean;\n  /**\n   * Активен ли день (текущая дата в календаре).\n   */\n  active?: boolean;\n  /**\n   * Скрыть день (например, дни соседних месяцев).\n   */\n  hidden?: boolean;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Находится ли день в фокусе (клавиатурная навигация).\n   */\n  focused?: boolean;\n  /**\n   * Подсвечен ли день (ховер).\n   */\n  hinted?: boolean;\n  /**\n   * Принадлежит ли день текущему отображаемому месяцу.\n   */\n  sameMonth?: boolean;\n  /**\n   * Размер компонента.\n   */\n  size?: 's' | 'm';\n  /**\n   * Обработчик выбора/изменения дня.\n   */\n  onChange: (value: Date) => void;\n  /**\n   * Обработчик наведения на день.\n   */\n  onEnter?: (value: Date) => void;\n  /**\n   * Обработчик снятия ховера с дня.\n   */\n  onLeave?: (value: Date) => void;\n  /**\n   * Обработчик фокуса на дне.\n   */\n  onFocus?: (value: Date) => void;\n  /**\n   * Кастомизация отображения содержимого дня.\n   */\n  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const CalendarDay = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    onFocus,\n    onBlur,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    children,\n    renderDayContent,\n    testId,\n    role,\n    'aria-colindex': colIndex,\n    ...restProps\n  }: CalendarDayProps) => {\n    const { locale, direction } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n    const handleFocus = React.useCallback(() => onFocus?.(day), [day, onFocus]);\n\n    const focusVisibleMode = active ? 'outside' : 'inside';\n    const { focusVisible, ...focusEvents } = useFocusVisible();\n    const focusVisibleClassNames = useFocusVisibleClassName({\n      focusVisible,\n      mode: focusVisibleMode,\n    });\n    const focusHandlers = mergeCalls(focusEvents, { onFocus: handleFocus, onBlur });\n\n    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return (\n        <div\n          role={role}\n          aria-colindex={colIndex}\n          className={classNames(styles.hidden, size === 's' && styles.sizeS)}\n        />\n      );\n    }\n\n    return (\n      <Tappable\n        baseClassName={classNames(\n          styles.host,\n          size === 's' && styles.sizeS,\n          direction === 'rtl' && styles.rtl,\n          focusVisibleClassNames,\n        )}\n        role={role}\n        aria-colindex={colIndex}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        getRootRef={ref}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n        {...focusHandlers}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(CalendarDay, 'CalendarDay');\n}\n"],"names":["React","classNames","useFocusVisible","useFocusVisibleClassName","mergeCalls","defineComponentDisplayNames","useConfigProvider","Tappable","VisuallyHidden","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","onFocus","onBlur","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","children","renderDayContent","testId","role","colIndex","restProps","locale","direction","ref","useRef","onClick","useCallback","handleEnter","handleLeave","handleFocus","focusVisibleMode","focusVisible","focusEvents","focusVisibleClassNames","mode","focusHandlers","label","Intl","DateTimeFormat","weekday","month","format","useEffect","current","focus","content","useMemo","div","className","dayNumber","span","aria-hidden","getDate","aria-colindex","sizeS","baseClassName","host","rtl","hoverMode","hostHovered","activeMode","hostActivated","hasActive","getRootRef","onPointerEnter","onPointerLeave","data-testid","notSameMonth","hintedActive","inner","innerActive","process","env","NODE_ENV"],"mappings":"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"}

package/dist/cssm/components/CalendarDays/CalendarDays.js

@@ -3,17 +3,16 @@ 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";
 import styles from "./CalendarDays.module.css";
-export const CalendarDays = ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth = false, dayProps, listenDayChangesForUpdate = false, getRootRef, renderDayContent, dayTestId, ...props })=>{
+export const CalendarDays = ({ 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, ...props })=>{
     const { locale } = useConfigProvider();
-    const ref = useExternRef(getRootRef);
     const now = useTodayDate(listenDayChangesForUpdate);
     const weeks = React.useMemo(()=>getWeeks(viewDate, weekStartsOn), [
         weekStartsOn,
@@ -26,52 +25,81 @@ export const CalendarDays = ({ viewDate, value, weekStartsOn, onDayChange, isDay
     ]);
     const handleDayChange = React.useCallback((date)=>{
         onDayChange(date);
-        ref.current?.focus();
     }, [
-        onDayChange,
-        ref
+        onDayChange
     ]);
-    return /*#__PURE__*/ _jsxs(RootComponent, {
-        ...props,
-        baseClassName: styles.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(styles.row, size === 's' && styles.rowSizeS),
-                children: daysNames.map((dayName)=>/*#__PURE__*/ _jsx(Footnote, {
-                        className: styles.weekday,
-                        children: dayName
-                    }, dayName))
+            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                "aria-live": "polite",
+                id: viewDateLabelId,
+                children: currentMonthLabel
             }),
-            weeks.map((week, i)=>/*#__PURE__*/ _jsx("div", {
-                    className: classNames(styles.row, size === 's' && styles.rowSizeS),
-                    children: week.map((day, i)=>{
-                        const sameMonth = isSameMonth(day, viewDate);
-                        return /*#__PURE__*/ _jsx(CalendarDay, {
-                            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)
-                        }, day.toISOString());
-                    })
-                }, i))
+            /*#__PURE__*/ _jsxs(RootComponent, {
+                role: "grid",
+                ...props,
+                baseClassName: styles.host,
+                "aria-labelledby": viewDateLabelId,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        role: "row",
+                        "aria-rowindex": 1,
+                        className: classNames(styles.row, size === 's' && styles.rowSizeS),
+                        children: daysNames.map(({ short: shortDayName, long: longDayName })=>/*#__PURE__*/ _jsx(Footnote, {
+                                role: "columnheader",
+                                "aria-label": longDayName,
+                                className: styles.weekday,
+                                children: shortDayName
+                            }, shortDayName))
+                    }),
+                    weeks.map((week, i)=>/*#__PURE__*/ _jsx("div", {
+                            role: "row",
+                            "aria-rowindex": i + 2,
+                            className: classNames(styles.row, size === 's' && styles.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, {
+                                    role: "gridcell",
+                                    "aria-current": isToday ? 'date' : undefined,
+                                    "aria-selected": isActive ? 'true' : 'false',
+                                    "aria-colindex": i + 1,
+                                    tabIndex: 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?.(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)
+                                }, day.toISOString());
+                            })
+                        }, i))
+                ]
+            })
         ]
     });
 };

package/dist/cssm/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","styles","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","host","div","className","row","rowSizeS","map","dayName","weekday","week","i","day","sameMonth","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted","testId","rowDay","toISOString"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAAEC,WAAW,QAAQ,WAAW;AAClD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,wBAAqB;AAE5D,SACEC,WAAW,QAIN,gCAA6B;AACpC,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,4BAA4B;AAkC/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,yBAAyB,EACzBC,uBAAuB,EACvBC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,uBAAuB,KAAK,EAC5BC,QAAQ,EACRC,4BAA4B,KAAK,EACjCC,UAAU,EACVC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,OACe;IAClB,MAAM,EAAEC,MAAM,EAAE,GAAG5B;IACnB,MAAM6B,MAAMlC,aAAa6B;IACzB,MAAMM,MAAMlC,aAAa2B;IAEzB,MAAMQ,QAAQxC,MAAMyC,OAAO,CAAC,IAAMlC,SAASO,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAM4B,YAAY1C,MAAMyC,OAAO,CAC7B,IAAMnC,aAAaiC,KAAKvB,cAAcqB,SACtC;QAACA;QAAQE;QAAKvB;KAAa;IAG7B,MAAM2B,kBAAkB3C,MAAM4C,WAAW,CACvC,CAACC;QACC5B,YAAY4B;QAEZP,IAAIQ,OAAO,EAAEC;IACf,GACA;QAAC9B;QAAaqB;KAAI;IAGpB,qBACE,MAAC5B;QAAe,GAAG0B,KAAK;QAAEY,eAAepC,OAAOqC,IAAI;QAAEhB,YAAYK;;0BAChE,KAACY;gBAAIC,WAAWlD,WAAWW,OAAOwC,GAAG,EAAEvB,SAAS,OAAOjB,OAAOyC,QAAQ;0BACnEX,UAAUY,GAAG,CAAC,CAACC,wBACd,KAAC5C;wBAAuBwC,WAAWvC,OAAO4C,OAAO;kCAC9CD;uBADYA;;YAMlBf,MAAMc,GAAG,CAAC,CAACG,MAAMC,kBAChB,KAACR;oBAAIC,WAAWlD,WAAWW,OAAOwC,GAAG,EAAEvB,SAAS,OAAOjB,OAAOyC,QAAQ;8BACnEI,KAAKH,GAAG,CAAC,CAACK,KAAKD;wBACd,MAAME,YAAYzD,YAAYwD,KAAK7C;wBACnC,qBACE,KAACN;4BAECmD,KAAKA;4BACLE,OAAO3D,UAAUyD,KAAKpB;4BACtBuB,QAAQ3C,YAAYwC;4BACpBI,UAAUpB;4BACVqB,QAAQ,CAAClC,wBAAwB,CAAC8B;4BAClCK,UAAUrC,cAAc+B;4BACxBO,gBAAgB7C,oBAAoBsC,KAAKD;4BACzCS,cAAc/C,kBAAkBuC,KAAKD;4BACrCU,sBAAsB3C,4BAA4BkC,KAAKD;4BACvDW,oBAAoB3C,0BAA0BiC,KAAKD;4BACnDY,UAAUpD,gBAAgByC;4BAC1BY,SAAS5C,aAAagC;4BACtBa,SAASlD;4BACTmD,SAASlD;4BACTmD,QAAQlD,cAAcmC;4BACtBC,WAAWA;4BACX/B,MAAMA;4BACNK,kBAAkBA;4BAClByC,QAAQxC;4BACP,GAAGJ,QAAQ;4BACZoB,WAAWlD,WAAW8B,UAAUoB,WAAWvC,OAAOgE,MAAM;2BArBnDjB,IAAIkB,WAAW;oBAwB1B;mBA7B4EnB;;;AAkCtF,EAAE"}
+{"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","styles","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","host","aria-labelledby","div","aria-rowindex","className","row","rowSizeS","map","short","shortDayName","long","longDayName","aria-label","weekday","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","rowDay","toISOString"],"mappings":"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"}