@via-profit/ui-kit 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -4,6 +4,166 @@
 
 ## Не выпущено
 
+## 0.5.0 — 2026-10-02
+
+Новые компоненты: `Slider`, `Tabs`, `Tooltip` и `Toast` (замена react-toastify с тем же API). Оформление компонентов в теме — `defaultProps` и `overrides` для всего приложения, токены рамки фокуса, теней и шрифта. Пакет собирается и в ES-модули: сборщики выбрасывают неиспользуемый код. Календарь и дейтпикер больше не требуют `react-intl`.
+
+Версия содержит несовместимые изменения. Как обновиться с 0.4:
+
+- `CountryFlags`: модуль удалён. Если вы импортировали флаги из `@via-profit/ui-kit/CountryFlags`, перенесите нужные SVG в свой проект. `PhoneField` по-прежнему показывает флаги стран из набора шаблонов по умолчанию;
+- `Menu`: удалены неиспользуемые `Menu/VirtualizedList`, `Menu/VirtualizedListComponent`, `Menu/VirtualizedItem`, `Menu/MeasuredItem` и `Menu/AutoHeightWrapper` — уберите их импорты;
+- импорт: работают только пути модулей из карты `exports` — `@via-profit/ui-kit/Button`, `@via-profit/ui-kit/Button/ButtonContainer` и т. п. Пути с расширением `.js` или с `dist` уберите;
+- `ErrorBoundary`: в production сообщение об ошибке по умолчанию на английском; свои тексты передайте в `title` и `description`.
+
+Подробности — в разделах ниже.
+
+### Добавлено
+
+- **ThemeProvider**: оформление компонентов в теме — `components` с `defaultProps` и `overrides` по имени компонента. Свойства и `overrides`, переданные компоненту в коде, важнее темы. Токены темы: `typography.fontFamily`, `focusRing` (одинаковая рамка фокуса во всех компонентах) и `elevation` (тени всплывающих элементов и карточек); без них компоненты выглядят как раньше.
+- **Button**: `ButtonBase` и часть `Container` принимают `variant` и `groupOrientation`; стили вариантов перенесены внутрь `Container`, поэтому `styled(ButtonContainer)` в `overrides` теперь перекрывает стили варианта. Внешний вид кнопок не изменился.
+- **Toast**: новый компонент `@via-profit/ui-kit/Toast` — уведомления с API react-toastify (`toast`, `toast.info/success/warning/error/loading`, `toast.update`, `toast.dismiss`, `ToastContainer` с `position`, `autoClose`, `limit`), а также `description` и кнопки `actions`; клик по интерактивным элементам внутри не закрывает уведомление, таймер стоит под курсором, при фокусе внутри и в неактивном окне; F8 переводит фокус к уведомлениям, Escape закрывает, ошибки читаются сразу (`role="alert"`); несколько контейнеров через `containerId` и `overrides`.
+- **Tooltip**: новый компонент `@via-profit/ui-kit/Tooltip` — подсказка при наведении и фокусе с клавиатуры: расположение и автоматический переворот, стрелка, задержки появления и скрытия, подсказку можно навести указателем, соседняя подсказка появляется без задержки, Escape скрывает; строковый `title` становится `aria-label` элемента, а с `describeChild` подсказка связывается через `aria-describedby`; контролируемый режим (`isOpen`, `onOpenChange`) и `overrides`.
+- **Tabs**: новый компонент `@via-profit/ui-kit/Tabs` — вкладки `Tabs`, `TabList`, `Tab`, `TabPanel`: контролируемый и неконтролируемый режимы, вертикальное расположение, `fullWidth`, цвет, прокрутка ряда с выбранной вкладкой в видимой части, `keepMounted` у панели; роли `tablist`/`tab`/`tabpanel` связываются автоматически, стрелки, Home/End, автоматический и ручной (`activation="manual"`) выбор.
+- **Slider**: новый компонент `@via-profit/ui-kit/Slider` — выбор числа или диапазона ползунком: контролируемый и неконтролируемый режимы, шаг, метки с подписями, вертикальное расположение, цвет, `onChangeCommitted` по окончании перетаскивания, значение в форме через `name` и `overrides`; ползунки — элементы с ролью `slider`, управляются стрелками, PageUp/PageDown и Home/End.
+
+### Изменено
+
+- **Пакет**: кроме CommonJS, собираются ES-модули (`esm/`); в `package.json` добавлены `module`, `sideEffects: false` и карта `exports` со всеми модулями. Сборщики (webpack, Vite) берут ES-модули и выбрасывают неиспользуемый код: импорт одного `H1` из `@via-profit/ui-kit/Typography` занимает около 1 КБ вместо 15. Пути импорта не изменились (`@via-profit/ui-kit/Button`, `@via-profit/ui-kit/Button/ButtonContainer`), но пути, которых нет в `exports`, больше не работают: например, с расширением `.js` или с `dist` в пути — уберите их.
+
+### Удалено
+
+- **CountryFlags**: модуль `@via-profit/ui-kit/CountryFlags` удалён — флаги стран не относятся к UI-киту. `PhoneField` по-прежнему показывает флаги стран из набора шаблонов по умолчанию; в своих шаблонах передайте как флаг любой элемент — свою иконку или флаг из шаблонов по умолчанию: `defaultTemplates.find(([code]) => code === 'RU')?.[1]`. Если вы импортировали флаги из `CountryFlags`, перенесите нужные SVG в свой проект.
+- **Menu**: неиспользуемые файлы виртуализированного списка — `Menu/VirtualizedList`, `Menu/VirtualizedListComponent`, `Menu/VirtualizedItem`, `Menu/MeasuredItem`, `Menu/AutoHeightWrapper`. Меню их не использовало.
+- **ErrorBoundary**: неиспользуемый `ErrorBoundary/Fallback`.
+
+### Исправлено
+
+- **Calendar**, **DatePicker**: больше не требуют `react-intl`. Календарь оборачивает себя в `ErrorBoundary`, а тот импортировал `react-intl`, которого нет в зависимостях пакета: без него календарь не собирался.
+- **ErrorBoundary**: свойство `fallback` теперь работает; тексты сообщения об ошибке задаются свойствами `title` и `description` (по умолчанию `Something went wrong` и `Please let the developers know`) вместо русских строк через `react-intl`.
+- **Selectbox**: значение выводится шрифтом поля ввода — селектбокс той же высоты, что `TextField`, `Autocomplete` и `DatePicker` (раньше был ниже на 2px, а текст значения мельче).
+
+## 0.4.0 — 2026-10-01
+
+Новые компоненты: `Checkbox`, `Radio` и `RadioGroup`, `ButtonGroup`, `Stack` и `Grid`, шкала отступов темы. Доступность с клавиатуры и для программ чтения с экрана во многих компонентах, исправления ошибок по всей библиотеке.
+
+Версия содержит несовместимые изменения. Как обновиться с 0.3:
+
+- `LoadingIndicator`: экспорт по умолчанию — строчный `Spinner`. Если вы использовали слой загрузки поверх блока, импортируйте `LoadingOverlay`: `import { LoadingOverlay } from '@via-profit/ui-kit/LoadingIndicator'`;
+- `DatePicker`: `onChange` получает `Date | null` — обработчик, принимающий только `Date`, нужно доработать;
+- `Switch`: `ref` указывает на `<input>`; переопределения `ToggleWrapper` и `Container` получают ref на `<input>` и `<label>`;
+- `Accordion`: `onOpen` получает новое состояние и больше не отключает внутреннее переключение неконтролируемого аккордеона; внутренний отступ заголовка перенесён на кнопку внутри него;
+- `Autocomplete`: удалены `Autocomplete2` и `Autocomplete/OverrideMenuList`; мультивыбор переработан;
+- `Table`: таблица больше не перестраивается в блоки на узких экранах — оберните широкие таблицы в контейнер с `overflow-x: auto`;
+- `Swiper`: контейнер не ограничен шириной `1200px`;
+- `Menu`: клик по анкору больше не вызывает `onRequestClose`.
+
+Подробности — в разделах ниже.
+
+### Добавлено
+
+- **Stack**, **Grid**: компоненты раскладки `@via-profit/ui-kit/Stack` и `@via-profit/ui-kit/Grid` — элементы в столбец или строку с одинаковым отступом и сетка колонок, которая с `minColumnWidth` сама перестраивается по ширине; оба без обёрток вокруг элементов. **ThemeProvider**: шкала отступов `theme.spacing` (`xs`, `sm`, `md`, `lg`, `xl`), её принимает `gap` у `Stack` и `Grid`.
+- **Radio**, **RadioGroup**: новые компоненты `@via-profit/ui-kit/Radio` и `@via-profit/ui-kit/RadioGroup` — радиокнопки и группа с подписью, контролируемым и неконтролируемым выбором, горизонтальным расположением, цветом, обязательным выбором, текстом ошибки и `overrides`; группа — `<fieldset>` с ролью `radiogroup`, стрелки переключают вариант.
+- **CountryFlags**: заглушка `Unknown` для неизвестной страны в пропорции 3:2, как у флагов; она же экспортируется из `@via-profit/ui-kit/CountryFlags` вместе со всеми флагами. Флаги по умолчанию скрыты от программ чтения с экрана (`aria-hidden`), а с `aria-label` получают роль `img`.
+- **DatePicker**: при открытии календаря фокус переходит на выбранный день, Escape закрывает календарь и возвращает фокус на кнопку, после выбора фокус возвращается в поле; календарь — диалог с подписью; кнопка календаря подписана (`calendarButtonTooltip`, по умолчанию `Choose date`) и сообщает `aria-expanded`; свойства `prevButtonLabel` и `nextButtonLabel` передаются в календарь.
+- **Calendar**: навигация по дням с клавиатуры — стрелки, Home/End, PageUp/PageDown, в сетку дней Tab попадает один раз; дни озвучиваются полной датой, выбранные отмечены `aria-pressed`, сегодняшний — `aria-current="date"`; свойства `prevButtonLabel` и `nextButtonLabel` — подписи стрелок; стрелки в режиме выбора месяца переключают год.
+- **Typography**: компонент `H6`; все компоненты типографики экспортируются из `@via-profit/ui-kit/Typography` (`import { H1, Paragraph, Strong } from ...`), экспорт по умолчанию — по-прежнему `Paragraph`; `SectionTitle` передаёт `ref` и атрибуты заголовка.
+- **Swiper**: свободная прокрутка `snap={false}` — после перетаскивания лента движется по инерции и останавливается между слайдами, следующее перетаскивание продолжается с того же места, с `infinite` ленту можно тянуть без конца; ленту можно подхватить во время анимации — она останавливается под пальцем, а не перескакивает к концу движения. Компонент больше не помечен как черновик.
+- **Swiper**: управление стрелками ←/→ (`keyboardControl`), описанное в документации, но не реализованное; роли и подписи карусели и слайдов для программ чтения с экрана (`slideLabel`); автопрокрутка останавливается, пока фокус внутри свайпера; `children` принимает `null`/`false` и одиночный слайд.
+- **ButtonGroup**: новый компонент `@via-profit/ui-kit/ButtonGroup` — кнопки, объединённые в один блок, с общими `variant`, `color` и `disabled`, вертикальным расположением и `fullWidth`. Может работать как переключатель: выбор одного или нескольких вариантов (`value`, `defaultValue`, `onChange`, `multiple`), выбранные кнопки получают `aria-pressed`.
+- **Accordion**: заголовок доступен с клавиатуры и сообщает программам чтения с экрана, развёрнута ли панель (`aria-expanded`, `aria-controls`, содержимое с `role="region"`); `onOpen` получает новое состояние — `onOpen(isOpen)`.
+- **Checkbox**: новый компонент `@via-profit/ui-kit/Checkbox` — чекбокс с контролируемым и неконтролируемым режимами, промежуточным состоянием `indeterminate`, цветами, положением текста, звёздочкой обязательного поля, текстом ошибки и `overrides`.
+- **Switch**: поле получает `role="switch"`, а при `error` — `aria-invalid`.
+- **Color**: тип `PaletteName` — названия палитр `ColorGenerator`.
+- **Modal**: свойство `closeButtonLabel` у `drawer` — подпись кнопки закрытия для программ чтения с экрана; тип `AnchorVariant` экспортируется из `@via-profit/ui-kit/Modal`.
+- **ClickOutside**: свойство `ignoreElements` — элементы, клики по которым не считаются кликами снаружи.
+- **Menu**: свойство `closeOnAnchorClick`.
+- **Avatar**: аватар с `onClick` получает роль `button` и нажимается клавишами Enter и пробел.
+- **MaskedField**: `onChange` получает вторым аргументом событие `change`; поддерживается `type="tel"`.
+- **Badge**: бейдж с `onClick` получает роль `button` и нажимается клавишами Enter и пробел; свойство `deleteButtonLabel` — подпись кнопки удаления для программ чтения с экрана.
+- **LoadingIndicator**: компоненты `Spinner` (строчный спиннер) и `LoadingOverlay` (слой поверх блока) с понятными именами.
+- **LoadingIndicator**: свойство `size` — диаметр спиннера (число в пикселях или любая длина CSS) вместо масштабирования через `font-size`; свойство `fill` у `Spinner` — отключает растягивание на свободное место родителя. Внешний вид по умолчанию не изменился.
+- **LoadingIndicator**: оба индикатора получают роль `status` и подпись `aria-label="Loading"` (можно заменить своей), программы чтения с экрана сообщают о загрузке.
+- **Selectbox**: свойство `renderValue` — своё содержимое кнопки для выбранного значения, например бейджи при `multiple`.
+- **Badge**: бейдж без `onClick` больше не меняет цвет при наведении — это выглядело как приглашение нажать.
+- **Selectbox**: клавиши ↓ и ↑ на кнопке открывают список, как у стандартного `<select>`.
+- **Menu**: список получает роль `listbox` (и `aria-multiselectable` при `multiple`), `MenuItem` — роль `option` и `aria-selected`.
+
+### Изменено
+
+- **Table**: компонент больше не помечен как черновик.
+- **DatePicker**: `onChange` получает `null`, когда поле очищено или нажата кнопка сброса календаря без начального значения — тип обработчика `(date: Date | null) => void`. Обработчики, принимающие только `Date`, нужно доработать. Раньше очистить значение из поля было нельзя.
+- **Calendar**: виды (дни, месяцы, годы, недели) переключаются без `Swiper` — показывается только активный вид с короткой анимацией; список лет — обычная прокручиваемая сетка вместо виртуализированного списка. Без `initialView` показывается первый из `views`, а `initialView` теперь учитывается вместе с `views`. В контролируемом режиме календарь показывает `value`, даже если родитель не принял изменение.
+- **Typography**: `H4` — 1.1em (было 1.2em, почти как `H3`), `H5` — 1em и полужирный (был того же размера, что `H4`, и тоньше основного текста).
+- **Table**: убрана перестройка таблицы в блоки на экранах уже 1200px — для широких таблиц используйте контейнер с `overflow-x: auto`. Ширина колонок зависит от содержимого (`table-layout: auto` вместо `fixed`). Линии между строками — нижние границы ячеек, а не `<tr>`. Цвет акцента у заголовков задаёт `TableHeader`, поэтому `TableHeaderCell` с `scope="row"` в теле таблицы выделяется только жирным. Таблица больше не добавляет внешний отступ `margin-bottom`, `TableCaption` выровнен по началу строки.
+- **Swiper**: контейнер больше не ограничен шириной `1200px` и не центрируется — свайпер занимает ширину родителя. Автопрокрутка без `infinite` после последнего слайда возвращается к первому вместо остановки. Слайды вне видимой области получают `inert`. Ключи слайдов сохраняются (раньше заменялись на индексы).
+- **Accordion**: неконтролируемый аккордеон с `onOpen` продолжает сам хранить состояние: `onOpen` больше не заменяет внутреннее переключение. Весь заголовок стал кнопкой вместо `<div>` с маленькой кнопкой-стрелкой: внутренний отступ заголовка перенесён на эту кнопку, а `overrides.Header` получает `headerID` и `contentID`.
+- **Switch**: `ref` указывает на `<input>`, а не на обёртку; тип `overrides.ToggleWrapper` — `RefAttributes<HTMLInputElement>`, `overrides.Container` — `RefAttributes<HTMLLabelElement>`. Неконтролируемый переключатель с `onChange` продолжает сам хранить состояние: `onChange` больше не заменяет внутреннее переключение.
+- **Color**: `getContrastColor()` выбирает чёрный или белый по коэффициенту контраста, а не по порогу яркости 0.5. Раньше для средних по яркости цветов (оранжевый, `#22c7d6`) возвращался белый с контрастом около 2:1 вместо чёрного с контрастом около 10:1.
+- **LoadingIndicator**: **несовместимое изменение** — экспорт по умолчанию модуля `LoadingIndicator` и файла `LoadingIndicator/Spinner` теперь `Spinner` (строчный спиннер), а не слой поверх блока. Импорт `import LoadingIndicator from '@via-profit/ui-kit/LoadingIndicator'` без ошибок начнёт показывать строчный спиннер — замените его на `import { LoadingOverlay } from '@via-profit/ui-kit/LoadingIndicator'`. Подробнее в документации, раздел «Переход с прежних имён».
+- **Autocomplete**: мультивыбор переработан по образцу MUI. Выбранные элементы отображаются метками внутри поля, поле служит только для поиска, после выбора поиск очищается, Backspace в пустом поле удаляет последнюю метку. **Несовместимое изменение**: при `multiple` функция `selectedItemToString` получает один элемент (подпись метки), а не массив.
+- **PhoneField**: построен на `MaskedField` и использует общий с ним механизм форматирования. Публичный API `PhoneField` и `usePhoneUtils` не изменился. `+` в середине номера теперь пропускается, а не обрезает номер.
+- **Menu**: клавиша Tab закрывает меню. Раньше фокус уходил из меню, а оно оставалось открытым.
+- **PhoneField**: номера США форматируются как `+1 (987) 654-3210` вместо `+1 987 654-32-10`.
+- **PhoneField**: `placeholder`, переданный в свойствах, больше не заменяется подсказкой шаблона.
+- **Menu**: клик по анкору больше не вызывает `onRequestClose`. Раньше кнопка, которая открывает и закрывает меню, не могла его закрыть: нажатие сначала закрывало меню, а затем сразу открывало снова. Чтобы клик по анкору снова закрывал меню, передайте `closeOnAnchorClick`.
+
+### Устарело
+
+- **CountryFlags**: `Uknown` (опечатка в названии) — используйте `Unknown`. **PhoneField**: `PhoneField/UnknownFlag` — используйте `CountryFlags/Unknown`.
+- **LoadingIndicator**: именованные `LoadingIndicator` и `StaticLoadingIndicator` и их типы `LoadingIndicatorProps` и `StaticLoadingIndicatorProps` — используйте `LoadingOverlay` и `Spinner`. Будут удалены в одной из следующих версий.
+
+### Удалено
+
+- **Autocomplete**: удалены неиспользуемые `Autocomplete2` и `Autocomplete/OverrideMenuList`.
+
+### Исправлено
+
+- **ThemeProvider**: `isDark` в параметрах `createTheme` был обязательным по типам, хотя по умолчанию равен `false` — `createTheme({ color: … })` не проходил проверку типов.
+- **Modal**: у боковой панели (`variant="drawer"`) были скруглены все четыре угла, включая прилегающие к краю окна, — скругление базового окна не сбрасывалось. Теперь скруглены только углы со стороны страницы: при `anchor="left"` — правые, `right` — левые, `top` — нижние, `bottom` — верхние.
+- **CountryFlags**: генератор флагов записывал список всех флагов в файл `CountryFlags/SwiperOverview`, он попадал в пакет; скрипт `indexes:flags` ссылался на несуществующий файл. **PhoneField**: заглушка неизвестной страны была квадратной, и при определении страны текст в поле сдвигался на полфлага.
+- **DatePicker**: в режиме `readOnly` повторный клик по полю не закрывал календарь; кнопка календаря только открывала его, а не переключала; `minDate`/`maxDate` по умолчанию создавались заново при каждом рендере; в описании `template` был указан несуществующий символ `M`.
+- **Calendar**: тип значения с `range={false}` был диапазоном вместо даты; `initialView` игнорировался, если передан `views`; недоступные дни (вне `minDate`/`maxDate`) не отличались от доступных; у сегодняшнего дня не было видно фокуса с клавиатуры; при `weekDayLabelFormat="narrow"` совпадали ключи дней недели; типы `overrides.EmptyCell`, `WeekRow`, `DayBadge`, `IconPrev`, `IconNext` не совпадали с элементами и не принимали `styled(...)` стандартных компонентов.
+- **Typography**: линия под `SectionTitle` не отображалась; `Del` отображался в React DevTools как `Em`; подсказка об устаревании `Base` указывала на несуществующий путь.
+- **Table**: на экранах уже 1200px таблица разваливалась — заголовки прятались, а подписи к ячейкам не показывались; не работали скругление углов, линии между строками и линия над подвалом (`border-collapse: collapse`); заголовки разрывались посреди слова; заголовки колонок имели роль `rowheader`; тип `ref` у `TableCaption` — `HTMLTableCaptionElement`.
+- **Swiper**: `slidesPerView` попадал атрибутом в DOM; в бесконечном режиме с `slidesPerView > 1` `onSlideChange` сообщал неверный индекс, а справа появлялось пустое место; после нескольких быстрых перелистываний бесконечный свайпер перескакивал на первый или последний слайд; `resume` при уходе указателя снимал паузу, поставленную через `pause()`; после перетаскивания срабатывал клик по ссылке или кнопке в слайде; перетаскивание начиналось правой кнопкой мыши, а картинки перетаскивались браузером; Tab уводил фокус в невидимый слайд и сдвигал ленту; `snap={false}` не работал: лента оставалась смещённой, при следующем перетаскивании прыгала, а `next`/`prev`/`goToIndex` сохраняли смещение; частично видимый слайд был недоступен для клика.
+- **Highlighted**: при пересекающихся подстроках выделялась первая из массива, а не самая длинная (`['star', 'starfish']` выделяло в «Starfish» только «Star»); для совпадений в начале и в конце текста рендерились пустые `<span>`.
+- **Accordion**: группировка соседних аккордеонов не работала в собранном пакете (селекторы по классам emotion), а у одиночного аккордеона верхние углы были квадратными; клик по стрелке вызывал `onOpen` дважды; содержимое выше 90vh обрезалось; свёрнутое содержимое было доступно через Tab; предупреждение об отсутствии `header` с неверным текстом выводилось при каждом рендере.
+- **Switch**: с `defaultChecked` поле `<input>` навсегда оставалось отмеченным, хотя переключатель выглядел выключенным; неконтролируемый переключатель с `onChange` не переключался визуально; `requiredAsterisk={false}` всё равно показывал `*`; ошибка о `checked` без `onChange` выводилась при каждом рендере; у выключенного переключателя не было видно подсветки фокуса и наведения в светлой теме; эффект наведения и фокуса не работал в собранном пакете (селекторы по классам emotion); атрибуты `checked` и `disabled` попадали в DOM у `<span>` и `<label>`; неверный цвет давал белый ползунок вместо цвета акцента.
+- **Button**: при смене `variant` кнопка создавалась заново и теряла фокус (например, кнопка-переключатель после нажатия с клавиатуры); предупреждение об `iconOnly` вместе со `startIcon`/`endIcon` выводилось при каждом рендере.
+- **Surface**: при `noPadding` содержимое (например, изображение) выходило за скруглённые углы поверхности; предупреждение о `subheader` без `header` выводилось в консоль при каждом рендере.
+- **ThemeProvider**: `createTheme` добавлял в каждую тему отладочный цвет `theme.color.test` (красный).
+- **Color**: в TypeScript нельзя было передать палитру в `Color.fromUuid(uuid, palette)` — тип параметра был `undefined`; устаревший `Color.getHextByWebColor()` возвращал HSL вместо HEX.
+- **Modal**: содержимое `dialog` и `drawer` создавалось заново при каждом рендере родителя — поле ввода в диалоге теряло фокус и значение после первого же символа, а после закрытия вложенного окна фокус уходил со страницы.
+- **Modal**: окна не имели корректной роли для программ чтения с экрана (`role="modal-confirmbox"` и `role="modal-MessageBox"` не существуют, у `dialog` и `drawer` роли не было); теперь `dialog` или `alertdialog` с `aria-modal`, заголовок `drawer` связан с окном через `aria-labelledby`.
+- **Modal**: у кнопки закрытия `drawer` всегда был отступ, будто рядом есть `toolbar`; два окна, открытые в одну миллисекунду, получали одинаковые идентификаторы.
+- **Menu**, **Selectbox**, **Autocomplete**: значения `0`, `''` и `false` считались пустыми — их нельзя было выбрать, а поле показывало «не выбрано».
+- **MaskedField**: курсор смещался вправо при правке в середине значения, если в маске есть пробелы; при вводе сверх длины маски `caret` указывал за конец текста; для пустого ввода `formatParsedInput` возвращал лишнее поле `charIndex`.
+- **MaskedField**: маска `ogrnip` в `templates` содержала 13 цифр вместо 15.
+- **PhoneField**: `caret` в результате `usePhoneUtils().formatParsedInput` и `parseAndFormat` мог указывать за конец текста.
+- **PhoneField**: в `onChange` передавалась копия события без методов (`preventDefault` и др.) и без свойств поля ввода (`name`, `id` и др.); теперь передаётся исходное событие, а `event.currentTarget.value` содержит отформатированный текст.
+- **PhoneField**: при вводе `+7`, `+79`, `+791` страна не определялась и флаг пропадал; `+76` и `+77` определялись как Казахстан только с четвёртой цифры.
+- **PhoneField**: номера Японии без `+` (`81…`) определялись как российские с `8`; мобильные номера Японии (10 цифр) обрезались до 9 цифр.
+- **PhoneField**: номера Израиля без `+` не определялись; стационарные номера Израиля (8 цифр) не считались полными.
+- **PhoneField**: для шаблона Казахстана `+997` `callingCode` был `'7'`, из-за чего `number` и `combined` были неверными.
+- **Menu**: мышь и клавиатура подсвечивали разные элементы: после наведения курсора стрелки начинали с начала списка, Enter не выбирал элемент под курсором, а прокрутка списка стрелками переносила подсветку на элемент, оказавшийся под неподвижным курсором.
+- **Menu**: после выбора элемента с клавиатуры или закрытия по Esc фокус терялся; теперь он возвращается на анкор.
+- **Menu**: меню, открытое сразу при монтировании, не прокручивалось к выбранному элементу.
+- **Menu**: после изменения `items` подсвечивался элемент с тем же индексом, то есть случайный элемент нового списка; теперь подсветка следует за тем же элементом или снимается. В `Autocomplete` из-за этого после ввода текста был подсвечен случайный вариант, и первая стрелка вниз пропускала первый элемент.
+- **Autocomplete**: подсказки браузера (ранее введённые значения) отображались поверх списка; теперь в поле по умолчанию `autoComplete="off"`.
+- **Autocomplete**: клик по варианту мышью уводил фокус из поля в список, и продолжить ввод было нельзя.
+- **Menu**: после изменения `items` прокрутка списка оставалась прежней, и отфильтрованный список мог открыться с середины.
+- **Autocomplete**: `clearOnBlur` не срабатывал при клике мимо поля, если список был закрыт (нет подходящих вариантов или закрыт по Esc), и в поле оставался недописанный текст.
+- **PhoneField**: явно переданный `startIcon={undefined}` (например, из `Autocomplete`) скрывал флаг страны.
+- **Badge**: при смене `variant` бейдж создавался заново и терял фокус (например, фильтр-переключатель после нажатия); нажатие на кнопку удаления вызывало ещё и `onClick` бейджа; атрибут `color` попадал в DOM; некликабельный бейдж получал `tabindex="-1"`.
+- **LoadingIndicator**: строчный индикатор содержал `<div>` внутри `<span>` — некорректная разметка, в том числе внутри кнопки.
+- **TextField**, **TextArea**: недоступное поле (`disabled`) выглядело так же, как обычное.
+- **TextField**, **TextArea**, **Button**: поля ввода и кнопки не наследовали шрифт страницы — текст в `TextArea` был моноширинным, в полях и кнопках использовался шрифт браузера по умолчанию.
+- **Selectbox**: при `isLoading` индикатор загрузки отображался не в кнопке, а поверх ближайшего позиционированного родителя (например, всей страницы).
+- **Selectbox**: тип `overrides.Icon` не позволял передать собственный компонент без ошибки TypeScript.
+- **Avatar**: свойство `alt` не передавалось изображению; `color` и `size` попадали в DOM как атрибуты; некликабельный аватар получал `tabindex="-1"`; без изображения PNG или JPEG `<img>` оставался с пустым `src`.
+
+## 0.3.0 — 2026-09-24
+
 ### Изменено
 
 - **Calendar**: номера недель при начале недели с понедельника считаются по ISO 8601; при другом первом дне недели первой считается неделя, содержащая 1 января.

package/Calendar/CalendarCell.js

@@ -28,11 +28,18 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   padding: 1em;
   margin: 0;
   min-width: 0;
-  outline: none;
   position: relative;
-  color: ${({ theme, $isSelected }) => $isSelected
-    ? theme.color.accentPrimaryContrast.toString()
-    : theme.color.textPrimary.toString()};
+  color: ${({ theme, $isSelected, disabled }) => {
+    switch (true) {
+        case $isSelected:
+            return theme.color.accentPrimaryContrast.toString();
+        // The days out of minDate/maxDate are dimmed
+        case disabled:
+            return theme.color.textPrimary.alpha(0.3).toString();
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
   ${({ $fill, theme, $isSelected }) => $fill &&
     !$isSelected &&

package/Calendar/CalendarComponent.d.ts

@@ -93,6 +93,17 @@ export type CalendarProps<IsRangeValue extends boolean | undefined = undefined>
      * Label for the Today button. If label passed, then button will be rendered
      */
     readonly todayButtonLabel?: string;
+    /**
+     * The label of the «previous» button for screen readers and the tooltip.
+     * The button switches the month in the days view and the year in the months view\
+     * **Default:** `Previous`
+     */
+    readonly prevButtonLabel?: string;
+    /**
+     * The label of the «next» button for screen readers and the tooltip\
+     * **Default:** `Next`
+     */
+    readonly nextButtonLabel?: string;
     /**
      * Heading
      */
@@ -144,7 +155,7 @@ export interface CalendarOverrides {
     /**
      * Empty cell element
      */
-    readonly EmptyCell?: React.ComponentType<CalendarEmptyCellProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly EmptyCell?: React.ComponentType<CalendarEmptyCellProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Common container element
      */
@@ -156,7 +167,7 @@ export interface CalendarOverrides {
     /**
      * Week row container element
      */
-    readonly WeekRow?: React.ComponentType<CalendarWeekRowProps & React.RefAttributes<HTMLDivElement>>;
+    readonly WeekRow?: React.ComponentType<CalendarWeekRowProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Days wrapper element
      */
@@ -200,11 +211,11 @@ export interface CalendarOverrides {
     /**
      * Prev icon element in prev month button
      */
-    readonly IconPrev?: React.ComponentType<CalendarIconPrevProps & React.RefAttributes<SVGElement>>;
+    readonly IconPrev?: React.ComponentType<CalendarIconPrevProps & React.RefAttributes<SVGSVGElement>>;
     /**
      * Next icon element in next month button
      */
-    readonly IconNext?: React.ComponentType<CalendarIconNextProps & React.RefAttributes<SVGElement>>;
+    readonly IconNext?: React.ComponentType<CalendarIconNextProps & React.RefAttributes<SVGSVGElement>>;
     /**
      * Weeks bar  element
      */

package/Calendar/CalendarComponent.js

@@ -54,13 +54,36 @@ const CalendarIconPrev_1 = __importDefault(require("./CalendarIconPrev"));
 const CalendarIconNext_1 = __importDefault(require("./CalendarIconNext"));
 const CalendarWeekDaysBar_1 = __importDefault(require("./CalendarWeekDaysBar"));
 const use_calendar_1 = require("./use-calendar");
-const Swiper_1 = __importStar(require("../Swiper"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 __exportStar(require("./use-calendar"), exports);
 __exportStar(require("./CalendarWeekDaysBar"), exports);
-const StyledSwiper = (0, styled_1.default)(Swiper_1.default) `
-  height: 100%;
+const viewAppear = (0, react_2.keyframes) `
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 `;
+/**
+ * Only the active view is rendered: the hidden views are not focusable and not announced
+ */
+const ViewContainer = styled_1.default.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  animation: ${viewAppear} 0.2s ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+const dateKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 const isRangeValue = (value) => {
     if (value instanceof Array) {
         return value.every(v => v instanceof Date || v === null);
@@ -80,21 +103,12 @@ const computeViews = (inputViews, range) => {
 const computeView = (inputParams) => {
     var _a;
     const { inputView, inputViews, inputInitialView } = inputParams;
-    if (typeof inputView === 'undefined' && inputViews) {
-        return inputViews[0];
-    }
-    if (typeof inputView === 'undefined' && inputViews) {
-        return inputViews[0];
-    }
-    if (inputViews && typeof inputView === 'string') {
-        if (!inputViews.includes(inputView)) {
-            throw new Error('Property views must be contained property initialView');
-        }
-    }
-    if (typeof inputView === 'string') {
-        return inputView;
+    const requested = inputView !== null && inputView !== void 0 ? inputView : inputInitialView;
+    if (requested && inputViews && !inputViews.includes(requested)) {
+        throw new Error(`The view «${requested}» must be one of the \`views\`: ${inputViews.join(', ')}`);
     }
-    return (_a = inputInitialView !== null && inputInitialView !== void 0 ? inputInitialView : inputView) !== null && _a !== void 0 ? _a : 'days';
+    // The requested view wins over the first of the views
+    return (_a = requested !== null && requested !== void 0 ? requested : inputViews === null || inputViews === void 0 ? void 0 : inputViews[0]) !== null && _a !== void 0 ? _a : 'days';
 };
 const computeCalendarDate = (params) => {
     const { inputValue, defaultValue } = params;
@@ -135,7 +149,7 @@ const computeCalendarDate = (params) => {
 };
 const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     var _a;
-    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
+    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, prevButtonLabel = 'Previous', nextButtonLabel = 'Next', } = (0, useThemeProps_1.default)('Calendar', props);
     /**
      * Validations
      */
@@ -202,7 +216,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         WeekRowButton: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekRowButton) || CalendarWeekRowButton_1.default,
         WeekDayWeekNumber: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDayWeekNumber) || CalendarWeekDayWeekNumber_1.default,
     }), [overrides]);
-    const swiperRef = react_1.default.useRef(null);
+    const dateContainerRef = react_1.default.useRef(null);
     /**
      * Inside date value
      */
@@ -214,7 +228,16 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
      * Selected value
      */
     const inputValueRef = react_1.default.useRef(inputValue);
-    const [value, setValue] = react_1.default.useState((_a = inputValue !== null && inputValue !== void 0 ? inputValue : defaultValue) !== null && _a !== void 0 ? _a : null);
+    const [internalValue, setValue] = react_1.default.useState((_a = inputValue !== null && inputValue !== void 0 ? inputValue : defaultValue) !== null && _a !== void 0 ? _a : null);
+    // Controlled: the value is always the `value` property, even if the parent did not accept the change
+    const value = typeof inputValue !== 'undefined'
+        ? inputValue
+        : internalValue;
+    /**
+     * The day with the keyboard focus in the days view (roving tabindex)
+     */
+    const [focusedDate, setFocusedDate] = react_1.default.useState(null);
+    const shouldMoveFocus = react_1.default.useRef(false);
     /**
      * Current view mode
      */
@@ -229,16 +252,11 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     const [views, setComputedViews] = react_1.default.useState(() => computeViews(inputViews, range));
     const setViews = react_1.default.useCallback((variants) => setComputedViews(variants), []);
     const selectView = react_1.default.useCallback((view) => {
-        var _a;
         const nextViews = views.includes(view) ? views : [...views, view];
         if (nextViews !== views) {
             setViews(nextViews);
         }
         setView(view);
-        const index = nextViews.findIndex(v => v === view);
-        if (index > -1) {
-            (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToIndex(index);
-        }
     }, [setViews, views]);
     /**
      * Controlled `view` property was changed
@@ -330,6 +348,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     }, [calendarDate, view]);
     const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
         var _a;
+        setFocusedDate(selectedDate);
         const nextView = getNextAvailableView();
         if (nextView) {
             setView(nextView);
@@ -373,7 +392,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
                 setValue(selectedValue);
             }
         }
-    }, [calendarDate, getNextAvailableView, onChange, selectView, range, inputValue]);
+    }, [getNextAvailableView, onChange, selectView, range, inputValue]);
     /**
      * Handle of click on month item
      */
@@ -449,7 +468,97 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     const weeks = react_1.default.useMemo(() => getWeeks(calendarDate), [calendarDate, getWeeks]);
     const yearsRange = react_1.default.useMemo(() => getYearsRange(minDate, maxDate), [minDate, maxDate, getYearsRange]);
     const monthsRange = react_1.default.useMemo(() => getMonthsRange(minDate, maxDate, calendarDate.getFullYear()), [minDate, maxDate, getMonthsRange, calendarDate]);
-    const renderViewDays = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
+    const minDay = react_1.default.useMemo(() => new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()), [minDate]);
+    const maxDay = react_1.default.useMemo(() => new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()), [maxDate]);
+    const dayLabelFormatter = react_1.default.useMemo(() => typeof Intl !== 'undefined'
+        ? new Intl.DateTimeFormat(locale, {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        })
+        : null, [locale]);
+    /**
+     * The only day in the tab order: the focused, the selected, today or the first available one
+     */
+    const tabbableDateKey = react_1.default.useMemo(() => {
+        const month = calendarDate.getMonth();
+        const days = weeks
+            .flatMap(week => week.days)
+            .filter(day => day.date.getMonth() === month && !day.isDisabled);
+        const selected = isRangeValue(value) ? value === null || value === void 0 ? void 0 : value[0] : isNotRangeValue(value) ? value : null;
+        const candidates = [focusedDate, selected, new Date()];
+        const found = candidates
+            .map(candidate => candidate && days.find(day => isSameDay(day.date, candidate)))
+            .find(Boolean);
+        return found ? dateKey(found.date) : days[0] ? dateKey(days[0].date) : null;
+    }, [calendarDate, weeks, value, focusedDate, isSameDay]);
+    /**
+     * Arrows move by a day and a week, Home/End — to the start/end of the week,
+     * PageUp/PageDown — by a month. Crossing the month border switches the month
+     */
+    const handleDaysKeyDown = react_1.default.useCallback((event) => {
+        var _a;
+        const key = (_a = event.target.closest('[data-date]')) === null || _a === void 0 ? void 0 : _a.dataset.date;
+        if (!key)
+            return;
+        const [y, m, d] = key.split('-').map(Number);
+        const current = new Date(y, m, d);
+        const weekDay = (current.getDay() -
+            ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'].indexOf(weekStartDay) +
+            7) %
+            7;
+        let target;
+        switch (event.key) {
+            case 'ArrowLeft':
+                target = new Date(y, m, d - 1);
+                break;
+            case 'ArrowRight':
+                target = new Date(y, m, d + 1);
+                break;
+            case 'ArrowUp':
+                target = new Date(y, m, d - 7);
+                break;
+            case 'ArrowDown':
+                target = new Date(y, m, d + 7);
+                break;
+            case 'Home':
+                target = new Date(y, m, d - weekDay);
+                break;
+            case 'End':
+                target = new Date(y, m, d + 6 - weekDay);
+                break;
+            case 'PageUp':
+                target = new Date(y, m - 1, Math.min(d, new Date(y, m, 0).getDate()));
+                break;
+            case 'PageDown':
+                target = new Date(y, m + 1, Math.min(d, new Date(y, m + 2, 0).getDate()));
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        // Stay inside minDate/maxDate
+        if (target.getTime() < minDay.getTime())
+            target = minDay;
+        if (target.getTime() > maxDay.getTime())
+            target = maxDay;
+        setFocusedDate(target);
+        shouldMoveFocus.current = true;
+        if (target.getMonth() !== calendarDate.getMonth() ||
+            target.getFullYear() !== calendarDate.getFullYear()) {
+            setCalendarDate(new Date(target.getFullYear(), target.getMonth(), 1));
+        }
+    }, [weekStartDay, minDay, maxDay, calendarDate]);
+    // Move the DOM focus after the keyboard navigation has rendered the new day
+    react_1.default.useEffect(() => {
+        var _a, _b;
+        if (shouldMoveFocus.current && focusedDate) {
+            shouldMoveFocus.current = false;
+            (_b = (_a = dateContainerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${dateKey(focusedDate)}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [focusedDate, calendarDate]);
+    const renderViewDays = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.DateContainer, { ref: dateContainerRef, onKeyDown: handleDaysKeyDown }, weeks.map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
         if (day.date.getMonth() === calendarDate.getMonth()) {
             const badge = badges.find(b => isSameDay(b.date, day.date));
             let fill = false;
@@ -465,26 +574,30 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             else if (isNotRangeValue(value)) {
                 isSelected = Boolean(value && isSameDay(value, day.date));
             }
-            return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
+            const key = dateKey(day.date);
+            return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), "data-date": key, tabIndex: key === tabbableDateKey ? 0 : -1, "aria-label": dayLabelFormatter === null || dayLabelFormatter === void 0 ? void 0 : dayLabelFormatter.format(day.date), "aria-pressed": isSelected || fill, "aria-current": day.isToday ? 'date' : undefined, isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
                 getDayLabel(day.date),
                 badge && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
         }
-        return (react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime() }, getDayLabel(day.date)));
+        return (react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime(), "aria-hidden": true }, getDayLabel(day.date)));
     })))))), [
         accentColor,
         badges,
         calendarDate,
+        dayLabelFormatter,
         getDayLabel,
-        getWeeks,
         handleCellDateClick,
+        handleDaysKeyDown,
         isSameDay,
         markToday,
         overridesMap,
+        tabbableDateKey,
         value,
+        weeks,
     ]);
     const renderViewMonths = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.MonthsSelector, null, monthsRange.map(monthIndex => {
         const isSelected = calendarDate.getMonth() === monthIndex;
-        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
+        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, "aria-pressed": isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
     }))), [accentColor, calendarDate, getMonthLabel, handleMonthSelected, monthsRange, overridesMap]);
     const renderViewYears = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.YearsSelector, { accentColor: accentColor, date: calendarDate, onChange: y => handleYearSelected(y)(), years: yearsRange, locale: locale, minDate: minDate, maxDate: maxDate })), [
         accentColor,
@@ -528,7 +641,6 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         overridesMap,
         value,
     ]);
-    const initialIndex = react_1.default.useMemo(() => views.findIndex(v => v === view), [views, view]);
     const getActiveView = react_1.default.useCallback(() => view, [view]);
     const getCalendarDate = react_1.default.useCallback(() => calendarDate, [calendarDate]);
     /**
@@ -548,7 +660,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
             typeof subheading !== 'undefined' && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
             react_1.default.createElement(overridesMap.Toolbar, null,
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('prev'), disabled: ['months', 'years'].includes(view) },
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('prev'), disabled: view === 'years', "aria-label": prevButtonLabel, title: prevButtonLabel },
                     react_1.default.createElement(overridesMap.IconPrev, null)),
                 react_1.default.createElement(overridesMap.ControlButton, { disabled: !views.includes('months'), onClick: () => {
                         if (view === 'months' && views.includes('days')) {
@@ -566,31 +678,15 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
                             selectView('years');
                         }
                     } }, getYearLabel(calendarDate)),
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: ['months', 'years'].includes(view) },
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: view === 'years', "aria-label": nextButtonLabel, title: nextButtonLabel },
                     react_1.default.createElement(overridesMap.IconNext, null)))),
         view === 'days' && (react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: weeks[0], format: weekDayLabelFormat || 'short' })),
         react_1.default.createElement(overridesMap.Body, null,
-            react_1.default.createElement(StyledSwiper, { draggable: false, ref: swiperRef, initialIndex: initialIndex }, views.map(viewName => {
-                let renderedView;
-                switch (viewName) {
-                    case 'days':
-                        renderedView = renderViewDays();
-                        break;
-                    case 'weeks':
-                        renderedView = renderViewWeeks();
-                        break;
-                    case 'months':
-                        renderedView = renderViewMonths();
-                        break;
-                    case 'years':
-                        renderedView = renderViewYears();
-                        break;
-                    default:
-                        renderedView = null;
-                        break;
-                }
-                return react_1.default.createElement(Swiper_1.SwiperSlide, { key: viewName }, renderedView);
-            }))),
+            react_1.default.createElement(ViewContainer, { key: view },
+                view === 'days' && renderViewDays(),
+                view === 'weeks' && renderViewWeeks(),
+                view === 'months' && renderViewMonths(),
+                view === 'years' && renderViewYears())),
         (typeof resetButtonLabel !== 'undefined' ||
             typeof todayButtonLabel !== 'undefined' ||
             typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,

package/Calendar/CalendarDayBadge.d.ts

@@ -4,5 +4,5 @@ export interface CalendarDayBadgeProps extends React.HTMLAttributes<HTMLSpanElem
     readonly isToday: boolean;
     readonly badgeContent: React.ReactNode;
 }
-declare const _default: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLButtonElement>>;
+declare const _default: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;