Add new CloseButton component and useClose hook

[RobinMalfait]

This PR adds a new CloseButton component to Headless UI as well as a new useClose hook.

These can be used inside a Dialog, Disclosure or Popover component and will close it when used.

Both the button and the hook are forgiving, meaning if you use them outside of a "closable" component they will do nothing.

CloseButton component

Use the CloseButton component within a "closable" component to automatically close it when the button is clicked:

import { CloseButton } from '@headlessui/react'

<MyDialog>
  /* ... */
  <CloseButton>
    Close
  </CloseButton>
<MyDialog>

This component also supports the as prop allowing you to wrap an existing component with it:

import { CloseButton } from '@headlessui/react'
import { MyButton, MyDialog } from './components'

<MyDialog>
  /* ... */
  <CloseButton as={MyButton}>
    Close
  </CloseButton>
<MyDialog>

useClose Hook

The useClose hook is useful in situations where you need more control over when the "closable" component is closed. For example, maybe you want to close a dialog when you submit a form within it:

import { Dialog, useClose } from '@headlessui/react'

export function MySearchForm() {
  let close = useClose()

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        /* perform search... */          
        close()
      }}
    >
      <input type="search" />
    </form>
    /* ... */
  )
}

export function MyDialog() {
  return (
    <Dialog>
      <MySearchForm />
      /* ... */
    </Dialog>
  )
}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 12, 2024 9:15am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 12, 2024 9:15am

[reinink]

This looks good to me @RobinMalfait! 👍

[Elieserlaguerre]

I'm trying to use the CloseButton component in my Disclosure panel, next.js app, but for some reason, I keep getting an error message when I try to import the component from @headlessui/react. the error message says: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[reinink]

I'm trying to use the CloseButton component in my Disclosure panel, next.js app, but for some reason, I keep getting an error message when I try to import the component from @headlessui/react. the error message says: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

@Elieserlaguerre Hey! Are you on the latest versions of @headlessui/react? You'll need v2, as that's when the CloseButton component was introduced.

If yes, maybe try dropping your .next folder and rebuilding — you can sometimes run into stale caches with Next.js.

Hope that helps 👍

[Elieserlaguerre]

I've uninstalled the previous version of @headlessui/react and installed v2 like you suggested, but now I'm getting this error message in my development log: Attempted import error: 'CloseButton' is not exported from ***@***.***/react' (imported as 'CloseButton'). the button works, but it's also giving me that error message you see up top. I believe it's coming from the import statement at the top of my js file, but I don't know what I should do to fix it.

…

On Fri, Nov 1, 2024 at 10:51 AM Jonathan Reinink ***@***.***> wrote: I'm trying to use the CloseButton component in my Disclosure panel, next.js app, but for some reason, I keep getting an error message when I try to import the component from @headlessui/react. the error message says: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. @Elieserlaguerre <https://github.com/Elieserlaguerre> Hey! Are you on the latest versions of @headlessui/react? You'll need v2, as that's when the CloseButton component was introduced. If yes, maybe try dropping your .next folder and rebuilding — you can sometimes run into stale caches with Next.js. Hope that helps 👍 — Reply to this email directly, view it on GitHub <#3096 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH3RRCMV2PFOCJIXTPYXSHDZ6OIPBAVCNFSM6AAAAABQ7JHSL2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJSGAYDKMJWGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Sincerely, Elieser Laguerre