@vkontakte/vkui 7.2.1 → 7.3.0

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

@@ -65,6 +65,11 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonthHidden: prevMonthH
     if (isMonthDisabled && !prevMonthHidden) {
         prevMonthHidden = isMonthDisabled(currentMonth === 0 ? 11 : currentMonth - 1, currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear);
     }
+    const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback((event, isOpen)=>{
+        if (isOpen && event.key === 'Escape') {
+            event.stopPropagation();
+        }
+    }, []);
     return /*#__PURE__*/ _jsxs(RootComponent, {
         baseClassName: styles.host,
         ...restProps,
@@ -119,7 +124,8 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonthHidden: prevMonthH
                             forceDropdownPortal: false,
                             selectType: "accent",
                             "aria-label": changeMonthLabel,
-                            "data-testid": typeof monthDropdownTestId === 'string' ? monthDropdownTestId : monthDropdownTestId?.(currentMonth)
+                            "data-testid": typeof monthDropdownTestId === 'string' ? monthDropdownTestId : monthDropdownTestId?.(currentMonth),
+                            onInputKeyDown: stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen
                         }),
                         /*#__PURE__*/ _jsx(CustomSelect, {
                             className: classNames(styles.picker, 'vkuiInternalCalendarHeader__picker'),
@@ -132,7 +138,8 @@ export const CalendarHeader = ({ viewDate, onChange, prevMonthHidden: prevMonthH
                             forceDropdownPortal: false,
                             selectType: "accent",
                             "aria-label": changeYearLabel,
-                            "data-testid": yearDropdownTestId
+                            "data-testid": yearDropdownTestId,
+                            onInputKeyDown: stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen
                         })
                     ]
                 })

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 { 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":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport {\n  Icon12Dropdown,\n  Icon20ChevronLeftOutline,\n  Icon20ChevronRightOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { addMonths, setMonth, setYear, subMonths } from 'date-fns';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarHeader.module.css';\n\ntype ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;\n\nexport type CalendarHeaderTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря.\n   */\n  monthDropdownTestId?: string | ((monthIndex: number) => string);\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.\n   */\n  yearDropdownTestId?: string | ((year: number) => string);\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.\n   */\n  nextMonthButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.\n   */\n  prevMonthButtonTestId?: string;\n};\n\nexport interface CalendarHeaderProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    CalendarHeaderTestsProps {\n  /**\n   * Отображаемая дата.\n   */\n  viewDate: Date;\n  /**\n   * Скрывает иконку для переключения на предыдущий месяц.\n   */\n  prevMonthHidden?: boolean;\n  /**\n   * Скрывает иконку для переключения на следующий месяц.\n   */\n  nextMonthHidden?: boolean;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean;\n  /**\n   * `aria-label` для кнопки предыдущего месяца.\n   */\n  prevMonthLabel?: string;\n  /**\n   * `aria-label` для кнопки следующего месяца.\n   */\n  nextMonthLabel?: string;\n  /**\n   * `aria-label` для селектора месяца.\n   */\n  changeMonthLabel?: string;\n  /**\n   * `aria-label` для селектора года.\n   */\n  changeYearLabel?: string;\n  /**\n   * Кастомная иконка для кнопки предыдущего месяца.\n   */\n  prevMonthIcon?: React.ReactNode;\n  /**\n   * Кастомная иконка для кнопки следующего месяца.\n   */\n  nextMonthIcon?: React.ReactNode;\n  /**\n   * Дополнительные свойства для кнопки предыдущего месяца.\n   */\n  prevMonthProps?: ArrowMonthProps;\n  /**\n   * Дополнительные свойства для кнопки следующего месяца.\n   */\n  nextMonthProps?: ArrowMonthProps;\n  /**\n   * Функция для проверки блокировки месяца.\n   */\n  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;\n  /**\n   * Функция для проверки блокировки года.\n   */\n  isYearDisabled?: (yearNumber: number) => boolean;\n  /**\n   * Обработчик изменения отображаемой даты.\n   */\n  onChange: (viewDate: Date) => void;\n  /**\n   * Нажатие на кнопку переключения на следующий месяц.\n   */\n  onNextMonth?: () => void;\n  /**\n   * Нажатие на кнопку переключения на предыдущий месяц.\n   */\n  onPrevMonth?: () => void;\n}\n\nexport const CalendarHeader = ({\n  viewDate,\n  onChange,\n  prevMonthHidden: prevMonthHiddenProp = false,\n  nextMonthHidden: nextMonthHiddenProp = false,\n  disablePickers = false,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthProps = {},\n  nextMonthProps = {},\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  prevMonthIcon = (\n    <Icon20ChevronLeftOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  nextMonthIcon = (\n    <Icon20ChevronRightOutline className={styles.navIconAccent} width={30} height={30} />\n  ),\n  isMonthDisabled,\n  isYearDisabled,\n  monthDropdownTestId,\n  yearDropdownTestId,\n  prevMonthButtonTestId,\n  nextMonthButtonTestId,\n  ...restProps\n}: CalendarHeaderProps): React.ReactNode => {\n  const { locale, direction } = useConfigProvider();\n\n  const onMonthsChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setMonth(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n  const onYearChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange(setYear(viewDate, Number(newValue))),\n    [onChange, viewDate],\n  );\n\n  const currentYear = viewDate.getFullYear();\n  const currentMonth = viewDate.getMonth();\n\n  const months = React.useMemo(\n    () =>\n      getMonths(locale).map(({ value, label }) => ({\n        value,\n        label: <span className={styles.month}>{label}</span>,\n        disabled: isMonthDisabled && isMonthDisabled(value),\n      })),\n    [locale, isMonthDisabled],\n  );\n\n  const years = React.useMemo(\n    () =>\n      getYears(currentYear, 100).map((year) => ({\n        ...year,\n        disabled: isYearDisabled && isYearDisabled(year.value),\n      })),\n    [currentYear, isYearDisabled],\n  );\n\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  });\n\n  const { className: prevMonthClassName, ...restPrevMonthProps } = prevMonthProps;\n  const { className: nextMonthClassName, ...restNextMonthProps } = nextMonthProps;\n\n  let nextMonthHidden =\n    nextMonthHiddenProp || (currentMonth === 11 && currentYear === DEFAULT_MAX_YEAR);\n  if (isMonthDisabled && !nextMonthHidden) {\n    nextMonthHidden = isMonthDisabled(\n      currentMonth === 11 ? 0 : currentMonth + 1,\n      currentMonth === 11 ? Math.min(currentYear + 1, DEFAULT_MAX_YEAR) : currentYear,\n    );\n  }\n\n  let prevMonthHidden =\n    prevMonthHiddenProp || (currentMonth === 0 && currentYear === DEFAULT_MIN_YEAR);\n  if (isMonthDisabled && !prevMonthHidden) {\n    prevMonthHidden = isMonthDisabled(\n      currentMonth === 0 ? 11 : currentMonth - 1,\n      currentMonth === 0 ? Math.max(currentYear - 1, DEFAULT_MIN_YEAR) : currentYear,\n    );\n  }\n\n  const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n    (event: React.KeyboardEvent, isOpen: boolean) => {\n      if (isOpen && event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    [],\n  );\n\n  return (\n    <RootComponent baseClassName={styles.host} {...restProps}>\n      {!prevMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}\n            onClick={onPrevMonth}\n            data-testid={prevMonthButtonTestId}\n            {...restPrevMonthProps}\n          >\n            <VisuallyHidden>\n              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n      {disablePickers ? (\n        <Paragraph\n          className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}\n          weight=\"2\"\n        >\n          <span className={styles.month}>\n            {new Intl.DateTimeFormat(locale, {\n              month: 'long',\n            }).format(viewDate)}\n          </span>\n          &nbsp;\n          {new Intl.DateTimeFormat(locale, {\n            year: 'numeric',\n          }).format(viewDate)}\n        </Paragraph>\n      ) : (\n        <AdaptivityProvider sizeY=\"compact\">\n          <div className={classNames(styles.pickers, 'vkuiInternalCalendarHeader__pickers')}>\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentMonth}\n              options={months}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onMonthsChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeMonthLabel}\n              data-testid={\n                typeof monthDropdownTestId === 'string'\n                  ? monthDropdownTestId\n                  : monthDropdownTestId?.(currentMonth)\n              }\n              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n            />\n            <CustomSelect\n              className={classNames(styles.picker, 'vkuiInternalCalendarHeader__picker')}\n              value={currentYear}\n              options={years}\n              dropdownOffsetDistance={4}\n              dropdownAutoWidth\n              icon={<Icon12Dropdown />}\n              onChange={onYearChange}\n              forceDropdownPortal={false}\n              selectType=\"accent\"\n              aria-label={changeYearLabel}\n              data-testid={yearDropdownTestId}\n              onInputKeyDown={stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen}\n            />\n          </div>\n        </AdaptivityProvider>\n      )}\n      {!nextMonthHidden && (\n        <AdaptivityProvider sizeX=\"regular\">\n          <Tappable\n            baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}\n            onClick={onNextMonth}\n            data-testid={nextMonthButtonTestId}\n            {...restNextMonthProps}\n          >\n            <VisuallyHidden>\n              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}\n            </VisuallyHidden>\n            {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}\n          </Tappable>\n        </AdaptivityProvider>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon12Dropdown","Icon20ChevronLeftOutline","Icon20ChevronRightOutline","classNames","addMonths","setMonth","setYear","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","getMonths","getYears","AdaptivityProvider","useConfigProvider","CustomSelect","RootComponent","Tappable","Paragraph","VisuallyHidden","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","stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen","event","isOpen","key","stopPropagation","baseClassName","host","sizeX","navIcon","navIconPrev","onClick","data-testid","format","pickers","weight","sizeY","div","picker","options","dropdownOffsetDistance","dropdownAutoWidth","icon","forceDropdownPortal","selectType","aria-label","onInputKeyDown","navIconNext"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithi
 import { useCalendar } from "../../hooks/useCalendar.js";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { isFirstDay, isLastDay, navigateDate } from "../../lib/calendar.js";
+import { isHTMLElement } from "../../lib/dom.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -20,7 +21,7 @@ const getIsDaySelected = (day, value)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
- */ export const CalendarRange = ({ value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef, ...props })=>{
+ */ export const CalendarRange = ({ value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef, ...props })=>{
     const _onChange = React.useCallback((newValue)=>onChange?.(newValue || undefined), [
         onChange
     ]);
@@ -42,15 +43,24 @@ const getIsDaySelected = (day, value)=>{
             'ArrowUp',
             'ArrowDown',
             'ArrowLeft',
-            'ArrowRight'
+            'ArrowRight',
+            'Home',
+            'End',
+            'PageUp',
+            'PageDown'
         ].includes(event.key)) {
             event.preventDefault();
+            const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);
+            if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate) && !isSameMonth(newFocusedDay, addMonths(viewDate, 1))) {
+                setViewDate(newFocusedDay);
+            }
+            setFocusedDay(newFocusedDay);
+            return;
         }
-        const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);
-        if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate) && !isSameMonth(newFocusedDay, addMonths(viewDate, 1))) {
-            setViewDate(newFocusedDay);
+        if ((event.key === 'Enter' || event.key === ' ') && isHTMLElement(event.target)) {
+            event.preventDefault();
+            event.target.click?.();
         }
-        setFocusedDay(newFocusedDay);
     }, [
         focusedDay,
         setFocusedDay,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n  subMonths,\n} from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части\n   */\n  leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части\n   */\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarRangeTestsProps {\n  value?: DateRangeType | null;\n  defaultValue?: DateRangeType | null;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?: (value: DateRangeType | undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`\n  shouldDisableDate?: (value: Date) => boolean;\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType | null) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return isWithinInterval(day, { start: startOfDay(value[0]), end: endOfDay(value[1]) });\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value: valueProp,\n  defaultValue,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  dayTestId,\n  leftPartHeaderTestsData,\n  rightPartHeaderTestsData,\n  getRootRef,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\n  const _onChange = React.useCallback(\n    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),\n    [onChange],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\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 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?.[1], event.key);\n\n      if (\n        newFocusedDay &&\n        !isSameMonth(newFocusedDay, viewDate) &&\n        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n      ) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      const isRangeSelected = value && !!value[0] && !!value[1];\n      if (isValueEmpty || isRangeSelected) {\n        return [date, null];\n      }\n\n      const [start] = value;\n      if (start && isSameDay(date, start)) {\n        return [startOfDay(start), endOfDay(start)];\n      } else if (start && isBefore(date, start)) {\n        return [startOfDay(date), endOfDay(start)];\n      } else if (start && isAfter(date, start)) {\n        return [start, endOfDay(date)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      updateValue(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [updateValue, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  const onRightPartViewDateChange = React.useCallback(\n    (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n    [setViewDate],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles.host} getRootRef={getRootRef}>\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={handleKeyDown}\n          isDayFocused={isDayFocused}\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          aria-label={changeDayLabel}\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          aria-label={changeDayLabel}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\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          tabIndex={0}\n          onBlur={resetSelectedDay}\n          dayTestId={dayTestId}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","subMonths","useCalendar","useCustomEnsuredControl","isFirstDay","isLastDay","navigateDate","CalendarDays","CalendarHeader","RootComponent","styles","getIsDaySelected","day","value","start","end","CalendarRange","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","_onChange","useCallback","newValue","undefined","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","baseClassName","host","div","className","inner","nextMonthHidden","onPrevMonth","header","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n  subMonths,\n} from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar';\nimport { isHTMLElement } from '../../lib/dom';\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 styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.\n   */\n  leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.\n   */\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarRangeTestsProps {\n  /**\n   * Текущий выбранный промежуток.\n   */\n  value?: DateRangeType | null;\n  /**\n   * Начальный промежуток при монтировании.\n   */\n  defaultValue?: DateRangeType | null;\n  /**\n   * Запрещает выбор даты в прошлом.\n   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n   */\n  disablePast?: boolean;\n  /**\n   * Запрещает выбор даты в будущем.\n   * Применяется, если не задано `shouldDisableDate`.\n   */\n  disableFuture?: boolean;\n  /**\n   * Отключает селекторы выбора месяца/года.\n   */\n  disablePickers?: boolean;\n  /**\n   * `aria-label` для изменения дня.\n   */\n  changeDayLabel?: string;\n  /**\n   * День недели, с которого начинается неделя.\n   */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Обработчик изменения выбранного промежутка.\n   */\n  onChange?: (value: DateRangeType | undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`\n  /**\n   * Функция для проверки запрета выбора даты.\n   */\n  shouldDisableDate?: (value: Date) => boolean;\n  /**\n   * @deprecated Свойство не используется.\n   */\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType | null) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return isWithinInterval(day, { start: startOfDay(value[0]), end: endOfDay(value[1]) });\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value: valueProp,\n  defaultValue,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  dayTestId,\n  leftPartHeaderTestsData,\n  rightPartHeaderTestsData,\n  getRootRef,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\n  const _onChange = React.useCallback(\n    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),\n    [onChange],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\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 handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (\n        [\n          'ArrowUp',\n          'ArrowDown',\n          'ArrowLeft',\n          'ArrowRight',\n          'Home',\n          'End',\n          'PageUp',\n          'PageDown',\n        ].includes(event.key)\n      ) {\n        event.preventDefault();\n\n        const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n        if (\n          newFocusedDay &&\n          !isSameMonth(newFocusedDay, viewDate) &&\n          !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n        ) {\n          setViewDate(newFocusedDay);\n        }\n        setFocusedDay(newFocusedDay);\n        return;\n      }\n\n      if ((event.key === 'Enter' || event.key === ' ') && isHTMLElement(event.target)) {\n        event.preventDefault();\n        event.target.click?.();\n      }\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      const isRangeSelected = value && !!value[0] && !!value[1];\n      if (isValueEmpty || isRangeSelected) {\n        return [date, null];\n      }\n\n      const [start] = value;\n      if (start && isSameDay(date, start)) {\n        return [startOfDay(start), endOfDay(start)];\n      } else if (start && isBefore(date, start)) {\n        return [startOfDay(date), endOfDay(start)];\n      } else if (start && isAfter(date, start)) {\n        return [start, endOfDay(date)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      updateValue(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [updateValue, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  const onRightPartViewDateChange = React.useCallback(\n    (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n    [setViewDate],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles.host} getRootRef={getRootRef}>\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={handleKeyDown}\n          isDayFocused={isDayFocused}\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          aria-label={changeDayLabel}\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          aria-label={changeDayLabel}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\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          tabIndex={0}\n          onBlur={resetSelectedDay}\n          dayTestId={dayTestId}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","subMonths","useCalendar","useCustomEnsuredControl","isFirstDay","isLastDay","navigateDate","isHTMLElement","CalendarDays","CalendarHeader","RootComponent","styles","getIsDaySelected","day","value","start","end","CalendarRange","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","_onChange","useCallback","newValue","undefined","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","event","includes","key","preventDefault","newFocusedDay","target","click","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","baseClassName","host","div","className","inner","nextMonthHidden","onPrevMonth","header","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { setHours, setMinutes } from "date-fns";
 import { Keys, pressedKey } from "../../lib/accessibility.js";
+import { callMultiple } from "../../lib/callMultiple.js";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider.js";
 import { Button } from "../Button/Button.js";
 import { CustomSelect } from "../CustomSelect/CustomSelect.js";
@@ -87,6 +88,12 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
             nextStep.current?.focus();
         }
     };
+    const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback((event, isOpen)=>{
+        if (isOpen && event.key === 'Escape') {
+            event.stopPropagation();
+        }
+    }, []);
+    const onSelectInputKeyDown = callMultiple(onPickerKeyDown, stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen);
     const renderDoneButton = ()=>{
         const ButtonComponent = DoneButton ?? Button;
         return /*#__PURE__*/ _jsx(ButtonComponent, {
@@ -115,7 +122,7 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
                         searchable: true,
                         filterFn: selectFilterFn,
                         onInputChange: onHoursInputChange,
-                        onInputKeyDown: onPickerKeyDown,
+                        onInputKeyDown: onSelectInputKeyDown,
                         getSelectInputRef: hoursInputRef,
                         "aria-label": changeHoursLabel,
                         "data-testid": hoursTestId
@@ -139,7 +146,7 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
                         filterFn: selectFilterFn,
                         onInputChange: onMinutesInputChange,
                         getSelectInputRef: minutesInputRef,
-                        onInputKeyDown: onPickerKeyDown,
+                        onInputKeyDown: onSelectInputKeyDown,
                         "aria-label": changeMinutesLabel,
                         "data-testid": minutesTestId
                     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { setHours, setMinutes } from 'date-fns';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nconst selectFilterFn = () => true;\n\nexport type CalendarTimeTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре\n   */\n  hoursTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре\n   */\n  minutesTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки \"Готово\" в календаре\n   */\n  doneButtonTestId?: string;\n};\n\nexport type CalendarDoneButtonProps = {\n  /**\n   * Кастомное отображение кнопки Done.\n   */\n  DoneButton?: React.ComponentType<ButtonProps>;\n  doneButtonText?: string;\n  doneButtonShow?: boolean;\n  doneButtonDisabled?: boolean;\n  onDoneButtonClick?: () => void;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {\n  value: Date;\n  changeHoursLabel?: string;\n  changeMinutesLabel?: string;\n  onChange?: (value: Date) => void;\n  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;\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\nconst validateValue = (\n  value: string,\n  validValues: Array<{\n    value: number;\n    label: string;\n  }>,\n): boolean => {\n  const numValue = Number(value);\n  return !isNaN(numValue) && validValues.some((v) => v.value === numValue);\n};\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\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(setHours(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutes(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onPickerValueChange = (\n    e: ChangeEvent<HTMLInputElement>,\n    validate: (numericValue: string) => boolean,\n    setter: (value: Date, numericValue: number) => Date,\n  ) => {\n    const numericValue = e.target.value.replace(/\\D/g, '');\n    e.target.value = numericValue;\n    if (validate(numericValue)) {\n      onChange?.(setter(value, Number(numericValue)));\n    }\n  };\n\n  const onHoursInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onPickerValueChange(e, (numValue) => validateValue(numValue, localHours), setHours);\n  };\n\n  const onMinutesInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onPickerValueChange(e, (numValue) => validateValue(numValue, localMinutes), setMinutes);\n  };\n\n  const onHoursChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setHours(value, Number(newValue))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setMinutes(value, Number(newValue))),\n    [onChange, value],\n  );\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 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      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getHours()}\n            options={localHours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            searchable\n            filterFn={selectFilterFn}\n            onInputChange={onHoursInputChange}\n            onInputKeyDown={onPickerKeyDown}\n            getSelectInputRef={hoursInputRef}\n            aria-label={changeHoursLabel}\n            data-testid={hoursTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles.divider}>:</div>\n      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getMinutes()}\n            options={localMinutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            searchable\n            filterFn={selectFilterFn}\n            onInputChange={onMinutesInputChange}\n            getSelectInputRef={minutesInputRef}\n            onInputKeyDown={onPickerKeyDown}\n            aria-label={changeMinutesLabel}\n            data-testid={minutesTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider sizeY=\"compact\">{renderDoneButton()}</AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useRef","React","classNames","setHours","setMinutes","Keys","pressedKey","AdaptivityProvider","Button","CustomSelect","styles","selectFilterFn","hours","i","push","value","label","String","padStart","minutes","validateValue","validValues","numValue","Number","isNaN","some","v","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","isDayDisabled","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","localMinutes","minute","onPickerValueChange","e","validate","setter","numericValue","target","replace","onHoursInputChange","onMinutesInputChange","onHoursChange","useCallback","_","newValue","onMinutesChange","onPickerKeyDown","key","ENTER","steps","filter","ref","Boolean","current","currentStepIndex","findIndex","step","nextStepIndex","length","nextStep","preventDefault","focus","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","host","host__withoutDone","picker","sizeY","getHours","options","forceDropdownPortal","searchable","filterFn","onInputChange","onInputKeyDown","getSelectInputRef","aria-label","divider","getMinutes","button"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { setHours, setMinutes } from 'date-fns';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nconst selectFilterFn = () => true;\n\nexport type CalendarTimeTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.\n   */\n  hoursTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре.\n   */\n  minutesTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки \"Готово\" в календаре.\n   */\n  doneButtonTestId?: string;\n};\n\nexport type CalendarDoneButtonProps = {\n  /**\n   * Кастомное отображение кнопки `\"Done\"`.\n   */\n  DoneButton?: React.ComponentType<ButtonProps>;\n  /**\n   * Текст отображаемый в кнопке `\"Done\"`.\n   */\n  doneButtonText?: string;\n  /**\n   * Управление отображением кнопки `\"Done\"`.\n   */\n  doneButtonShow?: boolean;\n  /**\n   * Блокировка взаимодействия с кнопкой \"Done\".\n   */\n  doneButtonDisabled?: boolean;\n  /**\n   * Обработки нажатия на кнопку `\"Done\"`.\n   */\n  onDoneButtonClick?: () => void;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {\n  /**\n   * Отображаемая дата.\n   */\n  value: Date;\n  /**\n   * Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий.\n   */\n  changeHoursLabel?: string;\n  /**\n   * Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий.\n   */\n  changeMinutesLabel?: string;\n  /**\n   * Обработчик изменения времени.\n   */\n  onChange?: (value: Date) => void;\n  /**\n   * Функция для проверки блокировки выбора даты и времени.\n   */\n  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;\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\nconst validateValue = (\n  value: string,\n  validValues: Array<{\n    value: number;\n    label: string;\n  }>,\n): boolean => {\n  const numValue = Number(value);\n  return !isNaN(numValue) && validValues.some((v) => v.value === numValue);\n};\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\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(setHours(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutes(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onPickerValueChange = (\n    e: ChangeEvent<HTMLInputElement>,\n    validate: (numericValue: string) => boolean,\n    setter: (value: Date, numericValue: number) => Date,\n  ) => {\n    const numericValue = e.target.value.replace(/\\D/g, '');\n    e.target.value = numericValue;\n    if (validate(numericValue)) {\n      onChange?.(setter(value, Number(numericValue)));\n    }\n  };\n\n  const onHoursInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onPickerValueChange(e, (numValue) => validateValue(numValue, localHours), setHours);\n  };\n\n  const onMinutesInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onPickerValueChange(e, (numValue) => validateValue(numValue, localMinutes), setMinutes);\n  };\n\n  const onHoursChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setHours(value, Number(newValue))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setMinutes(value, Number(newValue))),\n    [onChange, value],\n  );\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 stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = 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 = callMultiple(\n    onPickerKeyDown,\n    stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen,\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      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getHours()}\n            options={localHours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            searchable\n            filterFn={selectFilterFn}\n            onInputChange={onHoursInputChange}\n            onInputKeyDown={onSelectInputKeyDown}\n            getSelectInputRef={hoursInputRef}\n            aria-label={changeHoursLabel}\n            data-testid={hoursTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles.divider}>:</div>\n      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getMinutes()}\n            options={localMinutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            searchable\n            filterFn={selectFilterFn}\n            onInputChange={onMinutesInputChange}\n            getSelectInputRef={minutesInputRef}\n            onInputKeyDown={onSelectInputKeyDown}\n            aria-label={changeMinutesLabel}\n            data-testid={minutesTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider sizeY=\"compact\">{renderDoneButton()}</AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useRef","React","classNames","setHours","setMinutes","Keys","pressedKey","callMultiple","AdaptivityProvider","Button","CustomSelect","styles","selectFilterFn","hours","i","push","value","label","String","padStart","minutes","validateValue","validValues","numValue","Number","isNaN","some","v","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","isDayDisabled","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","localMinutes","minute","onPickerValueChange","e","validate","setter","numericValue","target","replace","onHoursInputChange","onMinutesInputChange","onHoursChange","useCallback","_","newValue","onMinutesChange","onPickerKeyDown","key","ENTER","steps","filter","ref","Boolean","current","currentStepIndex","findIndex","step","nextStepIndex","length","nextStep","preventDefault","focus","stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen","event","isOpen","stopPropagation","onSelectInputKeyDown","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","host","host__withoutDone","picker","sizeY","getHours","options","forceDropdownPortal","searchable","filterFn","onInputChange","onInputKeyDown","getSelectInputRef","aria-label","divider","getMinutes","button"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Card.module.css';\n\nexport interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {\n  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint' | 'plain';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  Component = 'li',\n  ...restProps\n}: CardProps): React.ReactNode => {\n  const withBorder = mode === 'outline' || mode === 'outline-tint';\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      baseClassName={classNames(\n        styles.host,\n        mode === 'outline' && styles.modeOutline,\n        mode === 'shadow' && styles.modeShadow,\n        mode === 'plain' && styles.modePlain,\n        withBorder && styles.withBorder,\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","Card","mode","Component","restProps","withBorder","baseClassName","host","modeOutline","modeShadow","modePlain"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAMvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,OAAO,MAAM,EACbC,YAAY,IAAI,EAChB,GAAGC,WACO;IACV,MAAMC,aAAaH,SAAS,aAAaA,SAAS;IAClD,qBACE,KAACH;QACE,GAAGK,SAAS;QACbD,WAAWA;QACXG,eAAeR,WACbE,OAAOO,IAAI,EACXL,SAAS,aAAaF,OAAOQ,WAAW,EACxCN,SAAS,YAAYF,OAAOS,UAAU,EACtCP,SAAS,WAAWF,OAAOU,SAAS,EACpCL,cAAcL,OAAOK,UAAU;;AAIvC,EAAE"}
+{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Card.module.css';\n\nexport interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {\n  /**\n   * Внешний вид карточки.\n   */\n  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint' | 'plain';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  Component = 'li',\n  ...restProps\n}: CardProps): React.ReactNode => {\n  const withBorder = mode === 'outline' || mode === 'outline-tint';\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      baseClassName={classNames(\n        styles.host,\n        mode === 'outline' && styles.modeOutline,\n        mode === 'shadow' && styles.modeShadow,\n        mode === 'plain' && styles.modePlain,\n        withBorder && styles.withBorder,\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","Card","mode","Component","restProps","withBorder","baseClassName","host","modeOutline","modeShadow","modePlain"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,OAAO,MAAM,EACbC,YAAY,IAAI,EAChB,GAAGC,WACO;IACV,MAAMC,aAAaH,SAAS,aAAaA,SAAS;IAClD,qBACE,KAACH;QACE,GAAGK,SAAS;QACbD,WAAWA;QACXG,eAAeR,WACbE,OAAOO,IAAI,EACXL,SAAS,aAAaF,OAAOQ,WAAW,EACxCN,SAAS,YAAYF,OAAOS,UAAU,EACtCP,SAAS,WAAWF,OAAOU,SAAS,EACpCL,cAAcL,OAAOK,UAAU;;AAIvC,EAAE"}

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

@@ -9,8 +9,8 @@
 .modeShadow {
   box-shadow: var(
     --vkui--elevation3,
-    0 2px 24px 0 rgba(0, 0, 0, 0.08),
-    0 0 2px 0 rgba(0, 0, 0, 0.08)
+    0 2px 24px 0 rgb(0, 0, 0, 0.08),
+    0 0 2px 0 rgb(0, 0, 0, 0.08)
   );
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nconst stylesSize = {\n  s: 'vkuiInternalCardGrid--size-s',\n  m: 'vkuiInternalCardGrid--size-m',\n  l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  padding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  size = 's',\n  padding = false,\n  Component = 'ul',\n  ...restProps\n}: CardGridProps): React.ReactNode => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardGrid',\n        padding && styles.padding,\n        stylesSize[size],\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n      )}\n    />\n  );\n};\n"],"names":["classNames","useAdaptivity","RootComponent","styles","sizeXClassNames","none","sizeXNone","compact","sizeXCompact","stylesSize","s","m","l","CardGrid","size","padding","Component","restProps","sizeX","baseClassName","host"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAUA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,GAAG,EACVC,UAAU,KAAK,EACfC,YAAY,IAAI,EAChB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGjB;IAE3B,qBACE,KAACC;QACE,GAAGe,SAAS;QACbD,WAAWA;QACXG,eAAenB,WACbG,OAAOiB,IAAI,EACX,wBACAL,WAAWZ,OAAOY,OAAO,EACzBN,UAAU,CAACK,KAAK,EAChBI,UAAU,aAAad,eAAe,CAACc,MAAM;;AAIrD,EAAE"}
+{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  compact: styles.sizeXCompact,\n};\n\nconst stylesSize = {\n  s: 'vkuiInternalCardGrid--size-s',\n  m: 'vkuiInternalCardGrid--size-m',\n  l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {\n  /**\n   * Размер карточек.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа.\n   */\n  padding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  size = 's',\n  padding = false,\n  Component = 'ul',\n  ...restProps\n}: CardGridProps): React.ReactNode => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardGrid',\n        padding && styles.padding,\n        stylesSize[size],\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n      )}\n    />\n  );\n};\n"],"names":["classNames","useAdaptivity","RootComponent","styles","sizeXClassNames","none","sizeXNone","compact","sizeXCompact","stylesSize","s","m","l","CardGrid","size","padding","Component","restProps","sizeX","baseClassName","host"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,GAAG,EACVC,UAAU,KAAK,EACfC,YAAY,IAAI,EAChB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGjB;IAE3B,qBACE,KAACC;QACE,GAAGe,SAAS;QACbD,WAAWA;QACXG,eAAenB,WACbG,OAAOiB,IAAI,EACX,wBACAL,WAAWZ,OAAOY,OAAO,EACzBN,UAAU,CAACK,KAAK,EAChBI,UAAU,aAAad,eAAe,CAACc,MAAM;;AAIrD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useDOM } from '../../lib/dom';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasComponent,\n    Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  /**\n   * Добавляет отступы по краям слева и справа\n   */\n  padding?: boolean;\n  /**\n   * Позволяет поменять тег используемый для обертки над карточками\n   */\n  CardsListComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  padding = false,\n  CardsListComponent = 'ul',\n  prevButtonTestId,\n  nextButtonTestId,\n  ...restProps\n}: CardScrollProps): React.ReactNode => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const direction = useConfigDirection();\n\n  const { window } = useDOM();\n\n  const getPadding = (container: HTMLElement) => {\n    return parseFloat(\n      window!\n        .getComputedStyle(container)\n        .getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'),\n    );\n  };\n\n  const slideOffsetFromStart = (slide: HTMLElement) => {\n    const containerWidth = refContainer.current?.offsetWidth || 0;\n    return direction === 'rtl'\n      ? containerWidth - slide.offsetLeft - slide.offsetWidth\n      : slide.offsetLeft;\n  };\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n\n    const getMarginEnd = (el: HTMLElement) => {\n      const computedStyles = window!.getComputedStyle(el);\n      return (\n        parseInt(computedStyles.marginInlineEnd) ||\n        (direction === 'rtl'\n          ? parseInt(computedStyles.marginLeft)\n          : parseInt(computedStyles.marginRight)) ||\n        0\n      );\n    };\n\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        slideOffsetFromStart(el) + el.offsetWidth + getMarginEnd(el) - offset >= 0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n    const padding = getPadding(refContainer.current);\n    const scrollTo = slideOffsetFromStart(slide) - (containerWidth - slide.offsetWidth) + padding;\n\n    if (scrollTo <= 2 * padding) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(refContainer.current.children, (el: HTMLElement) => {\n      return slideOffsetFromStart(el) + el.offsetWidth - offset > containerWidth;\n    }) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    const padding = getPadding(refContainer.current);\n    return slideOffsetFromStart(slide) - padding;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        padding && styles.withPaddings,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n        prevButtonTestId={prevButtonTestId}\n        nextButtonTestId={nextButtonTestId}\n        ContentWrapperComponent={CardsListComponent}\n        contentWrapperRef={refContainer}\n        contentWrapperClassName={styles.in}\n      >\n        {children}\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","useDOM","HorizontalScroll","RootComponent","styles","stylesSize","s","m","l","CardScroll","children","size","showArrows","padding","CardsListComponent","prevButtonTestId","nextButtonTestId","restProps","refContainer","useRef","direction","window","getPadding","container","parseFloat","getComputedStyle","getPropertyValue","slideOffsetFromStart","slide","containerWidth","current","offsetWidth","offsetLeft","getScrollToLeft","offset","getMarginEnd","el","computedStyles","parseInt","marginInlineEnd","marginLeft","marginRight","slideIndex","findIndex","scrollTo","getScrollToRight","Array","prototype","find","call","baseClassName","host","withPaddings","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","in"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useDOM } from '../../lib/dom';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasComponent,\n    Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  /**\n   * Добавляет отступы по краям слева и справа.\n   */\n  padding?: boolean;\n  /**\n   * Позволяет поменять тег используемый для обертки над карточками.\n   */\n  CardsListComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  padding = false,\n  CardsListComponent = 'ul',\n  prevButtonTestId,\n  nextButtonTestId,\n  ...restProps\n}: CardScrollProps): React.ReactNode => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const direction = useConfigDirection();\n\n  const { window } = useDOM();\n\n  const getPadding = (container: HTMLElement) => {\n    return parseFloat(\n      window!\n        .getComputedStyle(container)\n        .getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'),\n    );\n  };\n\n  const slideOffsetFromStart = (slide: HTMLElement) => {\n    const containerWidth = refContainer.current?.offsetWidth || 0;\n    return direction === 'rtl'\n      ? containerWidth - slide.offsetLeft - slide.offsetWidth\n      : slide.offsetLeft;\n  };\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n\n    const getMarginEnd = (el: HTMLElement) => {\n      const computedStyles = window!.getComputedStyle(el);\n      return (\n        parseInt(computedStyles.marginInlineEnd) ||\n        (direction === 'rtl'\n          ? parseInt(computedStyles.marginLeft)\n          : parseInt(computedStyles.marginRight)) ||\n        0\n      );\n    };\n\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        slideOffsetFromStart(el) + el.offsetWidth + getMarginEnd(el) - offset >= 0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n    const padding = getPadding(refContainer.current);\n    const scrollTo = slideOffsetFromStart(slide) - (containerWidth - slide.offsetWidth) + padding;\n\n    if (scrollTo <= 2 * padding) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(refContainer.current.children, (el: HTMLElement) => {\n      return slideOffsetFromStart(el) + el.offsetWidth - offset > containerWidth;\n    }) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    const padding = getPadding(refContainer.current);\n    return slideOffsetFromStart(slide) - padding;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        padding && styles.withPaddings,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n        prevButtonTestId={prevButtonTestId}\n        nextButtonTestId={nextButtonTestId}\n        ContentWrapperComponent={CardsListComponent}\n        contentWrapperRef={refContainer}\n        contentWrapperClassName={styles.in}\n      >\n        {children}\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","useDOM","HorizontalScroll","RootComponent","styles","stylesSize","s","m","l","CardScroll","children","size","showArrows","padding","CardsListComponent","prevButtonTestId","nextButtonTestId","restProps","refContainer","useRef","direction","window","getPadding","container","parseFloat","getComputedStyle","getPropertyValue","slideOffsetFromStart","slide","containerWidth","current","offsetWidth","offsetLeft","getScrollToLeft","offset","getMarginEnd","el","computedStyles","parseInt","marginInlineEnd","marginLeft","marginRight","slideIndex","findIndex","scrollTo","getScrollToRight","Array","prototype","find","call","baseClassName","host","withPaddings","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","in"],"mappings":"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"}

package/dist/cssm/components/CarouselBase/Bullets.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
 import styles from "./CarouselBase.module.css";
 const stylesBullets = {

package/dist/cssm/components/CarouselBase/Bullets.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CarouselBase/Bullets.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type BaseGalleryProps } from './types';\nimport styles from './CarouselBase.module.css';\n\nexport interface BulletsTestIds {\n  /**\n   * Передает атрибут `data-testid` для bullets\n   */\n  bulletTestId?: (index: number, active: boolean) => string;\n}\n\ninterface BulletsProps extends BulletsTestIds {\n  bullets: Exclude<BaseGalleryProps['bullets'], false | undefined>;\n  slideIndex: number;\n  count: number;\n}\n\nconst stylesBullets = {\n  dark: styles.bulletsDark,\n  light: styles.bulletsLight,\n};\n\nexport const Bullets: React.FC<BulletsProps> = ({ bullets, slideIndex, count, bulletTestId }) => {\n  return (\n    <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>\n      {Array.from({ length: count }).map((_, index) => (\n        <div\n          className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}\n          data-testid={bulletTestId?.(index, index === slideIndex)}\n          key={index}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","stylesBullets","dark","bulletsDark","light","bulletsLight","Bullets","bullets","slideIndex","count","bulletTestId","div","aria-hidden","className","Array","from","length","map","_","index","bullet","bulletActive","data-testid"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,4BAA4B;AAe/C,MAAMC,gBAAgB;IACpBC,MAAMF,OAAOG,WAAW;IACxBC,OAAOJ,OAAOK,YAAY;AAC5B;AAEA,OAAO,MAAMC,UAAkC,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,YAAY,EAAE;IAC1F,qBACE,KAACC;QAAIC,aAAW;QAACC,WAAWd,WAAWC,OAAOO,OAAO,EAAEN,aAAa,CAACM,QAAQ;kBAC1EO,MAAMC,IAAI,CAAC;YAAEC,QAAQP;QAAM,GAAGQ,GAAG,CAAC,CAACC,GAAGC,sBACrC,KAACR;gBACCE,WAAWd,WAAWC,OAAOoB,MAAM,EAAED,UAAUX,cAAcR,OAAOqB,YAAY;gBAChFC,eAAaZ,eAAeS,OAAOA,UAAUX;eACxCW;;AAKf,EAAE"}
+{"version":3,"sources":["../../../../src/components/CarouselBase/Bullets.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { type BaseGalleryProps } from './types';\nimport styles from './CarouselBase.module.css';\n\nexport interface BulletsTestIds {\n  /**\n   * Передает атрибут `data-testid` для bullets.\n   */\n  bulletTestId?: (index: number, active: boolean) => string;\n}\n\ninterface BulletsProps extends BulletsTestIds {\n  bullets: Exclude<BaseGalleryProps['bullets'], false | undefined>;\n  slideIndex: number;\n  count: number;\n}\n\nconst stylesBullets = {\n  dark: styles.bulletsDark,\n  light: styles.bulletsLight,\n};\n\nexport const Bullets = ({ bullets, slideIndex, count, bulletTestId }: BulletsProps) => {\n  return (\n    <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>\n      {Array.from({ length: count }).map((_, index) => (\n        <div\n          className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}\n          data-testid={bulletTestId?.(index, index === slideIndex)}\n          key={index}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["classNames","styles","stylesBullets","dark","bulletsDark","light","bulletsLight","Bullets","bullets","slideIndex","count","bulletTestId","div","aria-hidden","className","Array","from","length","map","_","index","bullet","bulletActive","data-testid"],"mappings":"AAAA,sCAAsC;AAEtC,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,4BAA4B;AAe/C,MAAMC,gBAAgB;IACpBC,MAAMF,OAAOG,WAAW;IACxBC,OAAOJ,OAAOK,YAAY;AAC5B;AAEA,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,YAAY,EAAgB;IAChF,qBACE,KAACC;QAAIC,aAAW;QAACC,WAAWd,WAAWC,OAAOO,OAAO,EAAEN,aAAa,CAACM,QAAQ;kBAC1EO,MAAMC,IAAI,CAAC;YAAEC,QAAQP;QAAM,GAAGQ,GAAG,CAAC,CAACC,GAAGC,sBACrC,KAACR;gBACCE,WAAWd,WAAWC,OAAOoB,MAAM,EAAED,UAAUX,cAAcR,OAAOqB,YAAY;gBAChFC,eAAaZ,eAAeS,OAAOA,UAAUX;eACxCW;;AAKf,EAAE"}

package/dist/cssm/components/CarouselBase/CarouselBase.js

@@ -78,7 +78,7 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
     const checkShiftOutOfBoundsFromEnd = (shiftX, slides)=>{
         /**
      * Поскольку при `align="center"` слайды сдвинуты, прежде чем рассчитать крайнюю правую точку,
-     * нужно вычесть сдвиг слайдов
+     * нужно вычесть сдвиг слайдов.
      */ const firstSlideShift = align === 'center' ? (slidesManager.current.containerWidth - slidesManager.current.slides[0].width) / 2 : 0;
         const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX - firstSlideShift;
         return isRtl ? shiftX >= lastPoint : shiftX <= -lastPoint;
@@ -91,7 +91,7 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
         animationFrameRef.current = requestAnimationFrame(()=>{
             /**
        * Для бесконечной галереи проверяем, что при dnd мы прокрутили левее, чем первый слайд,
-       * чтобы сбросить `shiftXCurrentRef`
+       * чтобы сбросить `shiftXCurrentRef`.
        */ if (looped && checkShiftOutOfBoundsFromStart(shiftX, snaps)) {
                 const firstSnap = revertRtlValue(snaps[0], isRtl);
                 shiftXCurrentRef.current = revertRtlValue(-contentSize + firstSnap, isRtl);
@@ -99,7 +99,7 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
             }
             /**
        * Для бесконечной галереи проверяем, что при dnd мы прокрутили правее, чем последний слайд,
-       * чтобы правильно пересчитать `shiftXCurrentRef`
+       * чтобы правильно пересчитать `shiftXCurrentRef`.
        */ if (looped && checkShiftOutOfBoundsFromEnd(shiftX, slides)) {
                 shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];
             }
@@ -215,7 +215,7 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
         /**
      * Переключаемся с последнего элемента на первый
      * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) "вперед"
-     * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения
+     * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения.
      */ if (indent === snaps[0] && fromLastToFirst) {
             const endEdge = revertRtlValue(Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width, isRtl);
             const distance = endEdge + startPoint;
@@ -232,7 +232,7 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
         /**
        * Переключаемся с первого слайда на последний
        * Для корректной анимации сначала задаем первым видимым слайдам смещение
-       * В следующем кадре начинаем анимация прокрутки "назад"
+       * В следующем кадре начинаем анимация прокрутки "назад".
        */ } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {
             startPoint = indent - revertRtlValue(slides[slides.length - 1].width, isRtl);
             addToAnimationQueue(()=>{
@@ -246,7 +246,7 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
                 });
             });
         /**
-       * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения
+       * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения.
        */ } else {
             addToAnimationQueue(()=>{
                 const distance = Math.abs(indent - startPoint);