@vkontakte/vkui 7.1.3 → 7.2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport {\n  CalendarDirectionContext,\n  type CalendarDirectionContextProps,\n} from '../../context/CalendarDirectionContext';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\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'>,\n    Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarDoneButtonProps,\n    CalendarTestsProps {\n  value?: Date;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?: (value?: Date) => void;\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\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  getRootRef,\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onDoneButtonClick,\n  enableTime = false,\n  doneButtonText,\n  doneButtonDisabled,\n  doneButtonShow,\n  DoneButton,\n  weekStartsOn = 1,\n  disablePickers,\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  showNeighboringMonth,\n  changeDayLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  minDateTime,\n  maxDateTime,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  dayTestId,\n  ...props\n}: CalendarProps): React.ReactNode => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({\n    value,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n    minDateTime,\n    maxDateTime,\n  });\n  const [directionRef, textDirection = 'ltr'] = useDirection();\n  const rootRef = useExternRef(directionRef, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      setViewDate(value);\n    }\n  }, [value]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      let actualDate = setTimeEqual(date, value);\n      if (minDateTime || maxDateTime) {\n        actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n      }\n      onChange?.(actualDate);\n    },\n    [value, onChange, maxDateTime, minDateTime],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(value && isSameDay(day, value)),\n    [value],\n  );\n\n  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(\n    () => ({\n      direction: textDirection,\n    }),\n    [textDirection],\n  );\n\n  return (\n    <CalendarDirectionContext.Provider value={directionContextValue}>\n      <RootComponent\n        {...props}\n        baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}\n        getRootRef={rootRef}\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={value}\n          weekStartsOn={weekStartsOn}\n          isDayFocused={isDayFocused}\n          tabIndex={0}\n          aria-label={changeDayLabel}\n          onKeyDown={handleKeyDown}\n          onDayChange={onDayChange}\n          isDayActive={isDayActive}\n          isDaySelectionStart={isFirstDay}\n          isDaySelectionEnd={isLastDay}\n          isDayDisabled={isDayDisabled}\n          onBlur={resetSelectedDay}\n          showNeighboringMonth={showNeighboringMonth}\n          size={size}\n          dayProps={dayProps}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          dayTestId={dayTestId}\n        />\n        {enableTime && value && size !== 's' && (\n          <div className={styles.time}>\n            <CalendarTime\n              value={value}\n              onChange={onChange}\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    </CalendarDirectionContext.Provider>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","CalendarDirectionContext","useCalendar","useDirection","useExternRef","clamp","isFirstDay","isLastDay","navigateDate","setTimeEqual","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","styles","warn","Calendar","getRootRef","value","onChange","disablePast","disableFuture","shouldDisableDate","onDoneButtonClick","enableTime","doneButtonText","doneButtonDisabled","doneButtonShow","DoneButton","weekStartsOn","disablePickers","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","changeDayLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","minutesTestId","hoursTestId","doneButtonTestId","prevMonthButtonTestId","nextMonthButtonTestId","monthDropdownTestId","yearDropdownTestId","dayTestId","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","directionRef","textDirection","rootRef","process","env","NODE_ENV","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","onDayChange","date","actualDate","min","max","isDayActive","day","Boolean","directionContextValue","useMemo","direction","Provider","baseClassName","host","sizeS","className","header","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur","div","time","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport {\n  type CalendarDoneButtonProps,\n  CalendarTime,\n  type CalendarTimeProps,\n  type CalendarTimeTestsProps,\n} from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport type CalendarTestsProps = CalendarDaysTestsProps &\n  CalendarHeaderTestsProps &\n  CalendarTimeTestsProps;\n\nexport interface CalendarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n    Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'prevMonthProps'\n      | 'nextMonthProps'\n    >,\n    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarDoneButtonProps,\n    CalendarTestsProps {\n  value?: Date | null;\n  defaultValue?: Date | null;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  enableTime?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  onChange?: (value?: Date) => void; // TODO [>=8]: поменять тип на `(value?: Date | null) => void`\n  /**\n   * Позволяет запретить выбор даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  /**\n   * Дата отображаемого месяца.\n   * При использовании обновление даты должно происходить вне компонента.\n   */\n  viewDate?: Date;\n  /**\n   * Изменение даты в шапке календаря.\n   */\n  onHeaderChange?: (value: Date) => void;\n  /**\n   * Минимальные дата и время, которые можно выбрать\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  minDateTime?: Date;\n  /**\n   * Максимальные дата и время, которые можно выбрать.\n   * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n   */\n  maxDateTime?: Date;\n  /**\n   * Свойство для отображения времени в нужной таймзоне\n   */\n  timezone?: string;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n  getRootRef,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onDoneButtonClick,\n  enableTime = false,\n  doneButtonText,\n  doneButtonDisabled,\n  doneButtonShow,\n  DoneButton,\n  weekStartsOn = 1,\n  disablePickers,\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  showNeighboringMonth,\n  changeDayLabel = 'Изменить день',\n  size = 'm',\n  viewDate: externalViewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  prevMonthProps,\n  nextMonthProps,\n  dayProps,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  minDateTime,\n  maxDateTime,\n  timezone,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  dayTestId,\n  ...props\n}: CalendarProps): React.ReactNode => {\n  const _onChange = React.useCallback(\n    (date: Date | null | undefined) => {\n      onChange?.(convertDateFromTimeZone(date, timezone) || undefined);\n    },\n    [onChange, timezone],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<Date | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const timeZonedValue: Date | null | undefined = React.useMemo(\n    () => convertDateToTimeZone(value, timezone),\n    [timezone, value],\n  );\n\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({\n    value: timeZonedValue,\n    disableFuture,\n    disablePast,\n    shouldDisableDate,\n    onHeaderChange,\n    onNextMonth,\n    onPrevMonth,\n    minDateTime,\n    maxDateTime,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (timeZonedValue) {\n      setViewDate(timeZonedValue);\n    }\n  }, [timeZonedValue]);\n\n  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n    warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n  }\n\n  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n    warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n  }\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, event.key);\n\n      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, timeZonedValue, viewDate],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      let actualDate = setTimeEqual(date, timeZonedValue);\n      if (minDateTime || maxDateTime) {\n        actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n      }\n      updateValue(actualDate);\n    },\n    [timeZonedValue, updateValue, maxDateTime, minDateTime],\n  );\n\n  const isDayActive = React.useCallback(\n    (day: Date) => Boolean(timeZonedValue && isSameDay(day, timeZonedValue)),\n    [timeZonedValue],\n  );\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}\n      getRootRef={getRootRef}\n    >\n      <CalendarHeader\n        viewDate={externalViewDate || viewDate}\n        onChange={setViewDate}\n        onNextMonth={setNextMonth}\n        onPrevMonth={setPrevMonth}\n        disablePickers={disablePickers || size === 's'}\n        className={styles.header}\n        prevMonthLabel={prevMonthLabel}\n        nextMonthLabel={nextMonthLabel}\n        changeMonthLabel={changeMonthLabel}\n        changeYearLabel={changeYearLabel}\n        prevMonthIcon={prevMonthIcon}\n        nextMonthIcon={nextMonthIcon}\n        prevMonthProps={prevMonthProps}\n        nextMonthProps={nextMonthProps}\n        isMonthDisabled={isMonthDisabled}\n        isYearDisabled={isYearDisabled}\n        nextMonthButtonTestId={nextMonthButtonTestId}\n        prevMonthButtonTestId={prevMonthButtonTestId}\n        monthDropdownTestId={monthDropdownTestId}\n        yearDropdownTestId={yearDropdownTestId}\n      />\n      <CalendarDays\n        viewDate={externalViewDate || viewDate}\n        value={timeZonedValue}\n        weekStartsOn={weekStartsOn}\n        isDayFocused={isDayFocused}\n        tabIndex={0}\n        aria-label={changeDayLabel}\n        onKeyDown={handleKeyDown}\n        onDayChange={onDayChange}\n        isDayActive={isDayActive}\n        isDaySelectionStart={isFirstDay}\n        isDaySelectionEnd={isLastDay}\n        isDayDisabled={isDayDisabled}\n        onBlur={resetSelectedDay}\n        showNeighboringMonth={showNeighboringMonth}\n        size={size}\n        dayProps={dayProps}\n        listenDayChangesForUpdate={listenDayChangesForUpdate}\n        renderDayContent={renderDayContent}\n        dayTestId={dayTestId}\n      />\n      {enableTime && timeZonedValue && size !== 's' && (\n        <div className={styles.time}>\n          <CalendarTime\n            value={timeZonedValue}\n            onChange={updateValue}\n            onDoneButtonClick={onDoneButtonClick}\n            doneButtonText={doneButtonText}\n            doneButtonDisabled={doneButtonDisabled}\n            doneButtonShow={doneButtonShow}\n            DoneButton={DoneButton}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}\n            minutesTestId={minutesTestId}\n            hoursTestId={hoursTestId}\n            doneButtonTestId={doneButtonTestId}\n          />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","useCalendar","useCustomEnsuredControl","clamp","isFirstDay","isLastDay","navigateDate","setTimeEqual","convertDateFromTimeZone","convertDateToTimeZone","useIsomorphicLayoutEffect","warnOnce","CalendarDays","CalendarHeader","CalendarTime","RootComponent","styles","warn","Calendar","getRootRef","value","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","onDoneButtonClick","enableTime","doneButtonText","doneButtonDisabled","doneButtonShow","DoneButton","weekStartsOn","disablePickers","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","changeDayLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","timezone","minutesTestId","hoursTestId","doneButtonTestId","prevMonthButtonTestId","nextMonthButtonTestId","monthDropdownTestId","yearDropdownTestId","dayTestId","props","_onChange","useCallback","date","undefined","updateValue","timeZonedValue","useMemo","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","process","env","NODE_ENV","handleKeyDown","event","includes","key","preventDefault","newFocusedDay","onDayChange","actualDate","min","max","isDayActive","day","Boolean","baseClassName","host","sizeS","className","header","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isDaySelectionEnd","onBlur","div","time"],"mappings":"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"}

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

@@ -1,22 +1,22 @@
 .host {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  inline-size: 305px;
+  padding: 12px;
   background: var(--vkui--color_background_contrast_themed);
   border: 0.5px solid var(--vkui--color_separator_primary);
-  box-sizing: border-box;
-  box-shadow: var(--vkui--elevation1);
   border-radius: 8px;
-  inline-size: 305px;
-  padding: 12px;
+  box-shadow: var(--vkui--elevation1);
 }
 
 .time {
-  -webkit-border-before: 1px solid var(--vkui--color_separator_primary);
-          border-block-start: 1px solid var(--vkui--color_separator_primary);
-  margin-block: 12px 0;
-  margin-inline: -12px;
   padding-block: 12px 0;
   padding-inline: 12px;
+  margin-block: 12px 0;
+  margin-inline: -12px;
+  -webkit-border-before: 1px solid var(--vkui--color_separator_primary);
+          border-block-start: 1px solid var(--vkui--color_separator_primary);
 }
 
 .header {

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

@@ -2,16 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { useCalendarDirectionContext } from "../../context/CalendarDirectionContext.js";
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./CalendarDay.module.css";
 export const CalendarDay = /*#__PURE__*/ React.memo(({ day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, children, renderDayContent, testId, ...restProps })=>{
-    const { locale } = useConfigProvider();
+    const { locale, direction } = useConfigProvider();
     const ref = React.useRef(null);
-    const { direction } = useCalendarDirectionContext();
     const onClick = React.useCallback(()=>onChange(day), [
         day,
         onChange

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useCalendarDirectionContext } from '../../context/CalendarDirectionContext';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дня в календаре\n   */\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange: (value: Date) => void;\n  onEnter?: (value: Date) => void;\n  onLeave?: (value: Date) => void;\n  // Функция отрисовки контента в ячейке дня\n  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    children,\n    renderDayContent,\n    testId,\n    ...restProps\n  }: CalendarDayProps) => {\n    const { locale } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const { direction } = useCalendarDirectionContext();\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;\n    }\n\n    return (\n      <Tappable\n        baseClassName={classNames(\n          styles.host,\n          size === 's' && styles.sizeS,\n          direction === 'rtl' && styles.rtl,\n        )}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","useCalendarDirectionContext","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","VisuallyHidden","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","children","renderDayContent","testId","restProps","locale","ref","useRef","direction","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","bubbles","focus","content","useMemo","div","className","dayNumber","span","aria-hidden","getDate","sizeS","baseClassName","host","rtl","hoverMode","hostHovered","activeMode","hostActivated","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","notSameMonth","hintedActive","inner","innerActive","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,2BAA2B,QAAQ,4CAAyC;AACrF,SAASC,gCAAgC,QAAQ,yCAAsC;AACvF,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAoC9C,OAAO,MAAMC,4BAA0CR,MAAMS,IAAI,CAC/D,CAAC,EACCC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,YAAY,EACZC,OAAO,EACPC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,oBAAoB,EACpBC,kBAAkB,EAClBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,gBAAgB,EAChBC,MAAM,EACN,GAAGC,WACc;IACjB,MAAM,EAAEC,MAAM,EAAE,GAAG3B;IACnB,MAAM4B,MAAMhC,MAAMiC,MAAM,CAAc;IACtC,MAAM,EAAEC,SAAS,EAAE,GAAGhC;IACtB,MAAMiC,UAAUnC,MAAMoC,WAAW,CAAC,IAAMvB,SAASH,MAAM;QAACA;QAAKG;KAAS;IACtE,MAAMwB,cAAcrC,MAAMoC,WAAW,CAAC,IAAMhB,UAAUV,MAAM;QAACA;QAAKU;KAAQ;IAC1E,MAAMkB,cAActC,MAAMoC,WAAW,CAAC,IAAMf,UAAUX,MAAM;QAACA;QAAKW;KAAQ;IAE1E,MAAMkB,QAAQ,IAAIC,KAAKC,cAAc,CAACV,QAAQ;QAC5CW,SAAS;QACTC,MAAM;QACNC,OAAO;QACPlC,KAAK;IACP,GAAGmC,MAAM,CAACnC;IAEVV,MAAM8C,SAAS,CAAC;QACd,IAAI3B,WAAWa,IAAIe,OAAO,EAAE;YAC1Bf,IAAIe,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAM9C,kCAAkC;gBAAE+C,SAAS;YAAK;YACtFlB,IAAIe,OAAO,CAACI,KAAK;QACnB;IACF,GAAG;QAAChC;KAAQ;IAEZ,MAAMiC,UAAUpD,MAAMqD,OAAO,CAAC;QAC5B,IAAIzB,kBAAkB;YACpB,OAAOA,iBAAiBlB;QAC1B;QACA,qBACE,MAAC4C;YAAIC,WAAWhD,OAAOiD,SAAS;;8BAC9B,KAAClD;8BAAgBqB,YAAYY;;8BAC7B,KAACkB;oBAAKC,aAAW;8BAAEhD,IAAIiD,OAAO;;;;IAGpC,GAAG;QAAC/B;QAAkBlB;QAAKiB;QAAUY;KAAM;IAE3C,IAAIzB,QAAQ;QACV,qBAAO,KAACwC;YAAIC,WAAWtD,WAAWM,OAAOO,MAAM,EAAEY,SAAS,OAAOnB,OAAOqD,KAAK;;IAC/E;IAEA,qBACE,KAACvD;QACCwD,eAAe5D,WACbM,OAAOuD,IAAI,EACXpC,SAAS,OAAOnB,OAAOqD,KAAK,EAC5B1B,cAAc,SAAS3B,OAAOwD,GAAG;QAEnCC,WAAWzD,OAAO0D,WAAW;QAC7BC,YAAY3D,OAAO4D,aAAa;QAChCC,WAAW;QACXjC,SAASA;QACTpB,UAAUA;QACVsD,UAAU,CAAC;QACXC,YAAYtC;QACZuC,kBAAkBvD,SAAS,YAAY;QACvCwD,gBAAgBnC;QAChBoC,gBAAgBnC;QAChBoC,eAAa,OAAO7C,WAAW,WAAWA,SAASA,SAASnB;QAC3D,GAAGoB,SAAS;kBAEb,cAAA,KAACwB;YACCC,WAAWtD,WACTM,OAAO6C,OAAO,EACd1B,SAAS,OAAOnB,OAAOqD,KAAK,EAC5BjD,SAASJ,OAAOI,KAAK,EACrBC,YAAY,CAACG,YAAYR,OAAOK,QAAQ,EACxCK,kBAAkBV,OAAOU,cAAc,EACvCC,gBAAgBX,OAAOW,YAAY,EACnCH,YAAYR,OAAOQ,QAAQ,EAC3B,CAACU,aAAalB,OAAOoE,YAAY;sBAGnC,cAAA,KAACrB;gBACCC,WAAWtD,WACTM,OAAOe,MAAM,EACbA,UAAUf,OAAOqE,YAAY,EAC7BrD,wBAAwBhB,OAAOgB,oBAAoB,EACnDC,sBAAsBjB,OAAOiB,kBAAkB;0BAGjD,cAAA,KAAC8B;oBAAIC,WAAWtD,WAAWM,OAAOsE,KAAK,EAAE7D,UAAU,CAACD,YAAYR,OAAOuE,WAAW;8BAC/E1B;;;;;AAMb,GACA;AAEF5C,YAAYuE,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дня в календаре\n   */\n  testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\n  day: Date;\n  today?: boolean;\n  selected?: boolean;\n  selectionStart?: boolean;\n  selectionEnd?: boolean;\n  hintedSelectionStart?: boolean;\n  hintedSelectionEnd?: boolean;\n  active?: boolean;\n  hidden?: boolean;\n  disabled?: boolean;\n  focused?: boolean;\n  hinted?: boolean;\n  sameMonth?: boolean;\n  size?: 's' | 'm';\n  onChange: (value: Date) => void;\n  onEnter?: (value: Date) => void;\n  onLeave?: (value: Date) => void;\n  // Функция отрисовки контента в ячейке дня\n  renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n  ({\n    day,\n    today,\n    selected,\n    onChange,\n    hidden,\n    disabled,\n    active,\n    selectionStart,\n    selectionEnd,\n    focused,\n    onEnter,\n    onLeave,\n    hinted,\n    hintedSelectionStart,\n    hintedSelectionEnd,\n    sameMonth,\n    size,\n    children,\n    renderDayContent,\n    testId,\n    ...restProps\n  }: CalendarDayProps) => {\n    const { locale, direction } = useConfigProvider();\n    const ref = React.useRef<HTMLElement>(null);\n    const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n    const label = new Intl.DateTimeFormat(locale, {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    }).format(day);\n\n    React.useEffect(() => {\n      if (focused && ref.current) {\n        ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n        ref.current.focus();\n      }\n    }, [focused]);\n\n    const content = React.useMemo(() => {\n      if (renderDayContent) {\n        return renderDayContent(day);\n      }\n      return (\n        <div className={styles.dayNumber}>\n          <VisuallyHidden>{children ?? label}</VisuallyHidden>\n          <span aria-hidden>{day.getDate()}</span>\n        </div>\n      );\n    }, [renderDayContent, day, children, label]);\n\n    if (hidden) {\n      return <div className={classNames(styles.hidden, size === 's' && styles.sizeS)} />;\n    }\n\n    return (\n      <Tappable\n        baseClassName={classNames(\n          styles.host,\n          size === 's' && styles.sizeS,\n          direction === 'rtl' && styles.rtl,\n        )}\n        hoverMode={styles.hostHovered}\n        activeMode={styles.hostActivated}\n        hasActive={false}\n        onClick={onClick}\n        disabled={disabled}\n        tabIndex={-1}\n        getRootRef={ref}\n        focusVisibleMode={active ? 'outside' : 'inside'}\n        onPointerEnter={handleEnter}\n        onPointerLeave={handleLeave}\n        data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n        {...restProps}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            size === 's' && styles.sizeS,\n            today && styles.today,\n            selected && !disabled && styles.selected,\n            selectionStart && styles.selectionStart,\n            selectionEnd && styles.selectionEnd,\n            disabled && styles.disabled,\n            !sameMonth && styles.notSameMonth,\n          )}\n        >\n          <div\n            className={classNames(\n              styles.hinted,\n              hinted && styles.hintedActive,\n              hintedSelectionStart && styles.hintedSelectionStart,\n              hintedSelectionEnd && styles.hintedSelectionEnd,\n            )}\n          >\n            <div className={classNames(styles.inner, active && !disabled && styles.innerActive)}>\n              {content}\n            </div>\n          </div>\n        </div>\n      </Tappable>\n    );\n  },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["React","classNames","ENABLE_KEYBOARD_INPUT_EVENT_NAME","useConfigProvider","Tappable","VisuallyHidden","styles","CalendarDay","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","children","renderDayContent","testId","restProps","locale","direction","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","bubbles","focus","content","useMemo","div","className","dayNumber","span","aria-hidden","getDate","sizeS","baseClassName","host","rtl","hoverMode","hostHovered","activeMode","hostActivated","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","notSameMonth","hintedActive","inner","innerActive","displayName"],"mappings":"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"}

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

@@ -1,16 +1,16 @@
 .content {
-  border-radius: 0;
+  block-size: 100%;
+  font-family: var(--vkui--font_family_base);
   font-size: 14px;
   color: var(--vkui--color_text_primary);
-  font-family: var(--vkui--font_family_base);
-  block-size: 100%;
+  border-radius: 0;
 }
 
 .host,
 .hidden {
-  border-radius: 0;
-  flex-basis: calc(100% / 7);
   flex-grow: 0;
+  flex-basis: calc(100% / 7);
+  border-radius: 0;
 }
 
 .hidden,
@@ -52,13 +52,13 @@
 }
 
 .today .dayNumber::after {
+  position: relative;
+  inset-inline-start: 50%;
+  display: block;
+  inline-size: 16px;
   content: '';
   -webkit-border-after: 2px solid var(--vkui--color_stroke_accent);
           border-block-end: 2px solid var(--vkui--color_stroke_accent);
-  inline-size: 16px;
-  display: block;
-  position: relative;
-  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
@@ -75,8 +75,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
 }
 
 .inner {
@@ -93,8 +93,8 @@
 }
 
 .innerActive {
-  background-color: var(--vkui--color_background_accent);
   color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_background_accent);
 }
 
 .hostHovered .inner.innerActive {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDay,\n  type CalendarDayElementProps,\n  type CalendarDayProps,\n  type CalendarDayTestsProps,\n} from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport type CalendarDaysTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дня в календаре\n   */\n  dayTestId?: CalendarDayTestsProps['testId'];\n};\n\nexport interface CalendarDaysProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarDayProps, 'renderDayContent'>,\n    CalendarDaysTestsProps {\n  value?: Date | Array<Date | null>;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange: (value: Date) => void;\n  isDayDisabled: (value: Date) => boolean;\n  isDaySelectionStart: (value: Date, dayOfWeek: number) => boolean;\n  isDaySelectionEnd: (value: Date, dayOfWeek: number) => boolean;\n  isHintedDaySelectionStart?: (value: Date, dayOfWeek: number) => boolean;\n  isHintedDaySelectionEnd?: (value: Date, dayOfWeek: number) => boolean;\n  isDayActive: (value: Date) => boolean;\n  isDayHinted?: (value: Date) => boolean;\n  isDaySelected?: (value: Date) => boolean;\n  isDayFocused: (value: Date) => boolean;\n  onDayEnter?: (value: Date) => void;\n  onDayLeave?: (value: Date) => void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  listenDayChangesForUpdate = false,\n  getRootRef,\n  renderDayContent,\n  dayTestId,\n  ...props\n}: CalendarDaysProps): React.ReactNode => {\n  const { locale } = useConfigProvider();\n  const ref = useExternRef(getRootRef);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange, ref],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles.host} getRootRef={ref}>\n      <div className={classNames(styles.row, size === 's' && styles.rowSizeS)}>\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles.weekday}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div className={classNames(styles.row, size === 's' && styles.rowSizeS)} key={i}>\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                renderDayContent={renderDayContent}\n                testId={dayTestId}\n                {...dayProps}\n                className={classNames(dayProps?.className, styles.rowDay)}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","useExternRef","useTodayDate","getDaysNames","getWeeks","CalendarDay","useConfigProvider","RootComponent","Footnote","styles","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","listenDayChangesForUpdate","getRootRef","renderDayContent","dayTestId","props","locale","ref","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","baseClassName","host","div","className","row","rowSizeS","map","dayName","weekday","week","i","day","sameMonth","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted","testId","rowDay","toISOString"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAAEC,WAAW,QAAQ,WAAW;AAClD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,wBAAqB;AAE5D,SACEC,WAAW,QAIN,gCAA6B;AACpC,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,4BAA4B;AAkC/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,yBAAyB,EACzBC,uBAAuB,EACvBC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,uBAAuB,KAAK,EAC5BC,QAAQ,EACRC,4BAA4B,KAAK,EACjCC,UAAU,EACVC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,OACe;IAClB,MAAM,EAAEC,MAAM,EAAE,GAAG5B;IACnB,MAAM6B,MAAMlC,aAAa6B;IACzB,MAAMM,MAAMlC,aAAa2B;IAEzB,MAAMQ,QAAQxC,MAAMyC,OAAO,CAAC,IAAMlC,SAASO,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAM4B,YAAY1C,MAAMyC,OAAO,CAC7B,IAAMnC,aAAaiC,KAAKvB,cAAcqB,SACtC;QAACA;QAAQE;QAAKvB;KAAa;IAG7B,MAAM2B,kBAAkB3C,MAAM4C,WAAW,CACvC,CAACC;QACC5B,YAAY4B;QAEZP,IAAIQ,OAAO,EAAEC;IACf,GACA;QAAC9B;QAAaqB;KAAI;IAGpB,qBACE,MAAC5B;QAAe,GAAG0B,KAAK;QAAEY,eAAepC,OAAOqC,IAAI;QAAEhB,YAAYK;;0BAChE,KAACY;gBAAIC,WAAWlD,WAAWW,OAAOwC,GAAG,EAAEvB,SAAS,OAAOjB,OAAOyC,QAAQ;0BACnEX,UAAUY,GAAG,CAAC,CAACC,wBACd,KAAC5C;wBAAuBwC,WAAWvC,OAAO4C,OAAO;kCAC9CD;uBADYA;;YAMlBf,MAAMc,GAAG,CAAC,CAACG,MAAMC,kBAChB,KAACR;oBAAIC,WAAWlD,WAAWW,OAAOwC,GAAG,EAAEvB,SAAS,OAAOjB,OAAOyC,QAAQ;8BACnEI,KAAKH,GAAG,CAAC,CAACK,KAAKD;wBACd,MAAME,YAAYzD,YAAYwD,KAAK7C;wBACnC,qBACE,KAACN;4BAECmD,KAAKA;4BACLE,OAAO3D,UAAUyD,KAAKpB;4BACtBuB,QAAQ3C,YAAYwC;4BACpBI,UAAUpB;4BACVqB,QAAQ,CAAClC,wBAAwB,CAAC8B;4BAClCK,UAAUrC,cAAc+B;4BACxBO,gBAAgB7C,oBAAoBsC,KAAKD;4BACzCS,cAAc/C,kBAAkBuC,KAAKD;4BACrCU,sBAAsB3C,4BAA4BkC,KAAKD;4BACvDW,oBAAoB3C,0BAA0BiC,KAAKD;4BACnDY,UAAUpD,gBAAgByC;4BAC1BY,SAAS5C,aAAagC;4BACtBa,SAASlD;4BACTmD,SAASlD;4BACTmD,QAAQlD,cAAcmC;4BACtBC,WAAWA;4BACX/B,MAAMA;4BACNK,kBAAkBA;4BAClByC,QAAQxC;4BACP,GAAGJ,QAAQ;4BACZoB,WAAWlD,WAAW8B,UAAUoB,WAAWvC,OAAOgE,MAAM;2BArBnDjB,IAAIkB,WAAW;oBAwB1B;mBA7B4EnB;;;AAkCtF,EAAE"}
+{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDay,\n  type CalendarDayElementProps,\n  type CalendarDayProps,\n  type CalendarDayTestsProps,\n} from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport type CalendarDaysTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дня в календаре\n   */\n  dayTestId?: CalendarDayTestsProps['testId'];\n};\n\nexport interface CalendarDaysProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<CalendarDayProps, 'renderDayContent'>,\n    CalendarDaysTestsProps {\n  value?: Date | Array<Date | null> | null;\n  viewDate: Date;\n  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showNeighboringMonth?: boolean;\n  size?: 's' | 'm';\n  dayProps?: CalendarDayElementProps;\n  listenDayChangesForUpdate?: boolean;\n  onDayChange: (value: Date) => void;\n  isDayDisabled: (value: Date) => boolean;\n  isDaySelectionStart: (value: Date, dayOfWeek: number) => boolean;\n  isDaySelectionEnd: (value: Date, dayOfWeek: number) => boolean;\n  isHintedDaySelectionStart?: (value: Date, dayOfWeek: number) => boolean;\n  isHintedDaySelectionEnd?: (value: Date, dayOfWeek: number) => boolean;\n  isDayActive: (value: Date) => boolean;\n  isDayHinted?: (value: Date) => boolean;\n  isDaySelected?: (value: Date) => boolean;\n  isDayFocused: (value: Date) => boolean;\n  onDayEnter?: (value: Date) => void;\n  onDayLeave?: (value: Date) => void;\n}\n\nexport const CalendarDays = ({\n  viewDate,\n  value,\n  weekStartsOn,\n  onDayChange,\n  isDaySelected,\n  isDayActive,\n  isDaySelectionEnd,\n  isDaySelectionStart,\n  onDayEnter,\n  onDayLeave,\n  isDayHinted,\n  isHintedDaySelectionStart,\n  isHintedDaySelectionEnd,\n  isDayFocused,\n  isDayDisabled,\n  size,\n  showNeighboringMonth = false,\n  dayProps,\n  listenDayChangesForUpdate = false,\n  getRootRef,\n  renderDayContent,\n  dayTestId,\n  ...props\n}: CalendarDaysProps): React.ReactNode => {\n  const { locale } = useConfigProvider();\n  const ref = useExternRef(getRootRef);\n  const now = useTodayDate(listenDayChangesForUpdate);\n\n  const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n  const daysNames = React.useMemo(\n    () => getDaysNames(now, weekStartsOn, locale),\n    [locale, now, weekStartsOn],\n  );\n\n  const handleDayChange = React.useCallback(\n    (date: Date) => {\n      onDayChange(date);\n\n      ref.current?.focus();\n    },\n    [onDayChange, ref],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles.host} getRootRef={ref}>\n      <div className={classNames(styles.row, size === 's' && styles.rowSizeS)}>\n        {daysNames.map((dayName) => (\n          <Footnote key={dayName} className={styles.weekday}>\n            {dayName}\n          </Footnote>\n        ))}\n      </div>\n\n      {weeks.map((week, i) => (\n        <div className={classNames(styles.row, size === 's' && styles.rowSizeS)} key={i}>\n          {week.map((day, i) => {\n            const sameMonth = isSameMonth(day, viewDate);\n            return (\n              <CalendarDay\n                key={day.toISOString()}\n                day={day}\n                today={isSameDay(day, now)}\n                active={isDayActive(day)}\n                onChange={handleDayChange}\n                hidden={!showNeighboringMonth && !sameMonth}\n                disabled={isDayDisabled(day)}\n                selectionStart={isDaySelectionStart(day, i)}\n                selectionEnd={isDaySelectionEnd(day, i)}\n                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n                selected={isDaySelected?.(day)}\n                focused={isDayFocused(day)}\n                onEnter={onDayEnter}\n                onLeave={onDayLeave}\n                hinted={isDayHinted?.(day)}\n                sameMonth={sameMonth}\n                size={size}\n                renderDayContent={renderDayContent}\n                testId={dayTestId}\n                {...dayProps}\n                className={classNames(dayProps?.className, styles.rowDay)}\n              />\n            );\n          })}\n        </div>\n      ))}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","isSameDay","isSameMonth","useExternRef","useTodayDate","getDaysNames","getWeeks","CalendarDay","useConfigProvider","RootComponent","Footnote","styles","CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","listenDayChangesForUpdate","getRootRef","renderDayContent","dayTestId","props","locale","ref","now","weeks","useMemo","daysNames","handleDayChange","useCallback","date","current","focus","baseClassName","host","div","className","row","rowSizeS","map","dayName","weekday","week","i","day","sameMonth","today","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted","testId","rowDay","toISOString"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAAEC,WAAW,QAAQ,WAAW;AAClD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,EAAEC,QAAQ,QAAQ,wBAAqB;AAE5D,SACEC,WAAW,QAIN,gCAA6B;AACpC,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,4BAA4B;AAkC/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,yBAAyB,EACzBC,uBAAuB,EACvBC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,uBAAuB,KAAK,EAC5BC,QAAQ,EACRC,4BAA4B,KAAK,EACjCC,UAAU,EACVC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,OACe;IAClB,MAAM,EAAEC,MAAM,EAAE,GAAG5B;IACnB,MAAM6B,MAAMlC,aAAa6B;IACzB,MAAMM,MAAMlC,aAAa2B;IAEzB,MAAMQ,QAAQxC,MAAMyC,OAAO,CAAC,IAAMlC,SAASO,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAM4B,YAAY1C,MAAMyC,OAAO,CAC7B,IAAMnC,aAAaiC,KAAKvB,cAAcqB,SACtC;QAACA;QAAQE;QAAKvB;KAAa;IAG7B,MAAM2B,kBAAkB3C,MAAM4C,WAAW,CACvC,CAACC;QACC5B,YAAY4B;QAEZP,IAAIQ,OAAO,EAAEC;IACf,GACA;QAAC9B;QAAaqB;KAAI;IAGpB,qBACE,MAAC5B;QAAe,GAAG0B,KAAK;QAAEY,eAAepC,OAAOqC,IAAI;QAAEhB,YAAYK;;0BAChE,KAACY;gBAAIC,WAAWlD,WAAWW,OAAOwC,GAAG,EAAEvB,SAAS,OAAOjB,OAAOyC,QAAQ;0BACnEX,UAAUY,GAAG,CAAC,CAACC,wBACd,KAAC5C;wBAAuBwC,WAAWvC,OAAO4C,OAAO;kCAC9CD;uBADYA;;YAMlBf,MAAMc,GAAG,CAAC,CAACG,MAAMC,kBAChB,KAACR;oBAAIC,WAAWlD,WAAWW,OAAOwC,GAAG,EAAEvB,SAAS,OAAOjB,OAAOyC,QAAQ;8BACnEI,KAAKH,GAAG,CAAC,CAACK,KAAKD;wBACd,MAAME,YAAYzD,YAAYwD,KAAK7C;wBACnC,qBACE,KAACN;4BAECmD,KAAKA;4BACLE,OAAO3D,UAAUyD,KAAKpB;4BACtBuB,QAAQ3C,YAAYwC;4BACpBI,UAAUpB;4BACVqB,QAAQ,CAAClC,wBAAwB,CAAC8B;4BAClCK,UAAUrC,cAAc+B;4BACxBO,gBAAgB7C,oBAAoBsC,KAAKD;4BACzCS,cAAc/C,kBAAkBuC,KAAKD;4BACrCU,sBAAsB3C,4BAA4BkC,KAAKD;4BACvDW,oBAAoB3C,0BAA0BiC,KAAKD;4BACnDY,UAAUpD,gBAAgByC;4BAC1BY,SAAS5C,aAAagC;4BACtBa,SAASlD;4BACTmD,SAASlD;4BACTmD,QAAQlD,cAAcmC;4BACtBC,WAAWA;4BACX/B,MAAMA;4BACNK,kBAAkBA;4BAClByC,QAAQxC;4BACP,GAAGJ,QAAQ;4BACZoB,WAAWlD,WAAW8B,UAAUoB,WAAWvC,OAAOgE,MAAM;2BArBnDjB,IAAIkB,WAAW;oBAwB1B;mBA7B4EnB;;;AAkCtF,EAAE"}

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

@@ -1,14 +1,14 @@
 .host {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   justify-content: space-around;
-  flex-grow: 1;
 }
 
 .row {
   display: flex;
-  justify-content: center;
   flex-grow: 1;
+  justify-content: center;
 }
 
 .row:first-child:not(.rowSizeS) {
@@ -27,12 +27,12 @@
 }
 
 .weekday {
-  text-transform: capitalize;
-  color: var(--vkui--color_text_subhead);
-  block-size: 32px;
-  flex-basis: calc(100% / 7);
-  flex-grow: 0;
   display: flex;
+  flex-grow: 0;
+  flex-basis: calc(100% / 7);
   align-items: center;
   justify-content: center;
+  block-size: 32px;
+  color: var(--vkui--color_text_subhead);
+  text-transform: capitalize;
 }

package/dist/cssm/components/CalendarHeader/CalendarHeader.js

@@ -4,7 +4,6 @@ import * as React from "react";
 import { Icon12Dropdown, Icon20ChevronLeftOutline, Icon20ChevronRightOutline } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
 import { addMonths, setMonth, setYear, subMonths } from "date-fns";
-import { useCalendarDirectionContext } from "../../context/CalendarDirectionContext.js";
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from "../../lib/calendar.js";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
@@ -23,8 +22,7 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonthHidden: prevMonthH
     width: 30,
     height: 30
 }), isMonthDisabled, isYearDisabled, monthDropdownTestId, yearDropdownTestId, prevMonthButtonTestId, nextMonthButtonTestId, ...restProps })=>{
-    const { locale } = useConfigProvider();
-    const { direction } = useCalendarDirectionContext();
+    const { locale, direction } = useConfigProvider();
     const onMonthsChange = React.useCallback((_, newValue)=>onChange(setMonth(viewDate, Number(newValue))), [
         onChange,
         viewDate

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { addMonths, setMonth, setYear, subMonths } from 'date-fns';\nimport { useCalendarDirectionContext } from '../../context/CalendarDirectionContext';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря\n   */\n  monthDropdownTestId?: string | ((monthIndex: number) => string);\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря\n   */\n  yearDropdownTestId?: string | ((year: number) => string);\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря\n   */\n  nextMonthButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря\n   */\n  prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц\n   */\n  prevMonthHidden?: boolean;\n  /**\n   * Скрывает иконку для переключения на следующий месяц\n   */\n  nextMonthHidden?: boolean;\n  disablePickers?: boolean;\n  prevMonthLabel?: string;\n  nextMonthLabel?: string;\n  changeMonthLabel?: string;\n  changeYearLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n  isYearDisabled?: (yearNumber: number) => boolean;\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: () => void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonthHidden: prevMonthHiddenProp = false,\n  nextMonthHidden: nextMonthHiddenProp = false,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  isMonthDisabled,\n  isYearDisabled,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n  const { locale } = useConfigProvider();\n  const { direction } = useCalendarDirectionContext();\n\n  const onMonthsChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setMonth(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setYear(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n\n  const currentYear = viewDate.getFullYear();\n  const currentMonth = viewDate.getMonth();\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles.month}>{label}</span>,\n        disabled: isMonthDisabled && isMonthDisabled(value),\n      })),\n    [locale, isMonthDisabled],\n  );\n\n  const years = React.useMemo(\n    () =>\n      getYears(currentYear, 100).map((year) => ({\n        ...year,\n        disabled: isYearDisabled && isYearDisabled(year.value),\n      })),\n    [currentYear, isYearDisabled],\n  );\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n            onClick={onPrevMonth}\n            data-testid={prevMonthButtonTestId}\n            {...restPrevMonthProps}\n          >\n            <VisuallyHidden>\n              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n          weight=\"2\"\n        >\n          <span className={styles.month}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY=\"compact\">\n          <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentMonth}\n              options={months}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthLabel}\n              data-testid={\n                typeof monthDropdownTestId === 'string'\n                  ? monthDropdownTestId\n                  : monthDropdownTestId?.(currentMonth)\n              }\n            />\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentYear}\n              options={years}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearLabel}\n              data-testid={yearDropdownTestId}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n            onClick={onNextMonth}\n            data-testid={nextMonthButtonTestId}\n            {...restNextMonthProps}\n          >\n            <VisuallyHidden>\n              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","addMonths","setMonth","setYear","subMonths","useCalendarDirectionContext","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","styles","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","navIconAccent","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","direction","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","month","disabled","years","year","formatter","Intl","DateTimeFormat","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","baseClassName","host","sizeX","navIcon","navIconPrev","onClick","data-testid","format","pickers","weight","sizeY","div","picker","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","navIconNext"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { addMonths, setMonth, setYear, subMonths } from 'date-fns';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря\n   */\n  monthDropdownTestId?: string | ((monthIndex: number) => string);\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря\n   */\n  yearDropdownTestId?: string | ((year: number) => string);\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря\n   */\n  nextMonthButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря\n   */\n  prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц\n   */\n  prevMonthHidden?: boolean;\n  /**\n   * Скрывает иконку для переключения на следующий месяц\n   */\n  nextMonthHidden?: boolean;\n  disablePickers?: boolean;\n  prevMonthLabel?: string;\n  nextMonthLabel?: string;\n  changeMonthLabel?: string;\n  changeYearLabel?: string;\n  prevMonthIcon?: React.ReactNode;\n  nextMonthIcon?: React.ReactNode;\n  prevMonthProps?: ArrowMonthProps;\n  nextMonthProps?: ArrowMonthProps;\n  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n  isYearDisabled?: (yearNumber: number) => boolean;\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: () => void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonthHidden: prevMonthHiddenProp = false,\n  nextMonthHidden: nextMonthHiddenProp = false,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  isMonthDisabled,\n  isYearDisabled,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n  const { locale, direction } = useConfigProvider();\n\n  const onMonthsChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setMonth(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setYear(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n\n  const currentYear = viewDate.getFullYear();\n  const currentMonth = viewDate.getMonth();\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles.month}>{label}</span>,\n        disabled: isMonthDisabled && isMonthDisabled(value),\n      })),\n    [locale, isMonthDisabled],\n  );\n\n  const years = React.useMemo(\n    () =>\n      getYears(currentYear, 100).map((year) => ({\n        ...year,\n        disabled: isYearDisabled && isYearDisabled(year.value),\n      })),\n    [currentYear, isYearDisabled],\n  );\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n            onClick={onPrevMonth}\n            data-testid={prevMonthButtonTestId}\n            {...restPrevMonthProps}\n          >\n            <VisuallyHidden>\n              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n          weight=\"2\"\n        >\n          <span className={styles.month}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY=\"compact\">\n          <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentMonth}\n              options={months}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthLabel}\n              data-testid={\n                typeof monthDropdownTestId === 'string'\n                  ? monthDropdownTestId\n                  : monthDropdownTestId?.(currentMonth)\n              }\n            />\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentYear}\n              options={years}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearLabel}\n              data-testid={yearDropdownTestId}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n            onClick={onNextMonth}\n            data-testid={nextMonthButtonTestId}\n            {...restNextMonthProps}\n          >\n            <VisuallyHidden>\n              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","addMonths","setMonth","setYear","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","styles","CalendarHeader","viewDate","onChange","prevMonthHidden","prevMonthHiddenProp","nextMonthHidden","nextMonthHiddenProp","disablePickers","onNextMonth","onPrevMonth","prevMonthProps","nextMonthProps","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","prevMonthIcon","className","navIconAccent","width","height","nextMonthIcon","isMonthDisabled","isYearDisabled","monthDropdownTestId","yearDropdownTestId","prevMonthButtonTestId","nextMonthButtonTestId","restProps","locale","direction","onMonthsChange","useCallback","_","newValue","Number","onYearChange","currentYear","getFullYear","currentMonth","getMonth","months","useMemo","map","value","label","span","month","disabled","years","year","formatter","Intl","DateTimeFormat","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","baseClassName","host","sizeX","navIcon","navIconPrev","onClick","data-testid","format","pickers","weight","sizeY","div","picker","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","navIconNext"],"mappings":"AAAA;;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,yBAAyB,QACpB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,QAAQ,WAAW;AACnE,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,wBAAqB;AAE7F,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,YAAY,QAA0B,kCAA+B;AAC9E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,8BAA8B;AAyDjD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,QAAQ,EACRC,QAAQ,EACRC,iBAAiBC,sBAAsB,KAAK,EAC5CC,iBAAiBC,sBAAsB,KAAK,EAC5CC,iBAAiB,KAAK,EACtBC,WAAW,EACXC,WAAW,EACXC,iBAAiB,CAAC,CAAC,EACnBC,iBAAiB,CAAC,CAAC,EACnBC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,mBAAmB,gBAAgB,EACnCC,kBAAkB,cAAc,EAChCC,8BACE,KAACnC;IAAyBoC,WAAWlB,OAAOmB,aAAa;IAAEC,OAAO;IAAIC,QAAQ;EAC/E,EACDC,8BACE,KAACvC;IAA0BmC,WAAWlB,OAAOmB,aAAa;IAAEC,OAAO;IAAIC,QAAQ;EAChF,EACDE,eAAe,EACfC,cAAc,EACdC,mBAAmB,EACnBC,kBAAkB,EAClBC,qBAAqB,EACrBC,qBAAqB,EACrB,GAAGC,WACiB;IACpB,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGrC;IAE9B,MAAMsC,iBAAiBpD,MAAMqD,WAAW,CACtC,CAACC,GAAmCC,WAClChC,SAASjB,SAASgB,UAAUkC,OAAOD,aACrC;QAAChC;QAAUD;KAAS;IAEtB,MAAMmC,eAAezD,MAAMqD,WAAW,CACpC,CAACC,GAAmCC,WAClChC,SAAShB,QAAQe,UAAUkC,OAAOD,aACpC;QAAChC;QAAUD;KAAS;IAGtB,MAAMoC,cAAcpC,SAASqC,WAAW;IACxC,MAAMC,eAAetC,SAASuC,QAAQ;IAEtC,MAAMC,SAAS9D,MAAM+D,OAAO,CAC1B,IACEpD,UAAUuC,QAAQc,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAM,CAAA;gBAC3CD;gBACAC,qBAAO,KAACC;oBAAK7B,WAAWlB,OAAOgD,KAAK;8BAAGF;;gBACvCG,UAAU1B,mBAAmBA,gBAAgBsB;YAC/C,CAAA,IACF;QAACf;QAAQP;KAAgB;IAG3B,MAAM2B,QAAQtE,MAAM+D,OAAO,CACzB,IACEnD,SAAS8C,aAAa,KAAKM,GAAG,CAAC,CAACO,OAAU,CAAA;gBACxC,GAAGA,IAAI;gBACPF,UAAUzB,kBAAkBA,eAAe2B,KAAKN,KAAK;YACvD,CAAA,IACF;QAACP;QAAad;KAAe;IAG/B,MAAM4B,YAAY,IAAIC,KAAKC,cAAc,CAACxB,QAAQ;QAChDqB,MAAM;QACNH,OAAO;IACT;IAEA,MAAM,EAAE9B,WAAWqC,kBAAkB,EAAE,GAAGC,oBAAoB,GAAG7C;IACjE,MAAM,EAAEO,WAAWuC,kBAAkB,EAAE,GAAGC,oBAAoB,GAAG9C;IAEjE,IAAIN,kBACFC,uBAAwBiC,iBAAiB,MAAMF,gBAAgBjD;IACjE,IAAIkC,mBAAmB,CAACjB,iBAAiB;QACvCA,kBAAkBiB,gBAChBiB,iBAAiB,KAAK,IAAIA,eAAe,GACzCA,iBAAiB,KAAKmB,KAAKC,GAAG,CAACtB,cAAc,GAAGjD,oBAAoBiD;IAExE;IAEA,IAAIlC,kBACFC,uBAAwBmC,iBAAiB,KAAKF,gBAAgBhD;IAChE,IAAIiC,mBAAmB,CAACnB,iBAAiB;QACvCA,kBAAkBmB,gBAChBiB,iBAAiB,IAAI,KAAKA,eAAe,GACzCA,iBAAiB,IAAImB,KAAKE,GAAG,CAACvB,cAAc,GAAGhD,oBAAoBgD;IAEvE;IAEA,qBACE,MAAC1C;QAAckE,eAAe9D,OAAO+D,IAAI;QAAG,GAAGlC,SAAS;;YACrD,CAACzB,iCACA,KAACX;gBAAmBuE,OAAM;0BACxB,cAAA,MAACnE;oBACCiE,eAAe9E,WAAWgB,OAAOiE,OAAO,EAAEjE,OAAOkE,WAAW,EAAEX;oBAC9DY,SAASzD;oBACT0D,eAAazC;oBACZ,GAAG6B,kBAAkB;;sCAEtB,MAACzD;;gCACEc;gCAAe;gCAAGuC,UAAUiB,MAAM,CAACjF,UAAUc,UAAU;;;wBAEzD6B,cAAc,QAAQd,gBAAgBK;;;;YAI5Cd,+BACC,MAACV;gBACCoB,WAAWlC,WAAWgB,OAAOsE,OAAO,EAAE;gBACtCC,QAAO;;kCAEP,KAACxB;wBAAK7B,WAAWlB,OAAOgD,KAAK;kCAC1B,IAAIK,KAAKC,cAAc,CAACxB,QAAQ;4BAC/BkB,OAAO;wBACT,GAAGqB,MAAM,CAACnE;;oBACL;oBAEN,IAAImD,KAAKC,cAAc,CAACxB,QAAQ;wBAC/BqB,MAAM;oBACR,GAAGkB,MAAM,CAACnE;;+BAGZ,KAACT;gBAAmB+E,OAAM;0BACxB,cAAA,MAACC;oBAAIvD,WAAWlC,WAAWgB,OAAOsE,OAAO,EAAE;;sCACzC,KAAC3E;4BACCuB,WAAWlC,WAAWgB,OAAO0E,MAAM,EAAE;4BACrC7B,OAAOL;4BACPmC,SAASjC;4BACTkC,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAACjG;4BACPsB,UAAU6B;4BACV+C,qBAAqB;4BACrBC,YAAW;4BACXC,cAAYlE;4BACZqD,eACE,OAAO3C,wBAAwB,WAC3BA,sBACAA,sBAAsBe;;sCAG9B,KAAC7C;4BACCuB,WAAWlC,WAAWgB,OAAO0E,MAAM,EAAE;4BACrC7B,OAAOP;4BACPqC,SAASzB;4BACT0B,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAACjG;4BACPsB,UAAUkC;4BACV0C,qBAAqB;4BACrBC,YAAW;4BACXC,cAAYjE;4BACZoD,eAAa1C;;;;;YAKpB,CAACpB,iCACA,KAACb;gBAAmBuE,OAAM;0BACxB,cAAA,MAACnE;oBACCiE,eAAe9E,WAAWgB,OAAOiE,OAAO,EAAEjE,OAAOkF,WAAW,EAAEzB;oBAC9DU,SAAS1D;oBACT2D,eAAaxC;oBACZ,GAAG8B,kBAAkB;;sCAEtB,MAAC3D;;gCACEe;gCAAe;gCAAGsC,UAAUiB,MAAM,CAACpF,UAAUiB,UAAU;;;wBAEzD6B,cAAc,QAAQT,gBAAgBL;;;;;;AAMnD,EAAE"}

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

@@ -1,14 +1,14 @@
 .host {
+  position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
-  position: relative;
+  justify-content: center;
   min-block-size: 36px;
 }
 
 .pickers {
-  display: flex;
   position: absolute;
+  display: flex;
   color: var(--vkui--color_text_primary);
 }
 
@@ -20,8 +20,8 @@
 .navIcon {
   position: absolute;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   padding: 3px;
 }