From 5ca68a9c95061a0d9942b961089e72d700fdb17e Mon Sep 17 00:00:00 2001
From: BrandonGoren <brandongoren@gmail.com>
Date: Mon, 23 Sep 2024 07:40:18 -0400
Subject: [PATCH] Update react types to avoid unbound method lint errors
 (#3480)

Using @headlessui close methods/types in a project with
eslint-typescript currently causes "UnboundMethod" errors because we're
using class member syntax to define the functions.

I tweaked the declarations here to use arrow syntax in few places. The
behavior should be unchanged, but we are no longer implying the
existence of a "this"
---
 .../src/components/dialog/dialog.tsx           |  6 +++---
 .../src/components/disclosure/disclosure.tsx   |  4 ++--
 .../src/components/popover/popover.tsx         | 18 +++++++++---------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index ff7fceb..c168767 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -88,8 +88,8 @@ let DialogContext = createContext<
       {
         dialogState: DialogStates
         unmount: boolean
-        close(): void
-        setTitleId(id: string | null): void
+        close: () => void
+        setTitleId: (id: string | null) => void
       },
       StateDefinition,
     ]
@@ -340,7 +340,7 @@ export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> =
   DialogPropsWeControl,
   PropsForFeatures<typeof DialogRenderFeatures> & {
     open?: boolean
-    onClose(value: boolean): void
+    onClose: (value: boolean) => void
     initialFocus?: MutableRefObject<HTMLElement | null>
     role?: 'dialog' | 'alertdialog'
     autoFocus?: boolean
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
index d7a5dd1..b139d35 100644
--- a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
+++ b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -133,7 +133,7 @@ function useDisclosureContext(component: string) {
 }
 
 let DisclosureAPIContext = createContext<{
-  close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void
+  close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void
 } | null>(null)
 DisclosureAPIContext.displayName = 'DisclosureAPIContext'
 
@@ -163,7 +163,7 @@ function stateReducer(state: StateDefinition, action: Actions) {
 let DEFAULT_DISCLOSURE_TAG = Fragment
 type DisclosureRenderPropArg = {
   open: boolean
-  close(focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>): void
+  close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void
 }
 type DisclosurePropsWeControl = never
 
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index 49a02f7..74526e1 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -177,9 +177,9 @@ function usePopoverContext(component: string) {
 }
 
 let PopoverAPIContext = createContext<{
-  close(
+  close: (
     focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>
-  ): void
+  ) => void
   isPortalled: boolean
 } | null>(null)
 PopoverAPIContext.displayName = 'PopoverAPIContext'
@@ -195,10 +195,10 @@ function usePopoverAPIContext(component: string) {
 }
 
 let PopoverGroupContext = createContext<{
-  registerPopover(registerBag: PopoverRegisterBag): void
-  unregisterPopover(registerBag: PopoverRegisterBag): void
-  isFocusWithinPopoverGroup(): boolean
-  closeOthers(buttonId: string): void
+  registerPopover: (registerBag: PopoverRegisterBag) => void
+  unregisterPopover: (registerBag: PopoverRegisterBag) => void
+  isFocusWithinPopoverGroup: () => boolean
+  closeOthers: (buttonId: string) => void
 } | null>(null)
 PopoverGroupContext.displayName = 'PopoverGroupContext'
 
@@ -216,7 +216,7 @@ function usePopoverPanelContext() {
 interface PopoverRegisterBag {
   buttonId: MutableRefObject<string | null>
   panelId: MutableRefObject<string | null>
-  close(): void
+  close: () => void
 }
 function stateReducer(state: StateDefinition, action: Actions) {
   return match(action.type, reducers, state, action)
@@ -227,9 +227,9 @@ function stateReducer(state: StateDefinition, action: Actions) {
 let DEFAULT_POPOVER_TAG = 'div' as const
 type PopoverRenderPropArg = {
   open: boolean
-  close(
+  close: (
     focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null> | MouseEvent<HTMLElement>
-  ): void
+  ) => void
 }
 type PopoverPropsWeControl = never