Sort imports automatically (#2741)

* add `prettier-plugin-organize-imports` and `prettier-plugin-tailwindcss`

* format

* bump Tailwind CSS

* format playgrounds using updated Tailwind CSS and Prettier plugins

* use import syntax

package.json

@@ -37,7 +37,11 @@
     "printWidth": 100,
     "semi": false,
     "singleQuote": true,
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "plugins": [
+      "prettier-plugin-organize-imports",
+      "prettier-plugin-tailwindcss"
+    ]
   },
   "devDependencies": {
     "@swc/core": "^1.2.131",
@@ -51,7 +55,8 @@
     "lint-staged": "^12.2.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.4",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-tailwindcss": "0.4",
     "rimraf": "^3.0.2",
     "tslib": "^2.3.1",
     "typescript": "^4.9.5"

packages/@headlessui-react/src/components/combobox/combobox.test.tsx

@@ -1,48 +1,48 @@
-import React, { createElement, useState, useEffect } from 'react'
 import { render } from '@testing-library/react'
+import React, { createElement, useEffect, useState } from 'react'
 
-import { Combobox } from './combobox'
-import { mockingConsoleLogs, suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
+  assertActiveComboboxOption,
+  assertActiveElement,
+  assertCombobox,
+  assertComboboxButton,
+  assertComboboxButtonLinkedWithCombobox,
+  assertComboboxButtonLinkedWithComboboxLabel,
+  assertComboboxInput,
+  assertComboboxLabel,
+  assertComboboxLabelLinkedWithCombobox,
+  assertComboboxList,
+  assertComboboxOption,
+  assertNoActiveComboboxOption,
+  assertNoSelectedComboboxOption,
+  assertNotActiveComboboxOption,
+  ComboboxMode,
+  ComboboxState,
+  getByText,
+  getComboboxButton,
+  getComboboxButtons,
+  getComboboxes,
+  getComboboxInput,
+  getComboboxInputs,
+  getComboboxLabel,
+  getComboboxOptions,
+} from '../../test-utils/accessibility-assertions'
+import {
+  blur,
   click,
   focus,
-  blur,
-  mouseMove,
+  Keys,
+  MouseButton,
   mouseLeave,
+  mouseMove,
   press,
   shift,
   type,
   word,
-  Keys,
-  MouseButton,
 } from '../../test-utils/interactions'
-import {
-  assertActiveElement,
-  assertActiveComboboxOption,
-  assertComboboxList,
-  assertComboboxButton,
-  assertComboboxButtonLinkedWithCombobox,
-  assertComboboxButtonLinkedWithComboboxLabel,
-  assertComboboxOption,
-  assertComboboxLabel,
-  assertComboboxLabelLinkedWithCombobox,
-  assertNoActiveComboboxOption,
-  assertNoSelectedComboboxOption,
-  getComboboxInput,
-  getComboboxButton,
-  getComboboxButtons,
-  getComboboxInputs,
-  getComboboxOptions,
-  getComboboxLabel,
-  ComboboxState,
-  getByText,
-  getComboboxes,
-  assertCombobox,
-  ComboboxMode,
-  assertNotActiveComboboxOption,
-  assertComboboxInput,
-} from '../../test-utils/accessibility-assertions'
+import { mockingConsoleLogs, suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from '../transitions/transition'
+import { Combobox } from './combobox'
 
 let NOOP = () => {}
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -1,21 +1,19 @@
 import React, {
-  Fragment,
   createContext,
   createRef,
+  ElementType,
+  FocusEvent as ReactFocusEvent,
+  Fragment,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  MutableRefObject,
+  Ref,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useReducer,
   useRef,
-
-  // Types
-  ElementType,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  FocusEvent as ReactFocusEvent,
-  MutableRefObject,
-  Ref,
 } from 'react'
 import { ByComparator, EnsureArray, Expand, Props } from '../../types'
 
@@ -31,31 +29,31 @@ import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { history } from '../../utils/active-element-history'
 
+import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
-import {
-  forwardRefWithAs,
-  render,
-  compact,
-  PropsForFeatures,
-  Features,
-  HasDisplayName,
-  RefProp,
-} from '../../utils/render'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import { match } from '../../utils/match'
-import { objectToFormEntries } from '../../utils/form'
 import { sortByDomNode } from '../../utils/focus-management'
+import { objectToFormEntries } from '../../utils/form'
+import { match } from '../../utils/match'
+import {
+  compact,
+  Features,
+  forwardRefWithAs,
+  HasDisplayName,
+  PropsForFeatures,
+  RefProp,
+  render,
+} from '../../utils/render'
 
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 
-import { Keys } from '../keyboard'
 import { useControllable } from '../../hooks/use-controllable'
-import { useWatch } from '../../hooks/use-watch'
-import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { isMobile } from '../../utils/platform'
 import { useOwnerDocument } from '../../hooks/use-owner'
+import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { useWatch } from '../../hooks/use-watch'
+import { isMobile } from '../../utils/platform'
+import { Keys } from '../keyboard'
 
 enum ComboboxState {
   Open,

packages/@headlessui-react/src/components/description/description.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
-import { Description, useDescriptions } from './description'
 import React, { ReactNode } from 'react'
+import { Description, useDescriptions } from './description'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/description/description.tsx

@@ -1,21 +1,19 @@
 import React, {
   createContext,
-  useContext,
-  useMemo,
-  useState,
-
-  // Types
   ElementType,
   ReactNode,
   Ref,
+  useContext,
+  useMemo,
+  useState,
 } from 'react'
 
-import { Props } from '../../types'
+import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
-import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { useEvent } from '../../hooks/use-event'
+import { Props } from '../../types'
+import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
 
 // ---
 

packages/@headlessui-react/src/components/dialog/dialog.test.tsx

@@ -1,31 +1,31 @@
+import { render } from '@testing-library/react'
+import React, { createElement, Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import React, { createElement, useRef, useState, Fragment, useEffect, useCallback } from 'react'
-import { render, screen } from '@testing-library/react'
 
-import { Dialog } from './dialog'
-import { Popover } from '../popover/popover'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { OpenClosedProvider, State } from '../../internal/open-closed'
 import {
-  DialogState,
-  PopoverState,
+  assertActiveElement,
   assertDialog,
   assertDialogDescription,
   assertDialogOverlay,
   assertDialogTitle,
   assertPopoverPanel,
-  getDialog,
-  getDialogOverlay,
-  getDialogBackdrop,
-  getPopoverButton,
+  DialogState,
   getByText,
-  assertActiveElement,
-  getDialogs,
+  getDialog,
+  getDialogBackdrop,
+  getDialogOverlay,
   getDialogOverlays,
+  getDialogs,
+  getPopoverButton,
+  PopoverState,
 } from '../../test-utils/accessibility-assertions'
-import { click, mouseDrag, press, Keys, shift, focus } from '../../test-utils/interactions'
+import { click, focus, Keys, mouseDrag, press, shift } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { PropsOf } from '../../types'
+import { Popover } from '../popover/popover'
 import { Transition } from '../transitions/transition'
-import { OpenClosedProvider, State } from '../../internal/open-closed'
+import { Dialog } from './dialog'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -1,7 +1,13 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
 import React, {
+  ContextType,
   createContext,
   createRef,
+  ElementType,
+  MouseEvent as ReactMouseEvent,
+  MutableRefObject,
+  Ref,
+  RefObject,
   useCallback,
   useContext,
   useEffect,
@@ -9,48 +15,40 @@ import React, {
   useReducer,
   useRef,
   useState,
-
-  // Types
-  ContextType,
-  ElementType,
-  MouseEvent as ReactMouseEvent,
-  RefObject,
-  MutableRefObject,
-  Ref,
 } from 'react'
 
-import { Props } from '../../types'
-import { match } from '../../utils/match'
-import {
-  forwardRefWithAs,
-  render,
-  Features,
-  PropsForFeatures,
-  HasDisplayName,
-  RefProp,
-} from '../../utils/render'
-import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { Keys } from '../keyboard'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import { useId } from '../../hooks/use-id'
 import { FocusTrap } from '../../components/focus-trap/focus-trap'
 import { Portal, useNestedPortals } from '../../components/portal/portal'
-import { ForcePortalRoot } from '../../internal/portal-force-root'
-import {
-  _internal_ComponentDescription,
-  Description,
-  useDescriptions,
-} from '../description/description'
-import { useOpenClosed, State } from '../../internal/open-closed'
-import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
-import { StackProvider, StackMessage } from '../../internal/stack-context'
+import { useDocumentOverflowLockedEffect } from '../../hooks/document-overflow/use-document-overflow'
+import { useEvent } from '../../hooks/use-event'
+import { useEventListener } from '../../hooks/use-event-listener'
+import { useId } from '../../hooks/use-id'
+import { useInert } from '../../hooks/use-inert'
 import { useOutsideClick } from '../../hooks/use-outside-click'
 import { useOwnerDocument } from '../../hooks/use-owner'
-import { useEventListener } from '../../hooks/use-event-listener'
-import { useEvent } from '../../hooks/use-event'
-import { useDocumentOverflowLockedEffect } from '../../hooks/document-overflow/use-document-overflow'
-import { useInert } from '../../hooks/use-inert'
 import { useRootContainers } from '../../hooks/use-root-containers'
+import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { State, useOpenClosed } from '../../internal/open-closed'
+import { ForcePortalRoot } from '../../internal/portal-force-root'
+import { StackMessage, StackProvider } from '../../internal/stack-context'
+import { Props } from '../../types'
+import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import { match } from '../../utils/match'
+import {
+  Features,
+  forwardRefWithAs,
+  HasDisplayName,
+  PropsForFeatures,
+  RefProp,
+  render,
+} from '../../utils/render'
+import {
+  Description,
+  useDescriptions,
+  _internal_ComponentDescription,
+} from '../description/description'
+import { Keys } from '../keyboard'
 
 enum DialogStates {
   Open,

packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx

@@ -1,19 +1,19 @@
-import React, { createElement, Suspense, useEffect, useRef } from 'react'
 import { render } from '@testing-library/react'
+import React, { createElement, Suspense, useEffect, useRef } from 'react'
 
-import { Disclosure } from './disclosure'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
-  DisclosureState,
-  assertDisclosurePanel,
+  assertActiveElement,
   assertDisclosureButton,
+  assertDisclosurePanel,
+  DisclosureState,
+  getByText,
   getDisclosureButton,
   getDisclosurePanel,
-  assertActiveElement,
-  getByText,
 } from '../../test-utils/accessibility-assertions'
-import { click, press, focus, Keys, MouseButton } from '../../test-utils/interactions'
+import { click, focus, Keys, MouseButton, press } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from '../transitions/transition'
+import { Disclosure } from './disclosure'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/disclosure/disclosure.tsx

@@ -1,42 +1,40 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 import React, {
-  Fragment,
+  ContextType,
   createContext,
+  Dispatch,
+  ElementType,
+  Fragment,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  MutableRefObject,
+  Ref,
   useContext,
   useEffect,
   useMemo,
   useReducer,
   useRef,
-
-  // Types
-  ContextType,
-  Dispatch,
-  ElementType,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  MutableRefObject,
-  Ref,
 } from 'react'
 
-import { Props } from '../../types'
-import { match } from '../../utils/match'
-import {
-  forwardRefWithAs,
-  render,
-  Features,
-  PropsForFeatures,
-  HasDisplayName,
-  RefProp,
-} from '../../utils/render'
-import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
-import { useId } from '../../hooks/use-id'
-import { Keys } from '../keyboard'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { getOwnerDocument } from '../../utils/owner'
 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 { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { Props } from '../../types'
+import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import { match } from '../../utils/match'
+import { getOwnerDocument } from '../../utils/owner'
+import {
+  Features,
+  forwardRefWithAs,
+  HasDisplayName,
+  PropsForFeatures,
+  RefProp,
+  render,
+} from '../../utils/render'
 import { startTransition } from '../../utils/start-transition'
+import { Keys } from '../keyboard'
 
 enum DisclosureStates {
   Open,

packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useRef } from 'react'
 import { render, screen } from '@testing-library/react'
+import React, { useRef, useState } from 'react'
 
-import { FocusTrap } from './focus-trap'
 import { assertActiveElement } from '../../test-utils/accessibility-assertions'
+import { click, Keys, press, shift } from '../../test-utils/interactions'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
-import { click, press, shift, Keys } from '../../test-utils/interactions'
+import { FocusTrap } from './focus-trap'
 
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)

packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx

@@ -1,30 +1,28 @@
 import React, {
-  useRef,
-
-  // Types
   ElementType,
+  FocusEvent as ReactFocusEvent,
   MutableRefObject,
   Ref,
-  FocusEvent as ReactFocusEvent,
+  useRef,
 } from 'react'
 
-import { Props } from '../../types'
-import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
+import { useDisposables } from '../../hooks/use-disposables'
+import { useEvent } from '../../hooks/use-event'
+import { useEventListener } from '../../hooks/use-event-listener'
+import { useIsMounted } from '../../hooks/use-is-mounted'
+import { useOnUnmount } from '../../hooks/use-on-unmount'
+import { useOwnerDocument } from '../../hooks/use-owner'
 import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
-import { focusElement, focusIn, Focus, FocusResult } from '../../utils/focus-management'
-import { match } from '../../utils/match'
-import { useEvent } from '../../hooks/use-event'
-import { useTabDirection, Direction as TabDirection } from '../../hooks/use-tab-direction'
-import { useIsMounted } from '../../hooks/use-is-mounted'
-import { useOwnerDocument } from '../../hooks/use-owner'
-import { useEventListener } from '../../hooks/use-event-listener'
-import { microTask } from '../../utils/micro-task'
+import { Direction as TabDirection, useTabDirection } from '../../hooks/use-tab-direction'
 import { useWatch } from '../../hooks/use-watch'
-import { useDisposables } from '../../hooks/use-disposables'
-import { useOnUnmount } from '../../hooks/use-on-unmount'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { Props } from '../../types'
 import { history } from '../../utils/active-element-history'
+import { Focus, focusElement, focusIn, FocusResult } from '../../utils/focus-management'
+import { match } from '../../utils/match'
+import { microTask } from '../../utils/micro-task'
+import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
 
 type Containers =
   // Lazy resolved containers

packages/@headlessui-react/src/components/label/label.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
-import { Label, useLabels } from './label'
 import React, { ReactNode } from 'react'
+import { Label, useLabels } from './label'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/label/label.tsx

@@ -1,21 +1,19 @@
 import React, {
   createContext,
-  useContext,
-  useMemo,
-  useState,
-
-  // Types
   ElementType,
   ReactNode,
   Ref,
+  useContext,
+  useMemo,
+  useState,
 } from 'react'
 
-import { Props } from '../../types'
+import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
-import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { useEvent } from '../../hooks/use-event'
+import { Props } from '../../types'
+import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
 
 // ---
 

packages/@headlessui-react/src/components/listbox/listbox.test.tsx

@@ -1,20 +1,6 @@
-import React, { createElement, useState, useEffect } from 'react'
 import { render } from '@testing-library/react'
+import React, { createElement, useEffect, useState } from 'react'
 
-import { Listbox } from './listbox'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
-import {
-  click,
-  focus,
-  mouseMove,
-  mouseLeave,
-  press,
-  shift,
-  type,
-  word,
-  Keys,
-  MouseButton,
-} from '../../test-utils/interactions'
 import {
   assertActiveElement,
   assertActiveListboxOption,
@@ -22,22 +8,36 @@ import {
   assertListboxButton,
   assertListboxButtonLinkedWithListbox,
   assertListboxButtonLinkedWithListboxLabel,
-  assertListboxOption,
   assertListboxLabel,
   assertListboxLabelLinkedWithListbox,
+  assertListboxOption,
   assertNoActiveListboxOption,
   assertNoSelectedListboxOption,
+  getByText,
   getListbox,
   getListboxButton,
   getListboxButtons,
   getListboxes,
-  getListboxOptions,
   getListboxLabel,
-  ListboxState,
-  getByText,
+  getListboxOptions,
   ListboxMode,
+  ListboxState,
 } from '../../test-utils/accessibility-assertions'
+import {
+  click,
+  focus,
+  Keys,
+  MouseButton,
+  mouseLeave,
+  mouseMove,
+  press,
+  shift,
+  type,
+  word,
+} from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from '../transitions/transition'
+import { Listbox } from './listbox'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -1,54 +1,52 @@
 import React, {
-  Fragment,
   createContext,
   createRef,
+  ElementType,
+  Fragment,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  MutableRefObject,
+  Ref,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useReducer,
   useRef,
-
-  // Types
-  ElementType,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  MutableRefObject,
-  Ref,
 } from 'react'
 
+import { useComputed } from '../../hooks/use-computed'
+import { useControllable } from '../../hooks/use-controllable'
 import { useDisposables } from '../../hooks/use-disposables'
+import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
-import { useComputed } from '../../hooks/use-computed'
+import { useLatestValue } from '../../hooks/use-latest-value'
+import { useOutsideClick } from '../../hooks/use-outside-click'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { useTextValue } from '../../hooks/use-text-value'
+import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { EnsureArray, Props } from '../../types'
+import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
+import { disposables } from '../../utils/disposables'
+import { FocusableMode, isFocusableElement, sortByDomNode } from '../../utils/focus-management'
+import { objectToFormEntries } from '../../utils/form'
+import { match } from '../../utils/match'
+import { getOwnerDocument } from '../../utils/owner'
 import {
+  compact,
   Features,
   forwardRefWithAs,
-  PropsForFeatures,
-  render,
-  compact,
   HasDisplayName,
+  PropsForFeatures,
   RefProp,
+  render,
 } from '../../utils/render'
-import { match } from '../../utils/match'
-import { disposables } from '../../utils/disposables'
 import { Keys } from '../keyboard'
-import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import { isFocusableElement, FocusableMode, sortByDomNode } from '../../utils/focus-management'
-import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { useOutsideClick } from '../../hooks/use-outside-click'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { objectToFormEntries } from '../../utils/form'
-import { getOwnerDocument } from '../../utils/owner'
-import { useEvent } from '../../hooks/use-event'
-import { useControllable } from '../../hooks/use-controllable'
-import { useLatestValue } from '../../hooks/use-latest-value'
-import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { useTextValue } from '../../hooks/use-text-value'
 
 enum ListboxStates {
   Open,

packages/@headlessui-react/src/components/menu/menu.test.tsx

@@ -1,37 +1,37 @@
-import React, { createElement, useEffect } from 'react'
 import { render } from '@testing-library/react'
+import React, { createElement, useEffect } from 'react'
 
-import { Menu } from './menu'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
-  MenuState,
+  assertActiveElement,
   assertMenu,
   assertMenuButton,
   assertMenuButtonLinkedWithMenu,
   assertMenuItem,
   assertMenuLinkedWithMenuItem,
-  assertActiveElement,
   assertNoActiveMenuItem,
+  getByText,
+  getMenu,
   getMenuButton,
   getMenuButtons,
-  getMenu,
-  getMenus,
   getMenuItems,
-  getByText,
+  getMenus,
+  MenuState,
 } from '../../test-utils/accessibility-assertions'
 import {
   click,
   focus,
-  mouseMove,
+  Keys,
+  MouseButton,
   mouseLeave,
+  mouseMove,
   press,
   shift,
   type,
   word,
-  Keys,
-  MouseButton,
 } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from '../transitions/transition'
+import { Menu } from './menu'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -1,57 +1,55 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
 import React, {
-  Fragment,
   createContext,
   createRef,
+  Dispatch,
+  ElementType,
+  Fragment,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  MutableRefObject,
+  Ref,
   useContext,
   useEffect,
   useMemo,
   useReducer,
   useRef,
-
-  // Types
-  Dispatch,
-  ElementType,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  MutableRefObject,
-  Ref,
 } from 'react'
 
+import { useDisposables } from '../../hooks/use-disposables'
+import { useEvent } from '../../hooks/use-event'
+import { useId } from '../../hooks/use-id'
+import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
+import { useOutsideClick } from '../../hooks/use-outside-click'
+import { useOwnerDocument } from '../../hooks/use-owner'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { useTextValue } from '../../hooks/use-text-value'
+import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { useTreeWalker } from '../../hooks/use-tree-walker'
+import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { Props } from '../../types'
+import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
+import { disposables } from '../../utils/disposables'
+import {
+  Focus as FocusManagementFocus,
+  FocusableMode,
+  focusFrom,
+  isFocusableElement,
+  restoreFocusIfNecessary,
+  sortByDomNode,
+} from '../../utils/focus-management'
 import { match } from '../../utils/match'
 import {
-  forwardRefWithAs,
-  render,
   Features,
-  PropsForFeatures,
+  forwardRefWithAs,
   HasDisplayName,
+  PropsForFeatures,
   RefProp,
+  render,
 } from '../../utils/render'
-import { disposables } from '../../utils/disposables'
-import { useDisposables } from '../../hooks/use-disposables'
-import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
-import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { useId } from '../../hooks/use-id'
 import { Keys } from '../keyboard'
-import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import {
-  isFocusableElement,
-  FocusableMode,
-  sortByDomNode,
-  Focus as FocusManagementFocus,
-  focusFrom,
-  restoreFocusIfNecessary,
-} from '../../utils/focus-management'
-import { useOutsideClick } from '../../hooks/use-outside-click'
-import { useTreeWalker } from '../../hooks/use-tree-walker'
-import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { useOwnerDocument } from '../../hooks/use-owner'
-import { useEvent } from '../../hooks/use-event'
-import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { useTextValue } from '../../hooks/use-text-value'
 
 enum MenuStates {
   Open,

packages/@headlessui-react/src/components/popover/popover.test.tsx

@@ -1,23 +1,23 @@
-import React, { createElement, useEffect, useRef, Fragment, useState } from 'react'
-import { render, act as _act } from '@testing-library/react'
+import { act as _act, render } from '@testing-library/react'
+import React, { createElement, Fragment, useEffect, useRef, useState } from 'react'
 
-import { Popover } from './popover'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import ReactDOM from 'react-dom'
 import {
-  PopoverState,
-  assertPopoverPanel,
-  assertPopoverButton,
-  getPopoverButton,
-  getPopoverPanel,
-  getByText,
   assertActiveElement,
   assertContainsActiveElement,
+  assertPopoverButton,
+  assertPopoverPanel,
+  getByText,
+  getPopoverButton,
   getPopoverOverlay,
+  getPopoverPanel,
+  PopoverState,
 } from '../../test-utils/accessibility-assertions'
-import { click, press, focus, Keys, MouseButton, shift } from '../../test-utils/interactions'
+import { click, focus, Keys, MouseButton, press, shift } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Portal } from '../portal/portal'
 import { Transition } from '../transitions/transition'
-import ReactDOM from 'react-dom'
+import { Popover } from './popover'
 
 let act = _act as unknown as <T>(fn: () => T) => PromiseLike<T>
 

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -1,61 +1,59 @@
 import React, {
+  ContextType,
   createContext,
   createRef,
+  Dispatch,
+  ElementType,
+  FocusEvent as ReactFocusEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  MouseEventHandler,
+  MutableRefObject,
+  Ref,
   useContext,
   useEffect,
   useMemo,
   useReducer,
   useRef,
   useState,
-
-  // Types
-  ContextType,
-  Dispatch,
-  ElementType,
-  FocusEvent as ReactFocusEvent,
-  KeyboardEvent as ReactKeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  MutableRefObject,
-  Ref,
-  MouseEventHandler,
 } from 'react'
 
-import { Props } from '../../types'
-import { match } from '../../utils/match'
-import {
-  forwardRefWithAs,
-  render,
-  Features,
-  PropsForFeatures,
-  HasDisplayName,
-  RefProp,
-} from '../../utils/render'
-import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
+import { useNestedPortals } from '../../components/portal/portal'
+import { useEvent } from '../../hooks/use-event'
+import { useEventListener } from '../../hooks/use-event-listener'
 import { useId } from '../../hooks/use-id'
-import { Keys } from '../keyboard'
+import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
+import { useLatestValue } from '../../hooks/use-latest-value'
+import { useOutsideClick } from '../../hooks/use-outside-click'
+import { useOwnerDocument } from '../../hooks/use-owner'
+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 { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { Props } from '../../types'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import {
-  getFocusableElements,
   Focus,
-  focusIn,
-  isFocusableElement,
   FocusableMode,
+  focusIn,
   FocusResult,
+  getFocusableElements,
+  isFocusableElement,
 } from '../../utils/focus-management'
-import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { useOutsideClick } from '../../hooks/use-outside-click'
-import { getOwnerDocument } from '../../utils/owner'
-import { useOwnerDocument } from '../../hooks/use-owner'
-import { useEventListener } from '../../hooks/use-event-listener'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { useEvent } from '../../hooks/use-event'
-import { useTabDirection, Direction as TabDirection } from '../../hooks/use-tab-direction'
+import { match } from '../../utils/match'
 import { microTask } from '../../utils/micro-task'
-import { useLatestValue } from '../../hooks/use-latest-value'
-import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
-import { useMainTreeNode, useRootContainers } from '../../hooks/use-root-containers'
-import { useNestedPortals } from '../../components/portal/portal'
+import { getOwnerDocument } from '../../utils/owner'
+import {
+  Features,
+  forwardRefWithAs,
+  HasDisplayName,
+  PropsForFeatures,
+  RefProp,
+  render,
+} from '../../utils/render'
+import { Keys } from '../keyboard'
 
 type MouseEvent<T> = Parameters<MouseEventHandler<T>>[0]
 

packages/@headlessui-react/src/components/portal/portal.test.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef } from 'react'
 import { render } from '@testing-library/react'
+import React, { useRef, useState } from 'react'
 
 import { Portal } from './portal'
 

packages/@headlessui-react/src/components/portal/portal.tsx

@@ -1,30 +1,28 @@
 import React, {
-  Fragment,
+  ContextType,
   createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-
-  // Types
   ElementType,
+  Fragment,
   MutableRefObject,
   Ref,
+  useContext,
+  useEffect,
   useMemo,
-  ContextType,
+  useRef,
+  useState,
 } from 'react'
 import { createPortal } from 'react-dom'
 
-import { Props } from '../../types'
-import { forwardRefWithAs, RefProp, HasDisplayName, render } from '../../utils/render'
+import { useEvent } from '../../hooks/use-event'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
-import { usePortalRoot } from '../../internal/portal-force-root'
-import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
-import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
 import { useOnUnmount } from '../../hooks/use-on-unmount'
 import { useOwnerDocument } from '../../hooks/use-owner'
+import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
+import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
+import { usePortalRoot } from '../../internal/portal-force-root'
+import { Props } from '../../types'
 import { env } from '../../utils/env'
-import { useEvent } from '../../hooks/use-event'
+import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
 
 function usePortalTarget(ref: MutableRefObject<HTMLElement | null>): HTMLElement | null {
   let forceInRoot = usePortalRoot()

packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx

@@ -4,16 +4,16 @@ import { render } from '@testing-library/react'
 
 import { RadioGroup } from './radio-group'
 
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
-import { press, focus, Keys, shift, click } from '../../test-utils/interactions'
 import {
-  getByText,
-  assertRadioGroupLabel,
-  getRadioGroupOptions,
+  assertActiveElement,
   assertFocusable,
   assertNotFocusable,
-  assertActiveElement,
+  assertRadioGroupLabel,
+  getByText,
+  getRadioGroupOptions,
 } from '../../test-utils/accessibility-assertions'
+import { click, focus, Keys, press, shift } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -1,44 +1,42 @@
 import React, {
   createContext,
-  useContext,
-  useMemo,
-  useReducer,
-  useRef,
-
-  // Types
   ElementType,
   FocusEvent as ReactFocusEvent,
   KeyboardEvent as ReactKeyboardEvent,
   MouseEvent as ReactMouseEvent,
   MutableRefObject,
   Ref,
+  useContext,
   useEffect,
+  useMemo,
+  useReducer,
+  useRef,
 } from 'react'
 
-import { Props, Expand } from '../../types'
-import { forwardRefWithAs, render, compact, RefProp, HasDisplayName } from '../../utils/render'
-import { useId } from '../../hooks/use-id'
-import { match } from '../../utils/match'
-import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
-import { Keys } from '../../components/keyboard'
-import { focusIn, Focus, FocusResult, sortByDomNode } from '../../utils/focus-management'
-import { useFlags } from '../../hooks/use-flags'
-import { _internal_ComponentLabel, Label, useLabels } from '../../components/label/label'
 import {
-  _internal_ComponentDescription,
   Description,
   useDescriptions,
+  _internal_ComponentDescription,
 } from '../../components/description/description'
-import { useTreeWalker } from '../../hooks/use-tree-walker'
-import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { attemptSubmit, objectToFormEntries } from '../../utils/form'
-import { getOwnerDocument } from '../../utils/owner'
-import { useEvent } from '../../hooks/use-event'
+import { Keys } from '../../components/keyboard'
+import { Label, useLabels, _internal_ComponentLabel } from '../../components/label/label'
 import { useControllable } from '../../hooks/use-controllable'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import { useLatestValue } from '../../hooks/use-latest-value'
 import { useDisposables } from '../../hooks/use-disposables'
+import { useEvent } from '../../hooks/use-event'
+import { useFlags } from '../../hooks/use-flags'
+import { useId } from '../../hooks/use-id'
+import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
+import { useLatestValue } from '../../hooks/use-latest-value'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { useTreeWalker } from '../../hooks/use-tree-walker'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { Expand, Props } from '../../types'
+import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import { Focus, focusIn, FocusResult, sortByDomNode } from '../../utils/focus-management'
+import { attemptSubmit, objectToFormEntries } from '../../utils/form'
+import { match } from '../../utils/match'
+import { getOwnerDocument } from '../../utils/owner'
+import { compact, forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
 
 interface Option<T = unknown> {
   id: string

packages/@headlessui-react/src/components/switch/switch.test.tsx

@@ -1,16 +1,16 @@
-import React, { useState } from 'react'
 import { render } from '@testing-library/react'
+import React, { useState } from 'react'
 
-import { Switch } from './switch'
 import {
-  SwitchState,
-  assertSwitch,
-  getSwitch,
   assertActiveElement,
-  getSwitchLabel,
+  assertSwitch,
   getByText,
+  getSwitch,
+  getSwitchLabel,
+  SwitchState,
 } from '../../test-utils/accessibility-assertions'
-import { press, click, focus, Keys, mouseEnter } from '../../test-utils/interactions'
+import { click, focus, Keys, mouseEnter, press } from '../../test-utils/interactions'
+import { Switch } from './switch'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/switch/switch.tsx

@@ -1,37 +1,35 @@
 import React, {
-  Fragment,
   createContext,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-
-  // Types
   ElementType,
+  Fragment,
   KeyboardEvent as ReactKeyboardEvent,
   MouseEvent as ReactMouseEvent,
   Ref,
+  useContext,
   useEffect,
+  useMemo,
+  useRef,
+  useState,
 } from 'react'
 
-import { Props } from '../../types'
-import { forwardRefWithAs, render, compact, HasDisplayName, RefProp } from '../../utils/render'
-import { useId } from '../../hooks/use-id'
-import { Keys } from '../keyboard'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import { _internal_ComponentLabel, Label, useLabels } from '../label/label'
-import {
-  _internal_ComponentDescription,
-  Description,
-  useDescriptions,
-} from '../description/description'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { attemptSubmit } from '../../utils/form'
-import { useEvent } from '../../hooks/use-event'
 import { useControllable } from '../../hooks/use-controllable'
 import { useDisposables } from '../../hooks/use-disposables'
+import { useEvent } from '../../hooks/use-event'
+import { useId } from '../../hooks/use-id'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { Props } from '../../types'
+import { isDisabledReactIssue7711 } from '../../utils/bugs'
+import { attemptSubmit } from '../../utils/form'
+import { compact, forwardRefWithAs, HasDisplayName, RefProp, render } from '../../utils/render'
+import {
+  Description,
+  useDescriptions,
+  _internal_ComponentDescription,
+} from '../description/description'
+import { Keys } from '../keyboard'
+import { Label, useLabels, _internal_ComponentLabel } from '../label/label'
 
 interface StateDefinition {
   switch: HTMLButtonElement | null

packages/@headlessui-react/src/components/tabs/tabs.ssr.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import { renderHydrate, renderSSR } from '../../test-utils/ssr'
 import { Tab } from './tabs'
-import { renderSSR, renderHydrate } from '../../test-utils/ssr'
 
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)

packages/@headlessui-react/src/components/tabs/tabs.test.tsx

@@ -1,16 +1,16 @@
-import React, { createElement, useState } from 'react'
 import { render } from '@testing-library/react'
+import React, { createElement, useState } from 'react'
 
-import { Tab } from './tabs'
-import { Dialog } from '../dialog/dialog'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
-  assertTabs,
   assertActiveElement,
+  assertTabs,
   getByText,
   getTabs,
 } from '../../test-utils/accessibility-assertions'
-import { press, Keys, shift, click } from '../../test-utils/interactions'
+import { click, Keys, press, shift } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { Dialog } from '../dialog/dialog'
+import { Tab } from './tabs'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-react/src/components/tabs/tabs.tsx

@@ -1,41 +1,39 @@
 import React, {
-  Fragment,
   createContext,
-  useContext,
-  useMemo,
-  useReducer,
-  useRef,
-
-  // Types
   ElementType,
+  Fragment,
   KeyboardEvent as ReactKeyboardEvent,
   MouseEvent as ReactMouseEvent,
   MutableRefObject,
   Ref,
+  useContext,
+  useMemo,
+  useReducer,
+  useRef,
 } from 'react'
 
-import { Props } from '../../types'
-import {
-  render,
-  Features,
-  PropsForFeatures,
-  forwardRefWithAs,
-  RefProp,
-  HasDisplayName,
-} from '../../utils/render'
-import { useId } from '../../hooks/use-id'
-import { match } from '../../utils/match'
 import { Keys } from '../../components/keyboard'
-import { focusIn, Focus, sortByDomNode, FocusResult } from '../../utils/focus-management'
-import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
-import { useSyncRefs } from '../../hooks/use-sync-refs'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { useLatestValue } from '../../hooks/use-latest-value'
-import { FocusSentinel } from '../../internal/focus-sentinel'
 import { useEvent } from '../../hooks/use-event'
-import { microTask } from '../../utils/micro-task'
+import { useId } from '../../hooks/use-id'
+import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
+import { useLatestValue } from '../../hooks/use-latest-value'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { FocusSentinel } from '../../internal/focus-sentinel'
 import { Hidden } from '../../internal/hidden'
+import { Props } from '../../types'
+import { Focus, focusIn, FocusResult, sortByDomNode } from '../../utils/focus-management'
+import { match } from '../../utils/match'
+import { microTask } from '../../utils/micro-task'
 import { getOwnerDocument } from '../../utils/owner'
+import {
+  Features,
+  forwardRefWithAs,
+  HasDisplayName,
+  PropsForFeatures,
+  RefProp,
+  render,
+} from '../../utils/render'
 import { StableCollection, useStableCollectionIndex } from '../../utils/stable-collection'
 
 enum Direction {

packages/@headlessui-react/src/components/transitions/transition.ssr.test.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
-import { Transition } from './transition'
 import { renderSSR } from '../../test-utils/ssr'
+import { Transition } from './transition'
 
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)

packages/@headlessui-react/src/components/transitions/transition.test.tsx

@@ -1,5 +1,5 @@
-import React, { Fragment, useState, useRef, useLayoutEffect, useEffect } from 'react'
-import { render, fireEvent, act as _act } from '@testing-library/react'
+import { act as _act, fireEvent, render } from '@testing-library/react'
+import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
 
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Transition } from './transition'

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -1,39 +1,37 @@
 import React, {
-  Fragment,
   createContext,
+  ElementType,
+  Fragment,
+  MutableRefObject,
+  Ref,
   useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
-
-  // Types
-  ElementType,
-  MutableRefObject,
-  Ref,
 } from 'react'
-import { Props, ReactTag } from '../../types'
-import {
-  Features,
-  forwardRefWithAs,
-  HasDisplayName,
-  PropsForFeatures,
-  render,
-  RenderStrategy,
-  RefProp,
-} from '../../utils/render'
-import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
-import { match } from '../../utils/match'
+import { useDisposables } from '../../hooks/use-disposables'
+import { useEvent } from '../../hooks/use-event'
+import { useFlags } from '../../hooks/use-flags'
 import { useIsMounted } from '../../hooks/use-is-mounted'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { useLatestValue } from '../../hooks/use-latest-value'
 import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTransition } from '../../hooks/use-transition'
-import { useEvent } from '../../hooks/use-event'
-import { useDisposables } from '../../hooks/use-disposables'
+import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { Props, ReactTag } from '../../types'
 import { classNames } from '../../utils/class-names'
-import { useFlags } from '../../hooks/use-flags'
+import { match } from '../../utils/match'
+import {
+  Features,
+  forwardRefWithAs,
+  HasDisplayName,
+  PropsForFeatures,
+  RefProp,
+  render,
+  RenderStrategy,
+} from '../../utils/render'
 
 type ContainerElement = MutableRefObject<HTMLElement | null>
 

packages/@headlessui-react/src/components/transitions/utils/transition.ts

@@ -1,6 +1,6 @@
-import { once } from '../../../utils/once'
 import { disposables } from '../../../utils/disposables'
 import { match } from '../../../utils/match'
+import { once } from '../../../utils/once'
 
 function addClasses(node: HTMLElement, ...classes: string[]) {
   node && classes.length > 0 && node.classList.add(...classes)

packages/@headlessui-react/src/hooks/document-overflow/use-document-overflow.ts

@@ -1,5 +1,5 @@
-import { useIsoMorphicEffect } from '../use-iso-morphic-effect'
 import { useStore } from '../../hooks/use-store'
+import { useIsoMorphicEffect } from '../use-iso-morphic-effect'
 import { overflows } from './overflow-store'
 
 export function useDocumentOverflowLockedEffect(

packages/@headlessui-react/src/hooks/use-disposables.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 import { disposables } from '../utils/disposables'
 

packages/@headlessui-react/src/hooks/use-flags.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { useIsMounted } from './use-is-mounted'
 
 export function useFlags(initialFlags = 0) {

packages/@headlessui-react/src/hooks/use-id.ts

@@ -1,7 +1,7 @@
 import React from 'react'
+import { env } from '../utils/env'
 import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 import { useServerHandoffComplete } from './use-server-handoff-complete'
-import { env } from '../utils/env'
 
 // We used a "simple" approach first which worked for SSR and rehydration on the client. However we
 // didn't take care of the Suspense case. To fix this we used the approach the @reach-ui/auto-id

packages/@headlessui-react/src/hooks/use-inert.test.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode, useRef, useState } from 'react'
 import { render } from '@testing-library/react'
-import { useInert } from './use-inert'
-import { getByText, assertInert, assertNotInert } from '../test-utils/accessibility-assertions'
+import React, { ReactNode, useRef, useState } from 'react'
+import { assertInert, assertNotInert, getByText } from '../test-utils/accessibility-assertions'
 import { click } from '../test-utils/interactions'
+import { useInert } from './use-inert'
 
 beforeEach(() => {
   jest.restoreAllMocks()

packages/@headlessui-react/src/hooks/use-is-initial-render.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 export function useIsInitialRender() {
   let initial = useRef(true)

packages/@headlessui-react/src/hooks/use-iso-morphic-effect.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useEffect, EffectCallback, DependencyList } from 'react'
+import { DependencyList, EffectCallback, useEffect, useLayoutEffect } from 'react'
 import { env } from '../utils/env'
 
 export let useIsoMorphicEffect = (effect: EffectCallback, deps?: DependencyList | undefined) => {

packages/@headlessui-react/src/hooks/use-on-unmount.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { microTask } from '../utils/micro-task'
 import { useEvent } from './use-event'
 

packages/@headlessui-react/src/hooks/use-outside-click.ts

@@ -1,8 +1,8 @@
 import { MutableRefObject, useEffect, useRef } from 'react'
 import { FocusableMode, isFocusableElement } from '../utils/focus-management'
+import { isMobile } from '../utils/platform'
 import { useDocumentEvent } from './use-document-event'
 import { useWindowEvent } from './use-window-event'
-import { isMobile } from '../utils/platform'
 
 type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null
 type ContainerCollection = Container[] | Set<Container>

packages/@headlessui-react/src/hooks/use-resolve-button-type.ts

@@ -1,4 +1,4 @@
-import { useState, MutableRefObject } from 'react'
+import { MutableRefObject, useState } from 'react'
 
 import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 

packages/@headlessui-react/src/hooks/use-root-containers.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useMemo, MutableRefObject } from 'react'
-import { Hidden, Features as HiddenFeatures } from '../internal/hidden'
+import React, { MutableRefObject, useMemo, useRef } from 'react'
+import { Features as HiddenFeatures, Hidden } from '../internal/hidden'
 import { useEvent } from './use-event'
 import { useOwnerDocument } from './use-owner'
 

packages/@headlessui-react/src/hooks/use-sync-refs.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { useEvent } from './use-event'
 
 let Optional = Symbol()

packages/@headlessui-react/src/hooks/use-text-value.ts

@@ -1,4 +1,4 @@
-import { useRef, MutableRefObject } from 'react'
+import { MutableRefObject, useRef } from 'react'
 import { getTextValue } from '../utils/get-text-value'
 import { useEvent } from './use-event'
 

packages/@headlessui-react/src/hooks/use-tree-walker.ts

@@ -1,6 +1,6 @@
-import { useRef, useEffect } from 'react'
-import { useIsoMorphicEffect } from './use-iso-morphic-effect'
+import { useEffect, useRef } from 'react'
 import { getOwnerDocument } from '../utils/owner'
+import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 
 type AcceptNode = (
   node: HTMLElement

packages/@headlessui-react/src/index.ts

@@ -7,8 +7,8 @@ export * from './components/focus-trap/focus-trap'
 export * from './components/listbox/listbox'
 export * from './components/menu/menu'
 export * from './components/popover/popover'
+export { Portal } from './components/portal/portal'
 export * from './components/radio-group/radio-group'
 export * from './components/switch/switch'
 export * from './components/tabs/tabs'
 export * from './components/transitions/transition'
-export { Portal } from './components/portal/portal'

packages/@headlessui-react/src/internal/focus-sentinel.tsx

@@ -1,7 +1,7 @@
-import React, { useState, FocusEvent as ReactFocusEvent } from 'react'
+import React, { FocusEvent as ReactFocusEvent, useState } from 'react'
 
 import { useIsMounted } from '../hooks/use-is-mounted'
-import { Hidden, Features } from './hidden'
+import { Features, Hidden } from './hidden'
 
 interface FocusSentinelProps {
   onFocus(): boolean

packages/@headlessui-react/src/internal/hidden.tsx

@@ -1,6 +1,6 @@
 import { ElementType, Ref } from 'react'
 import { Props } from '../types'
-import { forwardRefWithAs, render, HasDisplayName, RefProp } from '../utils/render'
+import { forwardRefWithAs, HasDisplayName, RefProp, render } from '../utils/render'
 
 let DEFAULT_VISUALLY_HIDDEN_TAG = 'div' as const
 

packages/@headlessui-react/src/internal/open-closed.tsx

@@ -1,11 +1,4 @@
-import React, {
-  createContext,
-  useContext,
-
-  // Types
-  ReactNode,
-  ReactElement,
-} from 'react'
+import React, { createContext, ReactElement, ReactNode, useContext } from 'react'
 
 let Context = createContext<State | null>(null)
 Context.displayName = 'OpenClosedContext'

packages/@headlessui-react/src/internal/portal-force-root.tsx

@@ -1,10 +1,4 @@
-import React, {
-  createContext,
-  useContext,
-
-  // Types
-  ReactNode,
-} from 'react'
+import React, { createContext, ReactNode, useContext } from 'react'
 
 let ForcePortalRootContext = createContext(false)
 

packages/@headlessui-react/src/internal/stack-context.tsx

@@ -1,13 +1,6 @@
-import React, {
-  createContext,
-  useContext,
-
-  // Types
-  MutableRefObject,
-  ReactNode,
-} from 'react'
-import { useIsoMorphicEffect } from '../hooks/use-iso-morphic-effect'
+import React, { createContext, MutableRefObject, ReactNode, useContext } from 'react'
 import { useEvent } from '../hooks/use-event'
+import { useIsoMorphicEffect } from '../hooks/use-iso-morphic-effect'
 
 type OnUpdate = (
   message: StackMessage,

packages/@headlessui-react/src/test-utils/accessibility-assertions.ts

@@ -1,4 +1,4 @@
-import { isFocusableElement, FocusableMode } from '../utils/focus-management'
+import { FocusableMode, isFocusableElement } from '../utils/focus-management'
 
 function assertNever(x: never): never {
   throw new Error('Unexpected object: ' + x)

packages/@headlessui-react/src/test-utils/execute-timeline.ts

@@ -1,5 +1,5 @@
-import snapshotDiff from 'snapshot-diff'
 import { render } from '@testing-library/react'
+import snapshotDiff from 'snapshot-diff'
 
 import { disposables } from '../utils/disposables'
 import { reportChanges } from './report-dom-node-changes'

packages/@headlessui-react/src/test-utils/interactions.test.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 
-import { type, shift, Keys } from './interactions'
+import { Keys, shift, type } from './interactions'
 
 type Events = 'onKeyDown' | 'onKeyUp' | 'onKeyPress' | 'onClick' | 'onBlur' | 'onFocus'
 let events: Events[] = ['onKeyDown', 'onKeyUp', 'onKeyPress', 'onClick', 'onBlur', 'onFocus']

packages/@headlessui-react/src/test-utils/ssr.tsx

@@ -1,5 +1,4 @@
-import { cleanup, RenderResult } from '@testing-library/react'
-import { render, RenderOptions, screen } from '@testing-library/react'
+import { cleanup, render, RenderOptions, RenderResult, screen } from '@testing-library/react'
 import React, { ReactElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import { env } from '../utils/env'

packages/@headlessui-react/src/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement, JSXElementConstructor } from 'react'
+import { JSXElementConstructor, ReactElement, ReactNode } from 'react'
 
 export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>
 

packages/@headlessui-react/src/utils/render.test.tsx

@@ -1,9 +1,9 @@
-import React, { ElementType, createRef, Ref, Fragment } from 'react'
-import { render as testRender, prettyDOM, getByTestId } from '@testing-library/react'
+import { getByTestId, prettyDOM, render as testRender } from '@testing-library/react'
+import React, { createRef, ElementType, Fragment, Ref } from 'react'
 
 import { suppressConsoleLogs } from '../test-utils/suppress-console-logs'
-import { render, Features, PropsForFeatures } from './render'
-import { Props, Expand } from '../types'
+import { Expand, Props } from '../types'
+import { Features, PropsForFeatures, render } from './render'
 
 function contents(id = 'wrapper') {
   return prettyDOM(getByTestId(document.body, id), undefined, {

packages/@headlessui-react/src/utils/render.ts

@@ -1,16 +1,14 @@
 import {
-  Fragment,
   cloneElement,
   createElement,
-  forwardRef,
-  isValidElement,
-
-  // Types
   ElementType,
+  forwardRef,
+  Fragment,
+  isValidElement,
   ReactElement,
   Ref,
 } from 'react'
-import { Props, XOR, __, Expand } from '../types'
+import { Expand, Props, XOR, __ } from '../types'
 import { classNames } from './class-names'
 import { match } from './match'
 

packages/@headlessui-tailwindcss/jest.setup.js

@@ -1,4 +1,4 @@
-let prettier = require('prettier')
+import prettier from 'prettier'
 
 function format(input) {
   return prettier.format(input.replace(/\n/g, ''), {

packages/@headlessui-vue/src/components/combobox/combobox.test.ts

@@ -1,55 +1,55 @@
-import { defineComponent, nextTick, ref, watch, h, reactive, computed, PropType } from 'vue'
-import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
+import { computed, defineComponent, h, nextTick, PropType, reactive, ref, watch } from 'vue'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
 import {
-  Combobox,
-  ComboboxInput,
-  ComboboxLabel,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-} from './combobox'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+  assertActiveComboboxOption,
+  assertActiveElement,
+  assertCombobox,
+  assertComboboxButton,
+  assertComboboxButtonLinkedWithCombobox,
+  assertComboboxButtonLinkedWithComboboxLabel,
+  assertComboboxInput,
+  assertComboboxLabel,
+  assertComboboxLabelLinkedWithCombobox,
+  assertComboboxList,
+  assertComboboxOption,
+  assertNoActiveComboboxOption,
+  assertNoSelectedComboboxOption,
+  assertNotActiveComboboxOption,
+  ComboboxMode,
+  ComboboxState,
+  getByText,
+  getComboboxButton,
+  getComboboxButtons,
+  getComboboxes,
+  getComboboxInput,
+  getComboboxInputs,
+  getComboboxLabel,
+  getComboboxOptions,
+} from '../../test-utils/accessibility-assertions'
+import { html } from '../../test-utils/html'
 import {
+  blur,
   click,
   focus,
-  blur,
-  mouseMove,
+  Keys,
+  MouseButton,
   mouseLeave,
+  mouseMove,
   press,
   shift,
   type,
   word,
-  Keys,
-  MouseButton,
 } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
 import {
-  assertActiveElement,
-  assertActiveComboboxOption,
-  assertComboboxList,
-  assertComboboxButton,
-  assertComboboxButtonLinkedWithCombobox,
-  assertComboboxButtonLinkedWithComboboxLabel,
-  assertComboboxOption,
-  assertComboboxLabel,
-  assertComboboxLabelLinkedWithCombobox,
-  assertNoActiveComboboxOption,
-  assertNoSelectedComboboxOption,
-  getComboboxInput,
-  getComboboxButton,
-  getComboboxButtons,
-  getComboboxInputs,
-  getComboboxOptions,
-  getComboboxLabel,
-  ComboboxState,
-  getByText,
-  getComboboxes,
-  assertCombobox,
-  ComboboxMode,
-  assertNotActiveComboboxOption,
-  assertComboboxInput,
-} from '../../test-utils/accessibility-assertions'
-import { html } from '../../test-utils/html'
-import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxLabel,
+  ComboboxOption,
+  ComboboxOptions,
+} from './combobox'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -1,45 +1,43 @@
 import {
-  Fragment,
   computed,
+  ComputedRef,
   defineComponent,
+  Fragment,
   h,
   inject,
+  InjectionKey,
   nextTick,
   onMounted,
   onUnmounted,
+  PropType,
   provide,
   ref,
+  Ref,
   toRaw,
+  UnwrapNestedRefs,
   watch,
   watchEffect,
-
-  // Types
-  ComputedRef,
-  InjectionKey,
-  PropType,
-  Ref,
-  UnwrapNestedRefs,
 } from 'vue'
 
-import { Features, render, omit, compact } from '../../utils/render'
-import { useId } from '../../hooks/use-id'
-import { Keys } from '../../keyboard'
-import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
-import { dom } from '../../utils/dom'
-import { useOpenClosed, State, useOpenClosedProvider } from '../../internal/open-closed'
-import { match } from '../../utils/match'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { useTreeWalker } from '../../hooks/use-tree-walker'
-import { sortByDomNode } from '../../utils/focus-management'
-import { useOutsideClick } from '../../hooks/use-outside-click'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { objectToFormEntries } from '../../utils/form'
 import { useControllable } from '../../hooks/use-controllable'
+import { useId } from '../../hooks/use-id'
+import { useOutsideClick } from '../../hooks/use-outside-click'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { isMobile } from '../../utils/platform'
-import { disposables } from '../../utils/disposables'
-import { getOwnerDocument } from '../../utils/owner'
+import { useTreeWalker } from '../../hooks/use-tree-walker'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
+import { Keys } from '../../keyboard'
 import { history } from '../../utils/active-element-history'
+import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
+import { disposables } from '../../utils/disposables'
+import { dom } from '../../utils/dom'
+import { sortByDomNode } from '../../utils/focus-management'
+import { objectToFormEntries } from '../../utils/form'
+import { match } from '../../utils/match'
+import { getOwnerDocument } from '../../utils/owner'
+import { isMobile } from '../../utils/platform'
+import { compact, Features, omit, render } from '../../utils/render'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z

packages/@headlessui-vue/src/components/description/description.test.ts

@@ -1,12 +1,12 @@
-import { defineComponent, h, nextTick, ref } from 'vue'
 import prettier from 'prettier'
+import { defineComponent, h, nextTick, ref } from 'vue'
 
 import { render } from '../../test-utils/vue-testing-library'
 import { Description, useDescriptions } from './description'
 
+import { getByText } from '../../test-utils/accessibility-assertions'
 import { html } from '../../test-utils/html'
 import { click } from '../../test-utils/interactions'
-import { getByText } from '../../test-utils/accessibility-assertions'
 
 function format(input: Element | null | string) {
   if (input === null) throw new Error('input is null')

packages/@headlessui-vue/src/components/description/description.ts

@@ -1,17 +1,15 @@
 import {
   computed,
+  ComputedRef,
   defineComponent,
   inject,
+  InjectionKey,
   onMounted,
   onUnmounted,
   provide,
   ref,
-  unref,
-
-  // Types
-  ComputedRef,
-  InjectionKey,
   Ref,
+  unref,
 } from 'vue'
 
 import { useId } from '../../hooks/use-id'

packages/@headlessui-vue/src/components/dialog/dialog.test.ts

@@ -1,47 +1,47 @@
 import {
-  defineComponent,
-  ref,
-  nextTick,
-  h,
+  computed,
   ConcreteComponent,
+  defineComponent,
+  h,
+  nextTick,
   onMounted,
   PropType,
-  computed,
+  ref,
 } from 'vue'
 import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
 
 import {
   Dialog,
-  DialogOverlay,
   DialogBackdrop,
+  DialogDescription,
+  DialogOverlay,
   DialogPanel,
   DialogTitle,
-  DialogDescription,
 } from './dialog'
 
-import { Popover, PopoverPanel, PopoverButton } from '../popover/popover'
-import { TransitionRoot } from '../transitions/transition'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { State, useOpenClosedProvider } from '../../internal/open-closed'
 import {
-  DialogState,
-  PopoverState,
+  assertActiveElement,
   assertDialog,
   assertDialogDescription,
   assertDialogOverlay,
   assertDialogTitle,
   assertPopoverPanel,
-  getDialog,
-  getDialogOverlay,
-  getDialogBackdrop,
-  getPopoverButton,
+  DialogState,
   getByText,
-  assertActiveElement,
-  getDialogs,
+  getDialog,
+  getDialogBackdrop,
+  getDialogOverlay,
   getDialogOverlays,
+  getDialogs,
+  getPopoverButton,
+  PopoverState,
 } from '../../test-utils/accessibility-assertions'
-import { click, mouseDrag, press, Keys, shift, focus } from '../../test-utils/interactions'
 import { html } from '../../test-utils/html'
-import { useOpenClosedProvider, State } from '../../internal/open-closed'
+import { click, focus, Keys, mouseDrag, press, shift } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { Popover, PopoverButton, PopoverPanel } from '../popover/popover'
+import { TransitionRoot } from '../transitions/transition'
 
 // @ts-expect-error
 global.ResizeObserver = class FakeResizeObserver {

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -4,36 +4,34 @@ import {
   defineComponent,
   h,
   inject,
+  InjectionKey,
   nextTick,
   onMounted,
   onUnmounted,
+  PropType,
   provide,
   ref,
-  watchEffect,
-
-  // Types
-  InjectionKey,
-  PropType,
   Ref,
+  watchEffect,
 } from 'vue'
 
-import { render, Features } from '../../utils/render'
-import { Keys } from '../../keyboard'
-import { useId } from '../../hooks/use-id'
 import { FocusTrap } from '../../components/focus-trap/focus-trap'
-import { useInert } from '../../hooks/use-inert'
-import { Portal, PortalGroup, useNestedPortals } from '../portal/portal'
-import { StackMessage, useStackProvider } from '../../internal/stack-context'
-import { match } from '../../utils/match'
-import { ForcePortalRoot } from '../../internal/portal-force-root'
-import { Description, useDescriptions } from '../description/description'
-import { dom } from '../../utils/dom'
-import { useOpenClosed, State } from '../../internal/open-closed'
-import { useOutsideClick } from '../../hooks/use-outside-click'
-import { getOwnerDocument } from '../../utils/owner'
-import { useEventListener } from '../../hooks/use-event-listener'
 import { useDocumentOverflowLockedEffect } from '../../hooks/document-overflow/use-document-overflow'
+import { useEventListener } from '../../hooks/use-event-listener'
+import { useId } from '../../hooks/use-id'
+import { useInert } from '../../hooks/use-inert'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 import { useRootContainers } from '../../hooks/use-root-containers'
+import { State, useOpenClosed } from '../../internal/open-closed'
+import { ForcePortalRoot } from '../../internal/portal-force-root'
+import { StackMessage, useStackProvider } from '../../internal/stack-context'
+import { Keys } from '../../keyboard'
+import { dom } from '../../utils/dom'
+import { match } from '../../utils/match'
+import { getOwnerDocument } from '../../utils/owner'
+import { Features, render } from '../../utils/render'
+import { Description, useDescriptions } from '../description/description'
+import { Portal, PortalGroup, useNestedPortals } from '../portal/portal'
 
 enum DialogStates {
   Open,

packages/@headlessui-vue/src/components/disclosure/disclosure.srr.test.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
-import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'
 import { html } from '../../test-utils/html'
 import { renderHydrate, renderSSR } from '../../test-utils/ssr'
+import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts

@@ -1,19 +1,19 @@
-import { defineComponent, nextTick, ref, watch, h } from 'vue'
-import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
-import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { defineComponent, h, nextTick, ref, watch } from 'vue'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
 import {
-  DisclosureState,
-  assertDisclosurePanel,
+  assertActiveElement,
   assertDisclosureButton,
+  assertDisclosurePanel,
+  DisclosureState,
+  getByText,
   getDisclosureButton,
   getDisclosurePanel,
-  getByText,
-  assertActiveElement,
 } from '../../test-utils/accessibility-assertions'
-import { click, press, Keys, MouseButton } from '../../test-utils/interactions'
 import { html } from '../../test-utils/html'
-import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { click, Keys, MouseButton, press } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
+import { Disclosure, DisclosureButton, DisclosurePanel } from './disclosure'
 
 jest.mock('../../hooks/use-id')
 
@@ -41,14 +41,12 @@ describe('Safe guards', () => {
   it(
     'should be possible to render a Disclosure without crashing',
     suppressConsoleLogs(async () => {
-      renderTemplate(
-        html`
-          <Disclosure>
-            <DisclosureButton>Trigger</DisclosureButton>
-            <DisclosurePanel>Contents</DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure>
+          <DisclosureButton>Trigger</DisclosureButton>
+          <DisclosurePanel>Contents</DisclosurePanel>
+        </Disclosure>
+      `)
 
       assertDisclosureButton({
         state: DisclosureState.InvisibleUnmounted,
@@ -64,14 +62,12 @@ describe('Rendering', () => {
     it(
       'should be possible to render a Disclosure using a render prop',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure v-slot="{ open }">
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel>Panel is: {{open ? 'open' : 'closed'}}</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure v-slot="{ open }">
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>Panel is: {{open ? 'open' : 'closed'}}</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -90,14 +86,12 @@ describe('Rendering', () => {
     )
 
     it('should be possible to render a Disclosure in an open state by default', async () => {
-      renderTemplate(
-        html`
-          <Disclosure v-slot="{ open }" defaultOpen>
-            <DisclosureButton>Trigger</DisclosureButton>
-            <DisclosurePanel>Panel is: {{open ? 'open' : 'closed'}}</DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure v-slot="{ open }" defaultOpen>
+          <DisclosureButton>Trigger</DisclosureButton>
+          <DisclosurePanel>Panel is: {{open ? 'open' : 'closed'}}</DisclosurePanel>
+        </Disclosure>
+      `)
 
       await new Promise<void>(nextTick)
 
@@ -115,16 +109,14 @@ describe('Rendering', () => {
     it(
       'should expose a close function that closes the disclosure',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure v-slot="{ close }">
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel>
-                <button @click="close()">Close me</button>
-              </DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure v-slot="{ close }">
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>
+              <button @click="close()">Close me</button>
+            </DisclosurePanel>
+          </Disclosure>
+        `)
 
         // Focus the button
         getDisclosureButton()?.focus()
@@ -223,14 +215,12 @@ describe('Rendering', () => {
     it(
       'should be possible to render a DisclosureButton using a render prop',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton v-slot="slot">{{JSON.stringify(slot)}}</DisclosureButton>
-              <DisclosurePanel></DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton v-slot="slot">{{JSON.stringify(slot)}}</DisclosureButton>
+            <DisclosurePanel></DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -253,16 +243,14 @@ describe('Rendering', () => {
     it(
       'should be possible to render a DisclosureButton using a render prop and an `as` prop',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton as="div" role="button" v-slot="slot">
-                {{JSON.stringify(slot)}}
-              </DisclosureButton>
-              <DisclosurePanel />
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton as="div" role="button" v-slot="slot">
+              {{JSON.stringify(slot)}}
+            </DisclosureButton>
+            <DisclosurePanel />
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -284,25 +272,21 @@ describe('Rendering', () => {
 
     describe('`type` attribute', () => {
       it('should set the `type` to "button" by default', async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton> Trigger </DisclosureButton>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton> Trigger </DisclosureButton>
+          </Disclosure>
+        `)
 
         expect(getDisclosureButton()).toHaveAttribute('type', 'button')
       })
 
       it('should not set the `type` to "button" if it already contains a `type`', async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton type="submit"> Trigger </DisclosureButton>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton type="submit"> Trigger </DisclosureButton>
+          </Disclosure>
+        `)
 
         expect(getDisclosureButton()).toHaveAttribute('type', 'submit')
       })
@@ -330,13 +314,11 @@ describe('Rendering', () => {
       )
 
       it('should not set the type if the "as" prop is not a "button"', async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton as="div"> Trigger </DisclosureButton>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton as="div"> Trigger </DisclosureButton>
+          </Disclosure>
+        `)
 
         expect(getDisclosureButton()).not.toHaveAttribute('type')
       })
@@ -369,14 +351,12 @@ describe('Rendering', () => {
     it(
       'should be possible to render DisclosurePanel using a render prop',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel v-slot="slot">{{JSON.stringify(slot)}}</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel v-slot="slot">{{JSON.stringify(slot)}}</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -398,14 +378,12 @@ describe('Rendering', () => {
     )
 
     it('should be possible to always render the DisclosurePanel if we provide it a `static` prop', () => {
-      renderTemplate(
-        html`
-          <Disclosure>
-            <DisclosureButton>Trigger</DisclosureButton>
-            <DisclosurePanel static>Contents</DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure>
+          <DisclosureButton>Trigger</DisclosureButton>
+          <DisclosurePanel static>Contents</DisclosurePanel>
+        </Disclosure>
+      `)
 
       // Let's verify that the Disclosure is already there
       expect(getDisclosurePanel()).not.toBe(null)
@@ -443,16 +421,14 @@ describe('Rendering', () => {
     it(
       'should expose a close function that closes the disclosure',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel v-slot="{ close }">
-                <button @click="close()">Close me</button>
-              </DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel v-slot="{ close }">
+              <button @click="close()">Close me</button>
+            </DisclosurePanel>
+          </Disclosure>
+        `)
 
         // Focus the button
         getDisclosureButton()?.focus()
@@ -667,14 +643,12 @@ describe('Keyboard interactions', () => {
     it(
       'should be possible to open the Disclosure with Enter',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel>Contents</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>Contents</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -704,14 +678,12 @@ describe('Keyboard interactions', () => {
     it(
       'should not be possible to open the disclosure with Enter when the button is disabled',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton disabled>Trigger</DisclosureButton>
-              <DisclosurePanel>Content</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton disabled>Trigger</DisclosureButton>
+            <DisclosurePanel>Content</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -737,14 +709,12 @@ describe('Keyboard interactions', () => {
     it(
       'should be possible to close the disclosure with Enter when the disclosure is open',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel>Contents</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>Contents</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -779,14 +749,12 @@ describe('Keyboard interactions', () => {
     it(
       'should be possible to open the disclosure with Space',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel>Contents</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>Contents</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -812,14 +780,12 @@ describe('Keyboard interactions', () => {
     it(
       'should not be possible to open the disclosure with Space when the button is disabled',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton disabled>Trigger</DisclosureButton>
-              <DisclosurePanel>Contents</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton disabled>Trigger</DisclosureButton>
+            <DisclosurePanel>Contents</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -845,14 +811,12 @@ describe('Keyboard interactions', () => {
     it(
       'should be possible to close the disclosure with Space when the disclosure is open',
       suppressConsoleLogs(async () => {
-        renderTemplate(
-          html`
-            <Disclosure>
-              <DisclosureButton>Trigger</DisclosureButton>
-              <DisclosurePanel>Contents</DisclosurePanel>
-            </Disclosure>
-          `
-        )
+        renderTemplate(html`
+          <Disclosure>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>Contents</DisclosurePanel>
+          </Disclosure>
+        `)
 
         assertDisclosureButton({
           state: DisclosureState.InvisibleUnmounted,
@@ -888,14 +852,12 @@ describe('Mouse interactions', () => {
   it(
     'should be possible to open a disclosure on click',
     suppressConsoleLogs(async () => {
-      renderTemplate(
-        html`
-          <Disclosure>
-            <DisclosureButton>Trigger</DisclosureButton>
-            <DisclosurePanel>Contents</DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure>
+          <DisclosureButton>Trigger</DisclosureButton>
+          <DisclosurePanel>Contents</DisclosurePanel>
+        </Disclosure>
+      `)
 
       assertDisclosureButton({
         state: DisclosureState.InvisibleUnmounted,
@@ -918,14 +880,12 @@ describe('Mouse interactions', () => {
   it(
     'should not be possible to open a disclosure on right click',
     suppressConsoleLogs(async () => {
-      renderTemplate(
-        html`
-          <Disclosure>
-            <DisclosureButton>Trigger</DisclosureButton>
-            <DisclosurePanel>Contents</DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure>
+          <DisclosureButton>Trigger</DisclosureButton>
+          <DisclosurePanel>Contents</DisclosurePanel>
+        </Disclosure>
+      `)
 
       assertDisclosureButton({
         state: DisclosureState.InvisibleUnmounted,
@@ -948,14 +908,12 @@ describe('Mouse interactions', () => {
   it(
     'should not be possible to open a disclosure on click when the button is disabled',
     suppressConsoleLogs(async () => {
-      renderTemplate(
-        html`
-          <Disclosure>
-            <DisclosureButton disabled>Trigger</DisclosureButton>
-            <DisclosurePanel>Contents</DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure>
+          <DisclosureButton disabled>Trigger</DisclosureButton>
+          <DisclosurePanel>Contents</DisclosurePanel>
+        </Disclosure>
+      `)
 
       assertDisclosureButton({
         state: DisclosureState.InvisibleUnmounted,
@@ -978,14 +936,12 @@ describe('Mouse interactions', () => {
   it(
     'should be possible to close a disclosure on click',
     suppressConsoleLogs(async () => {
-      renderTemplate(
-        html`
-          <Disclosure>
-            <DisclosureButton>Trigger</DisclosureButton>
-            <DisclosurePanel>Contents</DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure>
+          <DisclosureButton>Trigger</DisclosureButton>
+          <DisclosurePanel>Contents</DisclosurePanel>
+        </Disclosure>
+      `)
 
       // Open disclosure
       await click(getDisclosureButton())
@@ -1005,16 +961,14 @@ describe('Mouse interactions', () => {
   it(
     'should be possible to close the Disclosure by clicking on a DisclosureButton inside a DisclosurePanel',
     suppressConsoleLogs(async () => {
-      renderTemplate(
-        html`
-          <Disclosure>
-            <DisclosureButton>Open</DisclosureButton>
-            <DisclosurePanel>
-              <DisclosureButton>Close</DisclosureButton>
-            </DisclosurePanel>
-          </Disclosure>
-        `
-      )
+      renderTemplate(html`
+        <Disclosure>
+          <DisclosureButton>Open</DisclosureButton>
+          <DisclosurePanel>
+            <DisclosureButton>Close</DisclosureButton>
+          </DisclosurePanel>
+        </Disclosure>
+      `)
 
       // Open the disclosure
       await click(getDisclosureButton())

packages/@headlessui-vue/src/components/disclosure/disclosure.ts

@@ -1,24 +1,24 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 import {
+  computed,
   defineComponent,
-  ref,
-  provide,
   inject,
   InjectionKey,
-  Ref,
-  computed,
-  watchEffect,
   onMounted,
   onUnmounted,
+  provide,
+  ref,
+  Ref,
+  watchEffect,
 } from 'vue'
 
-import { Keys } from '../../keyboard'
-import { match } from '../../utils/match'
-import { render, Features } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
-import { dom } from '../../utils/dom'
-import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
+import { Keys } from '../../keyboard'
+import { dom } from '../../utils/dom'
+import { match } from '../../utils/match'
+import { Features, render } from '../../utils/render'
 
 enum DisclosureStates {
   Open,

packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts

@@ -1,11 +1,11 @@
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
-import { FocusTrap } from './focus-trap'
 import { assertActiveElement, getByText } from '../../test-utils/accessibility-assertions'
+import { html } from '../../test-utils/html'
+import { click, Keys, press, shift } from '../../test-utils/interactions'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { createRenderTemplate } from '../../test-utils/vue-testing-library'
-import { click, press, shift, Keys } from '../../test-utils/interactions'
-import { html } from '../../test-utils/html'
+import { FocusTrap } from './focus-trap'
 
 jest.mock('../../hooks/use-id')
 
@@ -31,13 +31,11 @@ const renderTemplate = createRenderTemplate({
 })
 
 it('should focus the first focusable element inside the FocusTrap', async () => {
-  renderTemplate(
-    html`
-      <FocusTrap>
-        <button>Trigger</button>
-      </FocusTrap>
-    `
-  )
+  renderTemplate(html`
+    <FocusTrap>
+      <button>Trigger</button>
+    </FocusTrap>
+  `)
 
   await nextFrame()
 
@@ -111,13 +109,11 @@ it('should warn when there is no focusable element inside the FocusTrap', async
   expect.assertions(1)
   let spy = jest.spyOn(console, 'warn').mockImplementation(jest.fn())
 
-  renderTemplate(
-    html`
-      <FocusTrap>
-        <span>Nothing to see here...</span>
-      </FocusTrap>
-    `
-  )
+  renderTemplate(html`
+    <FocusTrap>
+      <span>Nothing to see here...</span>
+    </FocusTrap>
+  `)
 
   await nextFrame()
 
@@ -282,19 +278,17 @@ it('should stay in the FocusTrap when using `shift+tab`, if there is only 1 focu
 })
 
 it('should be possible to tab to the next focusable element within the focus trap', async () => {
-  renderTemplate(
-    html`
-      <div>
-        <button>Before</button>
-        <FocusTrap>
-          <button id="item-a">Item A</button>
-          <button id="item-b">Item B</button>
-          <button id="item-c">Item C</button>
-        </FocusTrap>
-        <button>After</button>
-      </div>
-    `
-  )
+  renderTemplate(html`
+    <div>
+      <button>Before</button>
+      <FocusTrap>
+        <button id="item-a">Item A</button>
+        <button id="item-b">Item B</button>
+        <button id="item-c">Item C</button>
+      </FocusTrap>
+      <button>After</button>
+    </div>
+  `)
 
   await nextFrame()
 
@@ -315,19 +309,17 @@ it('should be possible to tab to the next focusable element within the focus tra
 })
 
 it('should be possible to shift+tab to the previous focusable element within the focus trap', async () => {
-  renderTemplate(
-    html`
-      <div>
-        <button>Before</button>
-        <FocusTrap>
-          <button id="item-a">Item A</button>
-          <button id="item-b">Item B</button>
-          <button id="item-c">Item C</button>
-        </FocusTrap>
-        <button>After</button>
-      </div>
-    `
-  )
+  renderTemplate(html`
+    <div>
+      <button>Before</button>
+      <FocusTrap>
+        <button id="item-a">Item A</button>
+        <button id="item-b">Item B</button>
+        <button id="item-c">Item C</button>
+      </FocusTrap>
+      <button>After</button>
+    </div>
+  `)
 
   await nextFrame()
 
@@ -348,20 +340,18 @@ it('should be possible to shift+tab to the previous focusable element within the
 })
 
 it('should skip the initial "hidden" elements within the focus trap', async () => {
-  renderTemplate(
-    html`
-      <div>
-        <button id="before">Before</button>
-        <FocusTrap>
-          <button id="item-a" style="display:none">Item A</button>
-          <button id="item-b" style="display:none">Item B</button>
-          <button id="item-c">Item C</button>
-          <button id="item-d">Item D</button>
-        </FocusTrap>
-        <button>After</button>
-      </div>
-    `
-  )
+  renderTemplate(html`
+    <div>
+      <button id="before">Before</button>
+      <FocusTrap>
+        <button id="item-a" style="display:none">Item A</button>
+        <button id="item-b" style="display:none">Item B</button>
+        <button id="item-c">Item C</button>
+        <button id="item-d">Item D</button>
+      </FocusTrap>
+      <button>After</button>
+    </div>
+  `)
 
   await nextFrame()
 
@@ -370,20 +360,18 @@ it('should skip the initial "hidden" elements within the focus trap', async () =
 })
 
 it('should be possible skip "hidden" elements within the focus trap', async () => {
-  renderTemplate(
-    html`
-      <div>
-        <button id="before">Before</button>
-        <FocusTrap>
-          <button id="item-a">Item A</button>
-          <button id="item-b">Item B</button>
-          <button id="item-c" style="display:none">Item C</button>
-          <button id="item-d">Item D</button>
-        </FocusTrap>
-        <button>After</button>
-      </div>
-    `
-  )
+  renderTemplate(html`
+    <div>
+      <button id="before">Before</button>
+      <FocusTrap>
+        <button id="item-a">Item A</button>
+        <button id="item-b">Item B</button>
+        <button id="item-c" style="display:none">Item C</button>
+        <button id="item-d">Item D</button>
+      </FocusTrap>
+      <button>After</button>
+    </div>
+  `)
 
   await nextFrame()
 
@@ -406,20 +394,18 @@ it('should be possible skip "hidden" elements within the focus trap', async () =
 })
 
 it('should be possible skip disabled elements within the focus trap', async () => {
-  renderTemplate(
-    html`
-      <div>
-        <button id="before">Before</button>
-        <FocusTrap>
-          <button id="item-a">Item A</button>
-          <button id="item-b">Item B</button>
-          <button id="item-c" disabled>Item C</button>
-          <button id="item-d">Item D</button>
-        </FocusTrap>
-        <button>After</button>
-      </div>
-    `
-  )
+  renderTemplate(html`
+    <div>
+      <button id="before">Before</button>
+      <FocusTrap>
+        <button id="item-a">Item A</button>
+        <button id="item-b">Item B</button>
+        <button id="item-c" disabled>Item C</button>
+        <button id="item-d">Item D</button>
+      </FocusTrap>
+      <button>After</button>
+    </div>
+  `)
 
   await nextFrame()
 
@@ -444,21 +430,19 @@ it('should be possible skip disabled elements within the focus trap', async () =
 it(
   'should not be possible to escape the FocusTrap due to strange tabIndex usage',
   suppressConsoleLogs(async () => {
-    renderTemplate(
-      html`
-        <div>
-          <div :tabindex="-1">
-            <input :tabindex="2" id="a" />
-            <input :tabindex="1" id="b" />
-          </div>
-
-          <FocusTrap>
-            <input :tabindex="1" id="c" />
-            <input id="d" />
-          </FocusTrap>
+    renderTemplate(html`
+      <div>
+        <div :tabindex="-1">
+          <input :tabindex="2" id="a" />
+          <input :tabindex="1" id="b" />
         </div>
-      `
-    )
+
+        <FocusTrap>
+          <input :tabindex="1" id="c" />
+          <input id="d" />
+        </FocusTrap>
+      </div>
+    `)
 
     await nextFrame()
 

packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts

@@ -1,28 +1,26 @@
 import {
   computed,
   defineComponent,
+  Fragment,
   h,
   onMounted,
   onUnmounted,
-  ref,
-  watch,
-
-  // Types
-  Fragment,
   PropType,
+  ref,
   Ref,
+  watch,
   watchEffect,
 } from 'vue'
-import { render } from '../../utils/render'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { dom } from '../../utils/dom'
-import { focusIn, Focus, focusElement, FocusResult } from '../../utils/focus-management'
-import { match } from '../../utils/match'
-import { useTabDirection, Direction as TabDirection } from '../../hooks/use-tab-direction'
-import { getOwnerDocument } from '../../utils/owner'
 import { useEventListener } from '../../hooks/use-event-listener'
-import { microTask } from '../../utils/micro-task'
+import { Direction as TabDirection, useTabDirection } from '../../hooks/use-tab-direction'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
 import { history } from '../../utils/active-element-history'
+import { dom } from '../../utils/dom'
+import { Focus, focusElement, focusIn, FocusResult } from '../../utils/focus-management'
+import { match } from '../../utils/match'
+import { microTask } from '../../utils/micro-task'
+import { getOwnerDocument } from '../../utils/owner'
+import { render } from '../../utils/render'
 
 type Containers =
   // Lazy resolved containers

packages/@headlessui-vue/src/components/label/label.test.ts

@@ -1,12 +1,12 @@
-import { defineComponent, h, nextTick, ref } from 'vue'
 import prettier from 'prettier'
+import { defineComponent, h, nextTick, ref } from 'vue'
 
 import { render } from '../../test-utils/vue-testing-library'
 import { Label, useLabels } from './label'
 
+import { getByText } from '../../test-utils/accessibility-assertions'
 import { html } from '../../test-utils/html'
 import { click } from '../../test-utils/interactions'
-import { getByText } from '../../test-utils/accessibility-assertions'
 
 function format(input: Element | null | string) {
   if (input === null) throw new Error('input is null')

packages/@headlessui-vue/src/components/label/label.ts

@@ -1,16 +1,14 @@
 import {
   computed,
+  ComputedRef,
   defineComponent,
   inject,
+  InjectionKey,
   onMounted,
   onUnmounted,
   provide,
   ref,
   unref,
-
-  // Types
-  ComputedRef,
-  InjectionKey,
 } from 'vue'
 
 import { useId } from '../../hooks/use-id'

packages/@headlessui-vue/src/components/listbox/listbox.test.tsx

@@ -1,7 +1,5 @@
-import { defineComponent, nextTick, ref, watch, h, reactive } from 'vue'
-import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
-import { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption } from './listbox'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { defineComponent, h, nextTick, reactive, ref, watch } from 'vue'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
 import {
   assertActiveElement,
   assertActiveListboxOption,
@@ -9,35 +7,37 @@ import {
   assertListboxButton,
   assertListboxButtonLinkedWithListbox,
   assertListboxButtonLinkedWithListboxLabel,
-  assertListboxOption,
   assertListboxLabel,
   assertListboxLabelLinkedWithListbox,
+  assertListboxOption,
   assertNoActiveListboxOption,
   assertNoSelectedListboxOption,
+  getByText,
   getListbox,
   getListboxButton,
   getListboxButtons,
   getListboxes,
-  getListboxOptions,
   getListboxLabel,
-  ListboxState,
-  getByText,
+  getListboxOptions,
   ListboxMode,
+  ListboxState,
 } from '../../test-utils/accessibility-assertions'
+import { html } from '../../test-utils/html'
 import {
   click,
   focus,
-  mouseMove,
+  Keys,
+  MouseButton,
   mouseLeave,
+  mouseMove,
   press,
   shift,
   type,
   word,
-  Keys,
-  MouseButton,
 } from '../../test-utils/interactions'
-import { html } from '../../test-utils/html'
-import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from './listbox'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-vue/src/components/listbox/listbox.ts

@@ -1,41 +1,39 @@
 import {
-  Fragment,
   computed,
+  ComputedRef,
   defineComponent,
+  Fragment,
   h,
   inject,
+  InjectionKey,
   nextTick,
   onMounted,
   onUnmounted,
+  PropType,
   provide,
   ref,
+  Ref,
   toRaw,
+  UnwrapNestedRefs,
   watch,
   watchEffect,
-
-  // Types
-  ComputedRef,
-  InjectionKey,
-  Ref,
-  UnwrapNestedRefs,
-  PropType,
 } from 'vue'
 
-import { Features, render, omit, compact } from '../../utils/render'
+import { useControllable } from '../../hooks/use-controllable'
 import { useId } from '../../hooks/use-id'
+import { useOutsideClick } from '../../hooks/use-outside-click'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useTextValue } from '../../hooks/use-text-value'
+import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
 import { Keys } from '../../keyboard'
 import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
 import { dom } from '../../utils/dom'
-import { useOpenClosed, State, useOpenClosedProvider } from '../../internal/open-closed'
-import { match } from '../../utils/match'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { FocusableMode, isFocusableElement, sortByDomNode } from '../../utils/focus-management'
-import { useOutsideClick } from '../../hooks/use-outside-click'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
 import { objectToFormEntries } from '../../utils/form'
-import { useControllable } from '../../hooks/use-controllable'
-import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
-import { useTextValue } from '../../hooks/use-text-value'
+import { match } from '../../utils/match'
+import { compact, Features, omit, render } from '../../utils/render'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z

packages/@headlessui-vue/src/components/menu/menu.test.tsx

@@ -1,38 +1,38 @@
 import { defineComponent, h, nextTick, reactive, ref, watch } from 'vue'
-import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
-import { Menu, MenuButton, MenuItems, MenuItem } from './menu'
-import { TransitionChild } from '../transitions/transition'
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
 import {
-  MenuState,
+  assertActiveElement,
   assertMenu,
   assertMenuButton,
   assertMenuButtonLinkedWithMenu,
   assertMenuItem,
   assertMenuLinkedWithMenuItem,
-  assertActiveElement,
   assertNoActiveMenuItem,
   getByText,
-  getMenuButton,
   getMenu,
-  getMenuItems,
+  getMenuButton,
   getMenuButtons,
+  getMenuItems,
   getMenus,
+  MenuState,
 } from '../../test-utils/accessibility-assertions'
+import { jsx } from '../../test-utils/html'
 import {
   click,
   focus,
-  mouseMove,
+  Keys,
+  MouseButton,
   mouseLeave,
+  mouseMove,
   press,
   shift,
   type,
-  Keys,
   word,
-  MouseButton,
 } from '../../test-utils/interactions'
-import { jsx } from '../../test-utils/html'
-import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
+import { TransitionChild } from '../transitions/transition'
+import { Menu, MenuButton, MenuItem, MenuItems } from './menu'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-vue/src/components/menu/menu.ts

@@ -1,38 +1,38 @@
 import {
+  computed,
+  ComputedRef,
   defineComponent,
-  ref,
-  provide,
   inject,
+  InjectionKey,
+  nextTick,
   onMounted,
   onUnmounted,
-  computed,
-  nextTick,
-  InjectionKey,
+  provide,
+  ref,
   Ref,
-  watchEffect,
-  ComputedRef,
   UnwrapNestedRefs,
+  watchEffect,
 } from 'vue'
-import { Features, render } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
-import { Keys } from '../../keyboard'
-import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
-import { dom } from '../../utils/dom'
-import { useTreeWalker } from '../../hooks/use-tree-walker'
-import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
-import { match } from '../../utils/match'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import {
-  FocusableMode,
-  isFocusableElement,
-  sortByDomNode,
-  Focus as FocusManagementFocus,
-  focusFrom,
-  restoreFocusIfNecessary,
-} from '../../utils/focus-management'
 import { useOutsideClick } from '../../hooks/use-outside-click'
-import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useTextValue } from '../../hooks/use-text-value'
+import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
+import { useTreeWalker } from '../../hooks/use-tree-walker'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
+import { Keys } from '../../keyboard'
+import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
+import { dom } from '../../utils/dom'
+import {
+  Focus as FocusManagementFocus,
+  FocusableMode,
+  focusFrom,
+  isFocusableElement,
+  restoreFocusIfNecessary,
+  sortByDomNode,
+} from '../../utils/focus-management'
+import { match } from '../../utils/match'
+import { Features, render } from '../../utils/render'
 
 enum MenuStates {
   Open,

packages/@headlessui-vue/src/components/popover/popover.ts

@@ -1,45 +1,43 @@
 import {
-  Fragment,
+  ComponentPublicInstance,
   computed,
   defineComponent,
+  Fragment,
   h,
   inject,
-  provide,
-  ref,
-  shallowRef,
-  watchEffect,
+  InjectionKey,
   onMounted,
   onUnmounted,
-
-  // Types
-  InjectionKey,
+  provide,
+  ref,
   Ref,
-  ComponentPublicInstance,
+  shallowRef,
+  watchEffect,
 } from 'vue'
 
-import { match } from '../../utils/match'
-import { render, Features } from '../../utils/render'
-import { useId } from '../../hooks/use-id'
-import { Keys } from '../../keyboard'
-import {
-  getFocusableElements,
-  Focus,
-  focusIn,
-  isFocusableElement,
-  FocusableMode,
-  FocusResult,
-} from '../../utils/focus-management'
-import { dom } from '../../utils/dom'
-import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { useOutsideClick } from '../../hooks/use-outside-click'
-import { getOwnerDocument } from '../../utils/owner'
-import { useEventListener } from '../../hooks/use-event-listener'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { useTabDirection, Direction as TabDirection } from '../../hooks/use-tab-direction'
-import { microTask } from '../../utils/micro-task'
-import { useMainTreeNode, useRootContainers } from '../../hooks/use-root-containers'
 import { useNestedPortals } from '../../components/portal/portal'
+import { useEventListener } from '../../hooks/use-event-listener'
+import { useId } from '../../hooks/use-id'
+import { useOutsideClick } from '../../hooks/use-outside-click'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useMainTreeNode, useRootContainers } from '../../hooks/use-root-containers'
+import { Direction as TabDirection, useTabDirection } from '../../hooks/use-tab-direction'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed'
+import { Keys } from '../../keyboard'
+import { dom } from '../../utils/dom'
+import {
+  Focus,
+  FocusableMode,
+  focusIn,
+  FocusResult,
+  getFocusableElements,
+  isFocusableElement,
+} from '../../utils/focus-management'
+import { match } from '../../utils/match'
+import { microTask } from '../../utils/micro-task'
+import { getOwnerDocument } from '../../utils/owner'
+import { Features, render } from '../../utils/render'
 
 enum PopoverStates {
   Open,

packages/@headlessui-vue/src/components/portal/portal.test.ts

@@ -1,10 +1,10 @@
-import { h, defineComponent, ref, nextTick, ComponentOptionsWithoutProps, createSSRApp } from 'vue'
+import { ComponentOptionsWithoutProps, createSSRApp, defineComponent, h, nextTick, ref } from 'vue'
 
-import { createRenderTemplate } from '../../test-utils/vue-testing-library'
 import { renderToString } from 'vue/server-renderer'
-import { Portal, PortalGroup } from './portal'
-import { click } from '../../test-utils/interactions'
 import { html } from '../../test-utils/html'
+import { click } from '../../test-utils/interactions'
+import { createRenderTemplate } from '../../test-utils/vue-testing-library'
+import { Portal, PortalGroup } from './portal'
 
 function getPortalRoot() {
   return document.getElementById('headlessui-portal-root')!
@@ -83,15 +83,13 @@ it('SSR-rendering a Portal should not error', async () => {
   expect(getPortalRoot()).toBe(null)
 
   let result = await withoutBrowserGlobals(() =>
-    ssrRenderTemplate(
-      html`
-        <main id="parent">
-          <Portal>
-            <p id="content">Contents...</p>
-          </Portal>
-        </main>
-      `
-    )
+    ssrRenderTemplate(html`
+      <main id="parent">
+        <Portal>
+          <p id="content">Contents...</p>
+        </Portal>
+      </main>
+    `)
   )
 
   expect(getPortalRoot()).toBe(null)
@@ -102,15 +100,13 @@ it('SSR-rendering a Portal should not error', async () => {
 it('should be possible to use a Portal', async () => {
   expect(getPortalRoot()).toBe(null)
 
-  renderTemplate(
-    html`
-      <main id="parent">
-        <Portal>
-          <p id="content">Contents...</p>
-        </Portal>
-      </main>
-    `
-  )
+  renderTemplate(html`
+    <main id="parent">
+      <Portal>
+        <p id="content">Contents...</p>
+      </Portal>
+    </main>
+  `)
 
   await nextTick()
 
@@ -130,19 +126,17 @@ it('should be possible to use a Portal', async () => {
 it('should be possible to use multiple Portal elements', async () => {
   expect(getPortalRoot()).toBe(null)
 
-  renderTemplate(
-    html`
-      <main id="parent">
-        <Portal>
-          <p id="content1">Contents 1 ...</p>
-        </Portal>
-        <hr />
-        <Portal>
-          <p id="content2">Contents 2 ...</p>
-        </Portal>
-      </main>
-    `
-  )
+  renderTemplate(html`
+    <main id="parent">
+      <Portal>
+        <p id="content1">Contents 1 ...</p>
+      </Portal>
+      <hr />
+      <Portal>
+        <p id="content2">Contents 2 ...</p>
+      </Portal>
+    </main>
+  `)
 
   await nextTick()
 

packages/@headlessui-vue/src/components/portal/portal.ts

@@ -1,27 +1,25 @@
 import {
-  Teleport,
   computed,
   defineComponent,
+  getCurrentInstance,
   h,
   inject,
+  InjectionKey,
   onMounted,
   onUnmounted,
+  PropType,
   provide,
   reactive,
   ref,
-  watchEffect,
-
-  // Types
-  InjectionKey,
-  PropType,
   Ref,
+  Teleport,
   watch,
-  getCurrentInstance,
+  watchEffect,
 } from 'vue'
-import { render } from '../../utils/render'
 import { usePortalRoot } from '../../internal/portal-force-root'
-import { getOwnerDocument } from '../../utils/owner'
 import { dom } from '../../utils/dom'
+import { getOwnerDocument } from '../../utils/owner'
+import { render } from '../../utils/render'
 
 type ContextType<T> = T extends InjectionKey<infer V> ? V : never
 

packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts

@@ -1,19 +1,19 @@
-import { nextTick, ref, watch, reactive, defineComponent, defineExpose } from 'vue'
+import { defineComponent, nextTick, reactive, ref, watch } from 'vue'
 import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
 
-import { RadioGroup, RadioGroupOption, RadioGroupLabel, RadioGroupDescription } from './radio-group'
+import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from './radio-group'
 
-import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
-import { press, Keys, shift, click } from '../../test-utils/interactions'
 import {
-  getByText,
-  assertRadioGroupLabel,
-  getRadioGroupOptions,
+  assertActiveElement,
   assertFocusable,
   assertNotFocusable,
-  assertActiveElement,
+  assertRadioGroupLabel,
+  getByText,
+  getRadioGroupOptions,
 } from '../../test-utils/accessibility-assertions'
 import { html } from '../../test-utils/html'
+import { click, Keys, press, shift } from '../../test-utils/interactions'
+import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-vue/src/components/radio-group/radio-group.ts

@@ -1,33 +1,31 @@
 import {
-  Fragment,
   computed,
   defineComponent,
+  Fragment,
   h,
   inject,
+  InjectionKey,
   onMounted,
   onUnmounted,
   provide,
   ref,
-  toRaw,
-  watch,
-
-  // Types
-  InjectionKey,
   Ref,
+  toRaw,
   UnwrapRef,
+  watch,
 } from 'vue'
-import { dom } from '../../utils/dom'
-import { Keys } from '../../keyboard'
-import { focusIn, Focus, FocusResult, sortByDomNode } from '../../utils/focus-management'
+import { useControllable } from '../../hooks/use-controllable'
 import { useId } from '../../hooks/use-id'
-import { compact, omit, render } from '../../utils/render'
-import { Label, useLabels } from '../label/label'
-import { Description, useDescriptions } from '../description/description'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { Keys } from '../../keyboard'
+import { dom } from '../../utils/dom'
+import { Focus, focusIn, FocusResult, sortByDomNode } from '../../utils/focus-management'
 import { attemptSubmit, objectToFormEntries } from '../../utils/form'
 import { getOwnerDocument } from '../../utils/owner'
-import { useControllable } from '../../hooks/use-controllable'
+import { compact, omit, render } from '../../utils/render'
+import { Description, useDescriptions } from '../description/description'
+import { Label, useLabels } from '../label/label'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z

packages/@headlessui-vue/src/components/switch/switch.test.tsx

@@ -1,18 +1,18 @@
-import { defineComponent, ref, watch, h } from 'vue'
+import { defineComponent, h, ref, watch } from 'vue'
 import { createRenderTemplate } from '../../test-utils/vue-testing-library'
 
-import { Switch, SwitchLabel, SwitchDescription, SwitchGroup } from './switch'
 import {
-  SwitchState,
-  assertSwitch,
-  getSwitch,
   assertActiveElement,
-  getSwitchLabel,
+  assertSwitch,
   getByText,
+  getSwitch,
+  getSwitchLabel,
+  SwitchState,
 } from '../../test-utils/accessibility-assertions'
-import { press, click, Keys, mouseEnter } from '../../test-utils/interactions'
 import { html } from '../../test-utils/html'
+import { click, Keys, mouseEnter, press } from '../../test-utils/interactions'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
+import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from './switch'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-vue/src/components/switch/switch.ts

@@ -1,29 +1,27 @@
 import {
-  Fragment,
   computed,
   defineComponent,
+  Fragment,
   h,
   inject,
+  InjectionKey,
+  onMounted,
   provide,
   ref,
-  watch,
-
-  // Types
-  InjectionKey,
   Ref,
-  onMounted,
+  watch,
 } from 'vue'
 
-import { render, compact, omit } from '../../utils/render'
-import { useId } from '../../hooks/use-id'
-import { Keys } from '../../keyboard'
-import { Label, useLabels } from '../label/label'
-import { Description, useDescriptions } from '../description/description'
-import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
-import { Hidden, Features as HiddenFeatures } from '../../internal/hidden'
-import { attemptSubmit } from '../../utils/form'
 import { useControllable } from '../../hooks/use-controllable'
+import { useId } from '../../hooks/use-id'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { Features as HiddenFeatures, Hidden } from '../../internal/hidden'
+import { Keys } from '../../keyboard'
 import { dom } from '../../utils/dom'
+import { attemptSubmit } from '../../utils/form'
+import { compact, omit, render } from '../../utils/render'
+import { Description, useDescriptions } from '../description/description'
+import { Label, useLabels } from '../label/label'
 
 type StateDefinition = {
   // State

packages/@headlessui-vue/src/components/tabs/tabs.ssr.test.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from './tabs'
 import { html } from '../../test-utils/html'
 import { renderHydrate, renderSSR } from '../../test-utils/ssr'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tabs'
 
 jest.mock('../../hooks/use-id')
 

packages/@headlessui-vue/src/components/tabs/tabs.ts

@@ -1,32 +1,30 @@
 import {
-  Fragment,
   computed,
   defineComponent,
+  Fragment,
   h,
   inject,
+  InjectionKey,
   onMounted,
   onUnmounted,
   provide,
   ref,
-  watchEffect,
-
-  // Types
-  InjectionKey,
   Ref,
   watch,
+  watchEffect,
 } from 'vue'
 
-import { Features, render, omit } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
-import { Keys } from '../../keyboard'
-import { dom } from '../../utils/dom'
-import { match } from '../../utils/match'
-import { focusIn, Focus, FocusResult, sortByDomNode } from '../../utils/focus-management'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { FocusSentinel } from '../../internal/focus-sentinel'
-import { microTask } from '../../utils/micro-task'
 import { Hidden } from '../../internal/hidden'
+import { Keys } from '../../keyboard'
+import { dom } from '../../utils/dom'
+import { Focus, focusIn, FocusResult, sortByDomNode } from '../../utils/focus-management'
+import { match } from '../../utils/match'
+import { microTask } from '../../utils/micro-task'
 import { getOwnerDocument } from '../../utils/owner'
+import { Features, omit, render } from '../../utils/render'
 
 enum Direction {
   Forwards,

packages/@headlessui-vue/src/components/transitions/transition.ssr.test.ts

@@ -1,7 +1,7 @@
-import * as Transition from './transition'
-import { renderSSR } from '../../test-utils/ssr'
 import { defineComponent } from 'vue'
 import { html } from '../../test-utils/html'
+import { renderSSR } from '../../test-utils/ssr'
+import * as Transition from './transition'
 
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)

packages/@headlessui-vue/src/components/transitions/transition.test.ts

@@ -1,8 +1,8 @@
-import { defineComponent, ref, onMounted } from 'vue'
-import { fireEvent, createRenderTemplate } from '../../test-utils/vue-testing-library'
+import { defineComponent, onMounted, ref } from 'vue'
+import { createRenderTemplate, fireEvent } from '../../test-utils/vue-testing-library'
 
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
-import { TransitionRoot, TransitionChild } from './transition'
+import { TransitionChild, TransitionRoot } from './transition'
 
 import { executeTimeline } from '../../test-utils/execute-timeline'
 import { html } from '../../test-utils/html'

packages/@headlessui-vue/src/components/transitions/transition.ts

@@ -1,35 +1,33 @@
 import {
   computed,
+  ConcreteComponent,
   defineComponent,
   h,
   inject,
+  InjectionKey,
+  normalizeClass,
   onMounted,
   onUnmounted,
   provide,
   ref,
+  Ref,
   watch,
   watchEffect,
-
-  // Types
-  InjectionKey,
-  Ref,
-  ConcreteComponent,
-  normalizeClass,
 } from 'vue'
 
 import { useId } from '../../hooks/use-id'
-import { match } from '../../utils/match'
 import { env } from '../../utils/env'
+import { match } from '../../utils/match'
 
-import { Features, omit, render, RenderStrategy } from '../../utils/render'
-import { Reason, transition } from './utils/transition'
-import { dom } from '../../utils/dom'
 import {
-  useOpenClosedProvider,
+  hasOpenClosed,
   State,
   useOpenClosed,
-  hasOpenClosed,
+  useOpenClosedProvider,
 } from '../../internal/open-closed'
+import { dom } from '../../utils/dom'
+import { Features, omit, render, RenderStrategy } from '../../utils/render'
+import { Reason, transition } from './utils/transition'
 
 type ID = ReturnType<typeof useId>
 

packages/@headlessui-vue/src/components/transitions/utils/transition.ts

@@ -1,5 +1,5 @@
-import { once } from '../../../utils/once'
 import { disposables } from '../../../utils/disposables'
+import { once } from '../../../utils/once'
 
 function addClasses(node: HTMLElement, ...classes: string[]) {
   node && classes.length > 0 && node.classList.add(...classes)

packages/@headlessui-vue/src/hooks/document-overflow/use-document-overflow.ts

@@ -1,6 +1,6 @@
-import { useStore } from '../../hooks/use-store'
-import { overflows, MetaFn } from './overflow-store'
 import { computed, Ref, watch } from 'vue'
+import { useStore } from '../../hooks/use-store'
+import { MetaFn, overflows } from './overflow-store'
 
 export function useDocumentOverflowLockedEffect(
   doc: Ref<Document | null>,

packages/@headlessui-vue/src/hooks/use-controllable.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef, UnwrapRef, ref } from 'vue'
+import { computed, ComputedRef, ref, UnwrapRef } from 'vue'
 
 export function useControllable<T>(
   controlledValue: ComputedRef<T | undefined>,

packages/@headlessui-vue/src/hooks/use-inert.test.ts

@@ -1,11 +1,11 @@
-import { defineComponent, ref, nextTick, computed, ComponentOptionsWithoutProps } from 'vue'
+import { ComponentOptionsWithoutProps, computed, defineComponent, nextTick, ref } from 'vue'
 
-import { render } from '../test-utils/vue-testing-library'
-import { useInert } from './use-inert'
-import { getByText, assertInert, assertNotInert } from '../test-utils/accessibility-assertions'
-import { click } from '../test-utils/interactions'
+import { assertInert, assertNotInert, getByText } from '../test-utils/accessibility-assertions'
 import { html } from '../test-utils/html'
+import { click } from '../test-utils/interactions'
+import { render } from '../test-utils/vue-testing-library'
 import { dom } from '../utils/dom'
+import { useInert } from './use-inert'
 
 beforeAll(() => {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)

packages/@headlessui-vue/src/hooks/use-inert.ts

@@ -1,10 +1,4 @@
-import {
-  ref,
-  watchEffect,
-
-  // Types
-  Ref,
-} from 'vue'
+import { ref, Ref, watchEffect } from 'vue'
 import { dom } from '../utils/dom'
 
 let originals = new Map<HTMLElement, { 'aria-hidden': string | null; inert: boolean }>()

packages/@headlessui-vue/src/hooks/use-outside-click.ts

@@ -1,9 +1,9 @@
-import { computed, Ref, ComputedRef, ref } from 'vue'
-import { FocusableMode, isFocusableElement } from '../utils/focus-management'
+import { computed, ComputedRef, Ref, ref } from 'vue'
 import { dom } from '../utils/dom'
+import { FocusableMode, isFocusableElement } from '../utils/focus-management'
+import { isMobile } from '../utils/platform'
 import { useDocumentEvent } from './use-document-event'
 import { useWindowEvent } from './use-window-event'
-import { isMobile } from '../utils/platform'
 
 type Container = Ref<HTMLElement | null> | HTMLElement | null
 type ContainerCollection = Container[] | Set<Container>

packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, watchEffect, Ref, ComponentPublicInstance } from 'vue'
+import { ComponentPublicInstance, onMounted, ref, Ref, watchEffect } from 'vue'
 import { dom } from '../utils/dom'
 
 function resolveType(type: unknown, as: string | object) {

packages/@headlessui-vue/src/hooks/use-root-containers.ts

@@ -1,7 +1,7 @@
-import { ref, h, Ref } from 'vue'
-import { Hidden, Features as HiddenFeatures } from '../internal/hidden'
-import { getOwnerDocument } from '../utils/owner'
+import { h, ref, Ref } from 'vue'
+import { Features as HiddenFeatures, Hidden } from '../internal/hidden'
 import { dom } from '../utils/dom'
+import { getOwnerDocument } from '../utils/owner'
 
 export function useRootContainers({
   defaultContainers = [],

packages/@headlessui-vue/src/hooks/use-text-value.ts

@@ -1,6 +1,6 @@
 import { ref, Ref } from 'vue'
-import { getTextValue } from '../utils/get-text-value'
 import { dom } from '../utils/dom'
+import { getTextValue } from '../utils/get-text-value'
 
 export function useTextValue(element: Ref<HTMLElement | null>) {
   let cacheKey = ref<string>('')