[Snyk] Upgrade @headlessui/react from 1.7.19 to 2.1.0 #10
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR was automatically created by Snyk using the credentials of a real user.
![snyk-top-banner](https://github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)
Snyk has created this PR to upgrade @headlessui/react from 1.7.19 to 2.1.0.
ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 10 versions ahead of your current version.
The recommended version was released on 21 days ago.
Release notes
Package name: @headlessui/react
We just released Headless UI v2.1 for React, which dramatically simplifies our transition APIs and adds support for rendering multiple dialogs as siblings. See our announcement blog to learn more.
Changelog
Added
Dialog
components at once (without nesting them) (#3242)DialogBackdrop
component (#3307, #3310)PopoverBackdrop
component to replacePopoverOverlay
(#3308)Fixed
Combobox
open when clicking scrollbar inComboboxOptions
(#3249)ComboboxInput
does not sync with current value while typing (#3259)Combobox
component when using native scrollbar (#3190)ComboboxOptions
while closing (#3304)style
prop onComboboxOptions
,ListboxOptions
,MenuItems
, andPopoverPanel
components (#3250)Checkbox
when it isdisabled
(#3251)useId
instead of React internals (for React 19 compatibility) (#3254)Transition
andTransitionChild
components (#3303)Changed
Tab
andShift+Tab
keys when theListbox
component is open (#3284)Fixed
Escape
to close theDialog
component (#3218)virtual
and non-virtual mode inCombobox
component (#3236)PopoverPanel
component moves focus inside (without usingPortalGroup
) (#3239)defaultValue
is used (#3240)Deprecated
SwitchGroup
as deprecated, preferField
instead (#3232)Changed
fieldset
instead ofdiv
by default forFieldset
component (#3237)Fixed
Combobox
works (#3182)Fixed
useInertOthers
hook (#3181)Fixed
DialogPanel
andDialogTitle
(#3176)We just released Headless UI v2.0 for React which includes a ton of new stuff:
Menu
,Listbox
, and more can now automatically position their popovers to be anchored to their trigger, adapting as needed to changes in the viewport.Checkbox
component to complement our existingRadioGroup
component, making it easy to build totally custom checkbox controls.Input
,Select
,Textarea
,Label
,Description
,Fieldset
, andLegend
components that handle all of the ID generation andaria-*
attribute mapping you need to do to connect form fields together.data-hover
anddata-focus
attributes to your controls that behave more consistently across different devices than the native pseudo-classes.Combobox
component can now handle giant lists of options with no performance issues.Changelog
Added
Checkbox
component (#2887, #2962)Button
component (#2887)Input
component (#2887, #2902, #2940)Textarea
component (#2887, #2902, #2940)Select
component (#2887, #2902)Fieldset
andLegend
components (#2887)Field
,Label
,Description
components (#2887, #2941)MenuSection
,MenuHeading
, andMenuSeparator
components (#2887)ListboxSelectedOption
component (#2887)DataInteractive
component (#2887)CloseButton
component anduseClose
hook (#3096)anchor
,modal
, andportal
props toCombobox
,Listbox
,Menu
andPopover
components (#2887, #3075, #3097, #3111, #3115, #3121, #3124, #3133, #3138, #3148, #3152, #3154, #3157)autoFocus
prop to focusable components (#2887)virtual
prop toCombobox
component (#2779, #3128, #3160, #3161, #3163)onClose
prop toCombobox
component (#3122)immediate
prop toCombobox
for immediately opening the Combobox when theinput
receives focus (#2686)--button-width
CSS variable on theListboxOptions
,MenuItems
, andPopoverPanel
components (#2887, #3058)--input-width
and--button-width
CSS variables on theComboboxOptions
component (#3057)data-*
attributes as an alternative to the existingdata-headlessui-state
attribute (#2887, #3035, #3061)Fixed
disabled
oraria-disabled
attributes (#2890)displayValue
callback inComboboxInput
component (#3048)multiple
prop inCombobox
component (#3099)ComboboxInput
component (#3065, #3073)Transition
component (#3074)ListboxOptions
andMenuItems
components (#3112)Dialog
component (#2889)Changed
Checkbox
,Switch
andRadioGroup
components (#3095)RadioGroup.Option
component in favor of newRadio
component (#2887)active
prop in favor of newfocus
prop (#2887)ListboxOptions
,ListboxOption
,ComboboxOptions
,ComboboxOption
, andTabGroup
components (#3109)div
toFragment
onTransition
components (#3110, #3147)Combobox
component to havenull
value (#3064, #3100)ListboxButton
component (#2972)entered
prop on theTransition
component (#3089)ComboboxOptions
component (#3126)Upgrading from v1
Update dependencies
Install the latest version of the package via npm:
Default element changes
The default rendered element has changed for a number of components in v2.0:
Transition
div
Fragment
TransitionRoot
div
Fragment
TransitionChild
div
Fragment
ListboxOptions
ul
div
ListboxOption
li
div
ComboboxOptions
ul
div
ComboboxOption
li
div
TabGroup
Fragment
div
If you are using any of these components without the
as
prop, you'll need to add theas
prop and render the component with the element you need:Comboboxes now always support empty values
Previously the
Combobox
component required an option to always be set, and you could opt out of this behavior using thenullable
prop. In v2.0 comboboxes support empty values by default so you can remove this prop:If you'd like to keep the previous behavior, update your
onChange
callback to only set the selected value if an option has actually been selected:Dialogs no longer require a focusable child
Previously the
Dialog
component would automatically focus the first focusable child on open. This meant that you had to have at least one focusable element within your dialog, otherwise you would see a warning in your console.In v2.0 that is no longer the case and the dialog's root element is focused instead on open.
If you'd like a child element to receive focus when your dialog is opened, you can add the
autoFocus
prop to any Headless UI form control:For non-Headless UI components, you can add the
data-autofocus
attribute to any focusable element:Dropdown components are now modal by default
The
Menu
,Combobox
, andListbox
dropdowns are now rendered modal by default. When the dropdown is open the page is scroll-locked and all other page content is madeinert
.While this is generally recommended behavior for these components, you can disable this using the
modal
prop:Dialog.Overlay
andDialog.Backdrop
components removedIn Headless UI v1.6 we deprecated the
Dialog.Overlay
andDialog.Backdrop
components. These have now been removed in v2.0.If you're using either of these components, you can update your app to use the new
DialogPanel
approach:Deprecated component dot-notation
The previous component dot-notation has been deprecated in favor of using explicit imports for each individual component. This is to improve compatibility with RSC (React Server Components) and tree-shaking.
We recommend updating to this new API:
+ import { Menu, MenuButton, MenuItems, MenuItem } from '@ headlessui/react'
function Example() {
return (
<Menu>
- <Menu.Button>My account</Menu.Button>
- <Menu.Items>
- <Menu.Item><a href="/settings">Settings</a></Menu.Item>
- <Menu.Item><a href="/support">Support</a></Menu.Item>
- <Menu.Item><a href="/license">License</a></Menu.Item>
- </Menu.Items>
+ <MenuButton>My account</MenuButton>
+ <MenuItems>
+ <MenuItem><a href="/settings">Settings</a></MenuItem>
+ <MenuItem><a href="/support">Support</a></MenuItem>
+ <MenuItem><a href="/license">License</a></MenuItem>
+ </MenuItems>
</Menu>
)
}
Deprecated component-specific label and description components
With the addition of the multi-purpose
Field
,Label
andDescription
components in v2, we've deprecated the component-specific versions.Combobox.Label
Label
Dialog.Description
Description
Listbox.Label
Label
RadioGroup.Description
Description
RadioGroup.Label
Label
Switch.Description
Description
Switch.Group
Field
Switch.Label
Label
We recommend updating to these new components:
+ import { Combobox, ComboboxInput, ComboboxOptions, Field, Label } from '@ headlessui/react'
function Example() {
return (
- <Combobox>
- <Combobox.Label>Assignee:</Combobox.Label>
- <Combobox.Input />
- <Combobox.Options>{/* ... /}</Combobox.Options>
- </Combobox>
+ <Field>
+ <Label>Assignee:</Label>
+ <Combobox>
+ <ComboboxInput />
+ <ComboboxOptions>{/ ... */}</ComboboxOptions>
+ </Combobox>
+ <Field>
)
}
Deprecated
RadioGroup.Option
componentWe've deprecated the
RadioGroup.Option
in favor of the more terseRadio
component.We recommend updating to this new component:
Deprecated
active
prop in favor offocus
We've deprecated the
active
prop in favor of the newfocus
prop on theComboboxOption
,ListboxOption
,ListboxOption
,MenuItem
,MenuItem
,RadioOption
, andRadioOption
components.We recommend updating to this new prop:
Deprecated
@ headlessui/tailwindcss
packageWith the availability of the new
data-*
attributes in v2.0, we've deprecated the@ headlessui/tailwindcss
package.We recommend updating to use the new
data-*
attributes instead. Start by removing this package:Next, replace the
ui-*
class modifiers withdata-[*]
modifiers:Important
Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.
For more information: