diff --git a/package.json b/package.json index 725b773..7006c58 100644 --- a/package.json +++ b/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" diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx index 30b638b..85b43cd 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx +++ b/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 = () => {} diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index ea50cc8..178a7dc 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/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, diff --git a/packages/@headlessui-react/src/components/description/description.test.tsx b/packages/@headlessui-react/src/components/description/description.test.tsx index 69ca741..4b88868 100644 --- a/packages/@headlessui-react/src/components/description/description.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/description/description.tsx b/packages/@headlessui-react/src/components/description/description.tsx index 03a3598..95fa543 100644 --- a/packages/@headlessui-react/src/components/description/description.tsx +++ b/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' // --- diff --git a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx index 328c46d..91fbb59 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx index 1c94c6d..9292e31 100644 --- a/packages/@headlessui-react/src/components/dialog/dialog.tsx +++ b/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, diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx index a38ec66..a9a874d 100644 --- a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx index aafa04f..16ba5d4 100644 --- a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx +++ b/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, diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx index 054ed6d..8f16838 100644 --- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.test.tsx +++ b/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) diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx index 356ca04..d225a93 100644 --- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx +++ b/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 diff --git a/packages/@headlessui-react/src/components/label/label.test.tsx b/packages/@headlessui-react/src/components/label/label.test.tsx index 7314035..7d0ec99 100644 --- a/packages/@headlessui-react/src/components/label/label.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/label/label.tsx b/packages/@headlessui-react/src/components/label/label.tsx index b02b8a1..4d668cf 100644 --- a/packages/@headlessui-react/src/components/label/label.tsx +++ b/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' // --- diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx index 521172f..0227f5d 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx index a39379e..df81e5e 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.tsx +++ b/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, diff --git a/packages/@headlessui-react/src/components/menu/menu.test.tsx b/packages/@headlessui-react/src/components/menu/menu.test.tsx index 4409a8e..e05ff39 100644 --- a/packages/@headlessui-react/src/components/menu/menu.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx index 1c62255..3d88df4 100644 --- a/packages/@headlessui-react/src/components/menu/menu.tsx +++ b/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, diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx index af1f0f6..4c3070f 100644 --- a/packages/@headlessui-react/src/components/popover/popover.test.tsx +++ b/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 (fn: () => T) => PromiseLike diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx index cb98e63..4cb75a1 100644 --- a/packages/@headlessui-react/src/components/popover/popover.tsx +++ b/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 = Parameters>[0] diff --git a/packages/@headlessui-react/src/components/portal/portal.test.tsx b/packages/@headlessui-react/src/components/portal/portal.test.tsx index d434dd6..d5d9d06 100644 --- a/packages/@headlessui-react/src/components/portal/portal.test.tsx +++ b/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' diff --git a/packages/@headlessui-react/src/components/portal/portal.tsx b/packages/@headlessui-react/src/components/portal/portal.tsx index 7419982..f3f0071 100644 --- a/packages/@headlessui-react/src/components/portal/portal.tsx +++ b/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 { let forceInRoot = usePortalRoot() diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx index b1feee3..a78800b 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx index 3a3472d..6b5a0a9 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx +++ b/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 { id: string diff --git a/packages/@headlessui-react/src/components/switch/switch.test.tsx b/packages/@headlessui-react/src/components/switch/switch.test.tsx index 1d48577..3f442b2 100644 --- a/packages/@headlessui-react/src/components/switch/switch.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx index 129df55..89a3092 100644 --- a/packages/@headlessui-react/src/components/switch/switch.tsx +++ b/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 diff --git a/packages/@headlessui-react/src/components/tabs/tabs.ssr.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.ssr.test.tsx index 41d08ef..07b7e2f 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.ssr.test.tsx +++ b/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) diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx index 05ac951..e04d535 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx +++ b/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') diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx index f4d18c1..6e02330 100644 --- a/packages/@headlessui-react/src/components/tabs/tabs.tsx +++ b/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 { diff --git a/packages/@headlessui-react/src/components/transitions/transition.ssr.test.tsx b/packages/@headlessui-react/src/components/transitions/transition.ssr.test.tsx index 2648043..7f5a996 100644 --- a/packages/@headlessui-react/src/components/transitions/transition.ssr.test.tsx +++ b/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) diff --git a/packages/@headlessui-react/src/components/transitions/transition.test.tsx b/packages/@headlessui-react/src/components/transitions/transition.test.tsx index 9ee4642..2066568 100644 --- a/packages/@headlessui-react/src/components/transitions/transition.test.tsx +++ b/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' diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx index bd54f87..f26dd5d 100644 --- a/packages/@headlessui-react/src/components/transitions/transition.tsx +++ b/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 diff --git a/packages/@headlessui-react/src/components/transitions/utils/transition.ts b/packages/@headlessui-react/src/components/transitions/utils/transition.ts index 1c80fea..ae6d202 100644 --- a/packages/@headlessui-react/src/components/transitions/utils/transition.ts +++ b/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) diff --git a/packages/@headlessui-react/src/hooks/document-overflow/use-document-overflow.ts b/packages/@headlessui-react/src/hooks/document-overflow/use-document-overflow.ts index 849a635..ded505e 100644 --- a/packages/@headlessui-react/src/hooks/document-overflow/use-document-overflow.ts +++ b/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( diff --git a/packages/@headlessui-react/src/hooks/use-disposables.ts b/packages/@headlessui-react/src/hooks/use-disposables.ts index b4e265a..9166de2 100644 --- a/packages/@headlessui-react/src/hooks/use-disposables.ts +++ b/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' diff --git a/packages/@headlessui-react/src/hooks/use-flags.ts b/packages/@headlessui-react/src/hooks/use-flags.ts index 5d0bfb3..4f9cb84 100644 --- a/packages/@headlessui-react/src/hooks/use-flags.ts +++ b/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) { diff --git a/packages/@headlessui-react/src/hooks/use-id.ts b/packages/@headlessui-react/src/hooks/use-id.ts index 761d6c1..30b84e6 100644 --- a/packages/@headlessui-react/src/hooks/use-id.ts +++ b/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 diff --git a/packages/@headlessui-react/src/hooks/use-inert.test.tsx b/packages/@headlessui-react/src/hooks/use-inert.test.tsx index ba1a869..6c8d1e0 100644 --- a/packages/@headlessui-react/src/hooks/use-inert.test.tsx +++ b/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() diff --git a/packages/@headlessui-react/src/hooks/use-is-initial-render.ts b/packages/@headlessui-react/src/hooks/use-is-initial-render.ts index 442a80f..b93eb49 100644 --- a/packages/@headlessui-react/src/hooks/use-is-initial-render.ts +++ b/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) diff --git a/packages/@headlessui-react/src/hooks/use-iso-morphic-effect.ts b/packages/@headlessui-react/src/hooks/use-iso-morphic-effect.ts index 8f81b4e..fe72a65 100644 --- a/packages/@headlessui-react/src/hooks/use-iso-morphic-effect.ts +++ b/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) => { diff --git a/packages/@headlessui-react/src/hooks/use-on-unmount.ts b/packages/@headlessui-react/src/hooks/use-on-unmount.ts index 9fd0e6f..3671f79 100644 --- a/packages/@headlessui-react/src/hooks/use-on-unmount.ts +++ b/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' diff --git a/packages/@headlessui-react/src/hooks/use-outside-click.ts b/packages/@headlessui-react/src/hooks/use-outside-click.ts index aadb36d..d288df7 100644 --- a/packages/@headlessui-react/src/hooks/use-outside-click.ts +++ b/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 type ContainerCollection = Container[] | Set diff --git a/packages/@headlessui-react/src/hooks/use-resolve-button-type.ts b/packages/@headlessui-react/src/hooks/use-resolve-button-type.ts index f5a6cd2..170ae8e 100644 --- a/packages/@headlessui-react/src/hooks/use-resolve-button-type.ts +++ b/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' diff --git a/packages/@headlessui-react/src/hooks/use-root-containers.tsx b/packages/@headlessui-react/src/hooks/use-root-containers.tsx index e3b8d34..c2a598e 100644 --- a/packages/@headlessui-react/src/hooks/use-root-containers.tsx +++ b/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' diff --git a/packages/@headlessui-react/src/hooks/use-sync-refs.ts b/packages/@headlessui-react/src/hooks/use-sync-refs.ts index 51482a8..2d9308f 100644 --- a/packages/@headlessui-react/src/hooks/use-sync-refs.ts +++ b/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() diff --git a/packages/@headlessui-react/src/hooks/use-text-value.ts b/packages/@headlessui-react/src/hooks/use-text-value.ts index 69777f5..71e8dc2 100644 --- a/packages/@headlessui-react/src/hooks/use-text-value.ts +++ b/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' diff --git a/packages/@headlessui-react/src/hooks/use-tree-walker.ts b/packages/@headlessui-react/src/hooks/use-tree-walker.ts index 7ccf7c8..94e902d 100644 --- a/packages/@headlessui-react/src/hooks/use-tree-walker.ts +++ b/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 diff --git a/packages/@headlessui-react/src/index.ts b/packages/@headlessui-react/src/index.ts index b6c2f2b..6a340db 100644 --- a/packages/@headlessui-react/src/index.ts +++ b/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' diff --git a/packages/@headlessui-react/src/internal/focus-sentinel.tsx b/packages/@headlessui-react/src/internal/focus-sentinel.tsx index 16f7920..31cf454 100644 --- a/packages/@headlessui-react/src/internal/focus-sentinel.tsx +++ b/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 diff --git a/packages/@headlessui-react/src/internal/hidden.tsx b/packages/@headlessui-react/src/internal/hidden.tsx index 3d5cb16..633f20d 100644 --- a/packages/@headlessui-react/src/internal/hidden.tsx +++ b/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 diff --git a/packages/@headlessui-react/src/internal/open-closed.tsx b/packages/@headlessui-react/src/internal/open-closed.tsx index 42e7cbb..a1685e7 100644 --- a/packages/@headlessui-react/src/internal/open-closed.tsx +++ b/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(null) Context.displayName = 'OpenClosedContext' diff --git a/packages/@headlessui-react/src/internal/portal-force-root.tsx b/packages/@headlessui-react/src/internal/portal-force-root.tsx index d688f28..a230b61 100644 --- a/packages/@headlessui-react/src/internal/portal-force-root.tsx +++ b/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) diff --git a/packages/@headlessui-react/src/internal/stack-context.tsx b/packages/@headlessui-react/src/internal/stack-context.tsx index e8ff63d..1fce47a 100644 --- a/packages/@headlessui-react/src/internal/stack-context.tsx +++ b/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, diff --git a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts index 717c260..2c7bbd1 100644 --- a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts +++ b/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) diff --git a/packages/@headlessui-react/src/test-utils/execute-timeline.ts b/packages/@headlessui-react/src/test-utils/execute-timeline.ts index 0e83e82..26e6bc9 100644 --- a/packages/@headlessui-react/src/test-utils/execute-timeline.ts +++ b/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' diff --git a/packages/@headlessui-react/src/test-utils/interactions.test.tsx b/packages/@headlessui-react/src/test-utils/interactions.test.tsx index 75e0e95..e71dbfe 100644 --- a/packages/@headlessui-react/src/test-utils/interactions.test.tsx +++ b/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'] diff --git a/packages/@headlessui-react/src/test-utils/ssr.tsx b/packages/@headlessui-react/src/test-utils/ssr.tsx index ae20f8e..2634306 100644 --- a/packages/@headlessui-react/src/test-utils/ssr.tsx +++ b/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' diff --git a/packages/@headlessui-react/src/types.ts b/packages/@headlessui-react/src/types.ts index 9a5e38d..36f675e 100644 --- a/packages/@headlessui-react/src/types.ts +++ b/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 diff --git a/packages/@headlessui-react/src/utils/render.test.tsx b/packages/@headlessui-react/src/utils/render.test.tsx index 81948ea..e4598e4 100644 --- a/packages/@headlessui-react/src/utils/render.test.tsx +++ b/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, { diff --git a/packages/@headlessui-react/src/utils/render.ts b/packages/@headlessui-react/src/utils/render.ts index b319b5d..58e2ecf 100644 --- a/packages/@headlessui-react/src/utils/render.ts +++ b/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' diff --git a/packages/@headlessui-tailwindcss/jest.setup.js b/packages/@headlessui-tailwindcss/jest.setup.js index 04649d6..0906b26 100644 --- a/packages/@headlessui-tailwindcss/jest.setup.js +++ b/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, ''), { diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts index 6f6764c..7f8a9dd 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts +++ b/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') diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts index 2fa7850..90f159b 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.ts +++ b/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(a: T, z: T): boolean { return a === z diff --git a/packages/@headlessui-vue/src/components/description/description.test.ts b/packages/@headlessui-vue/src/components/description/description.test.ts index fdedf82..e8bfc61 100644 --- a/packages/@headlessui-vue/src/components/description/description.test.ts +++ b/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') diff --git a/packages/@headlessui-vue/src/components/description/description.ts b/packages/@headlessui-vue/src/components/description/description.ts index b68046f..fdb6241 100644 --- a/packages/@headlessui-vue/src/components/description/description.ts +++ b/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' diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts index 7293d67..ce653cb 100644 --- a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts +++ b/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 { diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts index 1e6a8ad..255721a 100644 --- a/packages/@headlessui-vue/src/components/dialog/dialog.ts +++ b/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, diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.srr.test.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.srr.test.ts index 14fdb39..21ff0c2 100644 --- a/packages/@headlessui-vue/src/components/disclosure/disclosure.srr.test.ts +++ b/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') diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts index 39ce075..52e8cef 100644 --- a/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts +++ b/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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Panel is: {{open ? 'open' : 'closed'}} - - ` - ) + renderTemplate(html` + + Trigger + Panel is: {{open ? 'open' : 'closed'}} + + `) 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` - - Trigger - Panel is: {{open ? 'open' : 'closed'}} - - ` - ) + renderTemplate(html` + + Trigger + Panel is: {{open ? 'open' : 'closed'}} + + `) await new Promise(nextTick) @@ -115,16 +109,14 @@ describe('Rendering', () => { it( 'should expose a close function that closes the disclosure', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - - - - ` - ) + renderTemplate(html` + + Trigger + + + + + `) // 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` - - {{JSON.stringify(slot)}} - - - ` - ) + renderTemplate(html` + + {{JSON.stringify(slot)}} + + + `) 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` - - - {{JSON.stringify(slot)}} - - - - ` - ) + renderTemplate(html` + + + {{JSON.stringify(slot)}} + + + + `) 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` - - Trigger - - ` - ) + renderTemplate(html` + + Trigger + + `) expect(getDisclosureButton()).toHaveAttribute('type', 'button') }) it('should not set the `type` to "button" if it already contains a `type`', async () => { - renderTemplate( - html` - - Trigger - - ` - ) + renderTemplate(html` + + Trigger + + `) 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` - - Trigger - - ` - ) + renderTemplate(html` + + Trigger + + `) 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` - - Trigger - {{JSON.stringify(slot)}} - - ` - ) + renderTemplate(html` + + Trigger + {{JSON.stringify(slot)}} + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) // 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` - - Trigger - - - - - ` - ) + renderTemplate(html` + + Trigger + + + + + `) // 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Content - - ` - ) + renderTemplate(html` + + Trigger + Content + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) 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` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) // 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` - - Open - - Close - - - ` - ) + renderTemplate(html` + + Open + + Close + + + `) // Open the disclosure await click(getDisclosureButton()) diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.ts index 41374c8..3e62f6f 100644 --- a/packages/@headlessui-vue/src/components/disclosure/disclosure.ts +++ b/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, diff --git a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts index f3c4c58..47317c9 100644 --- a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.test.ts +++ b/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` - - - - ` - ) + renderTemplate(html` + + + + `) 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` - - Nothing to see here... - - ` - ) + renderTemplate(html` + + Nothing to see here... + + `) 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` -
- - - - - - - -
- ` - ) + renderTemplate(html` +
+ + + + + + + +
+ `) 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` -
- - - - - - - -
- ` - ) + renderTemplate(html` +
+ + + + + + + +
+ `) 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` -
- - - - - - - - -
- ` - ) + renderTemplate(html` +
+ + + + + + + + +
+ `) 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` -
- - - - - - - - -
- ` - ) + renderTemplate(html` +
+ + + + + + + + +
+ `) 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` -
- - - - - - - - -
- ` - ) + renderTemplate(html` +
+ + + + + + + + +
+ `) 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` -
-
- - -
- - - - - + renderTemplate(html` +
+
+ +
- ` - ) + + + + + +
+ `) await nextFrame() diff --git a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts index 677f605..0c43778 100644 --- a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts +++ b/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 diff --git a/packages/@headlessui-vue/src/components/label/label.test.ts b/packages/@headlessui-vue/src/components/label/label.test.ts index fff8167..2c04a5e 100644 --- a/packages/@headlessui-vue/src/components/label/label.test.ts +++ b/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') diff --git a/packages/@headlessui-vue/src/components/label/label.ts b/packages/@headlessui-vue/src/components/label/label.ts index f9502c7..675f145 100644 --- a/packages/@headlessui-vue/src/components/label/label.ts +++ b/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' diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx b/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx index 9052ffd..47fd42f 100644 --- a/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx +++ b/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') diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts index 34d9a8f..71ace79 100644 --- a/packages/@headlessui-vue/src/components/listbox/listbox.ts +++ b/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(a: T, z: T): boolean { return a === z diff --git a/packages/@headlessui-vue/src/components/menu/menu.test.tsx b/packages/@headlessui-vue/src/components/menu/menu.test.tsx index 9b1e9bc..ae09202 100644 --- a/packages/@headlessui-vue/src/components/menu/menu.test.tsx +++ b/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') diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts index 719e628..142831d 100644 --- a/packages/@headlessui-vue/src/components/menu/menu.ts +++ b/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, diff --git a/packages/@headlessui-vue/src/components/popover/popover.test.ts b/packages/@headlessui-vue/src/components/popover/popover.test.ts index 449bb0d..06e3407 100644 --- a/packages/@headlessui-vue/src/components/popover/popover.test.ts +++ b/packages/@headlessui-vue/src/components/popover/popover.test.ts @@ -1,23 +1,23 @@ -import { defineComponent, nextTick, ref, watch, h, onMounted } from 'vue' +import { defineComponent, h, nextTick, onMounted, ref, watch } from 'vue' import { createRenderTemplate, render } from '../../test-utils/vue-testing-library' -import { Popover, PopoverGroup, PopoverButton, PopoverPanel, PopoverOverlay } from './popover' -import { Portal } from '../portal/portal' -import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' +import { State, useOpenClosed, useOpenClosedProvider } from '../../internal/open-closed' import { - PopoverState, - assertPopoverPanel, - assertPopoverButton, - getPopoverButton, - getPopoverPanel, - getByText, assertActiveElement, assertContainsActiveElement, + assertPopoverButton, + assertPopoverPanel, + getByText, + getPopoverButton, getPopoverOverlay, + getPopoverPanel, + PopoverState, } from '../../test-utils/accessibility-assertions' -import { click, focus, press, Keys, MouseButton, shift } from '../../test-utils/interactions' import { html } from '../../test-utils/html' -import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed' +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 { Popover, PopoverButton, PopoverGroup, PopoverOverlay, PopoverPanel } from './popover' jest.mock('../../hooks/use-id') @@ -54,14 +54,12 @@ describe('Safe guards', () => { it( 'should be possible to render a Popover without crashing', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -77,20 +75,18 @@ describe('Rendering', () => { it( 'should be possible to render a PopoverGroup with multiple Popover components', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - Panel 1 - - - Trigger 2 - Panel 2 - - - ` - ) + renderTemplate(html` + + + Trigger 1 + Panel 1 + + + Trigger 2 + Panel 2 + + + `) function getTrigger(number: number) { return document.querySelector(`[data-trigger="${number}"]`)! as HTMLElement @@ -129,14 +125,12 @@ describe('Rendering', () => { it( 'should be possible to render a Popover using a render prop', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Panel is: {{open ? 'open' : 'closed'}} - - ` - ) + renderTemplate(html` + + Trigger + Panel is: {{open ? 'open' : 'closed'}} + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -157,16 +151,14 @@ describe('Rendering', () => { it( 'should expose a close function that closes the popover', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - - - - ` - ) + renderTemplate(html` + + Trigger + + + + + `) // Focus the button getPopoverButton()?.focus() @@ -263,14 +255,12 @@ describe('Rendering', () => { it( 'should be possible to render a PopoverButton using a render prop', suppressConsoleLogs(async () => { - renderTemplate( - html` - - {{JSON.stringify(slot)}} - - - ` - ) + renderTemplate(html` + + {{JSON.stringify(slot)}} + + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -293,16 +283,14 @@ describe('Rendering', () => { it( 'should be possible to render a PopoverButton using a render prop and an `as` prop', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - {{JSON.stringify(slot)}} - - - - ` - ) + renderTemplate(html` + + + {{JSON.stringify(slot)}} + + + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -324,25 +312,21 @@ describe('Rendering', () => { describe('`type` attribute', () => { it('should set the `type` to "button" by default', async () => { - renderTemplate( - html` - - Trigger - - ` - ) + renderTemplate(html` + + Trigger + + `) expect(getPopoverButton()).toHaveAttribute('type', 'button') }) it('should not set the `type` to "button" if it already contains a `type`', async () => { - renderTemplate( - html` - - Trigger - - ` - ) + renderTemplate(html` + + Trigger + + `) expect(getPopoverButton()).toHaveAttribute('type', 'submit') }) @@ -370,13 +354,11 @@ describe('Rendering', () => { ) it('should not set the type if the "as" prop is not a "button"', async () => { - renderTemplate( - html` - - Trigger - - ` - ) + renderTemplate(html` + + Trigger + + `) expect(getPopoverButton()).not.toHaveAttribute('type') }) @@ -409,14 +391,12 @@ describe('Rendering', () => { it( 'should be possible to render PopoverPanel using a render prop', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - {{JSON.stringify(slot)}} - - ` - ) + renderTemplate(html` + + Trigger + {{JSON.stringify(slot)}} + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -438,28 +418,24 @@ describe('Rendering', () => { ) it('should be possible to always render the PopoverPanel if we provide it a `static` prop', () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) // Let's verify that the Popover is already there expect(getPopoverPanel()).not.toBe(null) }) it('should be possible to use a different render strategy for the PopoverPanel', async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) getPopoverButton()?.focus() @@ -485,16 +461,14 @@ describe('Rendering', () => { it( 'should be possible to move the focus inside the panel to the first focusable element (very first link)', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - Link 1 - - - ` - ) + renderTemplate(html` + + Trigger + + Link 1 + + + `) // Focus the button getPopoverButton()?.focus() @@ -514,16 +488,14 @@ describe('Rendering', () => { it( 'should close the Popover, when PopoverPanel has the focus prop and you focus the open button', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - Link 1 - - - ` - ) + renderTemplate(html` + + Trigger + + Link 1 + + + `) // Focus the button getPopoverButton()?.focus() @@ -550,17 +522,15 @@ describe('Rendering', () => { it( 'should be possible to move the focus inside the panel to the first focusable element (skip hidden link)', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - Link 1 - Link 2 - - - ` - ) + renderTemplate(html` + + Trigger + + Link 1 + Link 2 + + + `) // Focus the button getPopoverButton()?.focus() @@ -580,16 +550,14 @@ describe('Rendering', () => { it( 'should be possible to move the focus inside the panel to the first focusable element (very first link) when the hidden render strategy is used', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - Link 1 - - - ` - ) + renderTemplate(html` + + Trigger + + Link 1 + + + `) // Focus the button getPopoverButton()?.focus() @@ -609,16 +577,14 @@ describe('Rendering', () => { it( 'should expose a close function that closes the popover', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - - - - ` - ) + renderTemplate(html` + + Trigger + + + + + `) // Focus the button getPopoverButton()?.focus() @@ -833,14 +799,12 @@ describe('Keyboard interactions', () => { it( 'should be possible to open the Popover with Enter', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -870,14 +834,12 @@ describe('Keyboard interactions', () => { it( 'should not be possible to open the popover with Enter when the button is disabled', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Content - - ` - ) + renderTemplate(html` + + Trigger + Content + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -903,14 +865,12 @@ describe('Keyboard interactions', () => { it( 'should be possible to close the popover with Enter when the popover is open', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -943,20 +903,18 @@ describe('Keyboard interactions', () => { it( 'should close other popover menus when we open a new one', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - Panel 1 - - - Trigger 2 - Panel 2 - - - ` - ) + renderTemplate(html` + + + Trigger 1 + Panel 1 + + + Trigger 2 + Panel 2 + + + `) // Open the first Popover await click(getByText('Trigger 1')) @@ -984,16 +942,14 @@ describe('Keyboard interactions', () => { it( 'should close the Popover by pressing `Enter` on a PopoverButton inside a PopoverPanel', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Open - - Close - - - ` - ) + renderTemplate(html` + + Open + + Close + + + `) // Open the popover await click(getPopoverButton()) @@ -1020,14 +976,12 @@ describe('Keyboard interactions', () => { it( 'should close the Popover menu, when pressing escape on the PopoverButton', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) // Focus the button getPopoverButton()?.focus() @@ -1055,16 +1009,14 @@ describe('Keyboard interactions', () => { it( 'should close the Popover menu, when pressing escape on the PopoverPanel', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - - Link - - - ` - ) + renderTemplate(html` + + Trigger + + Link + + + `) // Focus the button getPopoverButton()?.focus() @@ -1098,21 +1050,19 @@ describe('Keyboard interactions', () => { it( 'should be possible to close a sibling Popover when pressing escape on a sibling PopoverButton', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - Panel 1 - + renderTemplate(html` + + + Trigger 1 + Panel 1 + - - Trigger 2 - Panel 2 - - - ` - ) + + Trigger 2 + Panel 2 + + + `) function getTrigger(number: number) { return document.querySelector(`[data-trigger="${number}"]`)! as HTMLElement @@ -1159,24 +1109,22 @@ describe('Keyboard interactions', () => { it( 'should be possible to Tab through the panel contents onto the next PopoverButton', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - - Link 1 - Link 2 - - + renderTemplate(html` + + + Trigger 1 + + Link 1 + Link 2 + + - - Trigger 2 - Panel 2 - - - ` - ) + + Trigger 2 + Panel 2 + + + `) // Focus the button of the first Popover getByText('Trigger 1')?.focus() @@ -1207,26 +1155,24 @@ describe('Keyboard interactions', () => { it( 'should be possible to place a focusable item in the PopoverGroup, and keep the Popover open when we focus the focusable element', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - - Link 1 - Link 2 - - + renderTemplate(html` + + + Trigger 1 + + Link 1 + Link 2 + + - Link in between + Link in between - - Trigger 2 - Panel 2 - - - ` - ) + + Trigger 2 + Panel 2 + + + `) // Focus the button of the first Popover getByText('Trigger 1')?.focus() @@ -1257,31 +1203,29 @@ describe('Keyboard interactions', () => { it( 'should close the Popover menu once we Tab out of the PopoverGroup', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- - - Trigger 1 - - Link 1 - Link 2 - - + renderTemplate(html` +
+ + + Trigger 1 + + Link 1 + Link 2 + + - - Trigger 2 - - Link 3 - Link 4 - - - + + Trigger 2 + + Link 3 + Link 4 + + + - Next -
- ` - ) + Next +
+ `) // Focus the button of the first Popover getByText('Trigger 1')?.focus() @@ -1323,21 +1267,19 @@ describe('Keyboard interactions', () => { it( 'should close the Popover menu once we Tab out of the Popover', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- - Trigger 1 - - Link 1 - Link 2 - - + renderTemplate(html` +
+ + Trigger 1 + + Link 1 + Link 2 + + - Next -
- ` - ) + Next +
+ `) // Focus the button of the first Popover getByText('Trigger 1')?.focus() @@ -1368,18 +1310,16 @@ describe('Keyboard interactions', () => { it( 'should close the Popover menu once we Tab out of a Popover without focusable elements', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- - Trigger 1 - No focusable elements here - + renderTemplate(html` +
+ + Trigger 1 + No focusable elements here + - Next -
- ` - ) + Next +
+ `) // Focus the button of the Popover await focus(getPopoverButton()) @@ -1402,21 +1342,19 @@ describe('Keyboard interactions', () => { it( 'should close the Popover when the PopoverPanel has a focus prop', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- Previous - - Trigger - - Link 1 - Link 2 - - - Next -
- ` - ) + renderTemplate(html` +
+ Previous + + Trigger + + Link 1 + Link 2 + + + Next +
+ `) // Open the popover await click(getPopoverButton()) @@ -1439,23 +1377,21 @@ describe('Keyboard interactions', () => { it( 'should close the Popover when the PopoverPanel has a focus prop (PopoverPanel uses a Portal)', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- Previous - - Trigger - - - Link 1 - Link 2 - - - - Next -
- ` - ) + renderTemplate(html` +
+ Previous + + Trigger + + + Link 1 + Link 2 + + + + Next +
+ `) // Open the popover await click(getPopoverButton()) @@ -1486,22 +1422,20 @@ describe('Keyboard interactions', () => { it( 'should close the Popover when the PopoverPanel has a focus prop (PopoverPanel uses a Portal), and focus the next focusable item in line', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- Previous - - Trigger - - - Link 1 - Link 2 - - - -
- ` - ) + renderTemplate(html` +
+ Previous + + Trigger + + + Link 1 + Link 2 + + + +
+ `) // Open the popover await click(getPopoverButton()) @@ -1534,31 +1468,29 @@ describe('Keyboard interactions', () => { it( 'should close the Popover menu once we Tab out of the PopoverGroup', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- Previous + renderTemplate(html` +
+ Previous - - - Trigger 1 - - Link 1 - Link 2 - - + + + Trigger 1 + + Link 1 + Link 2 + + - - Trigger 2 - - Link 3 - Link 4 - - - -
- ` - ) + + Trigger 2 + + Link 3 + Link 4 + + + +
+ `) // Focus the button of the second Popover getByText('Trigger 2')?.focus() @@ -1585,21 +1517,19 @@ describe('Keyboard interactions', () => { it( 'should close the Popover menu once we Tab out of the Popover', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- Previous + renderTemplate(html` +
+ Previous - - Trigger 1 - - Link 1 - Link 2 - - -
- ` - ) + + Trigger 1 + + Link 1 + Link 2 + + +
+ `) // Focus the button of the Popover getPopoverButton()?.focus() @@ -1622,27 +1552,25 @@ describe('Keyboard interactions', () => { it( 'should focus the previous PopoverButton when Shift+Tab on the second PopoverButton', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - - Link 1 - Link 2 - - + renderTemplate(html` + + + Trigger 1 + + Link 1 + Link 2 + + - - Trigger 2 - - Link 3 - Link 4 - - - - ` - ) + + Trigger 2 + + Link 3 + Link 4 + + + + `) // Open the second popover await click(getByText('Trigger 2')) @@ -1671,17 +1599,15 @@ describe('Keyboard interactions', () => { it( 'should focus the PopoverButton when pressing Shift+Tab when we focus inside the PopoverPanel', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger 1 - - Link 1 - Link 2 - - - ` - ) + renderTemplate(html` + + Trigger 1 + + Link 1 + Link 2 + + + `) // Open the popover await click(getPopoverButton()) @@ -1707,19 +1633,17 @@ describe('Keyboard interactions', () => { it( 'should focus the PopoverButton when pressing Shift+Tab when we focus inside the PopoverPanel (inside a Portal)', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger 1 - - - Link 1 - Link 2 - - - - ` - ) + renderTemplate(html` + + Trigger 1 + + + Link 1 + Link 2 + + + + `) // Open the popover await click(getPopoverButton()) @@ -1793,27 +1717,25 @@ describe('Keyboard interactions', () => { it( 'should be possible to focus the last item in the PopoverPanel when pressing Shift+Tab on the next PopoverButton', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - - Link 1 - Link 2 - - + renderTemplate(html` + + + Trigger 1 + + Link 1 + Link 2 + + - - Trigger 2 - - Link 3 - Link 4 - - - - ` - ) + + Trigger 2 + + Link 3 + Link 4 + + + + `) // Open the popover await click(getByText('Trigger 1')) @@ -1842,31 +1764,29 @@ describe('Keyboard interactions', () => { it( "should be possible to focus the last item in the PopoverPanel when pressing Shift+Tab on the next PopoverButton (using Portal's)", suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - - - Link 1 - Link 2 - - - + renderTemplate(html` + + + Trigger 1 + + + Link 1 + Link 2 + + + - - Trigger 2 - - - Link 3 - Link 4 - - - - - ` - ) + + Trigger 2 + + + Link 3 + Link 4 + + + + + `) // Open the popover await click(getByText('Trigger 1')) @@ -1897,14 +1817,12 @@ describe('Keyboard interactions', () => { it( 'should be possible to open the popover with Space', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -1930,14 +1848,12 @@ describe('Keyboard interactions', () => { it( 'should not be possible to open the popover with Space when the button is disabled', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -1963,14 +1879,12 @@ describe('Keyboard interactions', () => { it( 'should be possible to close the popover with Space when the popover is open', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -2003,20 +1917,18 @@ describe('Keyboard interactions', () => { it( 'should close other popover menus when we open a new one', suppressConsoleLogs(async () => { - renderTemplate( - html` - - - Trigger 1 - Panel 1 - - - Trigger 2 - Panel 2 - - - ` - ) + renderTemplate(html` + + + Trigger 1 + Panel 1 + + + Trigger 2 + Panel 2 + + + `) // Open the first Popover await click(getByText('Trigger 1')) @@ -2044,16 +1956,14 @@ describe('Keyboard interactions', () => { it( 'should close the Popover by pressing `Space` on a PopoverButton inside a PopoverPanel', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Open - - Close - - - ` - ) + renderTemplate(html` + + Open + + Close + + + `) // Open the popover await click(getPopoverButton()) @@ -2078,18 +1988,16 @@ describe('Keyboard interactions', () => { it( 'should close the Popover by pressing `Enter` on a PopoverButton and go to the href of the `a` inside a PopoverPanel', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Open - - - Close - - - - ` - ) + renderTemplate(html` + + Open + + + Close + + + + `) // Open the popover await click(getPopoverButton()) @@ -2120,14 +2028,12 @@ describe('Mouse interactions', () => { it( 'should be possible to open a popover on click', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -2150,14 +2056,12 @@ describe('Mouse interactions', () => { it( 'should not be possible to open a popover on right click', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -2180,14 +2084,12 @@ describe('Mouse interactions', () => { it( 'should not be possible to open a popover on click when the button is disabled', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) assertPopoverButton({ state: PopoverState.InvisibleUnmounted, @@ -2210,14 +2112,12 @@ describe('Mouse interactions', () => { it( 'should be possible to close a popover on click', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) getPopoverButton()?.focus() @@ -2239,15 +2139,13 @@ describe('Mouse interactions', () => { it( 'should be possible to close a Popover using a click on the PopoverOverlay', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - - ` - ) + renderTemplate(html` + + Trigger + Contents + + + `) // Open popover await click(getPopoverButton()) @@ -2266,14 +2164,12 @@ describe('Mouse interactions', () => { it( 'should be possible to close the popover, and re-focus the button when we click outside on the body element', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Trigger - Contents - - ` - ) + renderTemplate(html` + + Trigger + Contents + + `) // Open popover await click(getPopoverButton()) @@ -2295,18 +2191,16 @@ describe('Mouse interactions', () => { it( 'should be possible to close the popover, and re-focus the button when we click outside on a non-focusable element', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- - Trigger - Contents - + renderTemplate(html` +
+ + Trigger + Contents + - I am just text -
- ` - ) + I am just text +
+ `) // Open popover await click(getPopoverButton()) @@ -2328,18 +2222,16 @@ describe('Mouse interactions', () => { it( 'should be possible to close the popover, by clicking outside the popover on another focusable element', suppressConsoleLogs(async () => { - renderTemplate( - html` -
- - Trigger - Contents - + renderTemplate(html` +
+ + Trigger + Contents + - -
- ` - ) + +
+ `) // Open popover await click(getPopoverButton()) @@ -2404,16 +2296,14 @@ describe('Mouse interactions', () => { it( 'should be possible to close the Popover by clicking on a PopoverButton inside a PopoverPanel', suppressConsoleLogs(async () => { - renderTemplate( - html` - - Open - - Close - - - ` - ) + renderTemplate(html` + + Open + + Close + + + `) // Open the popover await click(getPopoverButton()) diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts index ed182ff..9153825 100644 --- a/packages/@headlessui-vue/src/components/popover/popover.ts +++ b/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, diff --git a/packages/@headlessui-vue/src/components/portal/portal.test.ts b/packages/@headlessui-vue/src/components/portal/portal.test.ts index ccc4953..2dbf323 100644 --- a/packages/@headlessui-vue/src/components/portal/portal.test.ts +++ b/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` -
- -

Contents...

- -
- ` - ) + ssrRenderTemplate(html` +
+ +

Contents...

+ +
+ `) ) 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` -
- -

Contents...

- -
- ` - ) + renderTemplate(html` +
+ +

Contents...

+ +
+ `) 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` -
- -

Contents 1 ...

- -
- -

Contents 2 ...

- -
- ` - ) + renderTemplate(html` +
+ +

Contents 1 ...

+ +
+ +

Contents 2 ...

+ +
+ `) await nextTick() diff --git a/packages/@headlessui-vue/src/components/portal/portal.ts b/packages/@headlessui-vue/src/components/portal/portal.ts index c4b688d..0c3db48 100644 --- a/packages/@headlessui-vue/src/components/portal/portal.ts +++ b/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 extends InjectionKey ? V : never diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts index 6019bc4..334bbdb 100644 --- a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts +++ b/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') diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts index e320a54..3ca6c4e 100644 --- a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts +++ b/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(a: T, z: T): boolean { return a === z diff --git a/packages/@headlessui-vue/src/components/switch/switch.test.tsx b/packages/@headlessui-vue/src/components/switch/switch.test.tsx index e281e8b..c79dd22 100644 --- a/packages/@headlessui-vue/src/components/switch/switch.test.tsx +++ b/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') diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts index bb4d11d..03563ad 100644 --- a/packages/@headlessui-vue/src/components/switch/switch.ts +++ b/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 diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ssr.test.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ssr.test.ts index 1444363..bfe94b0 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.ssr.test.ts +++ b/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') diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts index 846deea..5e97ea0 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.test.ts +++ b/packages/@headlessui-vue/src/components/tabs/tabs.test.ts @@ -1,16 +1,16 @@ import { nextTick, ref } from 'vue' -import { createRenderTemplate, render } from '../../test-utils/vue-testing-library' -import { TabGroup, TabList, Tab, TabPanels, TabPanel } from './tabs' -import { Dialog } from '../dialog/dialog' -import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs' import { assertActiveElement, assertTabs, getByText, getTabs, } from '../../test-utils/accessibility-assertions' -import { click, press, shift, Keys } from '../../test-utils/interactions' 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, render } from '../../test-utils/vue-testing-library' +import { Dialog } from '../dialog/dialog' +import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tabs' jest.mock('../../hooks/use-id') @@ -39,23 +39,21 @@ describe('safeguards', () => { ) it('should be possible to render TabGroup without crashing', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - - ` - ) + + Content 1 + Content 2 + Content 3 + + + `) await new Promise(nextTick) @@ -65,23 +63,21 @@ describe('safeguards', () => { describe('Rendering', () => { it('should be possible to render the TabPanels first, then the TabList', async () => { - renderTemplate( - html` - - - Content 1 - Content 2 - Content 3 - + renderTemplate(html` + + + Content 1 + Content 2 + Content 3 + - - Tab 1 - Tab 2 - Tab 3 - - - ` - ) + + Tab 1 + Tab 2 + Tab 3 + + + `) await new Promise(nextTick) @@ -345,25 +341,23 @@ describe('Rendering', () => { describe('`renderProps`', () => { it('should expose the `selectedIndex` on the `Tabs` component', async () => { - renderTemplate( - html` - - 
{{JSON.stringify(data)}}
+ renderTemplate(html` + + 
{{JSON.stringify(data)}}
- - Tab 1 - Tab 2 - Tab 3 - + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - - ` - ) + + Content 1 + Content 2 + Content 3 + + + `) await new Promise(nextTick) @@ -379,24 +373,22 @@ describe('Rendering', () => { }) it('should expose the `selectedIndex` on the `TabList` component', async () => { - renderTemplate( - html` - - - 
{{JSON.stringify(data)}}
- Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + 
{{JSON.stringify(data)}}
+ Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - - ` - ) + + Content 1 + Content 2 + Content 3 + + + `) await new Promise(nextTick) @@ -412,24 +404,22 @@ describe('Rendering', () => { }) it('should expose the `selectedIndex` on the `TabPanels` component', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - 
{{JSON.stringify(data)}}
- Content 1 - Content 2 - Content 3 - - - ` - ) + + 
{{JSON.stringify(data)}}
+ Content 1 + Content 2 + Content 3 + + + `) await new Promise(nextTick) @@ -445,32 +435,30 @@ describe('Rendering', () => { }) it('should expose the `selected` state on the `Tab` components', async () => { - renderTemplate( - html` - - - - 
{{JSON.stringify(data)}}
- Tab 1 - - - 
{{JSON.stringify(data)}}
- Tab 2 - - - 
{{JSON.stringify(data)}}
- Tab 3 - - + renderTemplate(html` + + + + 
{{JSON.stringify(data)}}
+ Tab 1 + + + 
{{JSON.stringify(data)}}
+ Tab 2 + + + 
{{JSON.stringify(data)}}
+ Tab 3 + + - - Content 1 - Content 2 - Content 3 - - - ` - ) + + Content 1 + Content 2 + Content 3 + + + `) await new Promise(nextTick) @@ -498,32 +486,30 @@ describe('Rendering', () => { }) it('should expose the `selected` state on the `TabPanel` components', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - - 
{{JSON.stringify(data)}}
- Content 1 - - - 
{{JSON.stringify(data)}}
- Content 2 - - - 
{{JSON.stringify(data)}}
- Content 3 - - - - ` - ) + + + 
{{JSON.stringify(data)}}
+ Content 1 + + + 
{{JSON.stringify(data)}}
+ Content 2 + + + 
{{JSON.stringify(data)}}
+ Content 3 + + + + `) await new Promise(nextTick) @@ -553,25 +539,23 @@ describe('Rendering', () => { describe('`defaultIndex`', () => { it('should jump to the nearest tab when the defaultIndex is out of bounds (-2)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -584,25 +568,23 @@ describe('Rendering', () => { }) it('should jump to the nearest tab when the defaultIndex is out of bounds (+5)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -615,25 +597,23 @@ describe('Rendering', () => { }) it('should jump to the next available tab when the defaultIndex is a disabled tab', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -646,25 +626,23 @@ describe('Rendering', () => { }) it('should jump to the next available tab when the defaultIndex is a disabled tab and wrap around', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -980,25 +958,23 @@ describe('`selectedIndex`', () => { }) it('should jump to the nearest tab when the selectedIndex is out of bounds (-2)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1011,25 +987,23 @@ describe('`selectedIndex`', () => { }) it('should jump to the nearest tab when the selectedIndex is out of bounds (+5)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1042,25 +1016,23 @@ describe('`selectedIndex`', () => { }) it('should jump to the next available tab when the selectedIndex is a disabled tab', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1073,25 +1045,23 @@ describe('`selectedIndex`', () => { }) it('should jump to the next available tab when the selectedIndex is a disabled tab and wrap around', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1104,25 +1074,23 @@ describe('`selectedIndex`', () => { }) it('should prefer selectedIndex over defaultIndex', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1238,25 +1206,23 @@ describe('`selectedIndex`', () => { describe('Keyboard interactions', () => { describe('`Tab` key', () => { it('should be possible to tab to the default initial first tab', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1281,25 +1247,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to tab to the default index tab', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1326,25 +1290,23 @@ describe('Keyboard interactions', () => { describe('`ArrowRight` key', () => { it('should be possible to go to the next item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1361,25 +1323,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the next item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1400,25 +1360,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the end (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1441,25 +1399,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the end (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1490,25 +1446,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go right when in vertical mode (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1523,25 +1477,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go right when in vertical mode (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1560,25 +1512,23 @@ describe('Keyboard interactions', () => { describe('`ArrowLeft` key', () => { it('should be possible to go to the previous item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1595,25 +1545,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the previous item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1634,25 +1582,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the beginning (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1675,25 +1621,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the beginning (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1724,25 +1668,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go left when in vertical mode (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1757,25 +1699,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go left when in vertical mode (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1795,25 +1735,23 @@ describe('Keyboard interactions', () => { describe('`ArrowDown` key', () => { it('should be possible to go to the next item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1830,25 +1768,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the next item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1869,25 +1805,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the end (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1910,25 +1844,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the end (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1959,25 +1891,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go down when in horizontal mode (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -1992,25 +1922,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go down when in horizontal mode (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2030,25 +1958,23 @@ describe('Keyboard interactions', () => { describe('`ArrowUp` key', () => { it('should be possible to go to the previous item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2065,25 +1991,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the previous item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2104,25 +2028,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the beginning (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2145,25 +2067,23 @@ describe('Keyboard interactions', () => { }) it('should wrap around at the beginning (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2194,25 +2114,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go left when in vertical mode (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2227,25 +2145,23 @@ describe('Keyboard interactions', () => { }) it('should not be possible to go left when in vertical mode (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2265,25 +2181,23 @@ describe('Keyboard interactions', () => { describe('`Home` key', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2297,25 +2211,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the first focusable item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2333,25 +2245,23 @@ describe('Keyboard interactions', () => { describe('`PageUp` key', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2365,25 +2275,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the first focusable item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2401,25 +2309,23 @@ describe('Keyboard interactions', () => { describe('`End` key', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2433,25 +2339,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the first focusable item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2469,25 +2373,23 @@ describe('Keyboard interactions', () => { describe('`PageDown` key', () => { it('should be possible to go to the first focusable item (activation = `auto`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2501,25 +2403,23 @@ describe('Keyboard interactions', () => { }) it('should be possible to go to the first focusable item (activation = `manual`)', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2537,25 +2437,23 @@ describe('Keyboard interactions', () => { describe('`Enter` key', () => { it('should be possible to activate the focused tab', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2573,25 +2471,23 @@ describe('Keyboard interactions', () => { describe('`Space` key', () => { it('should be possible to activate the focused tab', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2610,25 +2506,23 @@ describe('Keyboard interactions', () => { describe('Mouse interactions', () => { it('should be possible to click on a tab to focus it', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) @@ -2647,25 +2541,23 @@ describe('Mouse interactions', () => { }) it('should be a no-op when clicking on a disabled tab', async () => { - renderTemplate( - html` - - - Tab 1 - Tab 2 - Tab 3 - + renderTemplate(html` + + + Tab 1 + Tab 2 + Tab 3 + - - Content 1 - Content 2 - Content 3 - - + + Content 1 + Content 2 + Content 3 + + - - ` - ) + + `) await new Promise(nextTick) diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts index 9a5ff63..5efffc7 100644 --- a/packages/@headlessui-vue/src/components/tabs/tabs.ts +++ b/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, diff --git a/packages/@headlessui-vue/src/components/transitions/transition.ssr.test.ts b/packages/@headlessui-vue/src/components/transitions/transition.ssr.test.ts index 103f1e6..a90ec65 100644 --- a/packages/@headlessui-vue/src/components/transitions/transition.ssr.test.ts +++ b/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) diff --git a/packages/@headlessui-vue/src/components/transitions/transition.test.ts b/packages/@headlessui-vue/src/components/transitions/transition.test.ts index fe6b32a..8433f04 100644 --- a/packages/@headlessui-vue/src/components/transitions/transition.test.ts +++ b/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' diff --git a/packages/@headlessui-vue/src/components/transitions/transition.ts b/packages/@headlessui-vue/src/components/transitions/transition.ts index b77706f..7f48924 100644 --- a/packages/@headlessui-vue/src/components/transitions/transition.ts +++ b/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 diff --git a/packages/@headlessui-vue/src/components/transitions/utils/transition.ts b/packages/@headlessui-vue/src/components/transitions/utils/transition.ts index a269ba5..ec75025 100644 --- a/packages/@headlessui-vue/src/components/transitions/utils/transition.ts +++ b/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) diff --git a/packages/@headlessui-vue/src/hooks/document-overflow/use-document-overflow.ts b/packages/@headlessui-vue/src/hooks/document-overflow/use-document-overflow.ts index f0408d5..9b79149 100644 --- a/packages/@headlessui-vue/src/hooks/document-overflow/use-document-overflow.ts +++ b/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, diff --git a/packages/@headlessui-vue/src/hooks/use-controllable.ts b/packages/@headlessui-vue/src/hooks/use-controllable.ts index 239671c..57b00a4 100644 --- a/packages/@headlessui-vue/src/hooks/use-controllable.ts +++ b/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( controlledValue: ComputedRef, diff --git a/packages/@headlessui-vue/src/hooks/use-inert.test.ts b/packages/@headlessui-vue/src/hooks/use-inert.test.ts index 13c7aeb..68896f9 100644 --- a/packages/@headlessui-vue/src/hooks/use-inert.test.ts +++ b/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) diff --git a/packages/@headlessui-vue/src/hooks/use-inert.ts b/packages/@headlessui-vue/src/hooks/use-inert.ts index 7ad23bc..35084c0 100644 --- a/packages/@headlessui-vue/src/hooks/use-inert.ts +++ b/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() diff --git a/packages/@headlessui-vue/src/hooks/use-outside-click.ts b/packages/@headlessui-vue/src/hooks/use-outside-click.ts index 1e336e6..1bf631c 100644 --- a/packages/@headlessui-vue/src/hooks/use-outside-click.ts +++ b/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 type ContainerCollection = Container[] | Set diff --git a/packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts b/packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts index f74dbe6..285197d 100644 --- a/packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts +++ b/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) { diff --git a/packages/@headlessui-vue/src/hooks/use-root-containers.ts b/packages/@headlessui-vue/src/hooks/use-root-containers.ts index 9dcac40..8a12a83 100644 --- a/packages/@headlessui-vue/src/hooks/use-root-containers.ts +++ b/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 = [], diff --git a/packages/@headlessui-vue/src/hooks/use-text-value.ts b/packages/@headlessui-vue/src/hooks/use-text-value.ts index 934f02a..af58c65 100644 --- a/packages/@headlessui-vue/src/hooks/use-text-value.ts +++ b/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) { let cacheKey = ref('') diff --git a/packages/@headlessui-vue/src/hooks/use-tree-walker.ts b/packages/@headlessui-vue/src/hooks/use-tree-walker.ts index 806bf58..4241604 100644 --- a/packages/@headlessui-vue/src/hooks/use-tree-walker.ts +++ b/packages/@headlessui-vue/src/hooks/use-tree-walker.ts @@ -1,4 +1,4 @@ -import { watchEffect, ComputedRef } from 'vue' +import { ComputedRef, watchEffect } from 'vue' import { getOwnerDocument } from '../utils/owner' type AcceptNode = ( diff --git a/packages/@headlessui-vue/src/index.ts b/packages/@headlessui-vue/src/index.ts index fb87322..4cae290 100644 --- a/packages/@headlessui-vue/src/index.ts +++ b/packages/@headlessui-vue/src/index.ts @@ -5,8 +5,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, PortalGroup } 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, PortalGroup } from './components/portal/portal' diff --git a/packages/@headlessui-vue/src/internal/focus-sentinel.ts b/packages/@headlessui-vue/src/internal/focus-sentinel.ts index ddda4d5..1672d99 100644 --- a/packages/@headlessui-vue/src/internal/focus-sentinel.ts +++ b/packages/@headlessui-vue/src/internal/focus-sentinel.ts @@ -1,6 +1,6 @@ -import { h, ref, defineComponent } from 'vue' +import { defineComponent, h, ref } from 'vue' -import { Hidden, Features } from './hidden' +import { Features, Hidden } from './hidden' export let FocusSentinel = defineComponent({ props: { diff --git a/packages/@headlessui-vue/src/internal/open-closed.ts b/packages/@headlessui-vue/src/internal/open-closed.ts index 1058a9f..b6645de 100644 --- a/packages/@headlessui-vue/src/internal/open-closed.ts +++ b/packages/@headlessui-vue/src/internal/open-closed.ts @@ -1,11 +1,4 @@ -import { - inject, - provide, - - // Types - InjectionKey, - Ref, -} from 'vue' +import { inject, InjectionKey, provide, Ref } from 'vue' let Context = Symbol('Context') as InjectionKey> diff --git a/packages/@headlessui-vue/src/internal/portal-force-root.ts b/packages/@headlessui-vue/src/internal/portal-force-root.ts index b4349bb..463fdfb 100644 --- a/packages/@headlessui-vue/src/internal/portal-force-root.ts +++ b/packages/@headlessui-vue/src/internal/portal-force-root.ts @@ -1,11 +1,4 @@ -import { - defineComponent, - inject, - provide, - - // Types - InjectionKey, -} from 'vue' +import { defineComponent, inject, InjectionKey, provide } from 'vue' import { render } from '../utils/render' let ForcePortalRootContext = Symbol('ForcePortalRootContext') as InjectionKey diff --git a/packages/@headlessui-vue/src/internal/stack-context.ts b/packages/@headlessui-vue/src/internal/stack-context.ts index 4197624..59d9c98 100644 --- a/packages/@headlessui-vue/src/internal/stack-context.ts +++ b/packages/@headlessui-vue/src/internal/stack-context.ts @@ -1,14 +1,4 @@ -import { - inject, - provide, - onMounted, - onUnmounted, - - // Types - InjectionKey, - Ref, - watch, -} from 'vue' +import { inject, InjectionKey, onMounted, onUnmounted, provide, Ref, watch } from 'vue' type OnUpdate = (message: StackMessage, type: string, element: Ref) => void diff --git a/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts index 717c260..2c7bbd1 100644 --- a/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts +++ b/packages/@headlessui-vue/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) diff --git a/packages/@headlessui-vue/src/test-utils/execute-timeline.ts b/packages/@headlessui-vue/src/test-utils/execute-timeline.ts index 5e9f9c7..7c90f6f 100644 --- a/packages/@headlessui-vue/src/test-utils/execute-timeline.ts +++ b/packages/@headlessui-vue/src/test-utils/execute-timeline.ts @@ -1,5 +1,5 @@ -import { defineComponent } from 'vue' import snapshotDiff from 'snapshot-diff' +import { defineComponent } from 'vue' import { render } from './vue-testing-library' import { disposables } from '../utils/disposables' diff --git a/packages/@headlessui-vue/src/test-utils/interactions.test.ts b/packages/@headlessui-vue/src/test-utils/interactions.test.ts index 990276d..7e75caf 100644 --- a/packages/@headlessui-vue/src/test-utils/interactions.test.ts +++ b/packages/@headlessui-vue/src/test-utils/interactions.test.ts @@ -1,7 +1,7 @@ import { render } from './vue-testing-library' -import { type, shift, Keys } from './interactions' import { ComponentOptionsWithoutProps, defineComponent, h } from 'vue' +import { Keys, shift, type } from './interactions' type Events = 'onKeydown' | 'onKeyup' | 'onKeypress' | 'onClick' | 'onBlur' | 'onFocus' let events: Events[] = ['onKeydown', 'onKeyup', 'onKeypress', 'onClick', 'onBlur', 'onFocus'] diff --git a/packages/@headlessui-vue/src/test-utils/vue-testing-library.ts b/packages/@headlessui-vue/src/test-utils/vue-testing-library.ts index fa91d06..e1a96ea 100644 --- a/packages/@headlessui-vue/src/test-utils/vue-testing-library.ts +++ b/packages/@headlessui-vue/src/test-utils/vue-testing-library.ts @@ -1,5 +1,5 @@ +import { fireEvent, logDOM, screen } from '@testing-library/dom' import { mount } from '@vue/test-utils' -import { logDOM, fireEvent, screen } from '@testing-library/dom' import { ComponentOptionsWithoutProps, defineComponent } from 'vue' let mountedWrappers = new Set() diff --git a/packages/@headlessui-vue/src/utils/dom.ts b/packages/@headlessui-vue/src/utils/dom.ts index 0e9b44d..b2a406e 100644 --- a/packages/@headlessui-vue/src/utils/dom.ts +++ b/packages/@headlessui-vue/src/utils/dom.ts @@ -1,4 +1,4 @@ -import { Ref, ComponentPublicInstance } from 'vue' +import { ComponentPublicInstance, Ref } from 'vue' type AsElement = | (T extends HTMLElement ? T : HTMLElement) diff --git a/packages/@headlessui-vue/src/utils/render.test.ts b/packages/@headlessui-vue/src/utils/render.test.ts index fd3552f..b7374a8 100644 --- a/packages/@headlessui-vue/src/utils/render.test.ts +++ b/packages/@headlessui-vue/src/utils/render.test.ts @@ -1,8 +1,8 @@ import { defineComponent } from 'vue' import { createRenderTemplate } from '../test-utils/vue-testing-library' -import { render } from './render' import { html } from '../test-utils/html' +import { render } from './render' let Dummy = defineComponent({ props: { diff --git a/packages/@headlessui-vue/src/utils/render.ts b/packages/@headlessui-vue/src/utils/render.ts index 10f3e12..a4c2fe2 100644 --- a/packages/@headlessui-vue/src/utils/render.ts +++ b/packages/@headlessui-vue/src/utils/render.ts @@ -1,4 +1,4 @@ -import { h, cloneVNode, Slots, Fragment, VNode } from 'vue' +import { cloneVNode, Fragment, h, Slots, VNode } from 'vue' import { match } from './match' export enum Features { diff --git a/packages/playground-react/package.json b/packages/playground-react/package.json index 09ad435..14de382 100644 --- a/packages/playground-react/package.json +++ b/packages/playground-react/package.json @@ -28,7 +28,7 @@ "react-dom": "^18.0.0", "react-flatpickr": "^3.10.9", "react-hot-toast": "2.3.0", - "tailwindcss": "^3.2.7" + "tailwindcss": "^0.0.0-insiders.9faf109" }, "devDependencies": { "@floating-ui/react": "^0.24.8" diff --git a/packages/playground-react/pages/_app.tsx b/packages/playground-react/pages/_app.tsx index bed7351..37cef29 100644 --- a/packages/playground-react/pages/_app.tsx +++ b/packages/playground-react/pages/_app.tsx @@ -1,9 +1,8 @@ -import React, { useState, useEffect } from 'react' import Link from 'next/link' -import Head from 'next/head' +import React, { useEffect, useState } from 'react' -import 'tailwindcss/tailwind.css' import { useRouter } from 'next/router' +import 'tailwindcss/tailwind.css' function disposables() { let disposables: Function[] = [] @@ -132,7 +131,7 @@ function KeyCaster() { if (keys.length <= 0) return null return ( -
+
{keys.slice().reverse().join(' ')}
) diff --git a/packages/playground-react/pages/_document.tsx b/packages/playground-react/pages/_document.tsx index b32c3ab..cff18db 100644 --- a/packages/playground-react/pages/_document.tsx +++ b/packages/playground-react/pages/_document.tsx @@ -1,4 +1,4 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Head, Html, Main, NextScript } from 'next/document' export default function Document() { return ( diff --git a/packages/playground-react/pages/_error.tsx b/packages/playground-react/pages/_error.tsx index d20a86c..0798416 100644 --- a/packages/playground-react/pages/_error.tsx +++ b/packages/playground-react/pages/_error.tsx @@ -1,7 +1,7 @@ -import React from 'react' import ErrorPage from 'next/error' import Head from 'next/head' import Link from 'next/link' +import React from 'react' import { ExamplesType, resolveAllExamples } from '../utils/resolve-all-examples' diff --git a/packages/playground-react/pages/combinations/form.tsx b/packages/playground-react/pages/combinations/form.tsx index 62c7ec2..9013fea 100644 --- a/packages/playground-react/pages/combinations/form.tsx +++ b/packages/playground-react/pages/combinations/form.tsx @@ -1,7 +1,7 @@ +import { Combobox, Listbox, RadioGroup, Switch } from '@headlessui/react' import { useState } from 'react' -import { Switch, RadioGroup, Listbox, Combobox } from '@headlessui/react' -import { classNames } from '../../utils/class-names' import { Button } from '../../components/button' +import { classNames } from '../../utils/class-names' function Section({ title, children }) { return ( @@ -260,7 +260,7 @@ export default function App() {
setQuery(e.target.value)} - className="w-full rounded-md rounded border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" + className="w-full rounded rounded-md border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" placeholder="Search users..." />
-
+
Tab 1 diff --git a/packages/playground-react/pages/combobox/combobox-countries.tsx b/packages/playground-react/pages/combobox/combobox-countries.tsx index 2c3c761..c7acec5 100644 --- a/packages/playground-react/pages/combobox/combobox-countries.tsx +++ b/packages/playground-react/pages/combobox/combobox-countries.tsx @@ -1,9 +1,9 @@ -import React, { useState, useEffect } from 'react' import { Combobox } from '@headlessui/react' +import { useEffect, useState } from 'react' -import { classNames } from '../../utils/class-names' import { Button } from '../../components/button' import { countries as allCountries } from '../../data' +import { classNames } from '../../utils/class-names' function useDebounce(value: T, delay: number) { let [debouncedValue, setDebouncedValue] = useState(value) diff --git a/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx b/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx index a80e011..0b5ce2c 100644 --- a/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx +++ b/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx @@ -1,8 +1,8 @@ -import React, { useState, useEffect } from 'react' import { Combobox } from '@headlessui/react' +import { useEffect, useState } from 'react' -import { classNames } from '../../utils/class-names' import { Button } from '../../components/button' +import { classNames } from '../../utils/class-names' let everybody = [ 'Wade Cooper', diff --git a/packages/playground-react/pages/combobox/combobox-with-pure-tailwind.tsx b/packages/playground-react/pages/combobox/combobox-with-pure-tailwind.tsx index e97cfaf..319b363 100644 --- a/packages/playground-react/pages/combobox/combobox-with-pure-tailwind.tsx +++ b/packages/playground-react/pages/combobox/combobox-with-pure-tailwind.tsx @@ -1,8 +1,8 @@ -import React, { useState, useEffect } from 'react' import { Combobox } from '@headlessui/react' +import { useEffect, useState } from 'react' -import { classNames } from '../../utils/class-names' import { Button } from '../../components/button' +import { classNames } from '../../utils/class-names' let everybody = [ 'Wade Cooper', diff --git a/packages/playground-react/pages/combobox/command-palette-with-groups.tsx b/packages/playground-react/pages/combobox/command-palette-with-groups.tsx index e0418d0..7d3dc52 100644 --- a/packages/playground-react/pages/combobox/command-palette-with-groups.tsx +++ b/packages/playground-react/pages/combobox/command-palette-with-groups.tsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect, Fragment } from 'react' import { Combobox } from '@headlessui/react' +import { Fragment, useEffect, useState } from 'react' import { classNames } from '../../utils/class-names' diff --git a/packages/playground-react/pages/combobox/command-palette.tsx b/packages/playground-react/pages/combobox/command-palette.tsx index 25dc1da..54db043 100644 --- a/packages/playground-react/pages/combobox/command-palette.tsx +++ b/packages/playground-react/pages/combobox/command-palette.tsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from 'react' import { Combobox } from '@headlessui/react' +import { useEffect, useState } from 'react' import { classNames } from '../../utils/class-names' diff --git a/packages/playground-react/pages/combobox/multi-select.tsx b/packages/playground-react/pages/combobox/multi-select.tsx index cf8bc60..4311a03 100644 --- a/packages/playground-react/pages/combobox/multi-select.tsx +++ b/packages/playground-react/pages/combobox/multi-select.tsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react' import { Combobox } from '@headlessui/react' +import { useState } from 'react' function classNames(...classes) { return classes.filter(Boolean).join(' ') diff --git a/packages/playground-react/pages/dialog/dialog-focus-issue.tsx b/packages/playground-react/pages/dialog/dialog-focus-issue.tsx index 7f3bdad..5c14478 100644 --- a/packages/playground-react/pages/dialog/dialog-focus-issue.tsx +++ b/packages/playground-react/pages/dialog/dialog-focus-issue.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react' import { Dialog } from '@headlessui/react' +import { useState } from 'react' import { Button } from '../../components/button' function Modal(props) { diff --git a/packages/playground-react/pages/dialog/dialog-scroll-issue.tsx b/packages/playground-react/pages/dialog/dialog-scroll-issue.tsx index b789857..858558b 100644 --- a/packages/playground-react/pages/dialog/dialog-scroll-issue.tsx +++ b/packages/playground-react/pages/dialog/dialog-scroll-issue.tsx @@ -1,5 +1,5 @@ -import { Fragment, useState } from 'react' import { Dialog, Transition } from '@headlessui/react' +import { Fragment, useState } from 'react' function MyDialog({ open, close }) { return ( @@ -15,7 +15,7 @@ function MyDialog({ open, close }) { leaveFrom="opacity-100" leaveTo="opacity-0" > -
+

Gray area should be scrollable

diff --git a/packages/playground-react/pages/dialog/dialog-with-shadow-children.tsx b/packages/playground-react/pages/dialog/dialog-with-shadow-children.tsx index f37a248..a49581f 100644 --- a/packages/playground-react/pages/dialog/dialog-with-shadow-children.tsx +++ b/packages/playground-react/pages/dialog/dialog-with-shadow-children.tsx @@ -1,6 +1,5 @@ -import { useEffect, useRef } from 'react' -import { useState } from 'react' import { Dialog } from '@headlessui/react' +import { useEffect, useRef, useState } from 'react' import { Button } from '../../components/button' if (typeof document !== 'undefined') { @@ -63,7 +62,7 @@ export default function App() {
- +