### История изменений
#### 3.10.13 `22.04.2021`
- [ISL-9704](https://st.yandex-team.ru/ISL-9704): @yandex-lego/components: Удалить старую документацию [[#1751023](https://a.yandex-team.ru/review/1751023)]
- 📚 docs: update readme [[56fc67](https://github.yandex-team.ru/search-interfaces/frontend/commit/56fc67984ff681c3ade222be6c306d95b556dc46)]
#### 3.10.8 `14.04.2021`
- [ISL-9899](https://st.yandex-team.ru/ISL-9899): Modal.ts: контент остаётся видимым после закрытия модального окна [[#1734628](https://a.yandex-team.ru/review/1734628)]
- 🛠 fix(lego-components): hide modal content after close [[ed8e3d](https://github.yandex-team.ru/search-interfaces/frontend/commit/ed8e3d4bba228df6fc212640b73f475b4b9d5b9b)]
#### 3.10.5 `12.04.2021`
- [ISL-9805](https://st.yandex-team.ru/ISL-9805): Раздел с известными проблемами/задачами для каждого компонента [[#1732584](https://a.yandex-team.ru/review/1732584)]
- 📚 docs(lego-components): update mdx for all components [[66c5fd](https://github.yandex-team.ru/search-interfaces/frontend/commit/66c5fd12bba1e1a3ec46d6f8e6717844ba17b40e)]
#### 3.9.0 `25.03.2021`
- [ISL-9581](https://st.yandex-team.ru/ISL-9581): Popup.ts: Добавить target=position для попапов [собрать примеры] [[#22084](https://github.yandex-team.ru/search-interfaces/frontend/pull/22084)]
- 🛠 fix(lego-components): fix popup closing behavior [[eab19a](https://github.yandex-team.ru/search-interfaces/frontend/commit/eab19a6e19a76e77408f048c1ae5b219960ecc6b)]
- 🛠 fix(lego-components): fix type for backward compatibility in Modal [[c26c6c](https://github.yandex-team.ru/search-interfaces/frontend/commit/c26c6c986b4c23afc973a01505769812408f19eb)]
- 🛠 fix(lego-components): fix modal z-index [[68bd0b](https://github.yandex-team.ru/search-interfaces/frontend/commit/68bd0bb199898039a386bee10853cf74db23097d)]
Пояснения к релизу
## Modal
В текущем релизе были исправлены вещи, которые ломали обратную совместимость для компонента `Modal`:
- возвращение `z-index` на `.Modal`
- исправление типа `innerRef` с `RefObject`, обратно на `Ref`
## Popup
Было исправлено поведение закрытия для компонента `Popup` - теперь он закрывается по событию `mousedown` при клике вне его содержимого.
## useVirtualElementRef
Добавлен новый Реакт-хук, который позволяет создавать виртуальный элемент. Как правило используется с попапом и нужен для создания контекстных меню.
**Пример использования**
```tsx
import { useVirtualElementRef } from '@yandex-lego/components/usePopper';
const Example = () => {
// `right` и `bottom` по-умолчанию будут равны `left` и `top` соответственно
const anchorRef = useVirtualElementRef({ rect: { left: 50, top: 50 } });
return
}
```
#### 3.8.0 `22.03.2021`
- [ISL-9741](https://st.yandex-team.ru/ISL-9741): useOverlay.ts: Перенести логику из LayerManager в отдельный реакт-хук [[#21450](https://github.yandex-team.ru/search-interfaces/frontend/pull/21450)]
- 🚀 feat(lego-components): use useOverlay hook instead of LayerManager [[12e596](https://github.yandex-team.ru/search-interfaces/frontend/commit/12e5967f6ebe25d6fecd078d3ef62fadbeb4f553)]
Пояснения к релизу
### LayerManager
Компонент `LayerManager` помечен как устаревший и будет удален в следующем мажорном релизе. Вместо него теперь следует использовать React-хук `useOverlay`.
### useOverlay
Добавлен новый React-хук `useOverlay`, который содержит в себе логику, которая была в компоненте `LayerManager`. Благодаря этому в дереве компонентов `React` теперь не содержится лишняя информация в виде компонента `LayerManager`, а использование данного функционала стало проще.
**Пример использования**
```tsx
import React, { useRef, useState, useMemo } from 'react';
import { useOverlay, OnClose } from '@yandex-lego/components/useOverlay';
export interface ModalProps {
visible?: boolean;
onClose?: OnClose;
}
const Modal: FC = (props) => {
const { visible, onClose, children } = props;
const hostRef = useRef(null);
useOverlay({ visible, onClose, essentialRefs: [hostRef] });
return {children}
;
}
```
Также были добавлены некоторые оптимизации подписок на DOM-события. Раньше каждый экземпляр подписывался на глобальные события документа.
Теперь подписка происходит в момент, когда в стек добавляется первый слой, а отписка - когда удаляется последний слой из стека.
#### 3.7.0 `22.03.2021`
- [ISL-7501](https://st.yandex-team.ru/ISL-7501): Modal.ts: реализовать механизм фиксации фокуса [[#21308](https://github.yandex-team.ru/search-interfaces/frontend/pull/21308)]
- 📚 docs(lego-components): update docs for Modal [[9d70a7](https://github.yandex-team.ru/search-interfaces/frontend/commit/9d70a7cee1fff48eb97afd98ccf832ae38b0b32e)]
- 🚀 feat(lego-components): add useFocusTrap to Modal [[9aa887](https://github.yandex-team.ru/search-interfaces/frontend/commit/9aa88770b6f5b850841146d99cfea59d49f9d0fb)]
- 🛠 fix(lego-components): improve a11y for Modal [[3764a2](https://github.yandex-team.ru/search-interfaces/frontend/commit/3764a21da06d2a01248b786e11265391b7941390)]
Пояснения к релизу
Основное изменение связано с добавлением доступности и возможности удержания фокуса внутри содержимого модального окна (компонент `Modal`), согласно [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
Далее, термин `элемент табуляции` будет относится к элементу, у которого значение атрибута `tabIndex` больше или равно нулю.
**Принцип работы**
- при открытии модального окна, фокус переходит на первый элемент табуляции.
- при нажатии на клавишу `Tab`:
- фокус перемещается на следующий элемент табуляции
- если фокус находится на последнем элементе, то фокус перемещается на первый элемент табуляции
- при нажатии на клавишу `Shift+Tab`:
- фокус перемещается на предыдущий элемент табуляции
- если фокус находится на первом элементе, то фокус перемещается на последний элемент табуляции
- при закрытии модального окна фокус возвращается на элемент, который вызвал его.
> Важно! Данный функционал включен по-умолчанию, так как соответствует тому, как должны работать модальные окна согласно спецификации доступности. Для изменения логики работы смотрите ниже в разделе API модального окна.
### Modal
#### ARIA-атрибуты
Добавлен атрибут `role` со значением `dialog` и `aria-modal` со значением `true`.
#### API
В компонент `Modal` были добавлены следующие свойства, которые позволяют управлять поведением фокуса внутри модального окна:
- `trapFocus` - включает или отключает удержание фокуса внутри модального окна. По-умолчанию, значение `true`.
- `autoFocus` - выставляет фокус на первый элемент табуляции, после открытия модального окна. По-умолчанию, значение `true`.
- `restoreFocus` - включает или отключает восстановления фокуса при закрытии модального окна. По-умолчанию, значение `true`.
- `restoreFocusRef` - ссылка на элемент, на который будет возвращен фокус после закрытия. По-умолчанию запоминается `document.activeElement` в момент открытия модального окна.
Примеры использования смотрите в [документации](https://lego.yandex-team.ru/lego-components/components/modal/examples).
### useFocusTrap
Был добавлен новый React-хук, который реализует логику по удержанию фокуса внутри DOM-элемента. Используется внутри компонента `Modal`.
**Основные возможности**
- удержание фокуса внутри DOM-элемента
- автоматическое перемещение фокуса на первый элемент табуляции при включении
- восстановление фокуса на элементе (триггере) при выключении
**Пример использования**
```tsx
import { useFocusTrap } from '@yandex-lego/components/useFocusTrap';
const Modal = (props) => {
const { visible, restoreFocusRef, children } = props;
const scopeRef = useRef(null);
useFocusTrap({
enabled: visible,
scopeRef,
autoFocus: true,
restoreFocus: true,
restoreFocusRef,
});
return {children}
}
```
#### 3.5.0 `11.03.2021`
- [ISL-9561](https://st.yandex-team.ru/ISL-9561): Portal.ts: Реализовать компонент [[#20772](https://github.yandex-team.ru/search-interfaces/frontend/pull/20772)]
- 🚀 feat: use Portal for Popup and Modal [[2325c8](https://github.yandex-team.ru/search-interfaces/frontend/commit/2325c81f847c8b65e29ddc1dbe8dd5218e09b548)]
#### 3.2.6 `24.02.2021`
- [ISL-9690](https://st.yandex-team.ru/ISL-9690): ScrollLocker.ts: Выставляется некорректная ширина прокрутки для body с overflow-y: scroll [[#20514](https://github.yandex-team.ru/search-interfaces/frontend/pull/20514)]
- 🛠 fix(lego-components): ScrollLocker: fix scrollbar width of container with value [[8f5e04](https://github.yandex-team.ru/search-interfaces/frontend/commit/8f5e041979f9884b7fef19293c06e847cd6b6043)]
#### 3.2.0 `19.02.2021`
- [ISL-7049](https://st.yandex-team.ru/ISL-7049): Modal.ts: Реализовать механизм фиксации страницы [[#20212](https://github.yandex-team.ru/search-interfaces/frontend/pull/20212)]
- 🚀 feat(lego-components): support prevent body scroll in modal [[ea46a7](https://github.yandex-team.ru/search-interfaces/frontend/commit/ea46a7b7cfb0c44d41b99f9ca9d6a1706ca7d170)]
- 🛠 fix(lego-components): Modal: show scrollbar to the foreground [[6d9178](https://github.yandex-team.ru/search-interfaces/frontend/commit/6d91780c4c2418e808cd12e81fc15a44d9cccfaa)]