@coinbase/cds-mcp-server 8.37.0 → 8.37.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/web/components/FocusTrap.txt +150 -0
- package/mcp-docs/web/routes.txt +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.37.1 ((1/14/2026, 12:37 PM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
11
15
|
## 8.37.0 ((1/12/2026, 02:16 PM PST))
|
|
12
16
|
|
|
13
17
|
This is an artificial version bump with no new change.
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
# FocusTrap
|
|
2
|
+
|
|
3
|
+
FocusTrap is a component that traps focus within its children.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { FocusTrap } from '@coinbase/cds-web/overlays/FocusTrap'
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Examples
|
|
12
|
+
|
|
13
|
+
:::note Before using FocusTrap
|
|
14
|
+
`<FocusTrap>` is intended to prevent keyboard users from interacting with elements on the page that a mouse user cannot interact with either. An example of this is `<Modal>` where the user cannot click the items behind the modal. If you want to shift focus based on UI events, consider using the [.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) method instead.
|
|
15
|
+
:::
|
|
16
|
+
|
|
17
|
+
:::warning Accessibility
|
|
18
|
+
It is **required** that when using a `<FocusTrap>` there is logic using only key presses to escape the focus trap. Otherwise, keyboard users will be blocked after they enter a `<FocusTrap>`.
|
|
19
|
+
:::
|
|
20
|
+
|
|
21
|
+
### Basic example
|
|
22
|
+
|
|
23
|
+
:::note
|
|
24
|
+
All the examples have controls to enable / disable the focus trap so that page keyboard navigation isn't blocked.
|
|
25
|
+
:::
|
|
26
|
+
|
|
27
|
+
When enabled, only the children of the `<FocusTrap>` will be able to receive focus. Otherwise, standard DOM focus order follows.
|
|
28
|
+
|
|
29
|
+
```jsx live
|
|
30
|
+
function Example() {
|
|
31
|
+
const [focusTrapEnabled, setFocusTrapEnabled] = useState(false);
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<VStack gap={2}>
|
|
35
|
+
<Checkbox
|
|
36
|
+
checked={focusTrapEnabled}
|
|
37
|
+
onChange={() => setFocusTrapEnabled((prev) => !prev)}
|
|
38
|
+
label="Focus trap enabled"
|
|
39
|
+
/>
|
|
40
|
+
{focusTrapEnabled && (
|
|
41
|
+
<FocusTrap>
|
|
42
|
+
<VStack gap={2} background="bgAlternate" padding={2}>
|
|
43
|
+
<Text>Inside FocusTrap</Text>
|
|
44
|
+
<HStack gap={1}>
|
|
45
|
+
<Button>1</Button>
|
|
46
|
+
<Button>2</Button>
|
|
47
|
+
<Button>3</Button>
|
|
48
|
+
</HStack>
|
|
49
|
+
<Checkbox
|
|
50
|
+
checked={focusTrapEnabled}
|
|
51
|
+
onChange={() => setFocusTrapEnabled((prev) => !prev)}
|
|
52
|
+
label="Focus trap enabled"
|
|
53
|
+
/>
|
|
54
|
+
</VStack>
|
|
55
|
+
</FocusTrap>
|
|
56
|
+
)}
|
|
57
|
+
</VStack>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Include trigger in FocusTrap
|
|
63
|
+
|
|
64
|
+
The `includeTriggerInFocusTrap` prop includes the triggering element causing the `<FocusTrap>` to render as part of the focus order.
|
|
65
|
+
|
|
66
|
+
```jsx live
|
|
67
|
+
function Example() {
|
|
68
|
+
const [focusTrapEnabled, setFocusTrapEnabled] = useState(false);
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<VStack gap={2}>
|
|
72
|
+
<Checkbox
|
|
73
|
+
checked={focusTrapEnabled}
|
|
74
|
+
onChange={() => setFocusTrapEnabled((prev) => !prev)}
|
|
75
|
+
label="Focus trap enabled"
|
|
76
|
+
/>
|
|
77
|
+
{focusTrapEnabled && (
|
|
78
|
+
<FocusTrap includeTriggerInFocusTrap>
|
|
79
|
+
<VStack gap={2} background="bgAlternate" padding={2}>
|
|
80
|
+
<Text>Inside FocusTrap</Text>
|
|
81
|
+
<HStack gap={1}>
|
|
82
|
+
<Button>1</Button>
|
|
83
|
+
<Button>2</Button>
|
|
84
|
+
<Button>3</Button>
|
|
85
|
+
</HStack>
|
|
86
|
+
<Checkbox
|
|
87
|
+
checked={focusTrapEnabled}
|
|
88
|
+
onChange={() => setFocusTrapEnabled((prev) => !prev)}
|
|
89
|
+
label="Focus trap enabled"
|
|
90
|
+
/>
|
|
91
|
+
</VStack>
|
|
92
|
+
</FocusTrap>
|
|
93
|
+
)}
|
|
94
|
+
</VStack>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Restore focus on unmount
|
|
100
|
+
|
|
101
|
+
The `restoreFocusOnUnmount` prop returns focus to the triggering element when the `<FocusTrap>` is unmounted.
|
|
102
|
+
|
|
103
|
+
```jsx live
|
|
104
|
+
function Example() {
|
|
105
|
+
const [focusTrapEnabled, setFocusTrapEnabled] = useState(false);
|
|
106
|
+
|
|
107
|
+
return (
|
|
108
|
+
<VStack gap={2}>
|
|
109
|
+
<Checkbox
|
|
110
|
+
checked={focusTrapEnabled}
|
|
111
|
+
onChange={() => setFocusTrapEnabled((prev) => !prev)}
|
|
112
|
+
label="Focus trap enabled"
|
|
113
|
+
/>
|
|
114
|
+
{focusTrapEnabled && (
|
|
115
|
+
<FocusTrap restoreFocusOnUnmount>
|
|
116
|
+
<VStack gap={2} background="bgAlternate" padding={2}>
|
|
117
|
+
<Text>Inside FocusTrap</Text>
|
|
118
|
+
<HStack gap={1}>
|
|
119
|
+
<Button>1</Button>
|
|
120
|
+
<Button>2</Button>
|
|
121
|
+
<Button>3</Button>
|
|
122
|
+
</HStack>
|
|
123
|
+
<Checkbox
|
|
124
|
+
checked={focusTrapEnabled}
|
|
125
|
+
onChange={() => setFocusTrapEnabled((prev) => !prev)}
|
|
126
|
+
label="Focus trap enabled"
|
|
127
|
+
/>
|
|
128
|
+
</VStack>
|
|
129
|
+
</FocusTrap>
|
|
130
|
+
)}
|
|
131
|
+
</VStack>
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## Props
|
|
137
|
+
|
|
138
|
+
| Prop | Type | Required | Default | Description |
|
|
139
|
+
| --- | --- | --- | --- | --- |
|
|
140
|
+
| `autoFocusDelay` | `number` | No | `undefined` | The amount of time in milliseconds to wait before auto-focusing the first focusable element. |
|
|
141
|
+
| `disableAutoFocus` | `boolean` | No | `false` | If true, the focus trap will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. |
|
|
142
|
+
| `disableFocusTrap` | `boolean` | No | `-` | Disables the focus trap to allow normal keyboard navigation. |
|
|
143
|
+
| `disableTypeFocus` | `boolean` | No | `-` | Use for editable Search Input components to ensure focus is correctly applied |
|
|
144
|
+
| `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
|
|
145
|
+
| `includeTriggerInFocusTrap` | `boolean` | No | `-` | If true, the focus trap will include the trigger in the focus trap. |
|
|
146
|
+
| `onEscPress` | `(() => void)` | No | `-` | - |
|
|
147
|
+
| `respectNegativeTabIndex` | `boolean` | No | `false` | If true, the focus trap will respect negative tabIndex values, removing them from the list of focusable elements. |
|
|
148
|
+
| `restoreFocusOnUnmount` | `boolean` | No | `false` | If true, the focus trap will restore focus to the previously focused element when it unmounts. |
|
|
149
|
+
|
|
150
|
+
|
package/mcp-docs/web/routes.txt
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
- [FullscreenModalLayout](web/components/FullscreenModalLayout.txt): Provides the layout structure, overlay, focus trapping, and animations for fullscreen modals. Intended for internal use within Modal component variants.
|
|
29
29
|
- [FullscreenModal](web/components/FullscreenModal.txt): FullscreenModal is a component that displays content in a full-screen overlay, typically used for immersive experiences or complex interactions.
|
|
30
30
|
- [FullscreenAlert](web/components/FullscreenAlert.txt): A fullscreen alert component for displaying important messages that require user attention.
|
|
31
|
+
- [FocusTrap](web/components/FocusTrap.txt): FocusTrap is a component that traps focus within its children.
|
|
31
32
|
- [Alert](web/components/Alert.txt): A dialog that communicates critical information and blocks user interaction.
|
|
32
33
|
- [ThemeProvider](web/components/ThemeProvider.txt): Provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.
|
|
33
34
|
- [MediaQueryProvider](web/components/MediaQueryProvider.txt): Manages window.matchMedia subscriptions with SSR support.
|