@vkontakte/vkui 7.5.4 → 7.6.0

package/dist/cssm/components/Banner/Banner.module.css

@@ -47,7 +47,7 @@
 
 .subtitle,
 .extraSubtitle {
-  color: var(--vkui--color_text_subhead);
+  opacity: 0.72;
 }
 
 .bg {
@@ -117,11 +117,6 @@
   color: var(--vkui--color_text_contrast);
 }
 
-.inverted .subtitle {
-  color: var(--vkui--color_text_contrast);
-  opacity: 0.72;
-}
-
 /**
  * Size "m"
  */

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

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, isSameDate } from "@vkontakte/vkjs";
-import { isSameDay, isSameMonth, startOfMonth } from "date-fns";
+import { startOfMonth } from "date-fns";
 import { useCalendar } from "../../hooks/useCalendar.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { Keys, pressedKey } from "../../lib/accessibility.js";
 import { clamp, isFirstDay, isLastDay, navigateDate, NAVIGATION_KEYS, setTimeEqual } from "../../lib/calendar.js";
-import { convertDateFromTimeZone, convertDateToTimeZone } from "../../lib/date.js";
+import { convertDateFromTimeZone, convertDateToTimeZone, isSameMonth } from "../../lib/date.js";
 import { isHTMLElement } from "../../lib/dom.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { warnOnce } from "../../lib/warnOnce.js";
@@ -106,7 +106,7 @@ const warn = warnOnce('Calendar');
         minDateTime
     ]);
     const onDayFocus = React.useCallback((date)=>{
-        if (focusedDay && isSameDay(focusedDay, date)) {
+        if (focusedDay && isSameDate(focusedDay, date)) {
             return;
         }
         setFocusedDay(date);
@@ -119,7 +119,7 @@ const warn = warnOnce('Calendar');
         setFocusedDay
     ]);
     // activeDay это день в календаре соответствующий значению в инпуте
-    const isDayActive = React.useCallback((day)=>Boolean(timeZonedValue && isSameDay(day, timeZonedValue)), [
+    const isDayActive = React.useCallback((day)=>Boolean(timeZonedValue && isSameDate(day, timeZonedValue)), [
         timeZonedValue
     ]);
     const isFocusableDayInViewDateMonth = focusableDay && isSameMonth(focusableDay, viewDate);
@@ -132,7 +132,7 @@ const warn = warnOnce('Calendar');
    */ const isDayFocusable = React.useCallback((day)=>{
         // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex="0",
         if (isFocusableDayInViewDateMonth) {
-            return isSameDay(focusableDay, day);
+            return isSameDate(focusableDay, day);
         }
         // при открытии календаря focusableDay не определён,
         // поэтому tabIndex="0" будет у дня, соответствующего дню в инпуте
@@ -141,7 +141,7 @@ const warn = warnOnce('Calendar');
         }
         // при переключении месяца любая навигация с помощью Tab начинается
         // с первого дня месяца.
-        return isSameDay(startOfMonth(viewDate), day);
+        return isSameDate(startOfMonth(viewDate), day);
     }, [
         focusableDay,
         viewDate,

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, isSameDate } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth, startOfMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  clamp,\n  isFirstDay,\n  isLastDay,\n  navigateDate,\n  NAVIGATION_KEYS,\n  setTimeEqual,\n} 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://vkui.io/components/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    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  // соотвествует дню, на котором можно сфокусироваться с помощью Tab\n  const [focusableDay, setFocusableDay] = React.useState<Date>();\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      const key = pressedKey(event);\n      if (key && NAVIGATION_KEYS.includes(key)) {\n        event.preventDefault();\n\n        const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, 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 (key === Keys.TAB) {\n        setFocusedDay(undefined);\n        setFocusableDay(focusedDay);\n\n        return;\n      }\n\n      if ((key === Keys.ENTER || key === Keys.SPACE) && 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    },\n    [timeZonedValue, updateValue, maxDateTime, minDateTime],\n  );\n\n  const onDayFocus = React.useCallback(\n    (date: Date) => {\n      if (focusedDay && isSameDay(focusedDay, date)) {\n        return;\n      }\n\n      setFocusedDay(date);\n      if (!focusableDay || !isSameDate(date, focusableDay)) {\n        setFocusableDay(date);\n      }\n    },\n    [focusableDay, 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","isSameDate","isSameDay","isSameMonth","startOfMonth","useCalendar","useCustomEnsuredControl","Keys","pressedKey","clamp","isFirstDay","isLastDay","navigateDate","NAVIGATION_KEYS","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","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","focusableDay","setFocusableDay","useState","process","env","NODE_ENV","handleKeyDown","event","key","includes","preventDefault","newFocusedDay","TAB","ENTER","SPACE","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":"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"}
+{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isSameDate } from '@vkontakte/vkjs';\nimport { startOfMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  clamp,\n  isFirstDay,\n  isLastDay,\n  navigateDate,\n  NAVIGATION_KEYS,\n  setTimeEqual,\n} from '../../lib/calendar';\nimport { convertDateFromTimeZone, convertDateToTimeZone, isSameMonth } 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://vkui.io/components/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    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  // соотвествует дню, на котором можно сфокусироваться с помощью Tab\n  const [focusableDay, setFocusableDay] = React.useState<Date>();\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      const key = pressedKey(event);\n      if (key && NAVIGATION_KEYS.includes(key)) {\n        event.preventDefault();\n\n        const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, 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 (key === Keys.TAB) {\n        setFocusedDay(undefined);\n        setFocusableDay(focusedDay);\n\n        return;\n      }\n\n      if ((key === Keys.ENTER || key === Keys.SPACE) && 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    },\n    [timeZonedValue, updateValue, maxDateTime, minDateTime],\n  );\n\n  const onDayFocus = React.useCallback(\n    (date: Date) => {\n      if (focusedDay && isSameDate(focusedDay, date)) {\n        return;\n      }\n\n      setFocusedDay(date);\n      if (!focusableDay || !isSameDate(date, focusableDay)) {\n        setFocusableDay(date);\n      }\n    },\n    [focusableDay, focusedDay, setFocusedDay],\n  );\n\n  // activeDay это день в календаре соответствующий значению в инпуте\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(timeZonedValue && isSameDate(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 isSameDate(focusableDay, day);\n      }\n\n      // при открытии календаря focusableDay не определён,\n      // поэтому tabIndex=\"0\" будет у дня, соответствующего дню в инпуте\n      if (isInputValueDateInViewDateMonth) {\n        return isDayActive(day);\n      }\n\n      // при переключении месяца любая навигация с помощью Tab начинается\n      // с первого дня месяца.\n      return isSameDate(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","isSameDate","startOfMonth","useCalendar","useCustomEnsuredControl","Keys","pressedKey","clamp","isFirstDay","isLastDay","navigateDate","NAVIGATION_KEYS","setTimeEqual","convertDateFromTimeZone","convertDateToTimeZone","isSameMonth","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","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","focusableDay","setFocusableDay","useState","process","env","NODE_ENV","handleKeyDown","event","key","includes","preventDefault","newFocusedDay","TAB","ENTER","SPACE","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":"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"}

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

@@ -1,10 +1,10 @@
 'use client';
 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 { classNames, isSameDate } from "@vkontakte/vkjs";
 import { useTodayDate } from "../../hooks/useTodayDate.js";
 import { getDaysNames, getWeeks } from "../../lib/calendar.js";
+import { isSameMonth } from "../../lib/date.js";
 import { CalendarDay } from "../CalendarDay/CalendarDay.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -64,7 +64,7 @@ export const CalendarDays = ({ viewDate, value, weekStartsOn, onDayChange, isDay
                             children: week.map((day, i)=>{
                                 const sameMonth = isSameMonth(day, viewDate);
                                 const isHidden = !showNeighboringMonth && !sameMonth;
-                                const isToday = isSameDay(day, now);
+                                const isToday = isSameDate(day, now);
                                 const isActive = isDayActive(day);
                                 const isFocused = isDayFocused(day);
                                 return /*#__PURE__*/ _jsx(CalendarDay, {

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 { 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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"}
+{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isSameDate } from '@vkontakte/vkjs';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport { isSameMonth } from '../../lib/date';\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 = isSameDate(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","isSameDate","useTodayDate","getDaysNames","getWeeks","isSameMonth","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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"}

package/dist/cssm/components/CalendarRange/CalendarRange.js

@@ -1,10 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isWithinInterval, startOfDay, subMonths } from "date-fns";
+import { isSameDate } from "@vkontakte/vkjs";
+import { addMonths, startOfDay, subMonths } from "date-fns";
 import { useCalendar } from "../../hooks/useCalendar.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { isFirstDay, isLastDay } from "../../lib/calendar.js";
+import { endOfDay, isWithinInterval } from "../../lib/date.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -14,10 +16,10 @@ const getIsDaySelected = (day, value)=>{
     if (!value?.[0] || !value[1]) {
         return false;
     }
-    return isWithinInterval(day, {
-        start: startOfDay(value[0]),
-        end: endOfDay(value[1])
-    });
+    return isWithinInterval(day, [
+        startOfDay(value[0]),
+        endOfDay(value[1])
+    ]);
 };
 /**
  * @see https://vkui.io/components/calendar-range
@@ -58,17 +60,17 @@ const getIsDaySelected = (day, value)=>{
             ];
         }
         const [start] = value;
-        if (start && isSameDay(date, start)) {
+        if (start && isSameDate(date, start)) {
             return [
                 startOfDay(start),
                 endOfDay(start)
             ];
-        } else if (start && isBefore(date, start)) {
+        } else if (start && date < start) {
             return [
                 startOfDay(date),
                 endOfDay(start)
             ];
-        } else if (start && isAfter(date, start)) {
+        } else if (start && date > start) {
             return [
                 start,
                 endOfDay(date)
@@ -88,19 +90,19 @@ const getIsDaySelected = (day, value)=>{
     const isDaySelected = React.useCallback((day)=>getIsDaySelected(day, value), [
         value
     ]);
-    const isDayActive = React.useCallback((day)=>Boolean(value?.[0] && isSameDay(day, value[0]) || value?.[1] && isSameDay(day, value[1])), [
+    const isDayActive = React.useCallback((day)=>Boolean(value?.[0] && isSameDate(day, value[0]) || value?.[1] && isSameDate(day, value[1])), [
         value
     ]);
-    const isDaySelectionEnd = React.useCallback((day, dayOfWeek)=>Boolean(isLastDay(day, dayOfWeek) || value?.[1] && isSameDay(day, value[1])), [
+    const isDaySelectionEnd = React.useCallback((day, dayOfWeek)=>Boolean(isLastDay(day, dayOfWeek) || value?.[1] && isSameDate(day, value[1])), [
         value
     ]);
-    const isHintedDaySelectionEnd = React.useCallback((day, dayOfWeek)=>Boolean(isLastDay(day, dayOfWeek) || hintedDate?.[1] && isSameDay(day, hintedDate[1])), [
+    const isHintedDaySelectionEnd = React.useCallback((day, dayOfWeek)=>Boolean(isLastDay(day, dayOfWeek) || hintedDate?.[1] && isSameDate(day, hintedDate[1])), [
         hintedDate
     ]);
-    const isDaySelectionStart = React.useCallback((day, dayOfWeek)=>Boolean(isFirstDay(day, dayOfWeek) || value?.[0] && isSameDay(day, value[0])), [
+    const isDaySelectionStart = React.useCallback((day, dayOfWeek)=>Boolean(isFirstDay(day, dayOfWeek) || value?.[0] && isSameDate(day, value[0])), [
         value
     ]);
-    const isHintedDaySelectionStart = React.useCallback((day, dayOfWeek)=>Boolean(isFirstDay(day, dayOfWeek) || hintedDate?.[0] && isSameDay(day, hintedDate[0])), [
+    const isHintedDaySelectionStart = React.useCallback((day, dayOfWeek)=>Boolean(isFirstDay(day, dayOfWeek) || hintedDate?.[0] && isSameDate(day, hintedDate[0])), [
         hintedDate
     ]);
     const onDayEnter = React.useCallback((date)=>setHintedDate(getNewValue(date)), [
@@ -131,7 +133,7 @@ const getIsDaySelected = (day, value)=>{
         isDayActive
     });
     const onDayFocus = React.useCallback((date)=>{
-        if (focusedDay && isSameDay(focusedDay, date)) {
+        if (focusedDay && isSameDate(focusedDay, date)) {
             return;
         }
         setFocusedDay(date);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isWithinInterval,\n  startOfDay,\n  subMonths,\n} from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { isFirstDay, isLastDay } from '../../lib/calendar';\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 { RootComponent } from '../RootComponent/RootComponent';\nimport type { DateRangeType } from './types';\nimport { useCalendarKeyboardNavigation, useIsDayFocusable } from './utils';\nimport styles from './CalendarRange.module.css';\n\nexport type { DateRangeType };\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.\n   */\n  leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.\n   */\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarRangeTestsProps {\n  /**\n   * Текущий выбранный промежуток.\n   */\n  value?: DateRangeType | null;\n  /**\n   * Начальный промежуток при монтировании.\n   */\n  defaultValue?: DateRangeType | null;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean;\n  /**\n   * `aria-label` для изменения дня.\n   *\n   * @deprecated Since 7.4.0.\n   *\n   * Будет удалeно в **VKUI v8**. Использовалось для задания 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  onChange?: (value: DateRangeType | undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`\n  /**\n   * Функция для проверки запрета выбора даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  /**\n   * @deprecated Свойство не используется.\n   */\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType | null) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return isWithinInterval(day, { start: startOfDay(value[0]), end: endOfDay(value[1]) });\n};\n\n/**\n * @see https://vkui.io/components/calendar-range\n */\nexport const CalendarRange = ({\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  'aria-label': ariaLabel = 'Календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  dayTestId,\n  leftPartHeaderTestsData,\n  rightPartHeaderTestsData,\n  getRootRef,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\n  const _onChange = React.useCallback(\n    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),\n    [onChange],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n\n  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const {\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    handleFirstCalendarKeyDown,\n    handleSecondCalendarKeyDown,\n    handleDayFocus,\n  } = useCalendarKeyboardNavigation({\n    focusedDay,\n    setFocusedDay,\n    value,\n    viewDates: [viewDate, secondViewDate],\n    setViewDate,\n  });\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      const isRangeSelected = value && !!value[0] && !!value[1];\n      if (isValueEmpty || isRangeSelected) {\n        return [date, null];\n      }\n\n      const [start] = value;\n      if (start && isSameDay(date, start)) {\n        return [startOfDay(start), endOfDay(start)];\n      } else if (start && isBefore(date, start)) {\n        return [startOfDay(date), endOfDay(start)];\n      } else if (start && isAfter(date, start)) {\n        return [start, endOfDay(date)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      updateValue(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [updateValue, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  const onRightPartViewDateChange = React.useCallback(\n    (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n    [setViewDate],\n  );\n\n  const isDayFocusableInFirstCalendar = useIsDayFocusable({\n    value,\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    viewDate,\n    isDayActive,\n  });\n\n  const isDayFocusableInSecondCalendar = useIsDayFocusable({\n    value,\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    viewDate: secondViewDate,\n    isDayActive,\n  });\n\n  const onDayFocus = React.useCallback(\n    (date: Date) => {\n      if (focusedDay && isSameDay(focusedDay, date)) {\n        return;\n      }\n\n      setFocusedDay(date);\n      handleDayFocus(date);\n    },\n    [focusedDay, handleDayFocus, setFocusedDay],\n  );\n\n  return (\n    <RootComponent\n      aria-label={ariaLabel}\n      {...props}\n      baseClassName={styles.host}\n      getRootRef={getRootRef}\n    >\n      <div className={styles.inner}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonthHidden\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles.header}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\n          {...leftPartHeaderTestsData}\n        />\n        <CalendarDays\n          viewDate={viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleFirstCalendarKeyDown}\n          onDayFocus={onDayFocus}\n          isDayFocused={isDayFocused}\n          isDayFocusable={isDayFocusableInFirstCalendar}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          dayTestId={dayTestId}\n        />\n      </div>\n      <div className={styles.inner}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={onRightPartViewDateChange}\n          prevMonthHidden\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles.header}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          nextMonthIcon={nextMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\n          {...rightPartHeaderTestsData}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleSecondCalendarKeyDown}\n          onDayFocus={onDayFocus}\n          isDayFocused={isDayFocused}\n          isDayFocusable={isDayFocusableInSecondCalendar}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          dayTestId={dayTestId}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","isWithinInterval","startOfDay","subMonths","useCalendar","useCustomEnsuredControl","isFirstDay","isLastDay","CalendarDays","CalendarHeader","RootComponent","useCalendarKeyboardNavigation","useIsDayFocusable","styles","getIsDaySelected","day","value","start","end","CalendarRange","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","ariaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","_onChange","useCallback","newValue","undefined","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","focusableDayOnFirstCalendar","focusableDayOnSecondCalendar","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","viewDates","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","isDayFocusableInFirstCalendar","isDayFocusableInSecondCalendar","onDayFocus","aria-label","baseClassName","host","div","className","inner","nextMonthHidden","onPrevMonth","header","onKeyDown","isDayFocusable","prevMonthHidden","onNextMonth"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { isSameDate } from '@vkontakte/vkjs';\nimport { addMonths, startOfDay, subMonths } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { isFirstDay, isLastDay } from '../../lib/calendar';\nimport { endOfDay, isWithinInterval } from '../../lib/date';\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 { RootComponent } from '../RootComponent/RootComponent';\nimport type { DateRangeType } from './types';\nimport { useCalendarKeyboardNavigation, useIsDayFocusable } from './utils';\nimport styles from './CalendarRange.module.css';\n\nexport type { DateRangeType };\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.\n   */\n  leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.\n   */\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarRangeTestsProps {\n  /**\n   * Текущий выбранный промежуток.\n   */\n  value?: DateRangeType | null;\n  /**\n   * Начальный промежуток при монтировании.\n   */\n  defaultValue?: DateRangeType | null;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean;\n  /**\n   * `aria-label` для изменения дня.\n   *\n   * @deprecated Since 7.4.0.\n   *\n   * Будет удалeно в **VKUI v8**. Использовалось для задания 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  onChange?: (value: DateRangeType | undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`\n  /**\n   * Функция для проверки запрета выбора даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  /**\n   * @deprecated Свойство не используется.\n   */\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType | null) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return isWithinInterval(day, [startOfDay(value[0]), endOfDay(value[1])]);\n};\n\n/**\n * @see https://vkui.io/components/calendar-range\n */\nexport const CalendarRange = ({\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  'aria-label': ariaLabel = 'Календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  dayTestId,\n  leftPartHeaderTestsData,\n  rightPartHeaderTestsData,\n  getRootRef,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\n  const _onChange = React.useCallback(\n    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),\n    [onChange],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n\n  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const {\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    handleFirstCalendarKeyDown,\n    handleSecondCalendarKeyDown,\n    handleDayFocus,\n  } = useCalendarKeyboardNavigation({\n    focusedDay,\n    setFocusedDay,\n    value,\n    viewDates: [viewDate, secondViewDate],\n    setViewDate,\n  });\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      const isRangeSelected = value && !!value[0] && !!value[1];\n      if (isValueEmpty || isRangeSelected) {\n        return [date, null];\n      }\n\n      const [start] = value;\n      if (start && isSameDate(date, start)) {\n        return [startOfDay(start), endOfDay(start)];\n      } else if (start && date < start) {\n        return [startOfDay(date), endOfDay(start)];\n      } else if (start && date > start) {\n        return [start, endOfDay(date)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      updateValue(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [updateValue, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean(\n        (value?.[0] && isSameDate(day, value[0])) || (value?.[1] && isSameDate(day, value[1])),\n      ),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDate(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDate(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDate(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDate(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  const onRightPartViewDateChange = React.useCallback(\n    (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n    [setViewDate],\n  );\n\n  const isDayFocusableInFirstCalendar = useIsDayFocusable({\n    value,\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    viewDate,\n    isDayActive,\n  });\n\n  const isDayFocusableInSecondCalendar = useIsDayFocusable({\n    value,\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    viewDate: secondViewDate,\n    isDayActive,\n  });\n\n  const onDayFocus = React.useCallback(\n    (date: Date) => {\n      if (focusedDay && isSameDate(focusedDay, date)) {\n        return;\n      }\n\n      setFocusedDay(date);\n      handleDayFocus(date);\n    },\n    [focusedDay, handleDayFocus, setFocusedDay],\n  );\n\n  return (\n    <RootComponent\n      aria-label={ariaLabel}\n      {...props}\n      baseClassName={styles.host}\n      getRootRef={getRootRef}\n    >\n      <div className={styles.inner}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonthHidden\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles.header}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\n          {...leftPartHeaderTestsData}\n        />\n        <CalendarDays\n          viewDate={viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleFirstCalendarKeyDown}\n          onDayFocus={onDayFocus}\n          isDayFocused={isDayFocused}\n          isDayFocusable={isDayFocusableInFirstCalendar}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          dayTestId={dayTestId}\n        />\n      </div>\n      <div className={styles.inner}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={onRightPartViewDateChange}\n          prevMonthHidden\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles.header}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          nextMonthIcon={nextMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\n          {...rightPartHeaderTestsData}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleSecondCalendarKeyDown}\n          onDayFocus={onDayFocus}\n          isDayFocused={isDayFocused}\n          isDayFocusable={isDayFocusableInSecondCalendar}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          dayTestId={dayTestId}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","isSameDate","addMonths","startOfDay","subMonths","useCalendar","useCustomEnsuredControl","isFirstDay","isLastDay","endOfDay","isWithinInterval","CalendarDays","CalendarHeader","RootComponent","useCalendarKeyboardNavigation","useIsDayFocusable","styles","getIsDaySelected","day","value","CalendarRange","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","ariaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","_onChange","useCallback","newValue","undefined","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","focusableDayOnFirstCalendar","focusableDayOnSecondCalendar","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","viewDates","getNewValue","date","isValueEmpty","isRangeSelected","start","onDayChange","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","isDayFocusableInFirstCalendar","isDayFocusableInSecondCalendar","onDayFocus","aria-label","baseClassName","host","div","className","inner","nextMonthHidden","onPrevMonth","header","onKeyDown","isDayFocusable","prevMonthHidden","onNextMonth"],"mappings":"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"}

package/dist/cssm/components/CalendarRange/utils.js

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { isSameDate } from "@vkontakte/vkjs";
-import { isAfter, isBefore, isSameDay, isSameMonth, startOfMonth } from "date-fns";
+import { startOfMonth } from "date-fns";
 import { Keys, pressedKey } from "../../lib/accessibility.js";
 import { navigateDate, NAVIGATION_KEYS } from "../../lib/calendar.js";
+import { isSameMonth } from "../../lib/date.js";
 import { isHTMLElement } from "../../lib/dom.js";
 export function useCalendarKeyboardNavigation({ focusedDay, value, setFocusedDay, viewDates: [firstCalendarViewDate, secondCalendarViewDate], setViewDate }) {
     // соотвествует дню, на котором можно сфокусироваться с помощью Tab
@@ -22,13 +23,13 @@ export function useCalendarKeyboardNavigation({ focusedDay, value, setFocusedDay
             if (isFirst) {
                 if (isSameMonth(newFocusedDay, firstCalendarViewDate)) {
                     setFocusableDayOnFirstCalendar(newFocusedDay);
-                } else if (isAfter(newFocusedDay, firstCalendarViewDate)) {
+                } else if (newFocusedDay > firstCalendarViewDate) {
                     setFocusableDayOnSecondCalendar(newFocusedDay);
                 }
             } else {
                 if (isSameMonth(newFocusedDay, secondCalendarViewDate)) {
                     setFocusableDayOnSecondCalendar(newFocusedDay);
-                } else if (isBefore(newFocusedDay, secondCalendarViewDate)) {
+                } else if (newFocusedDay < secondCalendarViewDate) {
                     setFocusableDayOnFirstCalendar(newFocusedDay);
                 }
             }
@@ -98,7 +99,7 @@ export function useCalendarKeyboardNavigation({ focusedDay, value, setFocusedDay
     const isDayFocusable = React.useCallback((day)=>{
         // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex="0",
         if (isCalendarHasFocusableDay) {
-            return Boolean(focusableDayOnFirstCalendar && isSameDay(focusableDayOnFirstCalendar, day) || focusableDayOnSecondCalendar && isSameDay(focusableDayOnSecondCalendar, day));
+            return Boolean(focusableDayOnFirstCalendar && isSameDate(focusableDayOnFirstCalendar, day) || focusableDayOnSecondCalendar && isSameDate(focusableDayOnSecondCalendar, day));
         }
         // при открытии календаря focusableDay не определён,
         // поэтому tabIndex="0" будет у дня, соответствующего дню в инпуте
@@ -107,7 +108,7 @@ export function useCalendarKeyboardNavigation({ focusedDay, value, setFocusedDay
         }
         // при переключении месяца любая навигация с помощью Tab начинается
         // с первого дня месяца.
-        return isSameDay(startOfMonth(viewDate), day);
+        return isSameDate(startOfMonth(viewDate), day);
     }, [
         isCalendarHasFocusableDay,
         isValueVisibleOnCalendar,

package/dist/cssm/components/CalendarRange/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarRange/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport { isSameDate } from '@vkontakte/vkjs';\nimport { isAfter, isBefore, isSameDay, isSameMonth, startOfMonth } from 'date-fns';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';\nimport { isHTMLElement } from '../../lib/dom';\nimport type { DateRangeType } from './types';\n\nexport function useCalendarKeyboardNavigation({\n  focusedDay,\n  value,\n  setFocusedDay,\n  viewDates: [firstCalendarViewDate, secondCalendarViewDate],\n  setViewDate,\n}: {\n  focusedDay: Date | undefined;\n  setViewDate: (date: Date) => void;\n  setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;\n  viewDates: [Date, Date];\n  value: DateRangeType | null | undefined;\n}) {\n  // соотвествует дню, на котором можно сфокусироваться с помощью Tab\n  const [focusableDayOnFirstCalendar, setFocusableDayOnFirstCalendar] = React.useState<Date>();\n  const [focusableDayOnSecondCalendar, setFocusableDayOnSecondCalendar] = React.useState<Date>();\n\n  const handleCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent, isFirst: boolean) => {\n      const key = pressedKey(event);\n      if (!key) {\n        return;\n      }\n\n      if (NAVIGATION_KEYS.includes(key)) {\n        event.preventDefault();\n\n        const newFocusedDay = navigateDate(focusedDay ?? value?.[0], key);\n\n        if (\n          newFocusedDay &&\n          !isSameMonth(newFocusedDay, firstCalendarViewDate) &&\n          !isSameMonth(newFocusedDay, secondCalendarViewDate)\n        ) {\n          setViewDate(newFocusedDay);\n        }\n\n        if (isFirst) {\n          if (isSameMonth(newFocusedDay, firstCalendarViewDate)) {\n            setFocusableDayOnFirstCalendar(newFocusedDay);\n          } else if (isAfter(newFocusedDay, firstCalendarViewDate)) {\n            setFocusableDayOnSecondCalendar(newFocusedDay);\n          }\n        } else {\n          if (isSameMonth(newFocusedDay, secondCalendarViewDate)) {\n            setFocusableDayOnSecondCalendar(newFocusedDay);\n          } else if (isBefore(newFocusedDay, secondCalendarViewDate)) {\n            setFocusableDayOnFirstCalendar(newFocusedDay);\n          }\n        }\n\n        setFocusedDay(newFocusedDay);\n\n        return;\n      }\n\n      if (key === Keys.TAB) {\n        setFocusedDay(undefined);\n        if (isFirst) {\n          setFocusableDayOnFirstCalendar(focusedDay);\n        } else {\n          setFocusableDayOnSecondCalendar(focusedDay);\n        }\n\n        return;\n      }\n\n      if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {\n        event.preventDefault();\n        event.target.click?.();\n      }\n    },\n    [focusedDay, value, firstCalendarViewDate, secondCalendarViewDate, setFocusedDay, setViewDate],\n  );\n\n  const handleFirstCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      handleCalendarKeyDown(event, true);\n    },\n    [handleCalendarKeyDown],\n  );\n\n  const handleSecondCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      handleCalendarKeyDown(event, false);\n    },\n    [handleCalendarKeyDown],\n  );\n\n  const handleDayFocus = React.useCallback(\n    (value: Date) => {\n      if (\n        isSameMonth(firstCalendarViewDate, value) &&\n        (!focusableDayOnFirstCalendar || !isSameDate(focusableDayOnFirstCalendar, value))\n      ) {\n        setFocusableDayOnFirstCalendar(value);\n      }\n      if (\n        isSameMonth(secondCalendarViewDate, value) &&\n        (!focusableDayOnSecondCalendar || !isSameDate(focusableDayOnSecondCalendar, value))\n      ) {\n        setFocusableDayOnSecondCalendar(value);\n      }\n    },\n    [\n      firstCalendarViewDate,\n      focusableDayOnFirstCalendar,\n      focusableDayOnSecondCalendar,\n      secondCalendarViewDate,\n    ],\n  );\n\n  return {\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    handleFirstCalendarKeyDown,\n    handleSecondCalendarKeyDown,\n    handleDayFocus,\n  };\n}\n\n/**\n * Возвращает функцию, которая позволяет проверить является ли день в календаре днём на который\n * можно попасть с помощью Tab.\n * Единственный день в таблице календаря у которого есть tabIndex=\"0\"\n * Чтобы на него можно было попасть из заголовка календаря.\n */\nexport function useIsDayFocusable({\n  value,\n  focusableDayOnFirstCalendar,\n  focusableDayOnSecondCalendar,\n  viewDate,\n  isDayActive,\n}: {\n  value: DateRangeType | null | undefined;\n  focusableDayOnFirstCalendar: Date | undefined;\n  focusableDayOnSecondCalendar: Date | undefined;\n  viewDate: Date;\n  isDayActive: (date: Date) => boolean;\n}) {\n  const isValueVisibleOnCalendar = Boolean(\n    value &&\n      ((value[0] && isSameMonth(value[0], viewDate)) ||\n        (value[1] && isSameMonth(value[1], viewDate))),\n  );\n\n  const isCalendarHasFocusableDay = Boolean(\n    (focusableDayOnFirstCalendar && isSameMonth(focusableDayOnFirstCalendar, viewDate)) ||\n      (focusableDayOnSecondCalendar && isSameMonth(focusableDayOnSecondCalendar, viewDate)),\n  );\n\n  const isDayFocusable = React.useCallback(\n    (day: Date) => {\n      // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex=\"0\",\n      if (isCalendarHasFocusableDay) {\n        return Boolean(\n          (focusableDayOnFirstCalendar && isSameDay(focusableDayOnFirstCalendar, day)) ||\n            (focusableDayOnSecondCalendar && isSameDay(focusableDayOnSecondCalendar, day)),\n        );\n      }\n\n      // при открытии календаря focusableDay не определён,\n      // поэтому tabIndex=\"0\" будет у дня, соответствующего дню в инпуте\n      if (isValueVisibleOnCalendar) {\n        return isDayActive(day);\n      }\n\n      // при переключении месяца любая навигация с помощью Tab начинается\n      // с первого дня месяца.\n      return isSameDay(startOfMonth(viewDate), day);\n    },\n    [\n      isCalendarHasFocusableDay,\n      isValueVisibleOnCalendar,\n      viewDate,\n      isDayActive,\n      focusableDayOnFirstCalendar,\n      focusableDayOnSecondCalendar,\n    ],\n  );\n  return isDayFocusable;\n}\n"],"names":["React","isSameDate","isAfter","isBefore","isSameDay","isSameMonth","startOfMonth","Keys","pressedKey","navigateDate","NAVIGATION_KEYS","isHTMLElement","useCalendarKeyboardNavigation","focusedDay","value","setFocusedDay","viewDates","firstCalendarViewDate","secondCalendarViewDate","setViewDate","focusableDayOnFirstCalendar","setFocusableDayOnFirstCalendar","useState","focusableDayOnSecondCalendar","setFocusableDayOnSecondCalendar","handleCalendarKeyDown","useCallback","event","isFirst","key","includes","preventDefault","newFocusedDay","TAB","undefined","ENTER","SPACE","target","click","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","useIsDayFocusable","viewDate","isDayActive","isValueVisibleOnCalendar","Boolean","isCalendarHasFocusableDay","isDayFocusable","day"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,QAAQ,WAAW;AACnF,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,YAAY,EAAEC,eAAe,QAAQ,wBAAqB;AACnE,SAASC,aAAa,QAAQ,mBAAgB;AAG9C,OAAO,SAASC,8BAA8B,EAC5CC,UAAU,EACVC,KAAK,EACLC,aAAa,EACbC,WAAW,CAACC,uBAAuBC,uBAAuB,EAC1DC,WAAW,EAOZ;IACC,mEAAmE;IACnE,MAAM,CAACC,6BAA6BC,+BAA+B,GAAGrB,MAAMsB,QAAQ;IACpF,MAAM,CAACC,8BAA8BC,gCAAgC,GAAGxB,MAAMsB,QAAQ;IAEtF,MAAMG,wBAAwBzB,MAAM0B,WAAW,CAC7C,CAACC,OAA4BC;QAC3B,MAAMC,MAAMrB,WAAWmB;QACvB,IAAI,CAACE,KAAK;YACR;QACF;QAEA,IAAInB,gBAAgBoB,QAAQ,CAACD,MAAM;YACjCF,MAAMI,cAAc;YAEpB,MAAMC,gBAAgBvB,aAAaI,cAAcC,OAAO,CAAC,EAAE,EAAEe;YAE7D,IACEG,iBACA,CAAC3B,YAAY2B,eAAef,0BAC5B,CAACZ,YAAY2B,eAAed,yBAC5B;gBACAC,YAAYa;YACd;YAEA,IAAIJ,SAAS;gBACX,IAAIvB,YAAY2B,eAAef,wBAAwB;oBACrDI,+BAA+BW;gBACjC,OAAO,IAAI9B,QAAQ8B,eAAef,wBAAwB;oBACxDO,gCAAgCQ;gBAClC;YACF,OAAO;gBACL,IAAI3B,YAAY2B,eAAed,yBAAyB;oBACtDM,gCAAgCQ;gBAClC,OAAO,IAAI7B,SAAS6B,eAAed,yBAAyB;oBAC1DG,+BAA+BW;gBACjC;YACF;YAEAjB,cAAciB;YAEd;QACF;QAEA,IAAIH,QAAQtB,KAAK0B,GAAG,EAAE;YACpBlB,cAAcmB;YACd,IAAIN,SAAS;gBACXP,+BAA+BR;YACjC,OAAO;gBACLW,gCAAgCX;YAClC;YAEA;QACF;QAEA,IAAI,AAACgB,CAAAA,QAAQtB,KAAK4B,KAAK,IAAIN,QAAQtB,KAAK6B,KAAK,AAAD,KAAMzB,cAAcgB,MAAMU,MAAM,GAAG;YAC7EV,MAAMI,cAAc;YACpBJ,MAAMU,MAAM,CAACC,KAAK;QACpB;IACF,GACA;QAACzB;QAAYC;QAAOG;QAAuBC;QAAwBH;QAAeI;KAAY;IAGhG,MAAMoB,6BAA6BvC,MAAM0B,WAAW,CAClD,CAACC;QACCF,sBAAsBE,OAAO;IAC/B,GACA;QAACF;KAAsB;IAGzB,MAAMe,8BAA8BxC,MAAM0B,WAAW,CACnD,CAACC;QACCF,sBAAsBE,OAAO;IAC/B,GACA;QAACF;KAAsB;IAGzB,MAAMgB,iBAAiBzC,MAAM0B,WAAW,CACtC,CAACZ;QACC,IACET,YAAYY,uBAAuBH,UAClC,CAAA,CAACM,+BAA+B,CAACnB,WAAWmB,6BAA6BN,MAAK,GAC/E;YACAO,+BAA+BP;QACjC;QACA,IACET,YAAYa,wBAAwBJ,UACnC,CAAA,CAACS,gCAAgC,CAACtB,WAAWsB,8BAA8BT,MAAK,GACjF;YACAU,gCAAgCV;QAClC;IACF,GACA;QACEG;QACAG;QACAG;QACAL;KACD;IAGH,OAAO;QACLE;QACAG;QACAgB;QACAC;QACAC;IACF;AACF;AAEA;;;;;CAKC,GACD,OAAO,SAASC,kBAAkB,EAChC5B,KAAK,EACLM,2BAA2B,EAC3BG,4BAA4B,EAC5BoB,QAAQ,EACRC,WAAW,EAOZ;IACC,MAAMC,2BAA2BC,QAC/BhC,SACG,CAAA,AAACA,KAAK,CAAC,EAAE,IAAIT,YAAYS,KAAK,CAAC,EAAE,EAAE6B,aACjC7B,KAAK,CAAC,EAAE,IAAIT,YAAYS,KAAK,CAAC,EAAE,EAAE6B,SAAS;IAGlD,MAAMI,4BAA4BD,QAChC,AAAC1B,+BAA+Bf,YAAYe,6BAA6BuB,aACtEpB,gCAAgClB,YAAYkB,8BAA8BoB;IAG/E,MAAMK,iBAAiBhD,MAAM0B,WAAW,CACtC,CAACuB;QACC,2GAA2G;QAC3G,IAAIF,2BAA2B;YAC7B,OAAOD,QACL,AAAC1B,+BAA+BhB,UAAUgB,6BAA6B6B,QACpE1B,gCAAgCnB,UAAUmB,8BAA8B0B;QAE/E;QAEA,oDAAoD;QACpD,kEAAkE;QAClE,IAAIJ,0BAA0B;YAC5B,OAAOD,YAAYK;QACrB;QAEA,mEAAmE;QACnE,wBAAwB;QACxB,OAAO7C,UAAUE,aAAaqC,WAAWM;IAC3C,GACA;QACEF;QACAF;QACAF;QACAC;QACAxB;QACAG;KACD;IAEH,OAAOyB;AACT"}
+{"version":3,"sources":["../../../../src/components/CalendarRange/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport { isSameDate } from '@vkontakte/vkjs';\nimport { startOfMonth } from 'date-fns';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';\nimport { isSameMonth } from '../../lib/date';\nimport { isHTMLElement } from '../../lib/dom';\nimport type { DateRangeType } from './types';\n\nexport function useCalendarKeyboardNavigation({\n  focusedDay,\n  value,\n  setFocusedDay,\n  viewDates: [firstCalendarViewDate, secondCalendarViewDate],\n  setViewDate,\n}: {\n  focusedDay: Date | undefined;\n  setViewDate: (date: Date) => void;\n  setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;\n  viewDates: [Date, Date];\n  value: DateRangeType | null | undefined;\n}) {\n  // соотвествует дню, на котором можно сфокусироваться с помощью Tab\n  const [focusableDayOnFirstCalendar, setFocusableDayOnFirstCalendar] = React.useState<Date>();\n  const [focusableDayOnSecondCalendar, setFocusableDayOnSecondCalendar] = React.useState<Date>();\n\n  const handleCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent, isFirst: boolean) => {\n      const key = pressedKey(event);\n      if (!key) {\n        return;\n      }\n\n      if (NAVIGATION_KEYS.includes(key)) {\n        event.preventDefault();\n\n        const newFocusedDay = navigateDate(focusedDay ?? value?.[0], key);\n\n        if (\n          newFocusedDay &&\n          !isSameMonth(newFocusedDay, firstCalendarViewDate) &&\n          !isSameMonth(newFocusedDay, secondCalendarViewDate)\n        ) {\n          setViewDate(newFocusedDay);\n        }\n\n        if (isFirst) {\n          if (isSameMonth(newFocusedDay, firstCalendarViewDate)) {\n            setFocusableDayOnFirstCalendar(newFocusedDay);\n          } else if (newFocusedDay > firstCalendarViewDate) {\n            setFocusableDayOnSecondCalendar(newFocusedDay);\n          }\n        } else {\n          if (isSameMonth(newFocusedDay, secondCalendarViewDate)) {\n            setFocusableDayOnSecondCalendar(newFocusedDay);\n          } else if (newFocusedDay < secondCalendarViewDate) {\n            setFocusableDayOnFirstCalendar(newFocusedDay);\n          }\n        }\n\n        setFocusedDay(newFocusedDay);\n\n        return;\n      }\n\n      if (key === Keys.TAB) {\n        setFocusedDay(undefined);\n        if (isFirst) {\n          setFocusableDayOnFirstCalendar(focusedDay);\n        } else {\n          setFocusableDayOnSecondCalendar(focusedDay);\n        }\n\n        return;\n      }\n\n      if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {\n        event.preventDefault();\n        event.target.click?.();\n      }\n    },\n    [focusedDay, value, firstCalendarViewDate, secondCalendarViewDate, setFocusedDay, setViewDate],\n  );\n\n  const handleFirstCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      handleCalendarKeyDown(event, true);\n    },\n    [handleCalendarKeyDown],\n  );\n\n  const handleSecondCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      handleCalendarKeyDown(event, false);\n    },\n    [handleCalendarKeyDown],\n  );\n\n  const handleDayFocus = React.useCallback(\n    (value: Date) => {\n      if (\n        isSameMonth(firstCalendarViewDate, value) &&\n        (!focusableDayOnFirstCalendar || !isSameDate(focusableDayOnFirstCalendar, value))\n      ) {\n        setFocusableDayOnFirstCalendar(value);\n      }\n      if (\n        isSameMonth(secondCalendarViewDate, value) &&\n        (!focusableDayOnSecondCalendar || !isSameDate(focusableDayOnSecondCalendar, value))\n      ) {\n        setFocusableDayOnSecondCalendar(value);\n      }\n    },\n    [\n      firstCalendarViewDate,\n      focusableDayOnFirstCalendar,\n      focusableDayOnSecondCalendar,\n      secondCalendarViewDate,\n    ],\n  );\n\n  return {\n    focusableDayOnFirstCalendar,\n    focusableDayOnSecondCalendar,\n    handleFirstCalendarKeyDown,\n    handleSecondCalendarKeyDown,\n    handleDayFocus,\n  };\n}\n\n/**\n * Возвращает функцию, которая позволяет проверить является ли день в календаре днём на который\n * можно попасть с помощью Tab.\n * Единственный день в таблице календаря у которого есть tabIndex=\"0\"\n * Чтобы на него можно было попасть из заголовка календаря.\n */\nexport function useIsDayFocusable({\n  value,\n  focusableDayOnFirstCalendar,\n  focusableDayOnSecondCalendar,\n  viewDate,\n  isDayActive,\n}: {\n  value: DateRangeType | null | undefined;\n  focusableDayOnFirstCalendar: Date | undefined;\n  focusableDayOnSecondCalendar: Date | undefined;\n  viewDate: Date;\n  isDayActive: (date: Date) => boolean;\n}) {\n  const isValueVisibleOnCalendar = Boolean(\n    value &&\n      ((value[0] && isSameMonth(value[0], viewDate)) ||\n        (value[1] && isSameMonth(value[1], viewDate))),\n  );\n\n  const isCalendarHasFocusableDay = Boolean(\n    (focusableDayOnFirstCalendar && isSameMonth(focusableDayOnFirstCalendar, viewDate)) ||\n      (focusableDayOnSecondCalendar && isSameMonth(focusableDayOnSecondCalendar, viewDate)),\n  );\n\n  const isDayFocusable = React.useCallback(\n    (day: Date) => {\n      // если focusableDay день находится среди дней открытого сейчас месяца, то такой день получит tabIndex=\"0\",\n      if (isCalendarHasFocusableDay) {\n        return Boolean(\n          (focusableDayOnFirstCalendar && isSameDate(focusableDayOnFirstCalendar, day)) ||\n            (focusableDayOnSecondCalendar && isSameDate(focusableDayOnSecondCalendar, day)),\n        );\n      }\n\n      // при открытии календаря focusableDay не определён,\n      // поэтому tabIndex=\"0\" будет у дня, соответствующего дню в инпуте\n      if (isValueVisibleOnCalendar) {\n        return isDayActive(day);\n      }\n\n      // при переключении месяца любая навигация с помощью Tab начинается\n      // с первого дня месяца.\n      return isSameDate(startOfMonth(viewDate), day);\n    },\n    [\n      isCalendarHasFocusableDay,\n      isValueVisibleOnCalendar,\n      viewDate,\n      isDayActive,\n      focusableDayOnFirstCalendar,\n      focusableDayOnSecondCalendar,\n    ],\n  );\n  return isDayFocusable;\n}\n"],"names":["React","isSameDate","startOfMonth","Keys","pressedKey","navigateDate","NAVIGATION_KEYS","isSameMonth","isHTMLElement","useCalendarKeyboardNavigation","focusedDay","value","setFocusedDay","viewDates","firstCalendarViewDate","secondCalendarViewDate","setViewDate","focusableDayOnFirstCalendar","setFocusableDayOnFirstCalendar","useState","focusableDayOnSecondCalendar","setFocusableDayOnSecondCalendar","handleCalendarKeyDown","useCallback","event","isFirst","key","includes","preventDefault","newFocusedDay","TAB","undefined","ENTER","SPACE","target","click","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","useIsDayFocusable","viewDate","isDayActive","isValueVisibleOnCalendar","Boolean","isCalendarHasFocusableDay","isDayFocusable","day"],"mappings":"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"}

package/dist/cssm/components/Cell/Cell.js

@@ -12,11 +12,12 @@ import { DEFAULT_DRAGGABLE_LABEL } from "./constants.js";
 import styles from "./Cell.module.css";
 /**
  * @see https://vkui.io/components/cell
- */ export const Cell = ({ mode, onRemove, removePlaceholder = 'Удалить', onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel = DEFAULT_DRAGGABLE_LABEL, className, style, toggleButtonTestId, removeButtonTestId, ...restProps })=>{
+ */ export const Cell = ({ mode, onRemove, removePlaceholder = 'Удалить', onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel = DEFAULT_DRAGGABLE_LABEL, className, style, toggleButtonTestId, removeButtonTestId, href: hrefProp, ...restProps })=>{
     const [dragging, setDragging] = React.useState(false);
     const selectable = mode === 'selectable';
     const removable = mode === 'removable';
     const Component = selectable ? 'label' : ComponentProps;
+    const href = selectable ? undefined : hrefProp;
     const platform = usePlatform();
     const rootElRef = useExternRef(getRootRef);
     const dragger = draggable ? /*#__PURE__*/ _jsx(CellDragger, {
@@ -47,6 +48,7 @@ import styles from "./Cell.module.css";
         hasActive: hasActive,
         hasHover: hasActive && !removable,
         disabled,
+        href,
         ...restProps,
         className: styles.content,
         // чтобы свойство, если не определено, не присутствовало в