Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf91738f

Browse files
authored
feat: default popupId to React.useId() if it exists (#137)
* feat: default popupId to React.useId() if it existsfix#128
1 parentdb9457e commitf91738f

File tree

2 files changed

+18
-9
lines changed

2 files changed

+18
-9
lines changed

‎README.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ For MUI v4 you'll need `material-ui-popup-state@^1.9.3`.
3737
-[`usePopupState`](#usepopupstate)
3838
-[`usePopupState` Props](#usepopupstate-props)
3939
-[`variant` (`'popover'`,`'popper'`, or`'dialog'`,**required**)](#variant-popover-popper-or-dialog-required)
40-
-[`popupId` (`string`,**optional** but strongly encouraged)](#popupid-string-optional-but-strongly-encouraged)
40+
-[`popupId` (`string`,**optional**)](#popupid-string-optional)
4141
-[`disableAutoFocus` (`boolean`,**optional**)](#disableautofocus-boolean-optional)
4242
-[`usePopupState` return value](#usepopupstate-return-value)
4343
-[Examples with Render Props](#examples-with-render-props)
@@ -49,7 +49,7 @@ For MUI v4 you'll need `material-ui-popup-state@^1.9.3`.
4949
-[Bind Functions](#bind-functions-1)
5050
-[`PopupState` Props](#popupstate-props)
5151
-[`variant` (`'popover'`,`'popper'`, or`'dialog'`,**required**)](#variant-popover-popper-or-dialog-required-1)
52-
-[`popupId` (`string`,**optional** but strongly encouraged)](#popupid-string-optional-but-strongly-encouraged-1)
52+
-[`popupId` (`string`,**optional**)](#popupid-string-optional)
5353
-[`disableAutoFocus` (`boolean`,**optional**)](#disableautofocus-boolean-optional-1)
5454
-[`children` (`(popupState: InjectedProps) => ?React.Node`,**required**)](#children-popupstate-injectedprops--reactnode-required)
5555
-[Using`Popover` and`Menu` with`bindHover`](#using-popover-and-menu-with-bindhover)
@@ -278,14 +278,17 @@ popup is a `Popper`.
278278
Right now this only affects whether`bindTrigger`/`bindToggle`/`bindHover` return
279279
an`aria-controls` prop or an`aria-describedby` prop.
280280

281-
###`popupId` (`string`,**optional** but strongly encouraged)
281+
###`popupId` (`string`,**optional**)
282282

283283
The`id` for the popup component. It will be passed to the child props so that
284284
the trigger component may declare the same id in an ARIA prop.
285285

286+
Defaults to`React.useId()` if`React.useId` exists; in older versions of React
287+
you will have to manually provide a`popupId`.
288+
286289
###`disableAutoFocus` (`boolean`,**optional**)
287290

288-
If`true`, will not steal focus when the popup is opened. (And`bindPopover`/`bindMenu`) will inject`disableAutoFocus`,`disableEnforceFocus`, and`disableRestoreFocus`).
291+
If`true`, will not steal focus when the popup is opened. (And`bindPopover`/`bindMenu` will inject`disableAutoFocus`,`disableEnforceFocus`, and`disableRestoreFocus`).
289292

290293
Defaults to`true` when the popup is opened by the`bindHover` or`bindFocus` element.
291294

@@ -553,14 +556,17 @@ popup is a `Popper`.
553556
Right now this only affects whether`bindTrigger`/`bindToggle`/`bindHover` return
554557
an`aria-controls` prop or an`aria-describedby` prop.
555558

556-
###`popupId` (`string`,**optional** but strongly encouraged)
559+
###`popupId` (`string`,**optional**)
557560

558561
The`id` for the popup component. It will be passed to the child props so that
559562
the trigger component may declare the same id in an ARIA prop.
560563

564+
Defaults to`React.useId()` if`React.useId` exists; in older versions of React
565+
you will have to manually provide a`popupId`.
566+
561567
###`disableAutoFocus` (`boolean`,**optional**)
562568

563-
If`true`, will not steal focus when the popup is opened. (And`bindPopover`/`bindMenu`) will inject`disableAutoFocus`,`disableEnforceFocus`, and`disableRestoreFocus`).
569+
If`true`, will not steal focus when the popup is opened. (And`bindPopover`/`bindMenu` will inject`disableAutoFocus`,`disableEnforceFocus`, and`disableRestoreFocus`).
564570

565571
Defaults to`true` when the popup is opened by the`bindHover` or`bindFocus` element.
566572

‎src/hooks.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
useRef,
1111
useEffect,
1212
}from'react'
13+
import*asReactfrom'react'
1314
import{typePopoverPosition,typePopoverReference}from'@mui/material'
1415
import{useEvent}from'./useEvent'
1516

@@ -72,9 +73,11 @@ export const initCoreState: CoreState = {
7273
_deferNextClose:false,
7374
}
7475

76+
constdefaultPopupId='useId'inReact ?()=>React.useId() :()=>undefined
77+
7578
exportfunctionusePopupState({
7679
parentPopupState,
77-
popupId,
80+
popupId=defaultPopupId(),
7881
variant,
7982
disableAutoFocus,
8083
}:{
@@ -321,10 +324,10 @@ function controlAriaProps({
321324
...(variant==='popover'
322325
?{
323326
'aria-haspopup':true,
324-
'aria-controls':isOpen&&popupId!=null?popupId :undefined,
327+
'aria-controls':isOpen ?popupId :undefined,
325328
}
326329
:variant==='popper'
327-
?{'aria-describedby':isOpen&&popupId!=null?popupId :undefined}
330+
?{'aria-describedby':isOpen ?popupId :undefined}
328331
:undefined),
329332
}
330333
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp