WK
bb9c4b5582
* fix(tabs): clamp ListContainer chevron scrolling to the scrollable range (#6749) * chore(deps): bump react-aria dependencies (#6752) * chore(deps): bump tailwind-variants to v3.3.1 (#6760) * chore(docs): release note for 3.2.4 * test(react): behavioral testing infra (#6754) * fix(link): expose data-slot on link root * fix(react): put style export condition before default * test(react): behavioral testing infra and suites * chore(testing): own vitest-browser-react and clarify coverage gates * chore: remove pinned version * fix(autocomplete): prevent popover from clipping the last options (#6766) * chore(docs): update release note * fix(styles): prevent subpixel border overflow on badge (#6768) * chore(docs): update release note * fix(styles): allow backdrop click to dismiss modal with scroll outside (#6770) * chore(docs): update release note * fix(tooltip): restore exit animation when swapping between tooltips (#6772) * chore(docs): update release note --------- Co-authored-by: Tyler <56234978+runnerboy22@users.noreply.github.com> Co-authored-by: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import type {ReactNode} from "react";
|
|
|
|
import {ssrSmoke} from "@heroui/testing/helpers";
|
|
import {useFilter} from "react-aria-components/Autocomplete";
|
|
|
|
import {Autocomplete} from "@/components/autocomplete";
|
|
import {Label} from "@/components/label";
|
|
import {ListBox} from "@/components/list-box";
|
|
import {I18nProvider} from "@/components/rac";
|
|
import {SearchField} from "@/components/search-field";
|
|
|
|
const wrapper = ({children}: {children: ReactNode}) => (
|
|
<I18nProvider locale="en-US">{children}</I18nProvider>
|
|
);
|
|
|
|
const AutocompleteExample = ({defaultOpen}: {defaultOpen?: boolean}) => {
|
|
const {contains} = useFilter({sensitivity: "base"});
|
|
|
|
return (
|
|
<Autocomplete
|
|
data-testid="autocomplete"
|
|
defaultOpen={defaultOpen}
|
|
placeholder="Select an animal"
|
|
selectionMode="single"
|
|
>
|
|
<Label>Favorite Animal</Label>
|
|
<Autocomplete.Trigger>
|
|
<Autocomplete.Value />
|
|
<Autocomplete.Indicator />
|
|
</Autocomplete.Trigger>
|
|
<Autocomplete.Popover>
|
|
<Autocomplete.Filter filter={contains}>
|
|
<SearchField autoFocus aria-label="Search animals" name="search" variant="secondary">
|
|
<SearchField.Group>
|
|
<SearchField.SearchIcon />
|
|
<SearchField.Input placeholder="Search animals..." />
|
|
<SearchField.ClearButton />
|
|
</SearchField.Group>
|
|
</SearchField>
|
|
<ListBox>
|
|
<ListBox.Item id="cat" textValue="Cat">
|
|
Cat
|
|
<ListBox.ItemIndicator />
|
|
</ListBox.Item>
|
|
<ListBox.Item id="dog" textValue="Dog">
|
|
Dog
|
|
<ListBox.ItemIndicator />
|
|
</ListBox.Item>
|
|
</ListBox>
|
|
</Autocomplete.Filter>
|
|
</Autocomplete.Popover>
|
|
</Autocomplete>
|
|
);
|
|
};
|
|
|
|
describe("Autocomplete SSR", () => {
|
|
it("renders without hydration mismatch when closed", async () => {
|
|
await ssrSmoke(<AutocompleteExample />, {wrapper});
|
|
});
|
|
|
|
it("renders without hydration mismatch when defaultOpen", async () => {
|
|
await ssrSmoke(<AutocompleteExample defaultOpen />, {wrapper});
|
|
});
|
|
});
|