mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Adding ModalFocus component (#18979)
This commit is contained in:
George Marshall
GitHub
parent
62ffd8022a
commit
32688c2e3c
@ -3910,6 +3910,64 @@
|
|||||||
"setTimeout": true
|
"setTimeout": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"addEventListener": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"removeEventListener": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"@babel/runtime": true,
|
||||||
|
"prop-types": true,
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>focus-lock": true,
|
||||||
|
"react-focus-lock>react-clientside-effect": true,
|
||||||
|
"react-focus-lock>use-callback-ref": true,
|
||||||
|
"react-focus-lock>use-sidecar": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"HTMLIFrameElement": true,
|
||||||
|
"Node.DOCUMENT_FRAGMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINED_BY": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINS": true,
|
||||||
|
"Node.ELEMENT_NODE": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"getComputedStyle": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>react-clientside-effect": {
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>react-clientside-effect>@babel/runtime": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-callback-ref": {
|
||||||
|
"packages": {
|
||||||
|
"react": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-sidecar": {
|
||||||
|
"globals": {
|
||||||
|
"console.error": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>use-sidecar>detect-node-es": true,
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-idle-timer": {
|
"react-idle-timer": {
|
||||||
"globals": {
|
"globals": {
|
||||||
"clearTimeout": true,
|
"clearTimeout": true,
|
||||||
|
|||||||
@ -4362,6 +4362,64 @@
|
|||||||
"setTimeout": true
|
"setTimeout": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"addEventListener": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"removeEventListener": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"@babel/runtime": true,
|
||||||
|
"prop-types": true,
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>focus-lock": true,
|
||||||
|
"react-focus-lock>react-clientside-effect": true,
|
||||||
|
"react-focus-lock>use-callback-ref": true,
|
||||||
|
"react-focus-lock>use-sidecar": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"HTMLIFrameElement": true,
|
||||||
|
"Node.DOCUMENT_FRAGMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINED_BY": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINS": true,
|
||||||
|
"Node.ELEMENT_NODE": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"getComputedStyle": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>react-clientside-effect": {
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>react-clientside-effect>@babel/runtime": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-callback-ref": {
|
||||||
|
"packages": {
|
||||||
|
"react": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-sidecar": {
|
||||||
|
"globals": {
|
||||||
|
"console.error": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>use-sidecar>detect-node-es": true,
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-idle-timer": {
|
"react-idle-timer": {
|
||||||
"globals": {
|
"globals": {
|
||||||
"clearTimeout": true,
|
"clearTimeout": true,
|
||||||
|
|||||||
@ -4362,6 +4362,64 @@
|
|||||||
"setTimeout": true
|
"setTimeout": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"addEventListener": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"removeEventListener": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"@babel/runtime": true,
|
||||||
|
"prop-types": true,
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>focus-lock": true,
|
||||||
|
"react-focus-lock>react-clientside-effect": true,
|
||||||
|
"react-focus-lock>use-callback-ref": true,
|
||||||
|
"react-focus-lock>use-sidecar": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"HTMLIFrameElement": true,
|
||||||
|
"Node.DOCUMENT_FRAGMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINED_BY": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINS": true,
|
||||||
|
"Node.ELEMENT_NODE": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"getComputedStyle": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>react-clientside-effect": {
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>react-clientside-effect>@babel/runtime": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-callback-ref": {
|
||||||
|
"packages": {
|
||||||
|
"react": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-sidecar": {
|
||||||
|
"globals": {
|
||||||
|
"console.error": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>use-sidecar>detect-node-es": true,
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-idle-timer": {
|
"react-idle-timer": {
|
||||||
"globals": {
|
"globals": {
|
||||||
"clearTimeout": true,
|
"clearTimeout": true,
|
||||||
|
|||||||
@ -3910,6 +3910,64 @@
|
|||||||
"setTimeout": true
|
"setTimeout": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"addEventListener": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"removeEventListener": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"@babel/runtime": true,
|
||||||
|
"prop-types": true,
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>focus-lock": true,
|
||||||
|
"react-focus-lock>react-clientside-effect": true,
|
||||||
|
"react-focus-lock>use-callback-ref": true,
|
||||||
|
"react-focus-lock>use-sidecar": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>focus-lock": {
|
||||||
|
"globals": {
|
||||||
|
"HTMLIFrameElement": true,
|
||||||
|
"Node.DOCUMENT_FRAGMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_NODE": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINED_BY": true,
|
||||||
|
"Node.DOCUMENT_POSITION_CONTAINS": true,
|
||||||
|
"Node.ELEMENT_NODE": true,
|
||||||
|
"console.error": true,
|
||||||
|
"console.warn": true,
|
||||||
|
"document": true,
|
||||||
|
"getComputedStyle": true,
|
||||||
|
"setTimeout": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>react-clientside-effect": {
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>react-clientside-effect>@babel/runtime": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-callback-ref": {
|
||||||
|
"packages": {
|
||||||
|
"react": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-focus-lock>use-sidecar": {
|
||||||
|
"globals": {
|
||||||
|
"console.error": true
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"react": true,
|
||||||
|
"react-focus-lock>use-sidecar>detect-node-es": true,
|
||||||
|
"wait-on>rxjs>tslib": true
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-idle-timer": {
|
"react-idle-timer": {
|
||||||
"globals": {
|
"globals": {
|
||||||
"clearTimeout": true,
|
"clearTimeout": true,
|
||||||
|
|||||||
@ -7362,7 +7362,7 @@
|
|||||||
},
|
},
|
||||||
"stylelint>postcss-html>htmlparser2>domutils>dom-serializer": {
|
"stylelint>postcss-html>htmlparser2>domutils>dom-serializer": {
|
||||||
"packages": {
|
"packages": {
|
||||||
"stylelint>postcss-html>htmlparser2>domutils>dom-serializer>domelementtype": true,
|
"stylelint>postcss-html>htmlparser2>domelementtype": true,
|
||||||
"stylelint>postcss-html>htmlparser2>entities": true
|
"stylelint>postcss-html>htmlparser2>entities": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -345,6 +345,7 @@
|
|||||||
"qrcode.react": "^1.0.1",
|
"qrcode.react": "^1.0.1",
|
||||||
"react": "^16.12.0",
|
"react": "^16.12.0",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^16.12.0",
|
||||||
|
"react-focus-lock": "^2.9.4",
|
||||||
"react-idle-timer": "^4.2.5",
|
"react-idle-timer": "^4.2.5",
|
||||||
"react-inspector": "^2.3.0",
|
"react-inspector": "^2.3.0",
|
||||||
"react-markdown": "^6.0.3",
|
"react-markdown": "^6.0.3",
|
||||||
|
|||||||
@ -34,6 +34,7 @@ export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
|
|||||||
export { TextFieldSearch } from './text-field-search';
|
export { TextFieldSearch } from './text-field-search';
|
||||||
export { ModalContent, ModalContentSize } from './modal-content';
|
export { ModalContent, ModalContentSize } from './modal-content';
|
||||||
export { ModalOverlay } from './modal-overlay';
|
export { ModalOverlay } from './modal-overlay';
|
||||||
|
export { ModalFocus } from './modal-focus';
|
||||||
|
|
||||||
// Molecules
|
// Molecules
|
||||||
export { BannerBase } from './banner-base';
|
export { BannerBase } from './banner-base';
|
||||||
|
|||||||
248
ui/components/component-library/modal-focus/README.mdx
Normal file
248
ui/components/component-library/modal-focus/README.mdx
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||||
|
|
||||||
|
import { ModalFocus } from './modal-focus';
|
||||||
|
|
||||||
|
# ModalFocus
|
||||||
|
|
||||||
|
`ModalFocus` traps the focus within the modal. This greatly improves the experience for screen readers and keyboard only users.
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="components-componentlibrary-modalfocus--default-story" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
The `ModalFocus` is built with [react-focus-lock](https://github.com/theKashey/react-focus-lock) and accepts all of the props from that library.
|
||||||
|
|
||||||
|
<ArgsTable of={ModalFocus} />
|
||||||
|
|
||||||
|
### Children
|
||||||
|
|
||||||
|
Use the `children` prop to render the component to lock focus to
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="components-componentlibrary-modalfocus--children" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
BorderColor,
|
||||||
|
DISPLAY,
|
||||||
|
FLEX_DIRECTION,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import { ModalFocus } from '../../component-library';
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
|
<button onClick={() => setOpen(true)} marginBottom={4}>
|
||||||
|
Open
|
||||||
|
</button>;
|
||||||
|
|
||||||
|
{
|
||||||
|
open && (
|
||||||
|
<ModalFocus>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<p>Modal focus children</p>
|
||||||
|
<input />
|
||||||
|
<p>
|
||||||
|
Use the keyboard to try tabbing around you will notice that the focus
|
||||||
|
is locked to the content within modal focus
|
||||||
|
</p>
|
||||||
|
<button onClick={() => setOpen(false)}>Close</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Initial Focus Ref
|
||||||
|
|
||||||
|
Use the `initialFocusRef` to pass the `ref` of the element to receive focus initially
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="components-componentlibrary-modalfocus--initial-focus-ref" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
BorderColor,
|
||||||
|
DISPLAY,
|
||||||
|
FLEX_DIRECTION,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import { ModalFocus } from '../../component-library';
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const ref = React.useRef < HTMLButtonElement > null;
|
||||||
|
|
||||||
|
<button onClick={() => setOpen(true)} marginBottom={4}>
|
||||||
|
Open
|
||||||
|
</button>;
|
||||||
|
|
||||||
|
{
|
||||||
|
open && (
|
||||||
|
<ModalFocus initialFocusRef={ref}>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<input />
|
||||||
|
<p>Initial focus is on the close button</p>
|
||||||
|
<button ref={ref} onClick={() => setOpen(false)}>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Final Focus Ref
|
||||||
|
|
||||||
|
Use the `finalFocusRef` to pass the `ref` of the element to return focus to when `ModalFocus` unmounts
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="components-componentlibrary-modalfocus--final-focus-ref" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
BorderColor,
|
||||||
|
DISPLAY,
|
||||||
|
FLEX_DIRECTION,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import { ModalFocus } from '../../component-library';
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const ref = React.useRef < HTMLInputElement > null;
|
||||||
|
|
||||||
|
<button onClick={() => setOpen(true)} marginBottom={4}>
|
||||||
|
Open
|
||||||
|
</button>;
|
||||||
|
<input placeholder="Focus will return here" ref={ref} />;
|
||||||
|
|
||||||
|
{
|
||||||
|
open && (
|
||||||
|
<ModalFocus finalFocusRef={ref}>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<p>Focus will be returned to the input once closed</p>
|
||||||
|
<button onClick={() => setOpen(false)}>Close</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Restore Focus
|
||||||
|
|
||||||
|
Use the `restoreFocus` to restore focus to the element that triggered the `ModalFocus` once it unmounts
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="components-componentlibrary-modalfocus--restore-focus" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
BorderColor,
|
||||||
|
DISPLAY,
|
||||||
|
FLEX_DIRECTION,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import { ModalFocus } from '../../component-library';
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
|
<button onClick={() => setOpen(true)} marginBottom={4}>
|
||||||
|
Open
|
||||||
|
</button>;
|
||||||
|
{
|
||||||
|
open && (
|
||||||
|
<ModalFocus restoreFocus>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<p>Focus will be restored to the open button once closed</p>
|
||||||
|
<button onClick={() => setOpen(false)}>Close</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Auto Focus
|
||||||
|
|
||||||
|
Use the `autoFocus` to auto focus to the first focusable element within the `ModalFocus` once it mounts
|
||||||
|
|
||||||
|
Defaults to `true`
|
||||||
|
|
||||||
|
<Canvas>
|
||||||
|
<Story id="components-componentlibrary-modalfocus--auto-focus" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
BorderColor,
|
||||||
|
DISPLAY,
|
||||||
|
FLEX_DIRECTION,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import { ModalFocus } from '../../component-library';
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
|
<button onClick={() => setOpen(true)} marginBottom={4}>
|
||||||
|
Open
|
||||||
|
</button>;
|
||||||
|
{
|
||||||
|
open && (
|
||||||
|
<ModalFocus autoFocus={false}>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<p>auto focus set to false</p>
|
||||||
|
<button onClick={() => setOpen(false)}>Close</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
2
ui/components/component-library/modal-focus/index.ts
Normal file
2
ui/components/component-library/modal-focus/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { ModalFocus } from './modal-focus';
|
||||||
|
export type { ModalFocusProps } from './modal-focus.types';
|
||||||
@ -0,0 +1,158 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import {
|
||||||
|
BorderColor,
|
||||||
|
DISPLAY,
|
||||||
|
FLEX_DIRECTION,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
import { ModalFocus } from './modal-focus';
|
||||||
|
import README from './README.mdx';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Components/ComponentLibrary/ModalFocus',
|
||||||
|
component: ModalFocus,
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
page: README,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
children: (
|
||||||
|
<>
|
||||||
|
<p>Modal focus children</p>
|
||||||
|
<input />
|
||||||
|
<p>
|
||||||
|
Use the keyboard to try tabbing around you will notice that the focus
|
||||||
|
is locked to the content within modal focus
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
} as ComponentMeta<typeof ModalFocus>;
|
||||||
|
|
||||||
|
const Template: ComponentStory<typeof ModalFocus> = (args) => {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button onClick={() => setOpen(true)}>Open</button>
|
||||||
|
{open && (
|
||||||
|
<ModalFocus {...args}>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
{args.children}
|
||||||
|
<button onClick={() => setOpen(false)}>Close</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DefaultStory = Template.bind({});
|
||||||
|
DefaultStory.storyName = 'Default';
|
||||||
|
|
||||||
|
export const Children = Template.bind({});
|
||||||
|
Children.args = {
|
||||||
|
children: (
|
||||||
|
<>
|
||||||
|
<p>Modal focus children</p>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
export const InitialFocusRef = (args) => {
|
||||||
|
const ref = React.useRef<HTMLButtonElement>(null);
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button onClick={() => setOpen(true)}>Open</button>
|
||||||
|
{open && (
|
||||||
|
<ModalFocus {...args} initialFocusRef={ref}>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<input />
|
||||||
|
{args.children}
|
||||||
|
<button ref={ref} onClick={() => setOpen(false)}>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
InitialFocusRef.args = {
|
||||||
|
children: <p>Initial focus is on the close button</p>,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FinalFocusRef = (args) => {
|
||||||
|
const ref = React.useRef<HTMLInputElement>(null);
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box display={DISPLAY.FLEX} gap={4}>
|
||||||
|
<button onClick={() => setOpen(true)}>Open</button>
|
||||||
|
<input placeholder="Focus will return here" ref={ref} />
|
||||||
|
</Box>
|
||||||
|
{open && (
|
||||||
|
<ModalFocus {...args} finalFocusRef={ref}>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<p>Focus will be returned to the input once closed</p>
|
||||||
|
<button onClick={() => setOpen(false)}>Close</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RestoreFocus = (args) => {
|
||||||
|
const ref = React.useRef<HTMLButtonElement>(null);
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button ref={ref} onClick={() => setOpen(!open)}>
|
||||||
|
Open
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<ModalFocus {...args} restoreFocus>
|
||||||
|
<Box
|
||||||
|
padding={4}
|
||||||
|
borderColor={BorderColor.borderDefault}
|
||||||
|
display={DISPLAY.FLEX}
|
||||||
|
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<p>Focus will be restored to the open button once closed</p>
|
||||||
|
<button onClick={() => setOpen(false)}>Close</button>
|
||||||
|
</Box>
|
||||||
|
</ModalFocus>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AutoFocus = Template.bind({});
|
||||||
|
AutoFocus.args = {
|
||||||
|
autoFocus: false,
|
||||||
|
children: <p>auto focus set to false</p>,
|
||||||
|
};
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
/* eslint-disable jest/require-top-level-describe */
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { ModalFocus } from './modal-focus';
|
||||||
|
|
||||||
|
describe('ModalFocus', () => {
|
||||||
|
it('should render with children inside the ModalFocus', () => {
|
||||||
|
const { getByText } = render(
|
||||||
|
<ModalFocus>
|
||||||
|
<div>modal focus</div>
|
||||||
|
</ModalFocus>,
|
||||||
|
);
|
||||||
|
expect(getByText('modal focus')).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render with the initial element focused', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<ModalFocus>
|
||||||
|
<input data-testid="input" />
|
||||||
|
</ModalFocus>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('input')).toHaveFocus();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render with focused with autoFocus is set to false', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<ModalFocus autoFocus={false}>
|
||||||
|
<input data-testid="input" />
|
||||||
|
</ModalFocus>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('input')).not.toHaveFocus();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should focus initialFocusRef on render', () => {
|
||||||
|
const ref: React.RefObject<HTMLInputElement> = React.createRef();
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<ModalFocus initialFocusRef={ref}>
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<input data-testid="input" ref={ref} />
|
||||||
|
</ModalFocus>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('input')).toHaveFocus();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should focus final focus ref when closed', () => {
|
||||||
|
const finalRef: React.RefObject<HTMLButtonElement> = React.createRef();
|
||||||
|
const { rerender, getByRole } = render(
|
||||||
|
<>
|
||||||
|
<button ref={finalRef}>button</button>
|
||||||
|
<ModalFocus finalFocusRef={finalRef}>
|
||||||
|
<div>modal focus</div>
|
||||||
|
</ModalFocus>
|
||||||
|
</>,
|
||||||
|
);
|
||||||
|
expect(finalRef.current).not.toHaveFocus();
|
||||||
|
rerender(<button ref={finalRef}>button</button>);
|
||||||
|
expect(getByRole('button')).toHaveFocus();
|
||||||
|
});
|
||||||
|
});
|
||||||
46
ui/components/component-library/modal-focus/modal-focus.tsx
Normal file
46
ui/components/component-library/modal-focus/modal-focus.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import ReactFocusLock from 'react-focus-lock';
|
||||||
|
import type { ModalFocusProps } from './modal-focus.types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Based on the ModalFocusScope component from chakra-ui
|
||||||
|
* https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/modal/src/modal-focus.tsx
|
||||||
|
*/
|
||||||
|
|
||||||
|
const FocusTrap: typeof ReactFocusLock =
|
||||||
|
(ReactFocusLock as any).default ?? ReactFocusLock;
|
||||||
|
|
||||||
|
export const ModalFocus: React.FC<ModalFocusProps> = ({
|
||||||
|
initialFocusRef,
|
||||||
|
finalFocusRef,
|
||||||
|
restoreFocus,
|
||||||
|
children,
|
||||||
|
autoFocus,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const onActivation = useCallback(() => {
|
||||||
|
if (initialFocusRef?.current) {
|
||||||
|
initialFocusRef.current.focus();
|
||||||
|
}
|
||||||
|
}, [initialFocusRef]);
|
||||||
|
|
||||||
|
const onDeactivation = useCallback(() => {
|
||||||
|
finalFocusRef?.current?.focus();
|
||||||
|
}, [finalFocusRef]);
|
||||||
|
|
||||||
|
const returnFocus = restoreFocus && !finalFocusRef;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FocusTrap
|
||||||
|
autoFocus={autoFocus}
|
||||||
|
onActivation={onActivation}
|
||||||
|
onDeactivation={onDeactivation}
|
||||||
|
returnFocus={returnFocus}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</FocusTrap>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ModalFocus.displayName = 'ModalFocus';
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export interface FocusableElement {
|
||||||
|
focus(options?: FocusOptions): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ModalFocusProps {
|
||||||
|
/**
|
||||||
|
* The `ref` of the element to receive focus initially
|
||||||
|
*/
|
||||||
|
initialFocusRef?: React.RefObject<FocusableElement>;
|
||||||
|
/**
|
||||||
|
* The `ref` of the element to return focus to when `ModalFocus`
|
||||||
|
* unmounts
|
||||||
|
*/
|
||||||
|
finalFocusRef?: React.RefObject<FocusableElement>;
|
||||||
|
/**
|
||||||
|
* If `true`, focus will be restored to the element that
|
||||||
|
* triggered the `ModalFocus` once it unmounts
|
||||||
|
*
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
restoreFocus?: boolean;
|
||||||
|
/**
|
||||||
|
* The node to lock focus to
|
||||||
|
*/
|
||||||
|
children: React.ReactNode;
|
||||||
|
/**
|
||||||
|
* If `true`, the first focusable element within the `children`
|
||||||
|
* will auto-focused once `ModalFocus` mounts
|
||||||
|
*
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
autoFocus?: boolean;
|
||||||
|
}
|
||||||
90
yarn.lock
90
yarn.lock
@ -1627,6 +1627,15 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@babel/runtime@npm:^7.12.13":
|
||||||
|
version: 7.21.0
|
||||||
|
resolution: "@babel/runtime@npm:7.21.0"
|
||||||
|
dependencies:
|
||||||
|
regenerator-runtime: ^0.13.11
|
||||||
|
checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@babel/runtime@patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch::locator=metamask-crx%40workspace%3A.":
|
"@babel/runtime@patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch::locator=metamask-crx%40workspace%3A.":
|
||||||
version: 7.18.9
|
version: 7.18.9
|
||||||
resolution: "@babel/runtime@patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch::version=7.18.9&hash=918bda&locator=metamask-crx%40workspace%3A."
|
resolution: "@babel/runtime@patch:@babel/runtime@npm%3A7.18.9#./.yarn/patches/@babel-runtime-npm-7.18.9-28ca6b5f61.patch::version=7.18.9&hash=918bda&locator=metamask-crx%40workspace%3A."
|
||||||
@ -13947,6 +13956,13 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"detect-node-es@npm:^1.1.0":
|
||||||
|
version: 1.1.0
|
||||||
|
resolution: "detect-node-es@npm:1.1.0"
|
||||||
|
checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"detect-node@npm:^2.0.4":
|
"detect-node@npm:^2.0.4":
|
||||||
version: 2.0.4
|
version: 2.0.4
|
||||||
resolution: "detect-node@npm:2.0.4"
|
resolution: "detect-node@npm:2.0.4"
|
||||||
@ -17201,6 +17217,15 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"focus-lock@npm:^0.11.6":
|
||||||
|
version: 0.11.6
|
||||||
|
resolution: "focus-lock@npm:0.11.6"
|
||||||
|
dependencies:
|
||||||
|
tslib: ^2.0.3
|
||||||
|
checksum: 6a407c4c45f05f8258f92565541fc5f8043f576643a7603eb999e1a790173e08712056766ed034ccd31c6d6deed259dea558002712fa5ef2432fc6930b9c7a05
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.0":
|
"follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.0":
|
||||||
version: 1.15.2
|
version: 1.15.2
|
||||||
resolution: "follow-redirects@npm:1.15.2"
|
resolution: "follow-redirects@npm:1.15.2"
|
||||||
@ -24282,6 +24307,7 @@ __metadata:
|
|||||||
react: ^16.12.0
|
react: ^16.12.0
|
||||||
react-devtools: ^4.11.0
|
react-devtools: ^4.11.0
|
||||||
react-dom: ^16.12.0
|
react-dom: ^16.12.0
|
||||||
|
react-focus-lock: ^2.9.4
|
||||||
react-idle-timer: ^4.2.5
|
react-idle-timer: ^4.2.5
|
||||||
react-inspector: ^2.3.0
|
react-inspector: ^2.3.0
|
||||||
react-markdown: ^6.0.3
|
react-markdown: ^6.0.3
|
||||||
@ -28298,6 +28324,17 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"react-clientside-effect@npm:^1.2.6":
|
||||||
|
version: 1.2.6
|
||||||
|
resolution: "react-clientside-effect@npm:1.2.6"
|
||||||
|
dependencies:
|
||||||
|
"@babel/runtime": ^7.12.13
|
||||||
|
peerDependencies:
|
||||||
|
react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||||
|
checksum: 7db6110027a51458b1a46109d2b63dd822825f483c71afef7c0c0a671f3b1aa155049dbd8651c9d536ffac83601f8823b7c3f8916b4f4ee5c3cb7647a85cce4e
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"react-colorful@npm:^5.1.2":
|
"react-colorful@npm:^5.1.2":
|
||||||
version: 5.3.0
|
version: 5.3.0
|
||||||
resolution: "react-colorful@npm:5.3.0"
|
resolution: "react-colorful@npm:5.3.0"
|
||||||
@ -28416,6 +28453,26 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"react-focus-lock@npm:^2.9.4":
|
||||||
|
version: 2.9.4
|
||||||
|
resolution: "react-focus-lock@npm:2.9.4"
|
||||||
|
dependencies:
|
||||||
|
"@babel/runtime": ^7.0.0
|
||||||
|
focus-lock: ^0.11.6
|
||||||
|
prop-types: ^15.6.2
|
||||||
|
react-clientside-effect: ^1.2.6
|
||||||
|
use-callback-ref: ^1.3.0
|
||||||
|
use-sidecar: ^1.1.2
|
||||||
|
peerDependencies:
|
||||||
|
"@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
"@types/react":
|
||||||
|
optional: true
|
||||||
|
checksum: f4c696bdbde5008560388622b994c00502d1faeeabff32b02964770c8c020208872f5f6b914b249a8bf3e97cc12e58bb0d227cd33460093654156b7b7f4c8d76
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"react-idle-timer@npm:^4.2.5":
|
"react-idle-timer@npm:^4.2.5":
|
||||||
version: 4.2.5
|
version: 4.2.5
|
||||||
resolution: "react-idle-timer@npm:4.2.5"
|
resolution: "react-idle-timer@npm:4.2.5"
|
||||||
@ -29058,7 +29115,7 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"regenerator-runtime@npm:^0.13.9":
|
"regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.9":
|
||||||
version: 0.13.11
|
version: 0.13.11
|
||||||
resolution: "regenerator-runtime@npm:0.13.11"
|
resolution: "regenerator-runtime@npm:0.13.11"
|
||||||
checksum: 27481628d22a1c4e3ff551096a683b424242a216fee44685467307f14d58020af1e19660bf2e26064de946bad7eff28950eae9f8209d55723e2d9351e632bbb4
|
checksum: 27481628d22a1c4e3ff551096a683b424242a216fee44685467307f14d58020af1e19660bf2e26064de946bad7eff28950eae9f8209d55723e2d9351e632bbb4
|
||||||
@ -33779,6 +33836,37 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"use-callback-ref@npm:^1.3.0":
|
||||||
|
version: 1.3.0
|
||||||
|
resolution: "use-callback-ref@npm:1.3.0"
|
||||||
|
dependencies:
|
||||||
|
tslib: ^2.0.0
|
||||||
|
peerDependencies:
|
||||||
|
"@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
"@types/react":
|
||||||
|
optional: true
|
||||||
|
checksum: 7913df383a5a6fcb399212eedefaac2e0c6f843555202d4e3010bac3848afe38ecaa3d0d6500ad1d936fbeffd637e6c517e68edb024af5e6beca7f27f3ce7b21
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
|
"use-sidecar@npm:^1.1.2":
|
||||||
|
version: 1.1.2
|
||||||
|
resolution: "use-sidecar@npm:1.1.2"
|
||||||
|
dependencies:
|
||||||
|
detect-node-es: ^1.1.0
|
||||||
|
tslib: ^2.0.0
|
||||||
|
peerDependencies:
|
||||||
|
"@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
|
||||||
|
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
"@types/react":
|
||||||
|
optional: true
|
||||||
|
checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"use@npm:^3.1.0":
|
"use@npm:^3.1.0":
|
||||||
version: 3.1.0
|
version: 3.1.0
|
||||||
resolution: "use@npm:3.1.0"
|
resolution: "use@npm:3.1.0"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user