Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Snyk] Upgrade @headlessui/react from 1.7.16 to 2.0.3 #43

Closed

Conversation

JMARRUJO91
Copy link
Owner

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.16 to 2.0.3.

ℹ️ 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.


⚠️ Warning: This PR contains major version upgrade(s), and may be a breaking change.

  • The recommended version is 11 versions ahead of your current version.

  • The recommended version was released on 21 days ago.

Release notes
Package name: @headlessui/react
  • 2.0.3 - 2024-05-07

    Fixed

    • Make sure disabling demo mode on <Combobox> works (#3182)
  • 2.0.2 - 2024-05-07

    Fixed

    • Improve performance of internal useInertOthers hook (#3181)
  • 2.0.1 - 2024-05-06

    Fixed

    • Remove accidental deprecation comments on <DialogPanel> and <DialogTitle> (#3176)
  • 2.0.0 - 2024-05-06

    Headless UI v2.0

    We just released Headless UI v2.0 for React which includes a ton of new stuff:

    • Built-in anchor positioning — using Floating UI, components like Menu, Listbox, and more can now automatically position their popovers to be anchored to their trigger, adapting as needed to changes in the viewport.
    • Headless checkbox component — we've added a headless Checkbox component to complement our existing RadioGroup component, making it easy to build totally custom checkbox controls.
    • HTML form components — we've added Input, Select, Textarea, Label, Description, Fieldset, and Legend components that handle all of the ID generation and aria-* attribute mapping you need to do to connect form fields together.
    • Improved hover and focus-visible detection — using hooks from the awesome React Aria library under the hood, Headless UI now adds smarter data-hover and data-focus attributes to your controls that behave more consistently across different devices than the native pseudo-classes.
    • Combobox list virtualization — the Combobox component can now handle giant lists of options with no performance issues.

    Changelog

    Added

    • Add new Checkbox component (#2887, #2962)
    • Add new Button component (#2887)
    • Add new Input component (#2887, #2902, #2940)
    • Add new Textarea component (#2887, #2902, #2940)
    • Add new Select component (#2887, #2902)
    • Add new Fieldset and Legend components (#2887)
    • Add new Field, Label, Description components (#2887, #2941)
    • Add new MenuSection, MenuHeading, and MenuSeparator components (#2887)
    • Add new ListboxSelectedOption component (#2887)
    • Add new DataInteractive component (#2887)
    • Add new CloseButton component and useClose hook (#3096)
    • Add new anchor, modal, and portal props to Combobox, Listbox, Menu and Popover components (#2887, #3075, #3097, #3111, #3115, #3121, #3124, #3133, #3138, #3148, #3152, #3154, #3157)
    • Add new autoFocus prop to focusable components (#2887)
    • Add new virtual prop to Combobox component (#2779, #3128, #3160, #3161, #3163)
    • Add new onClose prop to Combobox component (#3122)
    • Add new immediate prop to Combobox for immediately opening the Combobox when the input receives focus (#2686)
    • Add new --button-width CSS variable on the ListboxOptions, MenuItems, and PopoverPanel components (#2887, #3058)
    • Add new --input-width and --button-width CSS variables on the ComboboxOptions component (#3057)
    • Add new data-* attributes as an alternative to the existing data-headlessui-state attribute (#2887, #3035, #3061)

    Fixed

    • Fix scroll-locking on iOS (#2891)
    • Fix cancellation of events when using disabled or aria-disabled attributes (#2890)
    • Fix unnecessary execution of the displayValue callback in ComboboxInput component (#3048)
    • Fix types for multiple prop in Combobox component (#3099)
    • Fix focus handling in ComboboxInput component (#3065, #3073)
    • Fix enter transitions in Transition component (#3074)
    • Fix focus handling in ListboxOptions and MenuItems components (#3112)
    • Fix horizontal scrolling inside the Dialog component (#2889)

    Changed

    • Require React 18 (#2887, #3092, #3131)
    • Always render hidden form input fields for Checkbox, Switch and RadioGroup components (#3095)
    • Deprecate the RadioGroup.Option component in favor of new Radio component (#2887)
    • Deprecate the active prop in favor of new focus prop (#2887)
    • Dialog is now focused by default instead of the first focusable element (#2887)
    • Change default tags for ListboxOptions, ListboxOption, ComboboxOptions, ComboboxOption, and TabGroup components (#3109)
    • Change default tag from div to Fragment on Transition components (#3110, #3147)
    • Allow Combobox component to have null value (#3064, #3100)
    • Attempt form submission when pressing enter on the ListboxButton component (#2972)
    • Deprecate the entered prop on the Transition component (#3089)
    • Add frozen value to ComboboxOptions component (#3126)

    Upgrading from v1

    Update dependencies

    Install the latest version of the package via npm:

    npm install @ headlessui/react@latest

    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 the nullable prop. In v2.0 comboboxes support empty values by default so you can remove this prop:

    - <Combobox value={selected} onChange={setSelected} nullable>
    + <Combobox value={selected} onChange={setSelected}>

    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:

     <Combobox
       value={selected}
    -  onChange={setSelected}
    +  onChange={(newValue) => setSelected((oldValue) => newValue ?? oldValue)}
       onClose={() => setQuery('')}
     >

    New default elements

    The default rendered element has changed for a number of components in v2.0:

    Component v1.x element v2.0 element
    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're relying on a default element that has change, you can preserve that behavior using the as prop:

    - <Transition ...>
    + <Transition as="div" ...>

    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:

     <Dialog>
       <DialogPanel>
    -    <Listbox ... />
    +    <Listbox autoFocus ... />
       </DialogPanel>
     </Dialog>

    For non-Headless UI components, you can add the data-autofocus attribute to any focusable element:

     <Dialog>
       <DialogPanel>
    -    <button>...</button>
    +    <button data-autofocus>...</button>
       </DialogPanel>
     </Dialog>

    Dropdown components are now modal by default

    The Menu, Combobox, and Listbox dropdowns are now rendered modal by default. When the dropdown is open the page is scroll-locked and all other page content is made inert.

    While this is generally recommended behavior for these components, you can disable this using the modal prop:

    - <ComboboxOptions ...>
    + <ComboboxOptions modal={false} ...>

    Dialog.Overlay and Dialog.Backdrop components removed

    In Headless UI v1.6 we deprecated the Dialog.Overlay and Dialog.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:

      <Dialog>
    -    <Dialog.Overlay className="..." />
    +    <div className="..." />
    +    <DialogPanel>
           {/* ... */}
    +    </DialogPanel>
       </Dialog>

    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 } from '@ headlessui/react'
    + 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 and Description components in v2, we've deprecated the component-specific versions.

v1.x component v2.0 replacement
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 } from '@ headlessui/react'
+ 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 component

We've deprecated the RadioGroup.Option in favor of the more terse Radio component.

We recommend updating to this new component:

  <RadioGroup>
-   <RadioGroup.Option>{*/ ...*/}</RadioGroup.Option>
+   <Radio>{*/ ...*/}</Radio>
  </RadioGroup>

Deprecated active prop in favor of focus

We've deprecated the active prop in favor of the new focus prop on the ComboboxOption, ListboxOption, ListboxOption, MenuItem, MenuItem, RadioOption, and RadioOption components.

We recommend updating to this new prop:

  <MenuItem >
-   {({ active }) => (
+   {({ focus }) => (
      {/* ... */}    
    )}
  </MenuItem>

Deprecated @ headlessui/tailwindcss package

With 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:

npm remove @ headlessui/tailwindcss

Next, replace the ui-* class modifiers with data-[*] modifiers:

  <MenuItem
    as="a"
    href="#"
-   className="ui-active:bg-blue-500 ui-active:text-white"
+   className="data-[active]:bg-blue-500 data-[active]:text-white"
  >
    {*/ ...*/}
  </MenuItem>
  • 2.0.0-alpha.4 - 2024-01-03
  • 2.0.0-alpha.3 - 2023-12-21
  • 2.0.0-alpha.2 - 2023-12-20
  • 2.0.0-alpha.1 - 2023-12-20
  • 1.7.19 - 2024-04-15

    Fixed

    • Make sure panels re-register when IDs are calculated in React < 18 (#2883)
    • Expose disabled state on <Tab /> component (#2918)
    • Prevent default behaviour when clicking outside of a Dialog.Panel (#2919)
    • Add hidden attribute to internal <Hidden /> component when the Features.Hidden feature is used (#2955)
    • Allow setting custom tabIndex on the <Switch /> component (#2966)
    • Forward disabled state to hidden inputs in form-like components (#3004)
    • Respect selectedIndex for controlled <Tab/> components (#3037)
  • 1.7.18 - 2024-01-08
  • 1.7.17 - 2023-08-17
  • 1.7.16 - 2023-07-27
  • from @headlessui/react GitHub release notes

    Important

    • Warning: This PR contains a major version upgrade, and may be a breaking change.
    • Check the changes in this PR to ensure they won't cause issues with your project.
    • This PR was automatically created by Snyk using the credentials of a real user.

    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:

    snyk-bot and others added 2 commits May 29, 2024 04:24
    Snyk has created this PR to upgrade @headlessui/react from 1.7.16 to 2.0.3.
    
    See this package in npm:
    @headlessui/react
    
    See this project in Snyk:
    https://app.snyk.io/org/jmarrujo91/project/68b4936a-b59a-42f2-9fd3-6a8d54020f9a?utm_source=github&utm_medium=referral&page=upgrade-pr
    @JMARRUJO91 JMARRUJO91 closed this Sep 8, 2024
    @JMARRUJO91 JMARRUJO91 deleted the snyk-upgrade-55bbc50ed986fb04c660aa15751183d5 branch September 8, 2024 17:04
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Labels
    None yet
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    2 participants