Upgraded @headlessui/react to latest version (2.1.3)

app/components/Combobox.tsx

@@ -1,4 +1,10 @@
-import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import {
+	ComboboxButton,
+	ComboboxInput,
+	ComboboxOptions,
+	Combobox as HeadlessCombobox,
+	ComboboxOption as HeadlessComboboxOption,
+} from "@headlessui/react";
 import clsx from "clsx";
 import Fuse, { type IFuseOptions } from "fuse.js";
 import * as React from "react";
@@ -133,7 +139,7 @@ export function Combobox<
 				// TODO: remove hack that prevents TS from freaking out. probably related: https://github.com/tailwindlabs/headlessui/issues/1895
 				nullable={nullable as true}
 			>
-				<HeadlessCombobox.Input
+				<ComboboxInput
 					onChange={(event) => setQuery(event.target.value)}
 					placeholder={isLoading ? t("actions.loading") : placeholder}
 					className={clsx("combobox-input", className, {
@@ -148,7 +154,7 @@ export function Combobox<
 					onFocus={showComboboxOptions}
 					ref={inputRef}
 				/>
-				<HeadlessCombobox.Options
+				<ComboboxOptions
 					className={clsx("combobox-options", {
 						empty: noMatches,
 						fullWidth,
@@ -166,7 +172,7 @@ export function Combobox<
 						</div>
 					) : (
 						filteredOptions.map((option) => (
-							<HeadlessCombobox.Option
+							<HeadlessComboboxOption
 								key={option.value}
 								value={option}
 								as={React.Fragment}
@@ -185,11 +191,11 @@ export function Combobox<
 										<span className="combobox-item-label">{option.label}</span>
 									</li>
 								)}
-							</HeadlessCombobox.Option>
+							</HeadlessComboboxOption>
 						))
 					)}
-				</HeadlessCombobox.Options>
-				<HeadlessCombobox.Button ref={buttonRef} className="hidden" />
+				</ComboboxOptions>
+				<ComboboxButton ref={buttonRef} className="hidden" />
 			</HeadlessCombobox>
 		</div>
 	);

app/components/Menu.tsx

@@ -1,4 +1,10 @@
-import { Menu as HeadlessUIMenu, Transition } from "@headlessui/react";
+import {
+	Menu as HeadlessUIMenu,
+	MenuButton,
+	MenuItem,
+	MenuItems,
+	Transition,
+} from "@headlessui/react";
 import clsx from "clsx";
 import * as React from "react";
 
@@ -20,7 +26,7 @@ export interface MenuProps {
 export function Menu({ button, items, className, scrolling }: MenuProps) {
 	return (
 		<HeadlessUIMenu as="div" className={clsx("menu-container", className)}>
-			<HeadlessUIMenu.Button as={button} />
+			<MenuButton as={button} />
 			<Transition
 				as={React.Fragment}
 				enter="transition ease-out duration-100"
@@ -30,14 +36,14 @@ export function Menu({ button, items, className, scrolling }: MenuProps) {
 				leaveFrom="transform opacity-100 scale-100"
 				leaveTo="transform opacity-0 scale-95"
 			>
-				<HeadlessUIMenu.Items
+				<MenuItems
 					className={clsx("menu__items-container", {
 						"menu-container__scrolling": scrolling,
 					})}
 				>
 					{items.map((item) => {
 						return (
-							<HeadlessUIMenu.Item key={item.id} disabled={item.disabled}>
+							<MenuItem key={item.id} disabled={item.disabled}>
 								{({ active }) => (
 									<button
 										className={clsx("menu__item", {
@@ -55,10 +61,10 @@ export function Menu({ button, items, className, scrolling }: MenuProps) {
 										{item.text}
 									</button>
 								)}
-							</HeadlessUIMenu.Item>
+							</MenuItem>
 						);
 					})}
-				</HeadlessUIMenu.Items>
+				</MenuItems>
 			</Transition>
 		</HeadlessUIMenu>
 	);

app/components/NewTabs.tsx

@@ -1,4 +1,4 @@
-import { Tab } from "@headlessui/react";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import clsx from "clsx";
 import * as React from "react";
 
@@ -41,8 +41,8 @@ export function NewTabs(args: NewTabsProps) {
 	const cantSwitchTabs = tabs.filter((t) => !t.hidden).length <= 1;
 
 	return (
-		<Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
-			<Tab.List
+		<TabGroup selectedIndex={selectedIndex} onChange={setSelectedIndex}>
+			<TabList
 				className={clsx("tab__buttons-container", {
 					"overflow-x-auto": scrolling,
 					invisible: cantSwitchTabs && !disappearing,
@@ -67,21 +67,19 @@ export function NewTabs(args: NewTabsProps) {
 							</Tab>
 						);
 					})}
-			</Tab.List>
-			<Tab.Panels
-				className={clsx({ "mt-4": !cantSwitchTabs || !disappearing })}
-			>
+			</TabList>
+			<TabPanels className={clsx({ "mt-4": !cantSwitchTabs || !disappearing })}>
 				{content
 					.filter((c) => !c.hidden)
 					.map((c) => {
 						return (
-							<Tab.Panel key={c.key} unmount={c.unmount}>
+							<TabPanel key={c.key} unmount={c.unmount}>
 								{c.element}
-							</Tab.Panel>
+							</TabPanel>
 						);
 					})}
-			</Tab.Panels>
-		</Tab.Group>
+			</TabPanels>
+		</TabGroup>
 	);
 }
 
@@ -96,8 +94,8 @@ function DividerTabs({
 	const cantSwitchTabs = tabs.filter((t) => !t.hidden).length <= 1;
 
 	return (
-		<Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
-			<Tab.List
+		<TabGroup selectedIndex={selectedIndex} onChange={setSelectedIndex}>
+			<TabList
 				className={clsx("divider-tab__buttons-container", {
 					"overflow-x-auto": scrolling,
 					invisible: cantSwitchTabs && !disappearing,
@@ -124,16 +122,14 @@ function DividerTabs({
 							</React.Fragment>
 						);
 					})}
-			</Tab.List>
-			<Tab.Panels
-				className={clsx({ "mt-4": !cantSwitchTabs || !disappearing })}
-			>
+			</TabList>
+			<TabPanels className={clsx({ "mt-4": !cantSwitchTabs || !disappearing })}>
 				{content
 					.filter((c) => !c.hidden)
 					.map((c) => {
-						return <Tab.Panel key={c.key}>{c.element}</Tab.Panel>;
+						return <TabPanel key={c.key}>{c.element}</TabPanel>;
 					})}
-			</Tab.Panels>
-		</Tab.Group>
+			</TabPanels>
+		</TabGroup>
 	);
 }

app/components/Popover.tsx

@@ -1,4 +1,8 @@
-import { Popover as HeadlessPopover } from "@headlessui/react";
+import {
+	Popover as HeadlessPopover,
+	PopoverButton,
+	PopoverPanel,
+} from "@headlessui/react";
 import type { Placement } from "@popperjs/core";
 import clsx from "clsx";
 import * as React from "react";
@@ -41,26 +45,26 @@ export function Popover({
 
 	return (
 		<HeadlessPopover className={containerClassName}>
-			<HeadlessPopover.Button
+			<PopoverButton
 				// @ts-expect-error Popper docs: https://popper.js.org/react-popper/v2/
 				ref={setReferenceElement}
 				className={triggerClassName ?? "minimal tiny"}
 				data-testid={triggerTestId}
 			>
 				{buttonChildren}
-			</HeadlessPopover.Button>
+			</PopoverButton>
 
 			{isMounted
 				? createPortal(
-						<HeadlessPopover.Panel
+						<PopoverPanel
 							// @ts-expect-error Popper docs: https://popper.js.org/react-popper/v2/
 							ref={setPopperElement}
 							className={clsx("popover-content", contentClassName)}
 							style={styles.popper}
 							{...attributes.popper}
 						>
 							{children}
-						</HeadlessPopover.Panel>,
+						</PopoverPanel>,
 						document.body,
 					)
 				: null}

app/components/UserSearch.tsx

@@ -1,4 +1,9 @@
-import { Combobox } from "@headlessui/react";
+import {
+	Combobox,
+	ComboboxInput,
+	ComboboxOption,
+	ComboboxOptions,
+} from "@headlessui/react";
 import { useFetcher } from "@remix-run/react";
 import clsx from "clsx";
 import * as React from "react";
@@ -87,7 +92,7 @@ export const UserSearch = React.forwardRef<
 					}}
 					disabled={initialSelectionIsLoading}
 				>
-					<Combobox.Input
+					<ComboboxInput
 						ref={ref}
 						placeholder={
 							initialSelectionIsLoading
@@ -103,7 +108,7 @@ export const UserSearch = React.forwardRef<
 						required={required}
 						onBlur={onBlur}
 					/>
-					<Combobox.Options
+					<ComboboxOptions
 						className={clsx("combobox-options", {
 							empty: noMatches,
 							hidden: !queryFetcher.data,
@@ -116,7 +121,7 @@ export const UserSearch = React.forwardRef<
 							</div>
 						) : null}
 						{users.map((user, i) => (
-							<Combobox.Option key={user.id} value={user} as={React.Fragment}>
+							<ComboboxOption key={user.id} value={user} as={React.Fragment}>
 								{({ active }) => (
 									<li
 										className={clsx("combobox-item", { active })}
@@ -138,9 +143,9 @@ export const UserSearch = React.forwardRef<
 										</div>
 									</li>
 								)}
-							</Combobox.Option>
+							</ComboboxOption>
 						))}
-					</Combobox.Options>
+					</ComboboxOptions>
 				</Combobox>
 			</div>
 		);

app/features/sendouq-settings/routes/q.settings.tsx

@@ -1,4 +1,4 @@
-import { RadioGroup } from "@headlessui/react";
+import { Radio, RadioGroup } from "@headlessui/react";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import clsx from "clsx";
@@ -324,7 +324,7 @@ function PreferenceRadioGroup({
 			}
 			className="stack horizontal xs"
 		>
-			<RadioGroup.Option value="AVOID">
+			<Radio value="AVOID">
 				{({ checked }) => (
 					<span
 						className={clsx("q-settings__radio", {
@@ -340,8 +340,8 @@ function PreferenceRadioGroup({
 						{t("q:settings.maps.avoid")}
 					</span>
 				)}
-			</RadioGroup.Option>
-			<RadioGroup.Option value="NEUTRAL">
+			</Radio>
+			<Radio value="NEUTRAL">
 				{({ checked }) => (
 					<span
 						className={clsx("q-settings__radio", {
@@ -357,8 +357,8 @@ function PreferenceRadioGroup({
 						{t("q:settings.maps.neutral")}
 					</span>
 				)}
-			</RadioGroup.Option>
-			<RadioGroup.Option value="PREFER">
+			</Radio>
+			<Radio value="PREFER">
 				{({ checked }) => (
 					<span
 						className={clsx("q-settings__radio", {
@@ -374,7 +374,7 @@ function PreferenceRadioGroup({
 						{t("q:settings.maps.prefer")}
 					</span>
 				)}
-			</RadioGroup.Option>
+			</Radio>
 		</RadioGroup>
 	);
 }

package.json

@@ -34,7 +34,7 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@epic-web/cachified": "^5.2.0",
 		"@faker-js/faker": "^8.4.1",
-		"@headlessui/react": "^1.7.19",
+		"@headlessui/react": "^2.1.3",
 		"@hookform/resolvers": "^3.9.0",
 		"@popperjs/core": "^2.11.8",
 		"@remix-run/node": "^2.11.2",