feature: добавить в DropdownContainer prop rootRef для использования в Portal

[GiaCarangi1986]

сейчас переменная rootRef достается через DropdownContext (const { rootRef } = React.useContext(DropdownContext);) нужна возможность передавать ее через DropdownContainer для избежания отрисовки в document.body, чтобы этот контейнер не вываливался за нужную область

[kateviditory]

Добрый день! Сейчас библиотека поддерживает следующую реализацию. Все наши компоненты, в которых используются дропдауны, обязательно должны быть обернуты в компонент DropdownProvider (пример можно найти в readme). И именно для DropdownProvider следует централизовано задавать rootRef, который в последствии будет использоваться во всех компонентах с дропдаунами.

То есть в вашем случае нужно именно в DropdownProvider задать rootRef отличный от document.body

[GiaCarangi1986]

добрый день! поняла, спасибо большое но осталась еще одна проблема: на демо дропконтейнер на залезает на боковую панель и шапку разобравшись, думаю дело в iframe, который не позволяет вылезти за область

[GiaCarangi1986]

а есть ли способ добиться такого же эффекта, не используя iframe и не задавая другим блокам z-index выше 97? Не нашла встроенного способа добраться до z-index: 97 и изменить его

[GiaCarangi1986]

@kateviditory и еще вопрос по теме DropdownProvider: в readme прочитала, что их рекомендуется подключать в корне проекта. Можно ли в разных местах проекта оборачивать дропконтейнеры в разные DropdownProvider со своими rootRef, актуальными для данной части проекта?

[kateviditory]

1) В сторибуке все компоненты выводятся внутри iframe, и выходить за пределы этого iframe не могут. Тут вы правы.

2) Изменить z-index компонента можно 2мя способами:

• можно задать нужное значение z-index через css переменную --admiral-z-index-dropdown. Главное, чтобы эта переменная была задана на самом дропдауне или на одном из его родителей. Подробнее можно почитать вот здесь https://developer.mozilla.org/ru/docs/Web/CSS/Using_CSS_custom_properties, https://admiralds.github.io/react-ui/?path=/docs/experimental-api-css-custom-properties--docs
• можно переопределить значение z-index через тему, примерно так: let ModifiedTheme = LIGHT_THEME; ModifiedTheme.zIndex.dropdown = 100; return (<ThemeProvider theme={ModifiedTheme}><App/></ThemeProvider>);

3) Желательно не использовать несколько DropdownProvider. DropdownProvider - это компонент, который отслеживает все открытые внутри него дропдауны и контролирует, чтобы нельзя было одновременно открыть несколько дропдаунов + контролирует работу вложенных друг в друга дропдаунов. Если вдруг окажется, что у вас в приложении на экране одновременно отображаются дропдауны с разными DropdownProvider, то не исключены коллизии и ошибки.

[GiaCarangi1986]

спасибо большое!