Skip to content

Commit 0d18877

Browse files
authored
Merge branch 'main' into tab-works-with-arrow-keys
2 parents c22437a + d09ea60 commit 0d18877

File tree

11 files changed

+158
-41
lines changed

11 files changed

+158
-41
lines changed

.changeset/chilled-cats-smash.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Update Checkbox component to useIsomorphicLayoutEffect instead of useLayoutEffect to support SSR

.changeset/cold-bottles-attend.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Allow "falsely/empty" Autocomplete.Input values

.changeset/dry-stingrays-drum.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Add AutocompleteContext to Autocomplete component exports

docs/content/Autocomplete.mdx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -579,6 +579,64 @@ const MultiSelectAddNewItem = () => {
579579
render(<MultiSelectAddNewItem />)
580580
```
581581

582+
#### Rendered with `Autocomplete.Context`
583+
584+
The `Autocomplete.Context` can be used to control the menu open/closed state and customize certain `Autocomplete` behaviors
585+
586+
```javascript live noinline
587+
export function AutocompleteWithContext() {
588+
return (
589+
<Autocomplete>
590+
<AutocompleteWithContextInternal />
591+
</Autocomplete>
592+
)
593+
}
594+
595+
export function AutocompleteWithContextInternal() {
596+
const autocompleteContext = useContext(Autocomplete.Context)
597+
if (autocompleteContext === null) {
598+
throw new Error('AutocompleteContext returned null values')
599+
}
600+
601+
const {setShowMenu, showMenu} = autocompleteContext
602+
const inputRef = useRef < HTMLInputElement > null
603+
const [filterText, setFilterText] = useState('')
604+
605+
useEffect(() => {
606+
if (!showMenu) {
607+
// keep the menu open
608+
setShowMenu(true)
609+
}
610+
}, [showMenu, setShowMenu])
611+
612+
const change = event => setFilterText?.(event.target.value)
613+
614+
return (
615+
<Autocomplete.Context.Provider
616+
value={{...autocompleteContext, autocompleteSuggestion: '', setAutocompleteSuggestion: () => false}}
617+
>
618+
<Autocomplete.Input ref={inputRef} value={filterText} onChange={change} />
619+
<Autocomplete.Overlay>
620+
<Autocomplete.Menu
621+
items={[
622+
{text: 'main', id: 0},
623+
{text: 'autocomplete-tests', id: 1},
624+
{text: 'a11y-improvements', id: 2},
625+
{text: 'button-bug-fixes', id: 3},
626+
{text: 'radio-input-component', id: 4},
627+
{text: 'release-1.0.0', id: 5},
628+
{text: 'text-input-implementation', id: 6},
629+
{text: 'visual-design-tweaks', id: 7}
630+
]}
631+
selectedItemIds={[]}
632+
selectionVariant="single"
633+
/>
634+
</Autocomplete.Overlay>
635+
</Autocomplete.Context.Provider>
636+
)
637+
}
638+
```
639+
582640
## Props
583641
584642
### Autocomplete.Input

docs/content/NavList.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ function NavItem({to, children}) {
184184
const resolved = useResolvedPath(to)
185185
const isCurrent = useMatch({path: resolved.pathname, end: true})
186186
return (
187-
<NavList.Item as={Link} to={to} aria-current={isCurrent ? 'page' : false}>
187+
<NavList.Item as={Link} to={to} aria-current={isCurrent ? 'page' : undefined}>
188188
{children}
189189
</NavList.Item>
190190
)

0 commit comments

Comments
 (0)