[Feature][Popover]: добавить свойство `modal` для включения подложки и блокировки скролла

[inomdzhon]

Как сейчас?

При открытии Popover можно взаимодействовать со основным контентом страницы.

Как надо?

При открытии нужно:

• создавать подложку, который блокирует взаимодействие за Popover
• блокировать скролл, чтобы нельзя было скроллить основную страницу

ТЗ

• Изменение структуры

  + backdrop
  host
    in

• API

  • slotProps.backdrop – прокидвает пользовательские свойства в подложку
  • disableScrollLock – отключает блокировку скролла
  • disableBackdrop – отключает подложку

Чеклист

• Нажатие на backdrop закрывает Popover
• Блокировки и разблокировка скролла работает корректно
• Проверить, что вложенный Popover работает корректно
• ⚠️ Соблюдена обратная совместимость – v8 свойство disableBackdrop должно быть по умолчанию true, а в v9 по умолчанию false.
• Добавить в website раздел про disableBackdrop={false}, так же предупреждение, что в v9 значение будет по умолчанию false.
• Добавить JSDoc к свойствам. Для disableBackdrop={false} добавить предупреждение, что в v9 значение будет по умолчанию false, а сейчас true.
• Добавить unit-тесты – проверить, что slotProps.backdrop, disableScrollLock, disableBackdrop корректно работают

Референс

https://mui.com/material-ui/react-popover/

UPD

• Потенциально чинит [Bug][Popover]: Popover не закрывается если кликнуть в iframe #9482

[tungulin]

@inomdzhon привет! Хотел бы попробовать внести свой вклад

[inomdzhon]

@inomdzhon привет! Хотел бы попробовать внести свой вклад

Привет! Можем попробовать 🤝 Что на счёт того, чтобы начать с исправления документации по контрибьютингу #9166?

Ещё есть PR #9083, но с компонентом Search не всё так просто, поэтому можно либо оставить на закуску, либо закрыть

[some-dudes-work-account]

А это точно проблема, которую нужно "исправлять" на уровне базового компонента?

В нативных интерфейсах на всех популярных платформах всплывающие элементы себя ведут так:

• взаимодействие через мышь не блокируется, можно кликнуть на другом элементе за его пределами и сразу начать взаимодействовать с тем элементом, поповер при этом закрывается
• тап пальцем за пределами элемента поглощается, поповер закрывается, взаимодействие с посторонним контролом не происходит, после этого вторым тапом можно взаимодействовать с другим компонентом на странице

Большинство библиотек интерфейсов и популярных веб площадок взаимодействие мышью так же же не блокируют

• Radix UI и ShadCN
• Fluent от Microsoft
• Atlassian (хотя у них есть отдельный компонент для этого Blanket)
• Chakra
• Headless UI
• AirBnB
• YouTube
• GitHub
• Spotify
• Amazon
• Walmart

У Google и Figma можно встретить варианты с подложкой и без, Twitter всегда с подложкой

Может внедрить это на уровне ActionSheet и Dropdown, а поповер оставить примитивом?

Мимкрокодил

[inomdzhon]

А это точно проблема, которую нужно "исправлять" на уровне базового компонента?

В нативных интерфейсах на всех популярных платформах всплывающие элементы себя ведут так:

• взаимодействие через мышь не блокируется, можно кликнуть на другом элементе за его пределами и сразу начать взаимодействовать с тем элементом, поповер при этом закрывается
• тап пальцем за пределами элемента поглощается, поповер закрывается, взаимодействие с посторонним контролом не происходит, после этого вторым тапом можно взаимодействовать с другим компонентом на странице

Большинство библиотек интерфейсов и популярных веб площадок взаимодействие мышью так же же не блокируют

• Radix UI и ShadCN
• Fluent от Microsoft
• Atlassian (хотя у них есть отдельный компонент для этого Blanket)
• Chakra
• Headless UI
• AirBnB
• YouTube
• GitHub
• Spotify
• Amazon
• Walmart

У Google и Figma можно встретить варианты с подложкой и без, Twitter всегда с подложкой

Может внедрить это на уровне ActionSheet и Dropdown, а поповер оставить примитивом?

Мимкрокодил

Хм, хороший поинт.

В документации нативного popover (https://developer.mozilla.org/en-US/docs/Web/API/Popover_API), тоже указано, что это non-modal элемент, т.е. не блокирует взаимодействие.

Обсудим с командой после релиза v8.

Спасибо за коммент 🙏