Headless UI 2.0: новые компоненты, улучшенное позиционирование и обновленная документация

Команда разработчиков анонсировала выпуск новой версии Headless UI v2.0 для React. Эта версия знаменует собой важный этап улучшения функциональности библиотеки, предлагая разработчикам более качественный опыт работы и ряд новых, удобных инструментов.

1. Встроенное позиционирование якорей:
   • Благодаря интеграции Floating UI, компоненты, такие как меню, поповер, комбобокс и листбокс, теперь поддерживают управление позиционированием якорей.
   • Используя новый проп anchor, можно указать начальное положение якоря и настроить его с помощью CSS-переменных (-anchor-gap, -anchor-padding).
2. Новый компонент Checkbox:
   • Добавлен новый компонент Checkbox для создания настраиваемых флажков.
   • Поддерживает синхронизацию состояния с скрытым <input>, что позволяет легко использовать его в формах.
3. HTML-компоненты для работы с формами:
   • Теперь создание интуитивно понятных и доступных форм стало проще благодаря новым компонентам, оборачивающим стандартные HTML-элементы.
   • Например, компонент Field автоматически генерирует необходимые aria-* атрибуты.
4. Улучшенное определение состояний:
   • Используя возможности библиотеки React Aria, новые атрибуты data-* (например, data-active, data-hover, data-focus) заменяют стандартные псевдоклассы.
   • Эти атрибуты дают более надежные и кросс-браузерные состояния.
5. Виртуализация списка в Combobox:
   • Интеграция с TanStack Virtual обеспечивает поддержку виртуализации для списков в Combobox.
   • Это позволяет работать даже с тысячами элементов, оптимизируя производительность.
6. Новый сайт и улучшенная документация:
   • Новый сайт предлагает обновленный дизайн и значительно улучшенную документацию по каждому из компонентов.

Заключение

В этой версии Headless UI разработчики сделали большой шаг вперед, предоставив новые инструменты для удобного управления якорями, создания форм, определения состояний и работы с большими списками. Убедитесь, что вы обновили библиотеку до версии 2.0 и воспользуйтесь этими новыми возможностями!