Headless UI v2

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.0.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

package.json

@@ -26,7 +26,7 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "yarn@4.3.0",
+  "packageManager": "yarn@4.2.2",
   "engines": {
     "node": "18.16.1"
   },
@@ -35,7 +35,7 @@
     "@ethersproject/abi": "5.7.0",
     "@ethersproject/bignumber": "5.7.0",
     "@gsap/react": "2.1.1",
-    "@headlessui/react": "1.7.19",
+    "@headlessui/react": "2.1.0",
     "@hookform/error-message": "2.0.1",
     "@hookform/resolvers": "3.3.4",
     "@keplr-wallet/proto-types": "0.12.83",

src/App/App.tsx

@@ -44,6 +44,7 @@ export default function App() {
   return (
     <ModalContext>
       <SentryRoutes>
+        <Route path={`${appRoutes.donate}/:id`} element={<Donate />} />
         <Route path={appRoutes.donate_widget}>
           <Route path=":id" element={<DonateWidget />} />
           <Route
@@ -82,7 +83,7 @@ export default function App() {
             path={appRoutes.applications + "/:id"}
             element={<Application />}
           />
-          <Route path={`${appRoutes.donate}/:id`} element={<Donate />} />
+
           <Route path={appRoutes.donate_thanks} element={<DonateThanks />} />
           <Route
             path={appRoutes.stripe_payment_status}

src/App/Header/NavDropdown.tsx

@@ -1,4 +1,9 @@
-import { Popover, Transition } from "@headlessui/react";
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from "@headlessui/react";
 import ExtLink from "components/ExtLink";
 import Icon from "components/Icon";
 import LoaderRing from "components/LoaderRing";
@@ -20,7 +25,7 @@ export default function NavDropdown({ links }: Props) {
     <Popover className="relative">
       {({ open }) => (
         <>
-          <Popover.Button
+          <PopoverButton
             data-testid="nav_dropdown"
             className={`${
               open ? "text-white" : "text-white/90"
@@ -42,7 +47,7 @@ export default function NavDropdown({ links }: Props) {
               } max-sm:hidden transition duration-150 ease-in-out group-hover:text-blue-d7/80`}
               aria-hidden="true"
             />
-          </Popover.Button>
+          </PopoverButton>
           <Transition
             as={Fragment}
             enter="transition ease-out duration-200"
@@ -52,7 +57,7 @@ export default function NavDropdown({ links }: Props) {
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel className="absolute right-0 z-10 mt-3 sm:w-screen max-w-80 shadow-[0px_8px_20px] shadow-gray-d1 rounded-lg bg-gray-l6 dark:bg-blue-d6 transform">
+            <PopoverPanel className="absolute right-0 z-10 mt-3 sm:w-screen max-w-80 shadow-[0px_8px_20px] shadow-gray-d1 rounded-lg bg-gray-l6 dark:bg-blue-d6 transform">
               {({ close }) => (
                 <nav className="overflow-hidden grid gap-y-2 w-full p-6">
                   {links.map((link) =>
@@ -88,7 +93,7 @@ export default function NavDropdown({ links }: Props) {
                   )}
                 </nav>
               )}
-            </Popover.Panel>
+            </PopoverPanel>
           </Transition>
         </>
       )}

src/components/CountrySelector/CountrySelector.tsx

@@ -1,4 +1,4 @@
-import { Combobox } from "@headlessui/react";
+import { Combobox, ComboboxButton, ComboboxInput } from "@headlessui/react";
 import { ErrorMessage } from "@hookform/error-message";
 import { useState } from "react";
 import {
@@ -47,7 +47,7 @@ export default function CountrySelector<
     <Combobox
       disabled={props.disabled || isSubmitting}
       value={country}
-      onChange={onCountryChange}
+      onChange={(c) => c && onCountryChange(c)}
       as="div"
       className={`relative items-center grid grid-cols-[auto_auto_1fr] w-full field-container ${
         props.classes?.container || ""
@@ -57,11 +57,11 @@ export default function CountrySelector<
         {country.flag || null}
       </span>
 
-      <Combobox.Button>
+      <ComboboxButton>
         {({ open }) => <DrawerIcon isOpen={open} size={25} className="mr-1" />}
-      </Combobox.Button>
+      </ComboboxButton>
 
-      <Combobox.Input
+      <ComboboxInput
         ref={ref}
         placeholder={props.placeholder}
         onChange={(event) => setQuery(event.target.value as any)}

src/components/CountrySelector/Options.tsx

@@ -1,6 +1,5 @@
-import { Combobox } from "@headlessui/react";
+import { ComboboxOption, ComboboxOptions } from "@headlessui/react";
 import { isEmpty } from "helpers";
-import React from "react";
 import type { Country } from "types/components";
 
 const containerStyle =
@@ -16,29 +15,21 @@ export default function Options({ query, options }: Props) {
     o.name.toLocaleLowerCase().includes(query.toLocaleLowerCase())
   );
   return (
-    <Combobox.Options
+    <ComboboxOptions
       className={containerStyle}
       style={{ height: options.length <= 10 ? "auto" : "10rem" }}
     >
       {(!isEmpty(options) &&
         filtered.map((country) => (
-          <Combobox.Option
-            as={React.Fragment}
+          <ComboboxOption
+            className="data-[selected]:bg-blue-l2 hover:bg-blue-l2 flex items-center gap-2 p-2 text-sm font-heading"
             key={country.name}
             value={country}
           >
-            {({ active }) => (
-              <li
-                className={`${
-                  active ? "bg-blue-l2 dark:bg-blue-d1" : ""
-                } flex items-center gap-2 p-2 text-sm font-heading`}
-              >
-                <span className="text-2xl">{country.flag}</span>
-                <span>{country.name}</span>
-              </li>
-            )}
-          </Combobox.Option>
+            <span className="text-2xl">{country.flag}</span>
+            <span>{country.name}</span>
+          </ComboboxOption>
         ))) || <div className="p-2 text-sm">{query} not found</div>}
-    </Combobox.Options>
+    </ComboboxOptions>
   );
 }

src/components/CurrencySelector/CurrencyOptions.tsx

@@ -1,4 +1,4 @@
-import { Combobox } from "@headlessui/react";
+import { ComboboxOption, ComboboxOptions } from "@headlessui/react";
 import QueryLoader from "components/QueryLoader";
 import type { CurrencyOption } from "types/components";
 import type { QueryState } from "types/third-party/redux";
@@ -48,25 +48,20 @@ export default function CurrencyOptions({
       }}
     >
       {(currencies) => (
-        <Combobox.Options
-          className={`${classes} w-full bg-white dark:bg-blue-d6 shadow-lg rounded max-h-52 overflow-y-auto scroller text-base ring-1 ring-black ring-opacity-5 focus:outline-none`}
+        <ComboboxOptions
+          anchor="bottom"
+          className={`${classes} w-[var(--input-width)] bg-white dark:bg-blue-d6 shadow-lg rounded [--anchor-max-height:13rem] overflow-y-auto scroller text-base ring-1 ring-black ring-opacity-5 focus:outline-none`}
         >
           {currencies.map(({ code, name, min, rate }) => (
-            <Combobox.Option key={code} value={{ code, name, min, rate }}>
-              {({ active, selected }) => (
-                <div
-                  className={`${active ? "bg-[--accent-secondary]" : ""} ${
-                    selected ? "font-semibold" : "font-normal"
-                  } flex items-center gap-2 p-2 cursor-pointer truncate`}
-                >
-                  {!!name
-                    ? `${code.toUpperCase()} - ${name}`
-                    : code.toUpperCase()}
-                </div>
-              )}
-            </Combobox.Option>
+            <ComboboxOption
+              key={code}
+              value={{ code, name, min, rate }}
+              className="flex items-center gap-2 p-2 cursor-pointer truncate data-[selected]:bg-[--accent-secondary] hover:bg-[--accent-secondary]"
+            >
+              {!!name ? `${code.toUpperCase()} - ${name}` : code.toUpperCase()}
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       )}
     </QueryLoader>
   );

src/components/CurrencySelector/CurrencySelector.tsx

@@ -1,4 +1,4 @@
-import { Combobox } from "@headlessui/react";
+import { Combobox, ComboboxButton, ComboboxInput } from "@headlessui/react";
 import Icon from "components/Icon/Icon";
 import { unpack } from "helpers";
 import { useState } from "react";
@@ -50,13 +50,13 @@ export default function CurrencySelector<T extends CurrencyOption>({
         disabled={props.disabled || isCurrencyLoading || isCurrencyError}
         by={"code" as any}
         value={props.value}
-        onChange={props.onChange}
+        onChange={(val) => val && props.onChange(val)}
         as="div"
         className={`relative items-center grid grid-cols-[1fr_auto] field-container ${style.combobox}`}
       >
-        <Combobox.Input
+        <ComboboxInput
           id="wise__currency"
-          className="w-full border-r border-gray-l3 dark:border-navy px-4 py-3.5 text-sm leading-5 focus:ring-0"
+          className="w-full dark:border-navy px-4 py-3.5 text-sm leading-5 focus:ring-0"
           displayValue={(currency: T) =>
             !!currency.name
               ? `${currency.code.toUpperCase()} - ${currency.name}`
@@ -65,7 +65,7 @@ export default function CurrencySelector<T extends CurrencyOption>({
           onChange={(event) => setQuery(event.target.value)}
           spellCheck={false}
         />
-        <Combobox.Button className="flex items-center px-2">
+        <ComboboxButton className="flex items-center absolute inset-y-0 right-2">
           {({ open }) =>
             isCurrencyLoading ? (
               <Icon
@@ -77,12 +77,12 @@ export default function CurrencySelector<T extends CurrencyOption>({
               <DrawerIcon
                 isOpen={open}
                 size={25}
-                className={`h-full w-full ${isCurrencyError ? "text-red" : ""}`}
+                className={`${isCurrencyError ? "text-red" : ""}`}
                 aria-hidden
               />
             )
           }
-        </Combobox.Button>
+        </ComboboxButton>
 
         <CurrencyOptions
           query={query}

src/components/Modal.tsx

@@ -1,24 +1,25 @@
-import { Dialog, Transition } from "@headlessui/react";
-import React, { type FC } from "react";
+import {
+  DialogPanel,
+  type DialogPanelProps,
+  DialogTitle,
+} from "@headlessui/react";
+import type { FC } from "react";
 
-const ModalFn: FC<any> = (props) => (
-  <Transition.Child
-    as={React.Fragment}
-    enter="transform ease-out duration-300"
-    enterFrom="opacity-0"
-    enterTo="opacity-100"
-    leave="transform ease-in duration-300"
-    leaveFrom="opacity-100"
-    leaveTo="opacity-0"
-  >
-    <Dialog.Panel {...props} />
-  </Transition.Child>
+const ModalFn: FC<Omit<DialogPanelProps, "transition">> = ({
+  className = "",
+  ...props
+}) => (
+  <DialogPanel
+    {...props}
+    transition
+    className={`${className} duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0`}
+  />
 );
 
-const TitleFn: FC<any> = (props) => <Dialog.Title {...props} />;
+const TitleFn: FC<any> = (props) => <DialogTitle {...props} />;
 
-const ModalFnRoot = ModalFn as typeof Dialog.Panel;
-const Title = TitleFn as typeof Dialog.Title;
+const ModalFnRoot = ModalFn as typeof DialogPanel;
+const Title = TitleFn as typeof DialogTitle;
 
 const Modal = Object.assign(ModalFnRoot, { Title });