@vkontakte/vkui 8.1.3 → 8.2.0

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

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon12Dropdown, Icon20ChevronLeftOutline, Icon20ChevronRightOutline } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
+import { useLocale } from "../../hooks/useLocale.js";
 import { ViewWidth } from "../../lib/adaptivity/index.js";
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from "../../lib/calendar.js";
 import { addMonths, setMonth, setYear, subMonths } from "../../lib/date.js";
 import { cacheDateTimeFormat } from "../../lib/intlCache.js";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider.js";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { CustomSelect } from "../CustomSelect/CustomSelect.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Tappable } from "../Tappable/Tappable.js";
@@ -37,7 +38,8 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonthHidden: prevMonthH
     width: 30,
     height: 30
 }), isMonthDisabled, isYearDisabled, monthDropdownTestId, yearDropdownTestId, prevMonthButtonTestId, nextMonthButtonTestId, ...restProps })=>{
-    const { locale, direction } = useConfigProvider();
+    const locale = useLocale();
+    const direction = useConfigDirection();
     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 { ViewWidth } from '../../lib/adaptivity';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { cacheDateTimeFormat } from '../../lib/intlCache';\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\nconst formatterDateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'long',\n} as const;\n\nconst formatterDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\n\nconst monthDateTimeFormatOptions = {\n  month: 'long',\n} as const;\n\nconst monthDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\n\nconst yearDateTimeFormatOptions = {\n  year: 'numeric',\n} as const;\n\nconst yearDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\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) | undefined;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.\n   */\n  yearDropdownTestId?: string | ((year: number) => string) | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.\n   */\n  nextMonthButtonTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.\n   */\n  prevMonthButtonTestId?: string | undefined;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  /**\n   * Отображаемая дата.\n   */\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц.\n   */\n  prevMonthHidden?: boolean | undefined;\n  /**\n   * Скрывает иконку для переключения на следующий месяц.\n   */\n  nextMonthHidden?: boolean | undefined;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean | undefined;\n  /**\n   * `aria-label` для кнопки предыдущего месяца.\n   */\n  prevMonthLabel?: string | undefined;\n  /**\n   * `aria-label` для кнопки следующего месяца.\n   */\n  nextMonthLabel?: string | undefined;\n  /**\n   * `aria-label` для селектора месяца.\n   */\n  changeMonthLabel?: string | undefined;\n  /**\n   * `aria-label` для селектора года.\n   */\n  changeYearLabel?: string | undefined;\n  /**\n   * Кастомная иконка для кнопки предыдущего месяца.\n   */\n  prevMonthIcon?: React.ReactNode | undefined;\n  /**\n   * Кастомная иконка для кнопки следующего месяца.\n   */\n  nextMonthIcon?: React.ReactNode | undefined;\n  /**\n   * Дополнительные свойства для кнопки предыдущего месяца.\n   */\n  prevMonthProps?: ArrowMonthProps | undefined;\n  /**\n   * Дополнительные свойства для кнопки следующего месяца.\n   */\n  nextMonthProps?: ArrowMonthProps | undefined;\n  /**\n   * Функция для проверки блокировки месяца.\n   */\n  isMonthDisabled?: ((monthNumber: number, year?: number) => boolean) | undefined;\n  /**\n   * Функция для проверки блокировки года.\n   */\n  isYearDisabled?: ((yearNumber: number) => boolean) | undefined;\n  /**\n   * Обработчик изменения отображаемой даты.\n   */\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: (() => void) | undefined;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: (() => void) | undefined;\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 = formatterDateTimeFormat(locale, formatterDateTimeFormatOptions);\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n    (event: React.KeyboardEvent, isOpen: boolean) => {\n      if (isOpen && event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    [],\n  );\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>\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            {monthDateTimeFormat(locale, monthDateTimeFormatOptions).format(viewDate)}\n          </span>\n          &nbsp;\n          {yearDateTimeFormat(locale, yearDateTimeFormatOptions).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider density=\"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              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n              slotProps={{\n                input: {\n                  'aria-label': changeMonthLabel,\n                  'data-testid':\n                    typeof monthDropdownTestId === 'string'\n                      ? monthDropdownTestId\n                      : monthDropdownTestId?.(currentMonth),\n                },\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              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n              slotProps={{\n                input: {\n                  'aria-label': changeYearLabel,\n                  'data-testid':\n                    typeof yearDropdownTestId === 'string'\n                      ? yearDropdownTestId\n                      : yearDropdownTestId?.(currentYear),\n                },\n              }}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>\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","ViewWidth","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","addMonths","setMonth","setYear","subMonths","cacheDateTimeFormat","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","styles","formatterDateTimeFormatOptions","year","month","formatterDateTimeFormat","monthDateTimeFormatOptions","monthDateTimeFormat","yearDateTimeFormatOptions","yearDateTimeFormat","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","disabled","years","formatter","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen","event","isOpen","key","stopPropagation","baseClassName","host","viewWidth","SMALL_TABLET","navIcon","navIconPrev","onClick","data-testid","format","pickers","weight","density","div","picker","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","onInputKeyDown","slotProps","input","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 { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useLocale } from '../../hooks/useLocale';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport { addMonths, setMonth, setYear, subMonths } from '../../lib/date';\nimport { cacheDateTimeFormat } from '../../lib/intlCache';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\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\nconst formatterDateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'long',\n} as const;\n\nconst formatterDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\n\nconst monthDateTimeFormatOptions = {\n  month: 'long',\n} as const;\n\nconst monthDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\n\nconst yearDateTimeFormatOptions = {\n  year: 'numeric',\n} as const;\n\nconst yearDateTimeFormat = /*#__PURE__*/ cacheDateTimeFormat();\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) | undefined;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.\n   */\n  yearDropdownTestId?: string | ((year: number) => string) | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.\n   */\n  nextMonthButtonTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.\n   */\n  prevMonthButtonTestId?: string | undefined;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  /**\n   * Отображаемая дата.\n   */\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц.\n   */\n  prevMonthHidden?: boolean | undefined;\n  /**\n   * Скрывает иконку для переключения на следующий месяц.\n   */\n  nextMonthHidden?: boolean | undefined;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean | undefined;\n  /**\n   * `aria-label` для кнопки предыдущего месяца.\n   */\n  prevMonthLabel?: string | undefined;\n  /**\n   * `aria-label` для кнопки следующего месяца.\n   */\n  nextMonthLabel?: string | undefined;\n  /**\n   * `aria-label` для селектора месяца.\n   */\n  changeMonthLabel?: string | undefined;\n  /**\n   * `aria-label` для селектора года.\n   */\n  changeYearLabel?: string | undefined;\n  /**\n   * Кастомная иконка для кнопки предыдущего месяца.\n   */\n  prevMonthIcon?: React.ReactNode | undefined;\n  /**\n   * Кастомная иконка для кнопки следующего месяца.\n   */\n  nextMonthIcon?: React.ReactNode | undefined;\n  /**\n   * Дополнительные свойства для кнопки предыдущего месяца.\n   */\n  prevMonthProps?: ArrowMonthProps | undefined;\n  /**\n   * Дополнительные свойства для кнопки следующего месяца.\n   */\n  nextMonthProps?: ArrowMonthProps | undefined;\n  /**\n   * Функция для проверки блокировки месяца.\n   */\n  isMonthDisabled?: ((monthNumber: number, year?: number) => boolean) | undefined;\n  /**\n   * Функция для проверки блокировки года.\n   */\n  isYearDisabled?: ((yearNumber: number) => boolean) | undefined;\n  /**\n   * Обработчик изменения отображаемой даты.\n   */\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: (() => void) | undefined;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: (() => void) | undefined;\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 = useLocale();\n  const direction = useConfigDirection();\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 = formatterDateTimeFormat(locale, formatterDateTimeFormatOptions);\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n    (event: React.KeyboardEvent, isOpen: boolean) => {\n      if (isOpen && event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    [],\n  );\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>\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            {monthDateTimeFormat(locale, monthDateTimeFormatOptions).format(viewDate)}\n          </span>\n          &nbsp;\n          {yearDateTimeFormat(locale, yearDateTimeFormatOptions).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider density=\"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              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n              slotProps={{\n                input: {\n                  'aria-label': changeMonthLabel,\n                  'data-testid':\n                    typeof monthDropdownTestId === 'string'\n                      ? monthDropdownTestId\n                      : monthDropdownTestId?.(currentMonth),\n                },\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              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n              slotProps={{\n                input: {\n                  'aria-label': changeYearLabel,\n                  'data-testid':\n                    typeof yearDropdownTestId === 'string'\n                      ? yearDropdownTestId\n                      : yearDropdownTestId?.(currentYear),\n                },\n              }}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>\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","useConfigDirection","useLocale","ViewWidth","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","addMonths","setMonth","setYear","subMonths","cacheDateTimeFormat","AdaptivityProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","styles","formatterDateTimeFormatOptions","year","month","formatterDateTimeFormat","monthDateTimeFormatOptions","monthDateTimeFormat","yearDateTimeFormatOptions","yearDateTimeFormat","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","disabled","years","formatter","prevMonthClassName","restPrevMonthProps","nextMonthClassName","restNextMonthProps","Math","min","max","stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen","event","isOpen","key","stopPropagation","baseClassName","host","viewWidth","SMALL_TABLET","navIcon","navIconPrev","onClick","data-testid","format","pickers","weight","density","div","picker","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","onInputKeyDown","slotProps","input","navIconNext"],"mappings":"AAAA;;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,yBAAyB,QACpB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,SAAS,QAAQ,2BAAwB;AAClD,SAASC,SAAS,QAAQ,gCAAuB;AACjD,SAASC,gBAAgB,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,wBAAqB;AAC7F,SAASC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,QAAQ,oBAAiB;AACzE,SAASC,mBAAmB,QAAQ,yBAAsB;AAE1D,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,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;AAEjD,MAAMC,iCAAiC;IACrCC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,0BAA0B,WAAW,GAAGX;AAE9C,MAAMY,6BAA6B;IACjCF,OAAO;AACT;AAEA,MAAMG,sBAAsB,WAAW,GAAGb;AAE1C,MAAMc,4BAA4B;IAChCL,MAAM;AACR;AAEA,MAAMM,qBAAqB,WAAW,GAAGf;AAgGzC,OAAO,MAAMgB,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,KAAC9C;IAAyB+C,WAAW1B,OAAO2B,aAAa;IAAEC,OAAO;IAAIC,QAAQ;EAC/E,EACDC,8BACE,KAAClD;IAA0B8C,WAAW1B,OAAO2B,aAAa;IAAEC,OAAO;IAAIC,QAAQ;EAChF,EACDE,eAAe,EACfC,cAAc,EACdC,mBAAmB,EACnBC,kBAAkB,EAClBC,qBAAqB,EACrBC,qBAAqB,EACrB,GAAGC,WACiB;IACpB,MAAMC,SAASvD;IACf,MAAMwD,YAAYzD;IAElB,MAAM0D,iBAAiB/D,MAAMgE,WAAW,CACtC,CAACC,GAAmCC,WAClChC,SAASrB,SAASoB,UAAUkC,OAAOD,aACrC;QAAChC;QAAUD;KAAS;IAEtB,MAAMmC,eAAepE,MAAMgE,WAAW,CACpC,CAACC,GAAmCC,WAClChC,SAASpB,QAAQmB,UAAUkC,OAAOD,aACpC;QAAChC;QAAUD;KAAS;IAGtB,MAAMoC,cAAcpC,SAASqC,WAAW;IACxC,MAAMC,eAAetC,SAASuC,QAAQ;IAEtC,MAAMC,SAASzE,MAAM0E,OAAO,CAC1B,IACEhE,UAAUmD,QAAQc,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAM,CAAA;gBAC3CD;gBACAC,qBAAO,KAACC;oBAAK7B,WAAW1B,OAAOG,KAAK;8BAAGmD;;gBACvCE,UAAUzB,mBAAmBA,gBAAgBsB;YAC/C,CAAA,IACF;QAACf;QAAQP;KAAgB;IAG3B,MAAM0B,QAAQhF,MAAM0E,OAAO,CACzB,IACE/D,SAAS0D,aAAa,KAAKM,GAAG,CAAC,CAAClD,OAAU,CAAA;gBACxC,GAAGA,IAAI;gBACPsD,UAAUxB,kBAAkBA,eAAe9B,KAAKmD,KAAK;YACvD,CAAA,IACF;QAACP;QAAad;KAAe;IAG/B,MAAM0B,YAAYtD,wBAAwBkC,QAAQrC;IAElD,MAAM,EAAEyB,WAAWiC,kBAAkB,EAAE,GAAGC,oBAAoB,GAAGzC;IACjE,MAAM,EAAEO,WAAWmC,kBAAkB,EAAE,GAAGC,oBAAoB,GAAG1C;IAEjE,IAAIN,kBACFC,uBAAwBiC,iBAAiB,MAAMF,gBAAgB7D;IACjE,IAAI8C,mBAAmB,CAACjB,iBAAiB;QACvCA,kBAAkBiB,gBAChBiB,iBAAiB,KAAK,IAAIA,eAAe,GACzCA,iBAAiB,KAAKe,KAAKC,GAAG,CAAClB,cAAc,GAAG7D,oBAAoB6D;IAExE;IAEA,IAAIlC,kBACFC,uBAAwBmC,iBAAiB,KAAKF,gBAAgB5D;IAChE,IAAI6C,mBAAmB,CAACnB,iBAAiB;QACvCA,kBAAkBmB,gBAChBiB,iBAAiB,IAAI,KAAKA,eAAe,GACzCA,iBAAiB,IAAIe,KAAKE,GAAG,CAACnB,cAAc,GAAG5D,oBAAoB4D;IAEvE;IAEA,MAAMoB,uDAAuDzF,MAAMgE,WAAW,CAC5E,CAAC0B,OAA4BC;QAC3B,IAAIA,UAAUD,MAAME,GAAG,KAAK,UAAU;YACpCF,MAAMG,eAAe;QACvB;IACF,GACA,EAAE;IAGJ,qBACE,MAAC1E;QAAc2E,eAAevE,OAAOwE,IAAI;QAAG,GAAGnC,SAAS;;YACrD,CAACzB,iCACA,KAAClB;gBAAmB+E,WAAWzF,UAAU0F,YAAY;0BACnD,cAAA,MAAC7E;oBACC0E,eAAe1F,WAAWmB,OAAO2E,OAAO,EAAE3E,OAAO4E,WAAW,EAAEjB;oBAC9DkB,SAAS3D;oBACT4D,eAAa3C;oBACZ,GAAGyB,kBAAkB;;sCAEtB,MAAC7D;;gCACEsB;gCAAe;gCAAGqC,UAAUqB,MAAM,CAACvF,UAAUkB,UAAU;;;wBAEzD6B,cAAc,QAAQd,gBAAgBK;;;;YAI5Cd,+BACC,MAAClB;gBACC4B,WAAW7C,WAAWmB,OAAOgF,OAAO,EAAE;gBACtCC,QAAO;;kCAEP,KAAC1B;wBAAK7B,WAAW1B,OAAOG,KAAK;kCAC1BG,oBAAoBgC,QAAQjC,4BAA4B0E,MAAM,CAACrE;;oBAC3D;oBAENF,mBAAmB8B,QAAQ/B,2BAA2BwE,MAAM,CAACrE;;+BAGhE,KAAChB;gBAAmBwF,SAAQ;0BAC1B,cAAA,MAACC;oBAAIzD,WAAW7C,WAAWmB,OAAOgF,OAAO,EAAE;;sCACzC,KAACrF;4BACC+B,WAAW7C,WAAWmB,OAAOoF,MAAM,EAAE;4BACrC/B,OAAOL;4BACPqC,SAASnC;4BACToC,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAAC9G;4BACPiC,UAAU6B;4BACViD,qBAAqB;4BACrBC,YAAW;4BACXC,gBAAgBzB;4BAChB0B,WAAW;gCACTC,OAAO;oCACL,cAActE;oCACd,eACE,OAAOU,wBAAwB,WAC3BA,sBACAA,sBAAsBe;gCAC9B;4BACF;;sCAEF,KAACrD;4BACC+B,WAAW7C,WAAWmB,OAAOoF,MAAM,EAAE;4BACrC/B,OAAOP;4BACPuC,SAAS5B;4BACT6B,wBAAwB;4BACxBC,iBAAiB;4BACjBC,oBAAM,KAAC9G;4BACPiC,UAAUkC;4BACV4C,qBAAqB;4BACrBC,YAAW;4BACXC,gBAAgBzB;4BAChB0B,WAAW;gCACTC,OAAO;oCACL,cAAcrE;oCACd,eACE,OAAOU,uBAAuB,WAC1BA,qBACAA,qBAAqBY;gCAC7B;4BACF;;;;;YAKP,CAAChC,iCACA,KAACpB;gBAAmB+E,WAAWzF,UAAU0F,YAAY;0BACnD,cAAA,MAAC7E;oBACC0E,eAAe1F,WAAWmB,OAAO2E,OAAO,EAAE3E,OAAO8F,WAAW,EAAEjC;oBAC9DgB,SAAS5D;oBACT6D,eAAa1C;oBACZ,GAAG0B,kBAAkB;;sCAEtB,MAAC/D;;gCACEuB;gCAAe;gCAAGoC,UAAUqB,MAAM,CAAC1F,UAAUqB,UAAU;;;wBAEzD6B,cAAc,QAAQT,gBAAgBL;;;;;;AAMnD,EAAE"}

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 { isSameDate } from '@vkontakte/vkjs';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { isFirstDay, isLastDay } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isWithinInterval,\n  MONDAY,\n  startOfDay,\n  subMonths,\n} 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 | undefined;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.\n   */\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps | undefined;\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 | undefined;\n  /**\n   * Начальный промежуток при монтировании.\n   */\n  defaultValue?: DateRangeType | null | undefined;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean | undefined;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean | undefined;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean | undefined;\n  /**\n   * `aria-label` для изменения дня.\n   *\n   * @deprecated Since 7.4.0. Будет удалeно в **VKUI v9**.\n   *\n   * Использовалось для задания aria-label для контейнера дней в календаре.\n   * Теперь этот контейнер является таблицей (с помощью role=\"grid\") и\n   * в aria-label рендерится текущий открытый в календаре месяц и год.\n   */\n  changeDayLabel?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство\n  /**\n   * День недели, с которого начинается неделя.\n   */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;\n  /**\n   * Обработчик изменения выбранного промежутка.\n   */\n  onChange?: ((value: DateRangeType) => void) | undefined;\n  /**\n   * Функция для проверки запрета выбора даты.\n   */\n  shouldDisableDate?: ((value: Date) => boolean) | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.\n   */\n  onClose?: (() => void) | undefined; // TODO [>=9]: удалить неиспользуемое свойство\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 = MONDAY,\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 = (newRange: DateRangeType | null) => {\n    if (newRange && onChange) {\n      onChange(newRange);\n    }\n  };\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null>({\n    value: valueProp,\n    defaultValue: defaultValue as DateRangeType | null,\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","useCalendar","useCustomEnsuredControl","isFirstDay","isLastDay","addMonths","endOfDay","isWithinInterval","MONDAY","startOfDay","subMonths","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","newRange","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","focusableDayOnFirstCalendar","focusableDayOnSecondCalendar","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","viewDates","getNewValue","useCallback","date","isValueEmpty","isRangeSelected","start","onDayChange","undefined","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 { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { isFirstDay, isLastDay } from '../../lib/calendar';\nimport {\n  addMonths,\n  endOfDay,\n  isWithinInterval,\n  MONDAY,\n  startOfDay,\n  subMonths,\n} 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 | undefined;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.\n   */\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps | undefined;\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 | undefined;\n  /**\n   * Начальный промежуток при монтировании.\n   */\n  defaultValue?: DateRangeType | null | undefined;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean | undefined;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean | undefined;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean | undefined;\n  /**\n   * `aria-label` для изменения дня.\n   *\n   * @deprecated Since 7.4.0. Будет удалено в **VKUI v9**.\n   *\n   * Использовалось для задания aria-label для контейнера дней в календаре.\n   * Теперь этот контейнер является таблицей (с помощью role=\"grid\") и\n   * в aria-label рендерится текущий открытый в календаре месяц и год.\n   */\n  changeDayLabel?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство\n  /**\n   * День недели, с которого начинается неделя.\n   */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;\n  /**\n   * Обработчик изменения выбранного промежутка.\n   */\n  onChange?: ((value: DateRangeType) => void) | undefined;\n  /**\n   * Функция для проверки запрета выбора даты.\n   */\n  shouldDisableDate?: ((value: Date) => boolean) | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.\n   */\n  onClose?: (() => void) | undefined; // TODO [>=9]: удалить неиспользуемое свойство\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 = MONDAY,\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 = (newRange: DateRangeType | null) => {\n    if (newRange && onChange) {\n      onChange(newRange);\n    }\n  };\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null>({\n    value: valueProp,\n    defaultValue: defaultValue as DateRangeType | null,\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","useCalendar","useCustomEnsuredControl","isFirstDay","isLastDay","addMonths","endOfDay","isWithinInterval","MONDAY","startOfDay","subMonths","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","newRange","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","focusableDayOnFirstCalendar","focusableDayOnSecondCalendar","handleFirstCalendarKeyDown","handleSecondCalendarKeyDown","handleDayFocus","viewDates","getNewValue","useCallback","date","isValueEmpty","isRangeSelected","start","onDayChange","undefined","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/CalendarTime/CalendarTime.js

@@ -7,36 +7,37 @@ import { Keys, pressedKey } from "../../lib/accessibility.js";
 import { setHours, setMinutes } from "../../lib/date.js";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider.js";
 import { Button } from "../Button/Button.js";
-import { CalendarTimePicker } from "./CalendarTimePicker.js";
+import { CalendarTimePicker, padStartTimeValue } from "./CalendarTimePicker.js";
 import styles from "./CalendarTime.module.css";
-const hours = [];
-for(let i = 0; i < 24; i += 1){
-    hours.push({
-        value: i,
-        label: String(i).padStart(2, '0')
-    });
-}
-const minutes = [];
-for(let i = 0; i < 60; i += 1){
-    minutes.push({
-        value: i,
-        label: String(i).padStart(2, '0')
-    });
+const MAX_HOURS = 23;
+const MAX_MINUTES = 59;
+function generateLabels(min, max) {
+    const array = new Array(Math.ceil(max - min + 1));
+    for(let i = min; i <= max; i += 1){
+        const value = padStartTimeValue(i);
+        array[i - min] = {
+            value,
+            label: value
+        };
+    }
+    return array;
 }
-export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, setHours: setHoursFn = setHours, setMinutes: setMinutesFn = setMinutes, isDayDisabled, doneButtonText = 'Готово', doneButtonDisabled = false, doneButtonShow = true, minutesTestId, hoursTestId, doneButtonTestId, DoneButton })=>{
+const hours = generateLabels(0, MAX_HOURS);
+const minutes = generateLabels(0, MAX_MINUTES);
+export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, setHours: setHoursFn = setHours, setMinutes: setMinutesFn = setMinutes, doneButtonText = 'Готово', doneButtonDisabled = false, doneButtonShow = true, minutesTestId, hoursTestId, doneButtonTestId, DoneButton, isDayDisabled })=>{
     const hoursInputRef = useRef(null);
     const minutesInputRef = useRef(null);
     const doneButtonRef = useRef(null);
     const localHours = isDayDisabled ? hours.map((hour)=>{
         return {
             ...hour,
-            disabled: isDayDisabled(setHoursFn(value, hour.value), true)
+            disabled: isDayDisabled(setHoursFn(value, Number(hour.value)), true)
         };
     }) : hours;
     const localMinutes = isDayDisabled ? minutes.map((minute)=>{
         return {
             ...minute,
-            disabled: isDayDisabled(setMinutesFn(value, minute.value), true)
+            disabled: isDayDisabled(setMinutesFn(value, Number(minute.value)), true)
         };
     }) : minutes;
     const onPickerKeyDown = (e)=>{
@@ -61,14 +62,8 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
             nextStep.current?.focus();
         }
     };
-    const stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback((event, isOpen)=>{
-        if (isOpen && event.key === 'Escape') {
-            event.stopPropagation();
-        }
-    }, []);
-    const onSelectInputKeyDown = (e, isOpen)=>{
-        onPickerKeyDown(e);
-        stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen(e, isOpen);
+    const onHoursInputEnd = ()=>{
+        minutesInputRef.current?.focus();
     };
     const renderDoneButton = ()=>{
         const ButtonComponent = DoneButton ?? Button;
@@ -86,31 +81,47 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames(styles.host, !doneButtonShow && styles.host__withoutDone),
         children: [
-            /*#__PURE__*/ _jsx(CalendarTimePicker, {
-                value: value,
-                getNumericValue: (v)=>v.getHours(),
-                onChange: onChange,
-                options: localHours,
-                setTime: setHoursFn,
-                onInputKeyDown: onSelectInputKeyDown,
-                inputRef: hoursInputRef,
-                inputLabel: changeHoursLabel,
-                inputTestId: hoursTestId
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: styles.divider,
-                children: ":"
-            }),
-            /*#__PURE__*/ _jsx(CalendarTimePicker, {
-                value: value,
-                getNumericValue: (v)=>v.getMinutes(),
-                onChange: onChange,
-                options: localMinutes,
-                setTime: setMinutesFn,
-                onInputKeyDown: onSelectInputKeyDown,
-                inputRef: minutesInputRef,
-                inputLabel: changeMinutesLabel,
-                inputTestId: minutesTestId
+            /*#__PURE__*/ _jsxs(AdaptivityProvider, {
+                density: "compact",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.picker,
+                        children: /*#__PURE__*/ _jsx(CalendarTimePicker, {
+                            valueDate: value,
+                            value: value.getHours(),
+                            onChange: onChange,
+                            options: localHours,
+                            setTime: setHoursFn,
+                            onKeyDown: onPickerKeyDown,
+                            inputRef: hoursInputRef,
+                            inputLabel: changeHoursLabel,
+                            inputTestId: hoursTestId,
+                            maxValue: MAX_HOURS,
+                            onInputEnd: onHoursInputEnd,
+                            isDayDisabled: isDayDisabled
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.divider,
+                        children: ":"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.picker,
+                        children: /*#__PURE__*/ _jsx(CalendarTimePicker, {
+                            valueDate: value,
+                            value: value.getMinutes(),
+                            onChange: onChange,
+                            options: localMinutes,
+                            setTime: setMinutesFn,
+                            onKeyDown: onPickerKeyDown,
+                            inputRef: minutesInputRef,
+                            inputLabel: changeMinutesLabel,
+                            inputTestId: minutesTestId,
+                            maxValue: MAX_MINUTES,
+                            isDayDisabled: isDayDisabled
+                        })
+                    })
+                ]
             }),
             doneButtonShow && /*#__PURE__*/ _jsx("div", {
                 className: styles.button,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { CalendarTimePicker } from './CalendarTimePicker';\nimport styles from './CalendarTime.module.css';\n\nexport type CalendarTimeTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.\n   */\n  hoursTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре.\n   */\n  minutesTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки \"Готово\" в календаре.\n   */\n  doneButtonTestId?: string | undefined;\n};\n\nexport type CalendarDoneButtonProps = {\n  /**\n   * Кастомное отображение кнопки `\"Done\"`.\n   */\n  DoneButton?: React.ComponentType<ButtonProps> | undefined;\n  /**\n   * Текст отображаемый в кнопке `\"Done\"`.\n   */\n  doneButtonText?: string | undefined;\n  /**\n   * Управление отображением кнопки `\"Done\"`.\n   */\n  doneButtonShow?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с кнопкой \"Done\".\n   */\n  doneButtonDisabled?: boolean | undefined;\n  /**\n   * Обработки нажатия на кнопку `\"Done\"`.\n   */\n  onDoneButtonClick?: (() => void) | undefined;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {\n  /**\n   * Отображаемая дата.\n   */\n  value: Date;\n  /**\n   * Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий.\n   */\n  changeHoursLabel?: string | undefined;\n  /**\n   * Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий.\n   */\n  changeMinutesLabel?: string | undefined;\n  /**\n   * Обработчик изменения времени.\n   */\n  onChange?: ((value: Date) => void) | undefined;\n  /**\n   * Функция установки часа (для таймзонно-зависимого календаря).\n   */\n  setHours?: ((date: Date, hours: number) => Date) | undefined;\n  /**\n   * Функция установки минут (для таймзонно-зависимого календаря).\n   */\n  setMinutes?: ((date: Date, minutes: number) => Date) | undefined;\n  /**\n   * Функция для проверки блокировки выбора даты и времени.\n   */\n  isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\n  setHours: setHoursFn = setHours,\n  setMinutes: setMinutesFn = setMinutes,\n  isDayDisabled,\n  doneButtonText = 'Готово',\n  doneButtonDisabled = false,\n  doneButtonShow = true,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  DoneButton,\n}: CalendarTimeProps): React.ReactNode => {\n  const hoursInputRef = useRef<HTMLInputElement | null>(null);\n  const minutesInputRef = useRef<HTMLInputElement | null>(null);\n  const doneButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHoursFn(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutesFn(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onPickerKeyDown = (e: React.KeyboardEvent) => {\n    const key = pressedKey(e);\n    /* Мы хотим иметь возможность быстро, по Enter перемещаться между\n     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */\n    if (key !== Keys.ENTER) {\n      return;\n    }\n\n    const steps = [hoursInputRef, minutesInputRef, doneButtonRef].filter((ref) =>\n      Boolean(ref.current),\n    );\n    const currentStepIndex = steps.findIndex((step) => step.current === e.target);\n    const nextStepIndex = currentStepIndex + 1;\n    if (nextStepIndex >= steps.length) {\n      return;\n    }\n    const nextStep = steps[nextStepIndex];\n\n    if (nextStep.current) {\n      e.preventDefault();\n      nextStep.current?.focus();\n    }\n  };\n\n  const stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n    (event: React.KeyboardEvent, isOpen: boolean) => {\n      if (isOpen && event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    [],\n  );\n\n  const onSelectInputKeyDown = (e: React.KeyboardEvent, isOpen: boolean) => {\n    onPickerKeyDown(e);\n    stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen(e, isOpen);\n  };\n\n  const renderDoneButton = () => {\n    const ButtonComponent = DoneButton ?? Button;\n    return (\n      <ButtonComponent\n        mode=\"secondary\"\n        onClick={onDoneButtonClick}\n        size=\"l\"\n        getRootRef={doneButtonRef}\n        onKeyDown={onPickerKeyDown}\n        disabled={doneButtonDisabled}\n        data-testid={doneButtonTestId}\n      >\n        {doneButtonText}\n      </ButtonComponent>\n    );\n  };\n\n  return (\n    <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>\n      <CalendarTimePicker\n        value={value}\n        getNumericValue={(v) => v.getHours()}\n        onChange={onChange}\n        options={localHours}\n        setTime={setHoursFn}\n        onInputKeyDown={onSelectInputKeyDown}\n        inputRef={hoursInputRef}\n        inputLabel={changeHoursLabel}\n        inputTestId={hoursTestId}\n      />\n      <div className={styles.divider}>:</div>\n      <CalendarTimePicker\n        value={value}\n        getNumericValue={(v) => v.getMinutes()}\n        onChange={onChange}\n        options={localMinutes}\n        setTime={setMinutesFn}\n        onInputKeyDown={onSelectInputKeyDown}\n        inputRef={minutesInputRef}\n        inputLabel={changeMinutesLabel}\n        inputTestId={minutesTestId}\n      />\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider density=\"compact\">{renderDoneButton()}</AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useRef","React","classNames","Keys","pressedKey","setHours","setMinutes","AdaptivityProvider","Button","CalendarTimePicker","styles","hours","i","push","value","label","String","padStart","minutes","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","setHoursFn","setMinutesFn","isDayDisabled","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","localMinutes","minute","onPickerKeyDown","e","key","ENTER","steps","filter","ref","Boolean","current","currentStepIndex","findIndex","step","target","nextStepIndex","length","nextStep","preventDefault","focus","stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen","useCallback","event","isOpen","stopPropagation","onSelectInputKeyDown","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","host","host__withoutDone","getNumericValue","v","getHours","options","setTime","onInputKeyDown","inputRef","inputLabel","inputTestId","divider","getMinutes","button","density"],"mappings":"AAAA;;AAEA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,QAAQ,EAAEC,UAAU,QAAQ,oBAAiB;AACtD,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,MAAM,QAA0B,sBAAmB;AAC5D,SAASC,kBAAkB,QAAQ,0BAAuB;AAC1D,OAAOC,YAAY,4BAA4B;AAuE/C,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEA,OAAO,MAAME,eAAe,CAAC,EAC3BL,KAAK,EACLM,QAAQ,EACRC,iBAAiB,EACjBC,gBAAgB,EAChBC,kBAAkB,EAClBlB,UAAUmB,aAAanB,QAAQ,EAC/BC,YAAYmB,eAAenB,UAAU,EACrCoB,aAAa,EACbC,iBAAiB,QAAQ,EACzBC,qBAAqB,KAAK,EAC1BC,iBAAiB,IAAI,EACrBC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,EACQ;IAClB,MAAMC,gBAAgBlC,OAAgC;IACtD,MAAMmC,kBAAkBnC,OAAgC;IACxD,MAAMoC,gBAAgBpC,OAAiC;IAEvD,MAAMqC,aAAaX,gBACff,MAAM2B,GAAG,CAAC,CAACC;QACT,OAAO;YAAE,GAAGA,IAAI;YAAEC,UAAUd,cAAcF,WAAWV,OAAOyB,KAAKzB,KAAK,GAAG;QAAM;IACjF,KACAH;IAEJ,MAAM8B,eAAef,gBACjBR,QAAQoB,GAAG,CAAC,CAACI;QACX,OAAO;YAAE,GAAGA,MAAM;YAAEF,UAAUd,cAAcD,aAAaX,OAAO4B,OAAO5B,KAAK,GAAG;QAAM;IACvF,KACAI;IAEJ,MAAMyB,kBAAkB,CAACC;QACvB,MAAMC,MAAMzC,WAAWwC;QACvB;gFAC4E,GAC5E,IAAIC,QAAQ1C,KAAK2C,KAAK,EAAE;YACtB;QACF;QAEA,MAAMC,QAAQ;YAACb;YAAeC;YAAiBC;SAAc,CAACY,MAAM,CAAC,CAACC,MACpEC,QAAQD,IAAIE,OAAO;QAErB,MAAMC,mBAAmBL,MAAMM,SAAS,CAAC,CAACC,OAASA,KAAKH,OAAO,KAAKP,EAAEW,MAAM;QAC5E,MAAMC,gBAAgBJ,mBAAmB;QACzC,IAAII,iBAAiBT,MAAMU,MAAM,EAAE;YACjC;QACF;QACA,MAAMC,WAAWX,KAAK,CAACS,cAAc;QAErC,IAAIE,SAASP,OAAO,EAAE;YACpBP,EAAEe,cAAc;YAChBD,SAASP,OAAO,EAAES;QACpB;IACF;IAEA,MAAMC,uDAAuD5D,MAAM6D,WAAW,CAC5E,CAACC,OAA4BC;QAC3B,IAAIA,UAAUD,MAAMlB,GAAG,KAAK,UAAU;YACpCkB,MAAME,eAAe;QACvB;IACF,GACA,EAAE;IAGJ,MAAMC,uBAAuB,CAACtB,GAAwBoB;QACpDrB,gBAAgBC;QAChBiB,qDAAqDjB,GAAGoB;IAC1D;IAEA,MAAMG,mBAAmB;QACvB,MAAMC,kBAAkBnC,cAAczB;QACtC,qBACE,KAAC4D;YACCC,MAAK;YACLC,SAASjD;YACTkD,MAAK;YACLC,YAAYpC;YACZqC,WAAW9B;YACXH,UAAUZ;YACV8C,eAAa1C;sBAEZL;;IAGP;IAEA,qBACE,MAACgD;QAAIC,WAAW1E,WAAWQ,OAAOmE,IAAI,EAAE,CAAChD,kBAAkBnB,OAAOoE,iBAAiB;;0BACjF,KAACrE;gBACCK,OAAOA;gBACPiE,iBAAiB,CAACC,IAAMA,EAAEC,QAAQ;gBAClC7D,UAAUA;gBACV8D,SAAS7C;gBACT8C,SAAS3D;gBACT4D,gBAAgBlB;gBAChBmB,UAAUnD;gBACVoD,YAAYhE;gBACZiE,aAAaxD;;0BAEf,KAAC4C;gBAAIC,WAAWlE,OAAO8E,OAAO;0BAAE;;0BAChC,KAAC/E;gBACCK,OAAOA;gBACPiE,iBAAiB,CAACC,IAAMA,EAAES,UAAU;gBACpCrE,UAAUA;gBACV8D,SAASzC;gBACT0C,SAAS1D;gBACT2D,gBAAgBlB;gBAChBmB,UAAUlD;gBACVmD,YAAY/D;gBACZgE,aAAazD;;YAEdD,gCACC,KAAC8C;gBAAIC,WAAWlE,OAAOgF,MAAM;0BAC3B,cAAA,KAACnF;oBAAmBoF,SAAQ;8BAAWxB;;;;;AAKjD,EAAE"}
+{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { CalendarTimePicker, padStartTimeValue } from './CalendarTimePicker';\nimport styles from './CalendarTime.module.css';\n\nconst MAX_HOURS = 23;\nconst MAX_MINUTES = 59;\n\nfunction generateLabels(\n  min: number,\n  max: number,\n): Array<{\n  value: string;\n  label: string;\n}> {\n  const array = new Array(Math.ceil(max - min + 1));\n\n  for (let i = min; i <= max; i += 1) {\n    const value = padStartTimeValue(i);\n\n    array[i - min] = { value, label: value };\n  }\n\n  return array;\n}\n\nconst hours = generateLabels(0, MAX_HOURS);\n\nconst minutes = generateLabels(0, MAX_MINUTES);\n\nexport type CalendarTimeTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.\n   */\n  hoursTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре.\n   */\n  minutesTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки \"Готово\" в календаре.\n   */\n  doneButtonTestId?: string | undefined;\n};\n\nexport type CalendarDoneButtonProps = {\n  /**\n   * Кастомное отображение кнопки `\"Done\"`.\n   */\n  DoneButton?: React.ComponentType<ButtonProps> | undefined;\n  /**\n   * Текст отображаемый в кнопке `\"Done\"`.\n   */\n  doneButtonText?: string | undefined;\n  /**\n   * Управление отображением кнопки `\"Done\"`.\n   */\n  doneButtonShow?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с кнопкой \"Done\".\n   */\n  doneButtonDisabled?: boolean | undefined;\n  /**\n   * Обработки нажатия на кнопку `\"Done\"`.\n   */\n  onDoneButtonClick?: (() => void) | undefined;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {\n  /**\n   * Отображаемая дата.\n   */\n  value: Date;\n  /**\n   * Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий.\n   */\n  changeHoursLabel?: string | undefined;\n  /**\n   * Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий.\n   */\n  changeMinutesLabel?: string | undefined;\n  /**\n   * Обработчик изменения времени.\n   */\n  onChange?: ((value: Date) => void) | undefined;\n  /**\n   * Функция установки часа (для таймзонно-зависимого календаря).\n   */\n  setHours?: ((date: Date, hours: number) => Date) | undefined;\n  /**\n   * Функция установки минут (для таймзонно-зависимого календаря).\n   */\n  setMinutes?: ((date: Date, minutes: number) => Date) | undefined;\n  /**\n   * Функция для проверки блокировки выбора даты и времени.\n   */\n  isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;\n}\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\n  setHours: setHoursFn = setHours,\n  setMinutes: setMinutesFn = setMinutes,\n  doneButtonText = 'Готово',\n  doneButtonDisabled = false,\n  doneButtonShow = true,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  DoneButton,\n  isDayDisabled,\n}: CalendarTimeProps): React.ReactNode => {\n  const hoursInputRef = useRef<HTMLInputElement | null>(null);\n  const minutesInputRef = useRef<HTMLInputElement | null>(null);\n  const doneButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHoursFn(value, Number(hour.value)), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return {\n          ...minute,\n          disabled: isDayDisabled(setMinutesFn(value, Number(minute.value)), true),\n        };\n      })\n    : minutes;\n\n  const onPickerKeyDown = (e: React.KeyboardEvent) => {\n    const key = pressedKey(e);\n    /* Мы хотим иметь возможность быстро, по Enter перемещаться между\n     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */\n    if (key !== Keys.ENTER) {\n      return;\n    }\n\n    const steps = [hoursInputRef, minutesInputRef, doneButtonRef].filter((ref) =>\n      Boolean(ref.current),\n    );\n    const currentStepIndex = steps.findIndex((step) => step.current === e.target);\n    const nextStepIndex = currentStepIndex + 1;\n    if (nextStepIndex >= steps.length) {\n      return;\n    }\n    const nextStep = steps[nextStepIndex];\n\n    if (nextStep.current) {\n      e.preventDefault();\n      nextStep.current?.focus();\n    }\n  };\n\n  const onHoursInputEnd = () => {\n    minutesInputRef.current?.focus();\n  };\n\n  const renderDoneButton = () => {\n    const ButtonComponent = DoneButton ?? Button;\n    return (\n      <ButtonComponent\n        mode=\"secondary\"\n        onClick={onDoneButtonClick}\n        size=\"l\"\n        getRootRef={doneButtonRef}\n        onKeyDown={onPickerKeyDown}\n        disabled={doneButtonDisabled}\n        data-testid={doneButtonTestId}\n      >\n        {doneButtonText}\n      </ButtonComponent>\n    );\n  };\n\n  return (\n    <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>\n      <AdaptivityProvider density=\"compact\">\n        <div className={styles.picker}>\n          <CalendarTimePicker\n            valueDate={value}\n            value={value.getHours()}\n            onChange={onChange}\n            options={localHours}\n            setTime={setHoursFn}\n            onKeyDown={onPickerKeyDown}\n            inputRef={hoursInputRef}\n            inputLabel={changeHoursLabel}\n            inputTestId={hoursTestId}\n            maxValue={MAX_HOURS}\n            onInputEnd={onHoursInputEnd}\n            isDayDisabled={isDayDisabled}\n          />\n        </div>\n        <div className={styles.divider}>:</div>\n        <div className={styles.picker}>\n          <CalendarTimePicker\n            valueDate={value}\n            value={value.getMinutes()}\n            onChange={onChange}\n            options={localMinutes}\n            setTime={setMinutesFn}\n            onKeyDown={onPickerKeyDown}\n            inputRef={minutesInputRef}\n            inputLabel={changeMinutesLabel}\n            inputTestId={minutesTestId}\n            maxValue={MAX_MINUTES}\n            isDayDisabled={isDayDisabled}\n          />\n        </div>\n      </AdaptivityProvider>\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider density=\"compact\">{renderDoneButton()}</AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useRef","React","classNames","Keys","pressedKey","setHours","setMinutes","AdaptivityProvider","Button","CalendarTimePicker","padStartTimeValue","styles","MAX_HOURS","MAX_MINUTES","generateLabels","min","max","array","Array","Math","ceil","i","value","label","hours","minutes","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","setHoursFn","setMinutesFn","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","isDayDisabled","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","Number","localMinutes","minute","onPickerKeyDown","e","key","ENTER","steps","filter","ref","Boolean","current","currentStepIndex","findIndex","step","target","nextStepIndex","length","nextStep","preventDefault","focus","onHoursInputEnd","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","host","host__withoutDone","density","picker","valueDate","getHours","options","setTime","inputRef","inputLabel","inputTestId","maxValue","onInputEnd","divider","getMinutes","button"],"mappings":"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"}

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

@@ -20,3 +20,41 @@
 .button {
   margin-inline-start: auto;
 }
+
+.inputPopDown {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.inputPopUp {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.popper {
+  box-sizing: border-box;
+  inline-size: 100%;
+  overflow: hidden;
+  background-color: var(--vkui--color_background_contrast_themed);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_field_border_alpha);
+  border-radius: 8px;
+  box-shadow: var(--vkui--elevation1);
+}
+
+.popperBottom {
+  border-block-start: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.popperTop {
+  inset-block-end: 100%;
+  border-block-end: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  box-shadow: var(--vkui--elevation1_invert_y);
+}
+
+.customScroll {
+  max-block-size: 184px;
+}