huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix typos (#3086)

Browse Source 
* fix a bunch of typos

* fix typos in `@headlessui/vue`
This commit is contained in:
Robin Malfait
2024-04-08 23:31:50 +02:00
committed by GitHub
parent c8037fc96e
commit ae8c253c21
39 changed files with 151 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/CHANGELOG.md
+8 -8
View File
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
- Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
- Prevent default behavior when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
- Use `isFocused` instead of `isFocusVisible` for `Input` and `Textarea` components ([#2940](https://github.com/tailwindlabs/headlessui/pull/2940))
- Ensure `children` prop of `Field` component can be a render prop ([#2941](https://github.com/tailwindlabs/headlessui/pull/2941))
- Add `hidden` attribute to internal `<Hidden />` component when the `Features.Hidden` feature is used ([#2955](https://github.com/tailwindlabs/headlessui/pull/2955))
@@ -118,7 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Ensure the caret is in a consistent position when syncing the `Combobox.Input` value ([#2568](https://github.com/tailwindlabs/headlessui/pull/2568))
- Improve "outside click" behaviour in combination with 3rd party libraries ([#2572](https://github.com/tailwindlabs/headlessui/pull/2572))
- Improve "outside click" behavior in combination with 3rd party libraries ([#2572](https://github.com/tailwindlabs/headlessui/pull/2572))
- Ensure IME works on Android devices ([#2580](https://github.com/tailwindlabs/headlessui/pull/2580))
- Calculate `aria-expanded` purely based on the open/closed state ([#2610](https://github.com/tailwindlabs/headlessui/pull/2610))
- Submit form on `Enter` even if no submit-like button was found ([#2613](https://github.com/tailwindlabs/headlessui/pull/2613))
@@ -376,7 +376,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fix closing of `Popover.Panel` in React 18 ([#1409](https://github.com/tailwindlabs/headlessui/pull/1409))
- Ignore `Escape` when event got prevented in `Dialog` component ([#1424](https://github.com/tailwindlabs/headlessui/pull/1424))
- Improve `FocusTrap` behaviour ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
- Improve `FocusTrap` behavior ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
- Simplify `Popover` Tab logic by using sentinel nodes instead of keydown event interception ([#1440](https://github.com/tailwindlabs/headlessui/pull/1440))
- Ensure the `Popover.Panel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
- Improve "Scroll lock" scrollbar width for `Dialog` component ([#1457](https://github.com/tailwindlabs/headlessui/pull/1457))
@@ -434,7 +434,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Ensure correct order when conditionally rendering `Menu.Item`, `Listbox.Option` and `RadioGroup.Option` ([#1045](https://github.com/tailwindlabs/headlessui/pull/1045))
- Improve controlled Tabs behaviour ([#1050](https://github.com/tailwindlabs/headlessui/pull/1050))
- Improve controlled Tabs behavior ([#1050](https://github.com/tailwindlabs/headlessui/pull/1050))
- Improve typeahead search logic ([#1051](https://github.com/tailwindlabs/headlessui/pull/1051))
- Improve overal codebase, use modern tech like `esbuild` and TypeScript 4! ([#1055](https://github.com/tailwindlabs/headlessui/pull/1055))
- Improve build files ([#1078](https://github.com/tailwindlabs/headlessui/pull/1078))
@@ -513,7 +513,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Improve SSR for `Dialog` ([#477](https://github.com/tailwindlabs/headlessui/pull/477))
- Delay focus trap initialization ([#477](https://github.com/tailwindlabs/headlessui/pull/477))
- Improve incorrect behaviour for nesting `Dialog` components ([#560](https://github.com/tailwindlabs/headlessui/pull/560))
- Improve incorrect behavior for nesting `Dialog` components ([#560](https://github.com/tailwindlabs/headlessui/pull/560))
## [1.1.1] - 2021-04-28
@@ -577,7 +577,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure `Switch` has `type="button"` ([#192](https://github.com/tailwindlabs/headlessui/pull/192))
- Fix `useId()` hook returning `undefined` on the client
- Fix `disabled` not working when inside a disabled fieldset ([#202](https://github.com/tailwindlabs/headlessui/pull/202))
- Trigger "outside click" behaviour on mousedown ([#212](https://github.com/tailwindlabs/headlessui/pull/212))
- Trigger "outside click" behavior on mousedown ([#212](https://github.com/tailwindlabs/headlessui/pull/212))
- Ensure the `active` MenuItem is scrolled into view
- Ensure valid Menu accessibility tree ([#228](https://github.com/tailwindlabs/headlessui/pull/228))
@@ -606,8 +606,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixes
- Fix outside click behaviour. If you had multiple menu's, when menu 1 is open, menu 2 is closed and you click on menu button 2 it will open both menu's. This is now fixed.
- Ensure when using keyboard navigation we prevent the default behaviour.
- Fix outside click behavior. If you had multiple menu's, when menu 1 is open, menu 2 is closed and you click on menu button 2 it will open both menu's. This is now fixed.
- Ensure when using keyboard navigation we prevent the default behavior.
## [0.1.2] - 2020-09-25
packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx
+1 -1
View File
@@ -159,7 +159,7 @@ describe('Form submissions', () => {
// Submit
await press(Keys.Enter)
// Notifications should be off (or in this case, non-existant)
// Notifications should be off (or in this case, non-existent)
expect(handleSubmission).toHaveBeenLastCalledWith({})
})
})
packages/@headlessui-react/src/components/combobox/combobox.tsx
+1 -1
View File
@@ -1096,7 +1096,7 @@ function InputFn<
// When the user is still in the middle of composing by using an IME, then we don't want to
// submit this value and close the Combobox yet. Instead, we will fallback to the default
// behaviour which is to "end" the composition.
// behavior which is to "end" the composition.
if (isComposing.current) return
event.preventDefault()
packages/@headlessui-react/src/components/dialog/dialog.test.tsx
+4 -4
View File
@@ -174,7 +174,7 @@ describe('Rendering', () => {
<Dialog
open={isOpen}
onClose={setIsOpen}
// @ts-expect-error: We explicitly type role to only accept valid options — but we still want to verify runtime behaviorr
// @ts-expect-error: We explicitly type role to only accept valid options — but we still want to verify runtime behavior
role="foobar"
>
<TabSentinel />
@@ -1771,7 +1771,7 @@ describe('Mouse interactions', () => {
<button id="trigger" onClick={() => setIsOpen((v) => !v)}>
Trigger
</button>
<div id="imoutside">this thing</div>
<div id="i-am-outside">this thing</div>
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
<Dialog.Backdrop />
<Dialog.Panel>
@@ -1791,12 +1791,12 @@ describe('Mouse interactions', () => {
assertDialog({ state: DialogState.Visible })
// Start a click inside the dialog and end it outside
await mouseDrag(document.getElementById('inside'), document.getElementById('imoutside'))
await mouseDrag(document.getElementById('inside'), document.getElementById('i-am-outside'))
// It should not have hidden
assertDialog({ state: DialogState.Visible })
await click(document.getElementById('imoutside'))
await click(document.getElementById('i-am-outside'))
// It's gone
assertDialog({ state: DialogState.InvisibleUnmounted })
packages/@headlessui-react/src/components/dialog/dialog.tsx
+2 -2
View File
@@ -239,7 +239,7 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
let hasParentDialog = useContext(DialogContext) !== null
let [portals, PortalWrapper] = useNestedPortals()
// We use this because reading these values during iniital render(s)
// We use this because reading these values during initial render(s)
// can result in `null` rather then the actual elements
// This doesn't happen when using certain components like a
// `<Dialog.Title>` because they cause the parent to re-render
@@ -259,7 +259,7 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
})
// If there are multiple dialogs, then you can be the root, the leaf or one
// in between. We only care abou whether you are the top most one or not.
// in between. We only care about whether you are the top most one or not.
let position = !hasNestedDialogs ? 'leaf' : 'parent'
// When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
+12 -12
View File
@@ -156,7 +156,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
render(
<>
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Disclosure>
{({ close }) => (
<>
@@ -187,8 +187,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -199,7 +199,7 @@ describe('Rendering', () => {
let elementRef = useRef(null)
return (
<>
<button ref={elementRef}>restoreable</button>
<button ref={elementRef}>restorable</button>
<Disclosure>
{({ close }) => (
<>
@@ -231,8 +231,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -501,7 +501,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
render(
<>
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Disclosure>
<Disclosure.Button>Trigger</Disclosure.Button>
<Disclosure.Panel>
@@ -528,8 +528,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -540,7 +540,7 @@ describe('Rendering', () => {
let elementRef = useRef(null)
return (
<>
<button ref={elementRef}>restoreable</button>
<button ref={elementRef}>restorable</button>
<Disclosure>
<Disclosure.Button>Trigger</Disclosure.Button>
<Disclosure.Panel>
@@ -568,8 +568,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
})
packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
+1 -1
View File
@@ -332,7 +332,7 @@ function useInitialFocus(
// There is an additional issue with doing this immediately. The FocusTrap is used inside a
// Dialog, the Dialog is rendered inside of a Portal and the Portal is rendered at the end of
// the `document.body`. This means that the moment we call focus, the browser immediately
// tries to focus the element, which will still be at the bodem resulting in the page to
// tries to focus the element, which will still be at the bottom resulting in the page to
// scroll down. Delaying this will prevent the page to scroll down entirely.
microTask(() => {
if (!mounted.current) {
packages/@headlessui-react/src/components/listbox/listbox.test.tsx
+2 -2
View File
@@ -1490,7 +1490,7 @@ describe('Composition', () => {
describe('Keyboard interactions', () => {
describe('`Enter` key', () => {
it(
'should be possible to close the listbox with Enter when there is no active listboxoption',
'should be possible to close the listbox with Enter when there is no active listbox option',
suppressConsoleLogs(async () => {
render(
<Listbox value={undefined} onChange={(x) => console.log(x)}>
@@ -3474,7 +3474,7 @@ describe('Keyboard interactions', () => {
)
it(
'should be possible to search for the next occurence',
'should be possible to search for the next occurrence',
suppressConsoleLogs(async () => {
render(
<Listbox value={undefined} onChange={(x) => console.log(x)}>
packages/@headlessui-react/src/components/listbox/listbox.tsx
+8 -6
View File
@@ -218,8 +218,9 @@ let reducers: {
// Optimization:
//
// If the current DOM node and the previous DOM node are next to eachother, or if the previous
// DOM node is already the first DOM node, then we don't have to sort all the DOM nodes.
// If the current DOM node and the previous DOM node are next to each other,
// or if the previous DOM node is already the first DOM node, then we don't
// have to sort all the DOM nodes.
else if (action.focus === Focus.Previous) {
let activeOptionIdx = state.activeOptionIndex
if (activeOptionIdx !== null) {
@@ -233,7 +234,7 @@ let reducers: {
if (previousOptionIndex !== null) {
let previousDom = state.options[previousOptionIndex].dataRef.current.domRef
if (
// Next to eachother
// Next to each other
currentDom.current?.previousElementSibling === previousDom.current ||
// Or already the first element
previousDom.current?.previousElementSibling === null
@@ -249,8 +250,9 @@ let reducers: {
// Optimization:
//
// If the current DOM node and the next DOM node are next to eachother, or if the next DOM node
// is already the last DOM node, then we don't have to sort all the DOM nodes.
// If the current DOM node and the next DOM node are next to each other, or
// if the next DOM node is already the last DOM node, then we don't have to
// sort all the DOM nodes.
else if (action.focus === Focus.Next) {
let activeOptionIdx = state.activeOptionIndex
if (activeOptionIdx !== null) {
@@ -264,7 +266,7 @@ let reducers: {
if (nextOptionIndex !== null) {
let nextDom = state.options[nextOptionIndex].dataRef.current.domRef
if (
// Next to eachother
// Next to each other
currentDom.current?.nextElementSibling === nextDom.current ||
// Or already the last element
nextDom.current?.nextElementSibling === null
packages/@headlessui-react/src/components/menu/menu.test.tsx
+1 -1
View File
@@ -2706,7 +2706,7 @@ describe('Keyboard interactions', () => {
)
it(
'should be possible to search for the next occurence',
'should be possible to search for the next occurrence',
suppressConsoleLogs(async () => {
render(
<Menu>
packages/@headlessui-react/src/components/menu/menu.tsx
+8 -6
View File
@@ -199,8 +199,9 @@ let reducers: {
// Optimization:
//
// If the current DOM node and the previous DOM node are next to eachother, or if the previous
// DOM node is already the first DOM node, then we don't have to sort all the DOM nodes.
// If the current DOM node and the previous DOM node are next to each other,
// or if the previous DOM node is already the first DOM node, then we don't
// have to sort all the DOM nodes.
else if (action.focus === Focus.Previous) {
let activeItemIdx = state.activeItemIndex
if (activeItemIdx !== null) {
@@ -214,7 +215,7 @@ let reducers: {
if (previousItemIndex !== null) {
let previousDom = state.items[previousItemIndex].dataRef.current.domRef
if (
// Next to eachother
// Next to each other
currentDom.current?.previousElementSibling === previousDom.current ||
// Or already the first element
previousDom.current?.previousElementSibling === null
@@ -230,8 +231,9 @@ let reducers: {
// Optimization:
//
// If the current DOM node and the next DOM node are next to eachother, or if the next DOM node
// is already the last DOM node, then we don't have to sort all the DOM nodes.
// If the current DOM node and the next DOM node are next to each other, or
// if the next DOM node is already the last DOM node, then we don't have to
// sort all the DOM nodes.
else if (action.focus === Focus.Next) {
let activeItemIdx = state.activeItemIndex
if (activeItemIdx !== null) {
@@ -245,7 +247,7 @@ let reducers: {
if (nextItemIndex !== null) {
let nextDom = state.items[nextItemIndex].dataRef.current.domRef
if (
// Next to eachother
// Next to each other
currentDom.current?.nextElementSibling === nextDom.current ||
// Or already the last element
nextDom.current?.nextElementSibling === null
packages/@headlessui-react/src/components/popover/popover.test.tsx
+13 -13
View File
@@ -188,7 +188,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
render(
<>
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Popover>
{({ close }) => (
<>
@@ -219,8 +219,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -231,7 +231,7 @@ describe('Rendering', () => {
let elementRef = useRef(null)
return (
<>
<button ref={elementRef}>restoreable</button>
<button ref={elementRef}>restorable</button>
<Popover>
{({ close }) => (
<>
@@ -263,8 +263,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -740,7 +740,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
render(
<>
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Popover>
<Popover.Button>Trigger</Popover.Button>
<Popover.Panel>
@@ -767,8 +767,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -779,7 +779,7 @@ describe('Rendering', () => {
let elementRef = useRef(null)
return (
<>
<button ref={elementRef}>restoreable</button>
<button ref={elementRef}>restorable</button>
<Popover>
<Popover.Button>Trigger</Popover.Button>
<Popover.Panel>
@@ -807,8 +807,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
})
@@ -1873,7 +1873,7 @@ describe('Keyboard interactions', () => {
)
it(
'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristc based portal)',
'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristic based portal)',
suppressConsoleLogs(async () => {
function Example() {
let [portal, setPortal] = useState<HTMLElement | null>(null)
packages/@headlessui-react/src/components/popover/popover.tsx
+12 -11
View File
@@ -189,8 +189,8 @@ function usePopoverAPIContext(component: string) {
}
let PopoverGroupContext = createContext<{
registerPopover(registerbag: PopoverRegisterBag): void
unregisterPopover(registerbag: PopoverRegisterBag): void
registerPopover(registerBag: PopoverRegisterBag): void
unregisterPopover(registerBag: PopoverRegisterBag): void
isFocusWithinPopoverGroup(): boolean
closeOthers(buttonId: string): void
mainTreeNodeRef: MutableRefObject<HTMLElement | null>
@@ -282,10 +282,11 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
}
}
// Use another heuristic to try and calculate wether or not the focusable elements are near
// eachother (aka, following the default focus/tab order from the browser). If they are then it
// doesn't really matter if they are portalled or not because we can follow the default tab
// order. But if they are not, then we can consider it being portalled so that we can ensure
// Use another heuristic to try and calculate wether or not the focusable
// elements are near each other (aka, following the default focus/tab order
// from the browser). If they are then it doesn't really matter if they are
// portalled or not because we can follow the default tab order. But if they
// are not, then we can consider it being portalled so that we can ensure
// that tab and shift+tab (hopefully) go to the correct spot.
let elements = getFocusableElements()
let buttonIdx = elements.indexOf(button)
@@ -1086,9 +1087,9 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
let [popovers, setPopovers] = useState<PopoverRegisterBag[]>([])
let root = useMainTreeNode()
let unregisterPopover = useEvent((registerbag: PopoverRegisterBag) => {
let unregisterPopover = useEvent((registerBag: PopoverRegisterBag) => {
setPopovers((existing) => {
let idx = existing.indexOf(registerbag)
let idx = existing.indexOf(registerBag)
if (idx !== -1) {
let clone = existing.slice()
clone.splice(idx, 1)
@@ -1098,9 +1099,9 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
})
})
let registerPopover = useEvent((registerbag: PopoverRegisterBag) => {
setPopovers((existing) => [...existing, registerbag])
return () => unregisterPopover(registerbag)
let registerPopover = useEvent((registerBag: PopoverRegisterBag) => {
setPopovers((existing) => [...existing, registerBag])
return () => unregisterPopover(registerBag)
})
let isFocusWithinPopoverGroup = useEvent(() => {
packages/@headlessui-react/src/components/switch/switch.test.tsx
+4 -4
View File
@@ -196,7 +196,7 @@ describe('Rendering', () => {
// Submit
await click(document.getElementById('submit'))
// Notifications should be off (or in this case, non-existant)
// Notifications should be off (or in this case, non-existent)
expect(handleSubmission).toHaveBeenLastCalledWith({})
})
@@ -235,7 +235,7 @@ describe('Rendering', () => {
// Submit
await click(document.getElementById('submit'))
// Notifications should be off (or in this case, non-existant)
// Notifications should be off (or in this case, non-existent)
expect(handleSubmission).toHaveBeenLastCalledWith({})
})
@@ -265,7 +265,7 @@ describe('Rendering', () => {
// Submit
await click(document.getElementById('submit'))
// Notifications should be off (or in this case non-existant)
// Notifications should be off (or in this case non-existent)
expect(handleSubmission).toHaveBeenLastCalledWith({})
})
@@ -669,7 +669,7 @@ describe('Mouse interactions', () => {
})
xit('should be possible to hover the label and trigger a hover on the switch', async () => {
// This test doen't work in JSDOM :(
// This test doesn't work in JSDOM :(
// Keeping it here for reference when we can test this in a real browser
function Example() {
let [state] = useState(false)
packages/@headlessui-react/src/components/tabs/tabs.test.tsx
+5 -5
View File
@@ -1074,13 +1074,13 @@ describe('Rendering', () => {
assertActiveElement(document.body)
// test controlled behaviour
// test controlled behavior
await click(getByText('setSelectedIndex'))
assertTabs({ active: 1 })
await click(getByText('setSelectedIndex'))
assertTabs({ active: 2 })
// test uncontrolled behaviour again
// test uncontrolled behavior again
await click(getByText('Tab 1'))
assertTabs({ active: 2 }) // Should still be Tab 3 because `selectedIndex` didn't update
await click(getByText('Tab 2'))
@@ -1133,17 +1133,17 @@ describe('Rendering', () => {
assertActiveElement(document.body)
// test uncontrolled behaviour
// test uncontrolled behavior
await click(getByText('Tab 2'))
expect(handleChange).toHaveBeenCalledTimes(1)
expect(handleChange).toHaveBeenNthCalledWith(1, 1)
assertTabs({ active: 1 })
// test controlled behaviour
// test controlled behavior
await click(getByText('setSelectedIndex'))
assertTabs({ active: 2 })
// test uncontrolled behaviour again
// test uncontrolled behavior again
await click(getByText('Tab 2'))
expect(handleChange).toHaveBeenCalledTimes(2)
expect(handleChange).toHaveBeenNthCalledWith(2, 1)
packages/@headlessui-react/src/components/tooltip/tooltip.tsx
+2 -2
View File
@@ -251,7 +251,7 @@ function TooltipFn<TTag extends ElementType = typeof DEFAULT_TOOLTIP_TAG>(
when = When.Immediate
}
// This tooltip should be immediatley visible, therefore it should be the active tooltip.
// This tooltip should be immediately visible, therefore it should be the active tooltip.
if (when === When.Immediate) {
tooltipStore.setTooltipId(id)
}
@@ -259,7 +259,7 @@ function TooltipFn<TTag extends ElementType = typeof DEFAULT_TOOLTIP_TAG>(
dispatch({ type: ActionTypes.ShowTooltip, when })
})
let hideTooltip = useEvent((when: When) => {
// We are the current active tooltip and we need to be hidden immediatlely, therefore there
// We are the current active tooltip and we need to be hidden immediately, therefore there
// should not be any active tooltip anymore.
if (activeTooltipId === id && when === When.Immediate) {
tooltipStore.setTooltipId(null)
packages/@headlessui-react/src/components/transition/transition.test.tsx
+3 -3
View File
@@ -334,7 +334,7 @@ describe('Setup API', () => {
// TODO: This is not quite right
// The `foo1\nfoo2` should be gone
// I think this is a qurk of JSDOM
// I think this is a quirk of JSDOM
expect(container.firstChild).toMatchInlineSnapshot(`
<div>
<button>
@@ -754,7 +754,7 @@ describe('Transitions', () => {
null, // Initial render
null, // Setup leave classes
fastLeaveDuration, // Done with fast leave
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
]
},
])
@@ -804,7 +804,7 @@ describe('Transitions', () => {
null, // Initial render
null, // Setup leave classes
fastLeaveDuration, // Done with fast leave
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
]
},
])
packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts
+2 -2
View File
@@ -24,7 +24,7 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
// have `scroll-behavior: smooth` set, then changing the scrollTop in any way shape or form
// will trigger a "smooth" scroll and the new position would be incorrect.
//
// This is why we are forcing the `scroll-behaviour: auto` here, and then restoring it later.
// This is why we are forcing the `scroll-behavior: auto` here, and then restoring it later.
// We have to be a bit careful, because removing `scroll-behavior: auto` back to
// `scroll-behavior: smooth` can start triggering smooth scrolling. Delaying this by a
// microTask will guarantee that everything is done such that both enter/exit of the Dialog is
@@ -125,7 +125,7 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
scrollableParent = scrollableParent.parentElement
}
// We crawled up the tree until the beginnging of the Portal, let's prevent the
// We crawled up the tree until the beginning of the Portal, let's prevent the
// event if this is the case. If not, then we are in a container where we are
// allowed to scroll so we don't have to prevent the event.
if (scrollableParent.dataset.headlessuiPortal === '') {
packages/@headlessui-react/src/hooks/use-outside-click.ts
+2 -2
View File
@@ -36,7 +36,7 @@ export function useOutsideClick(
// Check whether the event got prevented already. This can happen if you use the
// useOutsideClick hook in both a Dialog and a Menu and the inner Menu "cancels" the default
// behaviour so that only the Menu closes and not the Dialog (yet)
// behavior so that only the Menu closes and not the Dialog (yet)
if (event.defaultPrevented) return
let target = resolveTarget(event)
@@ -85,7 +85,7 @@ export function useOutsideClick(
// This allows us to check whether the event was defaultPrevented when you are nesting this
// inside a `<Dialog />` for example.
if (
// This check alllows us to know whether or not we clicked on a "focusable" element like a
// This check allows us to know whether or not we clicked on a "focusable" element like a
// button or an input. This is a backwards compatibility check so that you can open a <Menu
// /> and click on another <Menu /> which should close Menu A and open Menu B. We might
// revisit that so that you will require 2 clicks instead.
packages/@headlessui-react/src/internal/floating.tsx
+3 -2
View File
@@ -312,8 +312,9 @@ export function FloatingProvider({
// Calculate placement information to expose as data attributes
let [exposedTo = to, exposedAlign = align] = context.placement.split('-')
// If userland code is using custom styles specifically for `bottom`, but they chose `selection`,
// then we want to make sure to map it to selection again otherwise styles could be wrong.
// If user-land code is using custom styles specifically for `bottom`, but
// they chose `selection`, then we want to make sure to map it to selection
// again otherwise styles could be wrong.
if (to === 'selection') exposedTo = 'selection'
let data = useMemo(
packages/@headlessui-react/src/internal/modal.tsx
+1 -1
View File
@@ -121,7 +121,7 @@ function ModalFn<TTag extends ElementType = typeof DEFAULT_MODAL_TAG>(
let [portals, PortalWrapper] = useNestedPortals()
// We use this because reading these values during iniital render(s)
// We use this because reading these values during initial render(s)
// can result in `null` rather then the actual elements
let defaultContainer: RefObject<HTMLElement> = {
get current() {
packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
+2 -2
View File
@@ -161,9 +161,9 @@ export function assertLinkedWithDescription(
expect(element).toHaveAttribute('aria-describedby')
let descriptionledBy = new Set(element.getAttribute('aria-describedby')?.split(' ') ?? [])
let describedby = new Set(element.getAttribute('aria-describedby')?.split(' ') ?? [])
for (let description of descriptions) {
expect(descriptionledBy).toContain(description.id)
expect(describedby).toContain(description.id)
}
} catch (err) {
if (err instanceof Error) Error.captureStackTrace(err, assertLinkedWithDescription)
packages/@headlessui-react/src/test-utils/execute-timeline.ts
+1 -1
View File
@@ -89,7 +89,7 @@ export async function executeTimeline(
return snapshot.content !== snapshots[i - 1].content
})
// Add a relative time compaired to the previous snapshot. We recorded everything in
// Add a relative time compared to the previous snapshot. We recorded everything in
// process.hrtime.bigint() which is in nanoseconds, we want it in milliseconds.
.map((snapshot, i, all) => ({
...snapshot,
packages/@headlessui-react/src/test-utils/scenarios.tsx
+1 -1
View File
@@ -253,7 +253,7 @@ export function commonFormScenarios(
</form>
)
// Submit the form to get the intial state of the form
// Submit the form to get the initial state of the form
await click(screen.getByText('Submit'))
let formState = Object.fromEntries(formDataMock.mock.calls[0][0])
packages/@headlessui-react/src/types.ts
+1 -1
View File
@@ -44,7 +44,7 @@ type ClassNameOverride<TTag extends ReactTag, TSlot = {}> =
? { className?: PropsOf<TTag>['className'] | ((bag: TSlot) => string) }
: {}
// Provide clean TypeScript props, which exposes some of our custom API's.
// Provide clean TypeScript props, which exposes some of our custom APIs.
export type Props<
TTag extends ReactTag,
TSlot = {},
packages/@headlessui-react/src/utils/focus-management.ts
+2 -2
View File
@@ -304,11 +304,11 @@ export function focusIn(
// By default if you <Tab> to a text input or a textarea, the browser will
// select all the text once the focus is inside these DOM Nodes. However,
// since we are manually moving focus this behaviour is not happening. This
// since we are manually moving focus this behavior is not happening. This
// code will make sure that the text gets selected as-if you did it manually.
// Note: We only do this when going forward / backward. Not for the
// Focus.First or Focus.Last actions. This is similar to the `autoFocus`
// behaviour on an input where the input will get focus but won't be
// behavior on an input where the input will get focus but won't be
// selected.
if (focus & (Focus.Next | Focus.Previous) && isSelectableElement(next)) {
next.select()
packages/@headlessui-vue/src/components/combobox/combobox.test.ts
+1 -1
View File
@@ -5554,7 +5554,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s',
options: [
{ value: 'alice', children: 'Alice', disabled: false },
{ value: 'bob', children: 'Bob', disabled: true },
{ value: 'charile', children: 'Charlie', disabled: false },
{ value: 'charlie', children: 'Charlie', disabled: false },
],
update(newValue: any) {
value.value = newValue
packages/@headlessui-vue/src/components/dialog/dialog.test.ts
+3 -3
View File
@@ -2331,7 +2331,7 @@ describe('Mouse interactions', () => {
<button id="trigger" @click="toggleOpen">
Trigger
</button>
<div id="imoutside">this thing</div>
<div id="i-am-outside">this thing</div>
<Dialog :open="isOpen" @close="setIsOpen">
<DialogBackdrop />
<DialogPanel>
@@ -2361,12 +2361,12 @@ describe('Mouse interactions', () => {
assertDialog({ state: DialogState.Visible })
// Start a click inside the dialog and end it outside
await mouseDrag(document.getElementById('inside'), document.getElementById('imoutside'))
await mouseDrag(document.getElementById('inside'), document.getElementById('i-am-outside'))
// It should not have hidden
assertDialog({ state: DialogState.Visible })
await click(document.getElementById('imoutside'))
await click(document.getElementById('i-am-outside'))
// It's gone
assertDialog({ state: DialogState.InvisibleUnmounted })
packages/@headlessui-vue/src/components/dialog/dialog.ts
+1 -1
View File
@@ -148,7 +148,7 @@ export let Dialog = defineComponent({
})
// If there are multiple dialogs, then you can be the root, the leaf or one
// in between. We only care abou whether you are the top most one or not.
// in between. We only care about whether you are the top most one or not.
let position = computed(() => (!hasNestedDialogs.value ? 'leaf' : 'parent'))
// When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
+12 -12
View File
@@ -143,7 +143,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Disclosure v-slot="{ close }">
<DisclosureButton>Trigger</DisclosureButton>
<DisclosurePanel>
@@ -169,8 +169,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -179,7 +179,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button ref="elementRef">restoreable</button>
<button ref="elementRef">restorable</button>
<Disclosure v-slot="{ close }">
<DisclosureButton>Trigger</DisclosureButton>
<DisclosurePanel>
@@ -205,8 +205,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
})
@@ -455,7 +455,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Disclosure>
<DisclosureButton>Trigger</DisclosureButton>
<DisclosurePanel v-slot="{ close }">
@@ -481,8 +481,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -491,7 +491,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button ref="elementRef">restoreable</button>
<button ref="elementRef">restorable</button>
<Disclosure>
<DisclosureButton>Trigger</DisclosureButton>
<DisclosurePanel v-slot="{ close }">
@@ -517,8 +517,8 @@ describe('Rendering', () => {
// Ensure the disclosure is closed
assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
})
packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
+1 -1
View File
@@ -302,7 +302,7 @@ function useInitialFocus(
// There is an additional issue with doing this immediately. The FocusTrap is used inside a
// Dialog, the Dialog is rendered inside of a Portal and the Portal is rendered at the end of
// the `document.body`. This means that the moment we call focus, the browser immediately
// tries to focus the element, which will still be at the bodem resulting in the page to
// tries to focus the element, which will still be at the bottom resulting in the page to
// scroll down. Delaying this will prevent the page to scroll down entirely.
microTask(() => {
if (!mounted.value) {
packages/@headlessui-vue/src/components/menu/menu.test.tsx
+1 -1
View File
@@ -2869,7 +2869,7 @@ describe('Keyboard interactions', () => {
assertMenuLinkedWithMenuItem(items[1])
})
it('should be possible to search for the next occurence', async () => {
it('should be possible to search for the next occurrence', async () => {
renderTemplate(jsx`
<Menu>
<MenuButton>Trigger</MenuButton>
packages/@headlessui-vue/src/components/popover/popover.test.ts
+13 -13
View File
@@ -185,7 +185,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Popover v-slot="{ close }">
<PopoverButton>Trigger</PopoverButton>
<PopoverPanel>
@@ -211,8 +211,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -221,7 +221,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button ref="elementRef">restoreable</button>
<button ref="elementRef">restorable</button>
<Popover v-slot="{ close }">
<PopoverButton>Trigger</PopoverButton>
<PopoverPanel> <button @click="close(elementRef)">Close me</button>} </PopoverPanel>
@@ -245,8 +245,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
})
@@ -611,7 +611,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button id="test">restoreable</button>
<button id="test">restorable</button>
<Popover>
<PopoverButton>Trigger</PopoverButton>
<PopoverPanel v-slot="{ close }">
@@ -637,8 +637,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
@@ -647,7 +647,7 @@ describe('Rendering', () => {
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
<button ref="elementRef">restoreable</button>
<button ref="elementRef">restorable</button>
<Popover>
<PopoverButton>Trigger</PopoverButton>
<PopoverPanel v-slot="{ close }">
@@ -673,8 +673,8 @@ describe('Rendering', () => {
// Ensure the popover is closed
assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
// Ensure the restoreable button got the restored focus
assertActiveElement(getByText('restoreable'))
// Ensure the restorable button got the restored focus
assertActiveElement(getByText('restorable'))
})
)
})
@@ -1667,7 +1667,7 @@ describe('Keyboard interactions', () => {
)
it(
'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristc based portal)',
'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristic based portal)',
suppressConsoleLogs(async () => {
renderTemplate({
template: html`
packages/@headlessui-vue/src/components/popover/popover.ts
+8 -7
View File
@@ -76,8 +76,8 @@ function usePopoverContext(component: string) {
}
let PopoverGroupContext = Symbol('PopoverGroupContext') as InjectionKey<{
registerPopover(registerbag: PopoverRegisterBag): void
unregisterPopover(registerbag: PopoverRegisterBag): void
registerPopover(registerBag: PopoverRegisterBag): void
unregisterPopover(registerBag: PopoverRegisterBag): void
isFocusWithinPopoverGroup(): boolean
closeOthers(buttonId: string): void
mainTreeNodeRef: Ref<HTMLElement | null>
@@ -130,11 +130,12 @@ export let Popover = defineComponent({
}
}
// Use another heuristic to try and calculate wether or not the focusable elements are near
// eachother (aka, following the default focus/tab order from the browser). If they are then it
// doesn't really matter if they are portalled or not because we can follow the default tab
// order. But if they are not, then we can consider it being portalled so that we can ensure
// that tab and shift+tab (hopefully) go to the correct spot.
// Use another heuristic to try and calculate wether or not the focusable
// elements are near each other (aka, following the default focus/tab
// order from the browser). If they are then it doesn't really matter if
// they are portalled or not because we can follow the default tab order.
// But if they are not, then we can consider it being portalled so that we
// can ensure that tab and shift+tab (hopefully) go to the correct spot.
let elements = getFocusableElements()
let buttonIdx = elements.indexOf(dom(button)!)
packages/@headlessui-vue/src/components/switch/switch.test.tsx
+4 -4
View File
@@ -188,7 +188,7 @@ describe('Rendering', () => {
// Submit
await click(document.getElementById('submit'))
// Notifications should be off (or in this case, non-existant)
// Notifications should be off (or in this case, non-existent)
expect(handleSubmission).toHaveBeenLastCalledWith({})
})
@@ -230,7 +230,7 @@ describe('Rendering', () => {
// Submit
await click(document.getElementById('submit'))
// Notifications should be off (or in this case, non-existant)
// Notifications should be off (or in this case, non-existent)
expect(handleSubmission).toHaveBeenLastCalledWith({})
})
@@ -263,7 +263,7 @@ describe('Rendering', () => {
// Submit
await click(document.getElementById('submit'))
// Notifications should be off (or in this case non-existant)
// Notifications should be off (or in this case non-existent)
expect(handleSubmission).toHaveBeenLastCalledWith({})
})
@@ -777,7 +777,7 @@ describe('Mouse interactions', () => {
})
xit('should be possible to hover the label and trigger a hover on the switch', async () => {
// This test doen't work in JSDOM :(
// This test doesn't work in JSDOM :(
// Keeping it here for reference when we can test this in a real browser
renderTemplate({
template: html`
packages/@headlessui-vue/src/components/transitions/transition.test.ts
+2 -2
View File
@@ -708,7 +708,7 @@ describe('Transitions', () => {
null, // Initial render
null, // Setup leave classes
fastLeaveDuration, // Done with fast leave
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
]
},
])
@@ -762,7 +762,7 @@ describe('Transitions', () => {
null, // Initial render
null, // Setup leave classes
fastLeaveDuration, // Done with fast leave
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
]
},
])
packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts
+1 -1
View File
@@ -125,7 +125,7 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
scrollableParent = scrollableParent.parentElement
}
// We crawled up the tree until the beginnging of the Portal, let's prevent the
// We crawled up the tree until the beginning of the Portal, let's prevent the
// event if this is the case. If not, then we are in a container where we are
// allowed to scroll so we don't have to prevent the event.
if (scrollableParent.dataset.headlessuiPortal === '') {
packages/@headlessui-vue/src/hooks/use-outside-click.ts
+1 -1
View File
@@ -68,7 +68,7 @@ export function useOutsideClick(
// This allows us to check whether the event was defaultPrevented when you are nesting this
// inside a `<Dialog />` for example.
if (
// This check alllows us to know whether or not we clicked on a "focusable" element like a
// This check allows us to know whether or not we clicked on a "focusable" element like a
// button or an input. This is a backwards compatibility check so that you can open a <Menu
// /> and click on another <Menu /> which should close Menu A and open Menu B. We might
// revisit that so that you will require 2 clicks instead.
packages/@headlessui-vue/src/test-utils/execute-timeline.ts
+1 -1
View File
@@ -90,7 +90,7 @@ export async function executeTimeline(
return snapshot.content !== snapshots[i - 1].content
})
// Add a relative time compaired to the previous snapshot. We recorded everything in
// Add a relative time compared to the previous snapshot. We recorded everything in
// process.hrtime.bigint() which is in nanoseconds, we want it in milliseconds.
.map((snapshot, i, all) => ({
...snapshot,