Repository: tailwindlabs/headlessui
Pull request #3097 (2024-04-12 09:31:22)

Use `absolute` as the default Floating UI strategy
This is done for 2 reasons:

1. The default strategy in Floating UI was already `absolute`
2. It can improve performance drastically when using transitions

The main reason we used `fixed` was to ensure that it wasn't accidentally positioned to another `relative` element. However, all components that use this `FloatingProvider` will also use a portal which puts elements in the `<body>` already so this should be safe.

If it is not safe for your application, then you can still use the `fixed` strategy.


vercel[bot]: [vc]: #DbDz9qfLrqzvCFoM7C9yhCz6968bz8Jo8pCVh5Cc+WA=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJoZWFkbGVzc3VpLXJlYWN0Iiwicm9vdERpcmVjdG9yeSI6InBsYXlncm91bmRzL3JlYWN0IiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3RhaWx3aW5kbGFicy9oZWFkbGVzc3VpLXJlYWN0LzJ5VzZoaFVMdEF6V3dwRXRLV1hKVjU1aE5mRngiLCJwcmV2aWV3VXJsIjoiaGVhZGxlc3N1aS1yZWFjdC1naXQtZmVhdC11cGRhdGUtZGVmYXVsdC1hbi0wYTBjYTQtdGFpbHdpbmRsYWJzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiUEVORElORyIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJoZWFkbGVzc3VpLXJlYWN0LWdpdC1mZWF0LXVwZGF0ZS1kZWZhdWx0LWFuLTBhMGNhNC10YWlsd2luZGxhYnMudmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJoZWFkbGVzc3VpLXZ1ZSIsInJvb3REaXJlY3RvcnkiOiJwbGF5Z3JvdW5kcy92dWUiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vdGFpbHdpbmRsYWJzL2hlYWRsZXNzdWktdnVlLzgzMXZlc0FlUldwdnZaaEV0WXJBcm5wQUJ0MmMiLCJwcmV2aWV3VXJsIjoiaGVhZGxlc3N1aS12dWUtZ2l0LWZlYXQtdXBkYXRlLWRlZmF1bHQtYW5jaC1mOTM3Y2QtdGFpbHdpbmRsYWJzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiUEVORElORyIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJoZWFkbGVzc3VpLXZ1ZS1naXQtZmVhdC11cGRhdGUtZGVmYXVsdC1hbmNoLWY5MzdjZC10YWlsd2luZGxhYnMudmVyY2VsLmFwcCJ9fV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **headlessui-react** | 🔄 Building ([Inspect](https://vercel.com/tailwindlabs/headlessui-react/2yW6hhULtAzWwpEtKWXJV55hNfFx)) | [Visit Preview](https://vercel.live/open-feedback/headlessui-react-git-feat-update-default-an-0a0ca4-tailwindlabs.vercel.app?via=pr-comment-visit-preview-link&passThrough=1) | 💬 [**Add feedback**](https://vercel.live/open-feedback/headlessui-react-git-feat-update-default-an-0a0ca4-tailwindlabs.vercel.app?via=pr-comment-feedback-link) | Apr 12, 2024 9:31am |
| **headlessui-vue** | 🔄 Building ([Inspect](https://vercel.com/tailwindlabs/headlessui-vue/831vesAeRWpvvZhEtYrArnpABt2c)) | [Visit Preview](https://vercel.live/open-feedback/headlessui-vue-git-feat-update-default-anch-f937cd-tailwindlabs.vercel.app?via=pr-comment-visit-preview-link&passThrough=1) | 💬 [**Add feedback**](https://vercel.live/open-feedback/headlessui-vue-git-feat-update-default-anch-f937cd-tailwindlabs.vercel.app?via=pr-comment-feedback-link) | Apr 12, 2024 9:31am |




Patch:
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 3694842..d74d9a8 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -9,22 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
-- Prevent default behavior when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
 - Use `isFocused` instead of `isFocusVisible` for `Input` and `Textarea` components ([#2940](https://github.com/tailwindlabs/headlessui/pull/2940))
 - Ensure `children` prop of `Field` component can be a render prop ([#2941](https://github.com/tailwindlabs/headlessui/pull/2941))
-- Add `hidden` attribute to internal `<Hidden />` component when the `Features.Hidden` feature is used ([#2955](https://github.com/tailwindlabs/headlessui/pull/2955))
 - Attempt form submission when pressing `Enter` on `Checkbox` component ([#2962](https://github.com/tailwindlabs/headlessui/pull/2962))
-- Allow setting custom `tabIndex` on the `<Switch />` component ([#2966](https://github.com/tailwindlabs/headlessui/pull/2966))
-- Forward `disabled` state to hidden inputs in form-like components ([#3004](https://github.com/tailwindlabs/headlessui/pull/3004))
 - Prefer incoming `data-*` attributes, over the ones set by Headless UI ([#3035](https://github.com/tailwindlabs/headlessui/pull/3035))
-- Respect `selectedIndex` for controlled `<Tab/>` components ([#3037](https://github.com/tailwindlabs/headlessui/pull/3037))
 - Prevent unnecessary execution of the `displayValue` callback in the `ComboboxInput` component ([#3048](https://github.com/tailwindlabs/headlessui/pull/3048))
 - Expose missing `data-disabled` and `data-focus` attributes on the `TabsPanel`, `MenuButton`, `PopoverButton` and `DisclosureButton` components ([#3061](https://github.com/tailwindlabs/headlessui/pull/3061))
 - Fix cursor position when re-focusing the `ComboboxInput` component ([#3065](https://github.com/tailwindlabs/headlessui/pull/3065))
 - Keep focus inside of the `<ComboboxInput />` component ([#3073](https://github.com/tailwindlabs/headlessui/pull/3073))
 - Fix enter transitions for the `Transition` component ([#3074](https://github.com/tailwindlabs/headlessui/pull/3074))
 - Render hidden form input fields for `Checkbox`, `Switch` and `RadioGroup` components ([#3095](https://github.com/tailwindlabs/headlessui/pull/3095))
+- Ensure the `multiple` prop is typed correctly when passing explicit types to the `Combobox` component ([#3099](https://github.com/tailwindlabs/headlessui/pull/3099))
 
 ### Changed
 
@@ -32,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make the `Combobox` component `nullable` by default ([#3064](https://github.com/tailwindlabs/headlessui/pull/3064))
 - Deprecate the `entered` prop on the `Transition` component ([#3089](https://github.com/tailwindlabs/headlessui/pull/3089))
 - Use native `useId` and `useSyncExternalStore` hooks ([#3092](https://github.com/tailwindlabs/headlessui/pull/3092))
+- Use `absolute` as the default Floating UI strategy ([#3097](https://github.com/tailwindlabs/headlessui/pull/3097))
 
 ### Added
 
@@ -39,6 +35,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Expose `--input-width` and `--button-width` CSS variables on the `ComboboxOptions` component ([#3057](https://github.com/tailwindlabs/headlessui/pull/3057))
 - Expose the `--button-width` CSS variable on the `PopoverPanel` component ([#3058](https://github.com/tailwindlabs/headlessui/pull/3058))
 - Close the `Combobox`, `Dialog`, `Listbox`, `Menu` and `Popover` components when the trigger disappears ([#3075](https://github.com/tailwindlabs/headlessui/pull/3075))
+- Add new `CloseButton` component and `useClose` hook ([#3096](https://github.com/tailwindlabs/headlessui/pull/3096))
+
+## [1.7.19] - 2024-04-15
+
+### Fixed
+
+- Make sure panels re-register when IDs are calculated in React < 18 ([#2883](https://github.com/tailwindlabs/headlessui/pull/2883))
+- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
+- Prevent default behavior when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
+- Add `hidden` attribute to internal `<Hidden />` component when the `Features.Hidden` feature is used ([#2955](https://github.com/tailwindlabs/headlessui/pull/2955))
+- Allow setting custom `tabIndex` on the `<Switch />` component ([#2966](https://github.com/tailwindlabs/headlessui/pull/2966))
+- Forward `disabled` state to hidden inputs in form-like components ([#3004](https://github.com/tailwindlabs/headlessui/pull/3004))
+- Respect `selectedIndex` for controlled `<Tab/>` components ([#3037](https://github.com/tailwindlabs/headlessui/pull/3037))
 
 ## [2.0.0-alpha.4] - 2024-01-03
 
@@ -629,6 +638,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Everything!
 
 [unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.0-alpha.4...HEAD
+[1.7.19]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v1.7.18...v1.7.19
 [2.0.0-alpha.4]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.0-alpha.3...v2.0.0-alpha.4
 [2.0.0-alpha.3]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.0-alpha.2...v2.0.0-alpha.3
 [2.0.0-alpha.2]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/react@v2.0.0-alpha.1...v2.0.0-alpha.2
diff --git a/packages/@headlessui-react/src/components/close-button/close-button.tsx b/packages/@headlessui-react/src/components/close-button/close-button.tsx
new file mode 100644
index 0000000..e873284
--- /dev/null
+++ b/packages/@headlessui-react/src/components/close-button/close-button.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import React, { type ElementType, type Ref } from 'react'
+import { useClose } from '../../internal/close-provider'
+import { forwardRefWithAs, mergeProps } from '../../utils/render'
+import { Button, type ButtonProps, type _internal_ComponentButton } from '../button/button'
+
+let DEFAULT_BUTTON_TAG = 'button' as const
+
+export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> =
+  ButtonProps<TTag>
+
+function CloseButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
+  props: ButtonProps<TTag>,
+  ref: Ref<HTMLElement>
+) {
+  let close = useClose()
+  return <Button ref={ref} {...mergeProps({ onClick: close }, props)} />
+}
+
+export let CloseButton = forwardRefWithAs(CloseButtonFn) as _internal_ComponentButton
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 900ec34..7eb1362 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1830,11 +1830,12 @@ function OptionFn<
 // ---
 
 export interface _internal_ComponentCombobox extends HasDisplayName {
-  <TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(
-    props: ComboboxProps<TValue, true, TTag> & RefProp<typeof ComboboxFn>
-  ): JSX.Element
-  <TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(
-    props: ComboboxProps<TValue, false, TTag> & RefProp<typeof ComboboxFn>
+  <
+    TValue,
+    TMultiple extends boolean | undefined = false,
+    TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG,
+  >(
+    props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>
   ): JSX.Element
 }
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index 93a5118..dc6329f 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -30,6 +30,7 @@ import { useOwnerDocument } from '../../hooks/use-owner'
 import { useRootContainers } from '../../hooks/use-root-containers'
 import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { CloseProvider } from '../../internal/close-provider'
 import { HoistFormFields } from '../../internal/form-fields'
 import { State, useOpenClosed } from '../../internal/open-closed'
 import { ForcePortalRoot } from '../../internal/portal-force-root'
@@ -410,15 +411,17 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
                       containers={resolveRootContainers}
                       features={focusTrapFeatures}
                     >
-                      {render({
-                        ourProps,
-                        theirProps,
-                        slot,
-                        defaultTag: DEFAULT_DIALOG_TAG,
-                        features: DialogRenderFeatures,
-                        visible: dialogState === DialogStates.Open,
-                        name: 'Dialog',
-                      })}
+                      <CloseProvider value={close}>
+                        {render({
+                          ourProps,
+                          theirProps,
+                          slot,
+                          defaultTag: DEFAULT_DIALOG_TAG,
+                          features: DialogRenderFeatures,
+                          visible: dialogState === DialogStates.Open,
+                          name: 'Dialog',
+                        })}
+                      </CloseProvider>
                     </FocusTrap>
                   </PortalWrapper>
                 </DescriptionProvider>
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
index 775a594..c49551c 100644
--- a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
+++ b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -24,6 +24,7 @@ import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
+import { CloseProvider } from '../../internal/close-provider'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import type { Props } from '../../types'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
@@ -234,20 +235,22 @@ function DisclosureFn<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
   return (
     <DisclosureContext.Provider value={reducerBag}>
       <DisclosureAPIContext.Provider value={api}>
-        <OpenClosedProvider
-          value={match(disclosureState, {
-            [DisclosureStates.Open]: State.Open,
-            [DisclosureStates.Closed]: State.Closed,
-          })}
-        >
-          {render({
-            ourProps,
-            theirProps,
-            slot,
-            defaultTag: DEFAULT_DISCLOSURE_TAG,
-            name: 'Disclosure',
-          })}
-        </OpenClosedProvider>
+        <CloseProvider value={close}>
+          <OpenClosedProvider
+            value={match(disclosureState, {
+              [DisclosureStates.Open]: State.Open,
+              [DisclosureStates.Closed]: State.Closed,
+            })}
+          >
+            {render({
+              ourProps,
+              theirProps,
+              slot,
+              defaultTag: DEFAULT_DISCLOSURE_TAG,
+              name: 'Disclosure',
+            })}
+          </OpenClosedProvider>
+        </CloseProvider>
       </DisclosureAPIContext.Provider>
     </DisclosureContext.Provider>
   )
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index 8ac30ef..829f109 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -36,6 +36,7 @@ import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useMainTreeNode, useRootContainers } from '../../hooks/use-root-containers'
 import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
 import { Direction as TabDirection, useTabDirection } from '../../hooks/use-tab-direction'
+import { CloseProvider } from '../../internal/close-provider'
 import {
   FloatingProvider,
   useFloatingPanel,
@@ -410,23 +411,25 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
       <PopoverPanelContext.Provider value={null}>
         <PopoverContext.Provider value={reducerBag}>
           <PopoverAPIContext.Provider value={api}>
-            <OpenClosedProvider
-              value={match(popoverState, {
-                [PopoverStates.Open]: State.Open,
-                [PopoverStates.Closed]: State.Closed,
-              })}
-            >
-              <PortalWrapper>
-                {render({
-                  ourProps,
-                  theirProps,
-                  slot,
-                  defaultTag: DEFAULT_POPOVER_TAG,
-                  name: 'Popover',
+            <CloseProvider value={close}>
+              <OpenClosedProvider
+                value={match(popoverState, {
+                  [PopoverStates.Open]: State.Open,
+                  [PopoverStates.Closed]: State.Closed,
                 })}
-                <root.MainTreeNode />
-              </PortalWrapper>
-            </OpenClosedProvider>
+              >
+                <PortalWrapper>
+                  {render({
+                    ourProps,
+                    theirProps,
+                    slot,
+                    defaultTag: DEFAULT_POPOVER_TAG,
+                    name: 'Popover',
+                  })}
+                  <root.MainTreeNode />
+                </PortalWrapper>
+              </OpenClosedProvider>
+            </CloseProvider>
           </PopoverAPIContext.Provider>
         </PopoverContext.Provider>
       </PopoverPanelContext.Provider>
diff --git a/packages/@headlessui-react/src/index.ts b/packages/@headlessui-react/src/index.ts
index 9b18ff0..10b00fb 100644
--- a/packages/@headlessui-react/src/index.ts
+++ b/packages/@headlessui-react/src/index.ts
@@ -1,5 +1,6 @@
 export * from './components/button/button'
 export * from './components/checkbox/checkbox'
+export * from './components/close-button/close-button'
 export * from './components/combobox/combobox'
 export * from './components/data-interactive/data-interactive'
 export { Description, type DescriptionProps } from './components/description/description'
@@ -20,6 +21,7 @@ export * from './components/select/select'
 export * from './components/switch/switch'
 export * from './components/tabs/tabs'
 export * from './components/textarea/textarea'
+export { useClose } from './internal/close-provider'
 // TODO: Enable when ready
 // export * from './components/tooltip/tooltip'
 export * from './components/transition/transition'
diff --git a/packages/@headlessui-react/src/internal/close-provider.tsx b/packages/@headlessui-react/src/internal/close-provider.tsx
new file mode 100644
index 0000000..3d12524
--- /dev/null
+++ b/packages/@headlessui-react/src/internal/close-provider.tsx
@@ -0,0 +1,11 @@
+import React, { createContext, useContext } from 'react'
+
+let CloseContext = createContext(() => {})
+
+export function useClose() {
+  return useContext(CloseContext)
+}
+
+export function CloseProvider({ value, children }: React.PropsWithChildren<{ value: () => void }>) {
+  return <CloseContext.Provider value={value}>{children}</CloseContext.Provider>
+}
diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx
index 75dab82..4f53dff 100644
--- a/packages/@headlessui-react/src/internal/floating.tsx
+++ b/packages/@headlessui-react/src/internal/floating.tsx
@@ -22,7 +22,7 @@ type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 type BaseAnchorProps = {
   /**
-   * The strategy to use when positioning the panel. Defaults to `fixed`.
+   * The strategy to use when positioning the panel. Defaults to `absolute`.
    */
   strategy: 'absolute' | 'fixed'
 
@@ -171,7 +171,7 @@ export function FloatingProvider({
     offset = 0,
     padding = 0,
     inner,
-    strategy = 'fixed',
+    strategy = 'absolute',
   } = useResolvedConfig(config, floatingEl)
   let [to, align = 'center'] = placement.split(' ') as [Placement | 'selection', Align | 'center']
 
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 4ce4372..bfc264d 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `immediate` prop to `<Combobox />` for immediately opening the Combobox when the `input` receives focus ([#2686](https://github.com/tailwindlabs/headlessui/pull/2686))
 - Add `virtual` prop to `Combobox` component ([#2779](https://github.com/tailwindlabs/headlessui/pull/2779))
 
+## [1.7.20] - 2024-04-15
+
 ### Fixed
 
 - Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
@@ -526,7 +528,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.19...HEAD
+[unreleased]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.20...HEAD
+[1.7.20]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.19...@headlessui/vue@v1.7.20
 [1.7.19]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.18...@headlessui/vue@v1.7.19
 [1.7.18]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.17...@headlessui/vue@v1.7.18
 [1.7.17]: https://github.com/tailwindlabs/headlessui/compare/@headlessui/vue@v1.7.16...@headlessui/vue@v1.7.17


Test patch:
diff --git a/packages/@headlessui-react/src/index.test.ts b/packages/@headlessui-react/src/index.test.ts
index 9d7c396..02082ce 100644
--- a/packages/@headlessui-react/src/index.test.ts
+++ b/packages/@headlessui-react/src/index.test.ts
@@ -10,6 +10,8 @@ it('should expose the correct components', () => {
 
     'Checkbox',
 
+    'CloseButton',
+
     'Combobox',
     'ComboboxButton',
     'ComboboxInput',
@@ -90,5 +92,7 @@ it('should expose the correct components', () => {
 
     'Transition',
     'TransitionChild',
+
+    'useClose',
   ])
 })