[Snyk] Upgrade @headlessui/react from 1.4.2 to 1.6.1

[Sealjay]

This PR was automatically created by Snyk using the credentials of a real user.

Snyk has created this PR to upgrade @headlessui/react from 1.4.2 to 1.6.1.

 :information_source: 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 **4 versions** ahead of your current version. - The recommended version was released **a month ago**, on 2022-05-03.

Release notes

Package name: @headlessui/react

• 1.6.1 - 2022-05-03
  

  Fixed

  • Manually passthrough attrs for Combobox, Listbox and TabsGroup component (#1372)
  • Fix enter transitions in Vue (#1395)
• 1.6.0 - 2022-04-25
  

  Fixed

  • Make sure that the input syncs when the combobox closes (#1137)
  • Ensure that you can close the Combobox initially (#1148)
  • Fix Dialog usage in Tab component (#1149)
  • Ensure links are triggered inside PopoverPanel components (#1153)
  • Fix hover scroll issue in Listbox, Combobox and Menu components (#1161)
  • Guarantee DOM sort order when performing Listbox, Combobox and Menu actions (#1168)
  • Improve outside click support (#1175)
  • Reset ComboboxInput when the value gets reset (#1181)
  • Adjust active item/option index on Listbox, Combobox and Menu components (#1184)
  • Fix re-focusing element after close (#1186)
  • Fix Dialog cycling (#553)
  • Only activate the Tab on mouseup (#1192)
  • Ignore "outside click" on removed elements (#1193)
  • Remove focus() from Listbox.Option (#1218)
  • Improve some internal code (#1221)
  • Don't drop initial character when searching in Combobox (#1223)
  • Use ownerDocument instead of document (#1158)
  • Fix, re-expose el from each component (#1230)
  • Ensure focus trapping plays well with the Tab and Dialog components (#1231)
  • Improve syncing of ComboboxInput value (#1248)
  • Fix tree-shaking support (#1247)
  • Stop propagation on the PopoverButton (#1263)
  • Fix incorrect closing while interacting with third party libraries in Dialog component (#1268)
  • Mimic browser select on focus when navigating via Tab (#1272)
  • Resolve initialFocusRef correctly (#1276)
  • Ensure that there is always an active option in the Combobox (#1279, #1281)
  • Support classic form submissions in RadioGroup, Switch and Combobox components (#1285)
  • Fix nullable prop for Vue (2b109548b1a94a30858cf58c8f525554a1c12cbb)
  • Prefer incoming open prop over OpenClosed state (#1360)

  Added

  • Add classic form submission compatibility via new hidden inputs (#1214)
  • Add multiple value support to Listbox and Combobox components (#1243, #1355)
  • Add support for clearing the value of a Combobox (#1295)
  • Add DialogPanel to resolve issues when scrolling long dialogs that use DialogOverlay (#1333)

  ---

  Changes that might affect you

  Migrating from DialogOverlay to DialogPanel

  In previous versions of Headless UI, closing a dialog was handled by a click handler that lived on the DialogOverlay component, so as long as your overlay was rendered behind your panel, clicking outside the panel would close the dialog.

  This created an issue with scrollable dialogs, because it became easy to accidentally position your overlay on top of the scrollbar, which made it impossible to click the scrollbar without closing the dialog. You also couldn't scroll the dialog when your mouse was hovering over the overlay — only when your mouse was hovering over the actual panel.

  We've fixed this in Headless UI v1.6 by adding a dedicated DialogPanel component, and changing how "click outside" is handled. Now, if you're using a DialogPanel, the dialog is closed any time you click any element outside of it, rather than closing only when a DialogOverlay is explicitly clicked.

  If you're using DialogOverlay and not using DialogPanel, everything will continue to work exactly as it did before (including the bug I described above) to preserve backwards compatibility, but we highly encourage you to migrate to using DialogPanel, and to stop using DialogOverlay, instead using a simple div element:

    <Dialog
      :open="isOpen"
      @ close="closeModal"
      class="fixed inset-0 flex items-center justify-center ..."
    >
  -   <DialogOverlay class="fixed inset-0 bg-black/25" />
  +   <div class="fixed inset-0 bg-black/25" />
  
  -   <div class="bg-white shadow-xl rounded-2xl ...">
  +   <DialogPanel class="bg-white shadow-xl rounded-2xl ...">
        <DialogTitle>Payment successful</DialogTitle>
        <!-- ... -->
  -   </div>
  +   </DialogPanel>
    </Dialog>

  Read through the updated Dialog documentation for more examples of using DialogPanel.

  Multiple value support for Listbox and Combobox

  If you have been using the insiders build for the new multiple value support for the Listbox and/or Combobox component, then you will have to add a new multiple prop to those components to tell the component that you are using multiple values. Previously this was automatically detected based on whether you were passing an array to the value prop or not.

  -  <Listbox v-model="selectedPeople" />
  +  <Listbox v-model="selectedPeople" multiple />

• 1.5.0 - 2022-02-17
• 1.4.3 - 2022-01-14
• 1.4.2 - 2021-11-08

from @headlessui/react GitHub release notes

Commit messages

Package name: @headlessui/react

• ecdebf3 1.6.1 - @ headlessui/vue
• 695bf29 1.6.1 - @ headlessui/react
• fe876e2 Fix enter transitions in Vue (#1395)
• b71fcb3 temporary ignore flaky tests
• 1ce86e2 Fix hydration issue with `Tab` component (#1393)
• 807ae66 Manually passthrough `attrs` for `Combobox`, `Listbox` and `TabsGroup` component (#1372)
• 97c0ca2 update changelog
• 9e2acda Improvements to changelog
• 1e14d51 1.6.0
• b1d5a18 update changelog
• cb7a969 General cleanup of README files (#1361)
• c8cf26f Prefer incoming `open` prop over OpenClosed state (#1360)
• fe034b4 update changelog
• 2b10954 fix `nullable` prop for Vue
• 0c34fe8 Add explicit `multiple` prop (#1355)
• 591b328 use older syntax instead of `.at()`
• b4a4e0b Add `Dialog.Backdrop` and `Dialog.Panel` components (#1333)
• 0162c57 add React 18 compatibility (#1326)
• ab6310c Implement `nullable` mode on `Combobox` in single value mode (#1295)
• c475cab Allow `Enter` for form submit in `RadioGroup`, `Switch` and `Combobox` improvements (#1285)
• 6897d2c Fix required double `ArrowDown` requirement (#1281)
• 419ffda Ensure that there is always an active option in the `Combobox` (#1279)
• 6d8235e Mimic browser select on focus when navigating via `Tab` (#1272)
• 206bb7f Resolve `initialFocusRef` correctly (#1276)

Compare

---

**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: 🧐 [View latest project report](https://app.snyk.io/org/avanade/project/3890bde4-38f2-4fa2-a09f-c5ea53d615fa?utm_source=github&utm_medium=referral&page=upgrade-pr) 🛠 [Adjust upgrade PR settings](https://app.snyk.io/org/avanade/project/3890bde4-38f2-4fa2-a09f-c5ea53d615fa/settings/integration?utm_source=github&utm_medium=referral&page=upgrade-pr) 🔕 [Ignore this dependency or unsubscribe from future upgrade PRs](https://app.snyk.io/org/avanade/project/3890bde4-38f2-4fa2-a09f-c5ea53d615fa/settings/integration?pkg=@headlessui/react&utm_source=github&utm_medium=referral&page=upgrade-pr#auto-dep-upgrades)