@atlaskit/focus-ring 1.4.0 → 1.4.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 +134 -126
- package/LICENSE.md +6 -8
- package/dist/cjs/focus-ring.js +19 -4
- package/dist/es2019/focus-ring.js +19 -4
- package/dist/esm/focus-ring.js +19 -4
- package/dist/types/focus-ring.d.ts +1 -1
- package/dist/types-ts4.5/focus-ring.d.ts +1 -1
- package/package.json +78 -79
- package/report.api.md +12 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,344 +1,352 @@
|
|
|
1
1
|
# @atlaskit/focus-ring
|
|
2
2
|
|
|
3
|
+
## 1.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#111297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111297)
|
|
8
|
+
[`5f51c15a6d33f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5f51c15a6d33f) -
|
|
9
|
+
Adds a `:focus` style reset to prevent `:focus` styles with lower specificity from leaking
|
|
10
|
+
through.
|
|
11
|
+
|
|
3
12
|
## 1.4.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
|
6
15
|
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
|
|
16
|
+
- [#96204](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96204)
|
|
17
|
+
[`a53c45efeac1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a53c45efeac1) -
|
|
18
|
+
Add support for React 18 in non-strict mode.
|
|
10
19
|
|
|
11
20
|
## 1.3.9
|
|
12
21
|
|
|
13
22
|
### Patch Changes
|
|
14
23
|
|
|
15
|
-
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
behaviour.
|
|
24
|
+
- [#83297](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83297)
|
|
25
|
+
[`6b1707c169e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b1707c169e0) -
|
|
26
|
+
The internal composition of this component has changed. There is no expected change in behaviour.
|
|
19
27
|
|
|
20
28
|
## 1.3.8
|
|
21
29
|
|
|
22
30
|
### Patch Changes
|
|
23
31
|
|
|
24
|
-
-
|
|
25
|
-
|
|
26
|
-
|
|
32
|
+
- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)
|
|
33
|
+
[`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -
|
|
34
|
+
Upgrade Typescript from `4.9.5` to `5.4.2`
|
|
27
35
|
|
|
28
36
|
## 1.3.7
|
|
29
37
|
|
|
30
38
|
### Patch Changes
|
|
31
39
|
|
|
32
|
-
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
40
|
+
- [#72130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72130)
|
|
41
|
+
[`b037e5451037`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b037e5451037) -
|
|
42
|
+
Update new button text color fallback for default theme (non-token) to match that of old button
|
|
43
|
+
current text color
|
|
36
44
|
|
|
37
45
|
## 1.3.6
|
|
38
46
|
|
|
39
47
|
### Patch Changes
|
|
40
48
|
|
|
41
|
-
-
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
- [#39309](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39309)
|
|
50
|
+
[`1e90520801a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e90520801a) - Added
|
|
51
|
+
this package into push model consumption.
|
|
44
52
|
|
|
45
53
|
## 1.3.5
|
|
46
54
|
|
|
47
55
|
### Patch Changes
|
|
48
56
|
|
|
49
|
-
-
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
- [#38098](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38098)
|
|
58
|
+
[`63ee052ee1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63ee052ee1b) - Fix
|
|
59
|
+
focus-ring border width token with `border.width.outline`
|
|
52
60
|
|
|
53
61
|
## 1.3.4
|
|
54
62
|
|
|
55
63
|
### Patch Changes
|
|
56
64
|
|
|
57
|
-
-
|
|
58
|
-
|
|
59
|
-
|
|
65
|
+
- [#37186](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37186)
|
|
66
|
+
[`ce22a54e852`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ce22a54e852) - [ux]
|
|
67
|
+
update focus ring outline border.focused fallback to B200 to meet contrast
|
|
60
68
|
|
|
61
69
|
## 1.3.3
|
|
62
70
|
|
|
63
71
|
### Patch Changes
|
|
64
72
|
|
|
65
|
-
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
73
|
+
- [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935)
|
|
74
|
+
[`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal
|
|
75
|
+
change to enforce token usage for spacing properties. There is no expected visual or behaviour
|
|
76
|
+
change.
|
|
69
77
|
|
|
70
78
|
## 1.3.2
|
|
71
79
|
|
|
72
80
|
### Patch Changes
|
|
73
81
|
|
|
74
|
-
-
|
|
75
|
-
|
|
76
|
-
|
|
82
|
+
- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793)
|
|
83
|
+
[`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure
|
|
84
|
+
legacy types are published for TS 4.5-4.8
|
|
77
85
|
|
|
78
86
|
## 1.3.1
|
|
79
87
|
|
|
80
88
|
### Patch Changes
|
|
81
89
|
|
|
82
|
-
-
|
|
83
|
-
|
|
84
|
-
|
|
90
|
+
- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649)
|
|
91
|
+
[`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade
|
|
92
|
+
Typescript from `4.5.5` to `4.9.5`
|
|
85
93
|
|
|
86
94
|
## 1.3.0
|
|
87
95
|
|
|
88
96
|
### Minor Changes
|
|
89
97
|
|
|
90
|
-
-
|
|
91
|
-
|
|
92
|
-
|
|
98
|
+
- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258)
|
|
99
|
+
[`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip
|
|
100
|
+
minor dependency bump
|
|
93
101
|
|
|
94
102
|
### Patch Changes
|
|
95
103
|
|
|
96
|
-
-
|
|
104
|
+
- Updated dependencies
|
|
97
105
|
|
|
98
106
|
## 1.2.6
|
|
99
107
|
|
|
100
108
|
### Patch Changes
|
|
101
109
|
|
|
102
|
-
-
|
|
103
|
-
|
|
104
|
-
|
|
110
|
+
- [#31299](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31299)
|
|
111
|
+
[`c23cf0b085d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c23cf0b085d) - Adds
|
|
112
|
+
display name to component for React devtools debugging.
|
|
105
113
|
|
|
106
114
|
## 1.2.5
|
|
107
115
|
|
|
108
116
|
### Patch Changes
|
|
109
117
|
|
|
110
|
-
-
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
- [#30125](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/30125)
|
|
119
|
+
[`7f5f23dcb68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f5f23dcb68) -
|
|
120
|
+
Introduce shape tokens to some packages.
|
|
113
121
|
|
|
114
122
|
## 1.2.4
|
|
115
123
|
|
|
116
124
|
### Patch Changes
|
|
117
125
|
|
|
118
|
-
-
|
|
126
|
+
- Updated dependencies
|
|
119
127
|
|
|
120
128
|
## 1.2.3
|
|
121
129
|
|
|
122
130
|
### Patch Changes
|
|
123
131
|
|
|
124
|
-
-
|
|
132
|
+
- Updated dependencies
|
|
125
133
|
|
|
126
134
|
## 1.2.2
|
|
127
135
|
|
|
128
136
|
### Patch Changes
|
|
129
137
|
|
|
130
|
-
-
|
|
138
|
+
- Updated dependencies
|
|
131
139
|
|
|
132
140
|
## 1.2.1
|
|
133
141
|
|
|
134
142
|
### Patch Changes
|
|
135
143
|
|
|
136
|
-
-
|
|
144
|
+
- Updated dependencies
|
|
137
145
|
|
|
138
146
|
## 1.2.0
|
|
139
147
|
|
|
140
148
|
### Minor Changes
|
|
141
149
|
|
|
142
|
-
-
|
|
143
|
-
|
|
144
|
-
|
|
150
|
+
- [#26244](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26244)
|
|
151
|
+
[`71bf011db22`](https://bitbucket.org/atlassian/atlassian-frontend/commits/71bf011db22) - Focus
|
|
152
|
+
ring inset styles are now applied via outline - consistent with offset styles.
|
|
145
153
|
|
|
146
154
|
## 1.1.0
|
|
147
155
|
|
|
148
156
|
### Minor Changes
|
|
149
157
|
|
|
150
|
-
-
|
|
151
|
-
|
|
152
|
-
|
|
158
|
+
- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710)
|
|
159
|
+
[`b5d79ded842`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5d79ded842) - Updates
|
|
160
|
+
`@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
|
|
153
161
|
|
|
154
162
|
## 1.0.7
|
|
155
163
|
|
|
156
164
|
### Patch Changes
|
|
157
165
|
|
|
158
|
-
-
|
|
159
|
-
|
|
160
|
-
|
|
166
|
+
- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874)
|
|
167
|
+
[`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade
|
|
168
|
+
Typescript from `4.3.5` to `4.5.5`
|
|
161
169
|
|
|
162
170
|
## 1.0.6
|
|
163
171
|
|
|
164
172
|
### Patch Changes
|
|
165
173
|
|
|
166
|
-
-
|
|
167
|
-
|
|
168
|
-
|
|
174
|
+
- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492)
|
|
175
|
+
[`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade
|
|
176
|
+
Typescript from `4.2.4` to `4.3.5`.
|
|
169
177
|
|
|
170
178
|
## 1.0.5
|
|
171
179
|
|
|
172
180
|
### Patch Changes
|
|
173
181
|
|
|
174
|
-
-
|
|
182
|
+
- Updated dependencies
|
|
175
183
|
|
|
176
184
|
## 1.0.4
|
|
177
185
|
|
|
178
186
|
### Patch Changes
|
|
179
187
|
|
|
180
|
-
-
|
|
181
|
-
|
|
182
|
-
|
|
188
|
+
- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650)
|
|
189
|
+
[`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade
|
|
190
|
+
to TypeScript 4.2.4
|
|
183
191
|
|
|
184
192
|
## 1.0.3
|
|
185
193
|
|
|
186
194
|
### Patch Changes
|
|
187
195
|
|
|
188
|
-
-
|
|
196
|
+
- Updated dependencies
|
|
189
197
|
|
|
190
198
|
## 1.0.2
|
|
191
199
|
|
|
192
200
|
### Patch Changes
|
|
193
201
|
|
|
194
|
-
-
|
|
202
|
+
- Updated dependencies
|
|
195
203
|
|
|
196
204
|
## 1.0.1
|
|
197
205
|
|
|
198
206
|
### Patch Changes
|
|
199
207
|
|
|
200
|
-
-
|
|
208
|
+
- Updated dependencies
|
|
201
209
|
|
|
202
210
|
## 1.0.0
|
|
203
211
|
|
|
204
212
|
### Major Changes
|
|
205
213
|
|
|
206
|
-
-
|
|
207
|
-
|
|
208
|
-
|
|
214
|
+
- [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752)
|
|
215
|
+
[`3e1a93c6b67`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e1a93c6b67) - Releases
|
|
216
|
+
FocusRing to v1.
|
|
209
217
|
|
|
210
218
|
### Minor Changes
|
|
211
219
|
|
|
212
|
-
-
|
|
213
|
-
|
|
214
|
-
|
|
220
|
+
- [`63b8679585b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63b8679585b) - Adds an
|
|
221
|
+
additional prop `focus` to the `FocusRing` to allow the component to also be controlled. This prop
|
|
222
|
+
is designed to be used in conjunction with a complementary hook; `useFocusRing`.
|
|
215
223
|
|
|
216
224
|
## 0.2.7
|
|
217
225
|
|
|
218
226
|
### Patch Changes
|
|
219
227
|
|
|
220
|
-
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
-
|
|
228
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates
|
|
229
|
+
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
|
|
230
|
+
visual changes
|
|
231
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] The
|
|
232
|
+
component has reworked its internal so that it can now better deal with issues where the
|
|
233
|
+
background-color was obscured by the focus-ring box shadow.
|
|
234
|
+
- Updated dependencies
|
|
227
235
|
|
|
228
236
|
## 0.2.6
|
|
229
237
|
|
|
230
238
|
### Patch Changes
|
|
231
239
|
|
|
232
|
-
-
|
|
240
|
+
- Updated dependencies
|
|
233
241
|
|
|
234
242
|
## 0.2.5
|
|
235
243
|
|
|
236
244
|
### Patch Changes
|
|
237
245
|
|
|
238
|
-
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
-
|
|
246
|
+
- [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998)
|
|
247
|
+
[`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds
|
|
248
|
+
for this package now pass through a tokens babel plugin, removing runtime invocations of the
|
|
249
|
+
tokens() function and improving bundle size.
|
|
250
|
+
- Updated dependencies
|
|
243
251
|
|
|
244
252
|
## 0.2.4
|
|
245
253
|
|
|
246
254
|
### Patch Changes
|
|
247
255
|
|
|
248
|
-
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
-
|
|
256
|
+
- [#14777](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14777)
|
|
257
|
+
[`6c1c909296d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c1c909296d) - [ux]
|
|
258
|
+
When composing elements that define class name they will now be correctly retained.
|
|
259
|
+
- Updated dependencies
|
|
252
260
|
|
|
253
261
|
## 0.2.3
|
|
254
262
|
|
|
255
263
|
### Patch Changes
|
|
256
264
|
|
|
257
|
-
-
|
|
258
|
-
|
|
259
|
-
|
|
265
|
+
- [#15632](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15632)
|
|
266
|
+
[`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds
|
|
267
|
+
explicit type to button usages components.
|
|
260
268
|
|
|
261
269
|
## 0.2.2
|
|
262
270
|
|
|
263
271
|
### Patch Changes
|
|
264
272
|
|
|
265
|
-
-
|
|
273
|
+
- Updated dependencies
|
|
266
274
|
|
|
267
275
|
## 0.2.1
|
|
268
276
|
|
|
269
277
|
### Patch Changes
|
|
270
278
|
|
|
271
|
-
-
|
|
279
|
+
- Updated dependencies
|
|
272
280
|
|
|
273
281
|
## 0.2.0
|
|
274
282
|
|
|
275
283
|
### Minor Changes
|
|
276
284
|
|
|
277
|
-
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
-
|
|
282
|
-
|
|
285
|
+
- [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302)
|
|
286
|
+
[`c765dce3afb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c765dce3afb) - [ux]
|
|
287
|
+
Focus Ring now exposes an additional prop `isInset` to support inset focus states; for example on
|
|
288
|
+
inputs, or textfields.
|
|
289
|
+
- [`0dac09c47b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0dac09c47b6) - [ux]
|
|
290
|
+
Colors are now sourced through tokens.
|
|
283
291
|
|
|
284
292
|
### Patch Changes
|
|
285
293
|
|
|
286
|
-
-
|
|
294
|
+
- Updated dependencies
|
|
287
295
|
|
|
288
296
|
## 0.1.1
|
|
289
297
|
|
|
290
298
|
### Patch Changes
|
|
291
299
|
|
|
292
|
-
-
|
|
293
|
-
|
|
294
|
-
|
|
300
|
+
- [#13232](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13232)
|
|
301
|
+
[`9c9296f2959`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c9296f2959) - Fix bug
|
|
302
|
+
where the package was being exported from the wrong file.
|
|
295
303
|
|
|
296
304
|
## 0.1.0
|
|
297
305
|
|
|
298
306
|
### Minor Changes
|
|
299
307
|
|
|
300
|
-
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
-
|
|
304
|
-
|
|
305
|
-
|
|
308
|
+
- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837)
|
|
309
|
+
[`5ab09801cfa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5ab09801cfa) - [ux]
|
|
310
|
+
Updates focus-ring to use an offset box-shadow for its focus state.
|
|
311
|
+
- [`adaa7913de0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/adaa7913de0) - Initial
|
|
312
|
+
release for the package. A Focus Ring can be used to compose focusable elements with a simple
|
|
313
|
+
composable API.
|
|
306
314
|
|
|
307
315
|
### Patch Changes
|
|
308
316
|
|
|
309
|
-
-
|
|
317
|
+
- Updated dependencies
|
|
310
318
|
|
|
311
319
|
## 0.0.4
|
|
312
320
|
|
|
313
321
|
### Patch Changes
|
|
314
322
|
|
|
315
|
-
-
|
|
316
|
-
|
|
317
|
-
|
|
323
|
+
- [#8306](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8306)
|
|
324
|
+
[`229b32842b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/229b32842b5) - Fix
|
|
325
|
+
.npmignore and tsconfig.json for **tests**
|
|
318
326
|
|
|
319
327
|
## 0.0.3
|
|
320
328
|
|
|
321
329
|
### Patch Changes
|
|
322
330
|
|
|
323
|
-
-
|
|
324
|
-
|
|
325
|
-
|
|
331
|
+
- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857)
|
|
332
|
+
[`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile
|
|
333
|
+
packages using babel rather than tsc
|
|
326
334
|
|
|
327
335
|
## 0.0.2
|
|
328
336
|
|
|
329
337
|
### Patch Changes
|
|
330
338
|
|
|
331
|
-
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
339
|
+
- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497)
|
|
340
|
+
[`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export
|
|
341
|
+
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
|
|
342
|
+
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
|
|
343
|
+
versions here: https://atlaskit.atlassian.com/get-started Also add `typescript` to
|
|
344
|
+
`devDependencies` to denote version that the package was built with.
|
|
337
345
|
|
|
338
346
|
## 0.0.1
|
|
339
347
|
|
|
340
348
|
### Patch Changes
|
|
341
349
|
|
|
342
|
-
-
|
|
343
|
-
|
|
344
|
-
|
|
350
|
+
- [#4967](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4967)
|
|
351
|
+
[`b443b5a60f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b443b5a60f) - Renamed
|
|
352
|
+
template package
|
package/LICENSE.md
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
Copyright 2020 Atlassian Pty Ltd
|
|
2
2
|
|
|
3
|
-
Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
|
|
5
|
-
You may obtain a copy of the License at
|
|
3
|
+
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
|
|
4
|
+
compliance with the License. You may obtain a copy of the License at
|
|
6
5
|
|
|
7
6
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
8
7
|
|
|
9
|
-
Unless required by applicable law or agreed to in writing, software
|
|
10
|
-
distributed
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
limitations under the License.
|
|
8
|
+
Unless required by applicable law or agreed to in writing, software distributed under the License is
|
|
9
|
+
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
10
|
+
implied. See the License for the specific language governing permissions and limitations under the
|
|
11
|
+
License.
|
package/dist/cjs/focus-ring.js
CHANGED
|
@@ -8,6 +8,8 @@ var _react = require("react");
|
|
|
8
8
|
var _react2 = require("@emotion/react");
|
|
9
9
|
/** @jsx jsx */
|
|
10
10
|
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
12
|
+
|
|
11
13
|
var BORDER_WIDTH = 2;
|
|
12
14
|
var baseFocusOutsideStyles = (0, _react2.css)({
|
|
13
15
|
outline: "".concat(BORDER_WIDTH, "px solid ", "var(--ds-border-focused, #2684FF)"),
|
|
@@ -15,14 +17,21 @@ var baseFocusOutsideStyles = (0, _react2.css)({
|
|
|
15
17
|
});
|
|
16
18
|
var baseInsetStyles = (0, _react2.css)({
|
|
17
19
|
outlineColor: "var(--ds-border-focused, #2684FF)",
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
21
|
outlineOffset: -BORDER_WIDTH,
|
|
19
22
|
outlineStyle: 'solid',
|
|
20
23
|
outlineWidth: "var(--ds-border-width-outline, 2px)"
|
|
21
24
|
});
|
|
22
25
|
var focusRingStyles = (0, _react2.css)({
|
|
26
|
+
// Focus styles used when :focus-visible isn't supported
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
28
|
+
'&:focus': baseFocusOutsideStyles,
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
23
30
|
'&:focus-visible': baseFocusOutsideStyles,
|
|
24
|
-
|
|
25
|
-
|
|
31
|
+
// Remove default focus styles for mouse interactions if :focus-visible is supported
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
33
|
+
'&:focus:not(:focus-visible)': {
|
|
34
|
+
outline: 'none'
|
|
26
35
|
},
|
|
27
36
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
28
37
|
'&:focus-visible': {
|
|
@@ -31,9 +40,15 @@ var focusRingStyles = (0, _react2.css)({
|
|
|
31
40
|
}
|
|
32
41
|
});
|
|
33
42
|
var insetFocusRingStyles = (0, _react2.css)({
|
|
43
|
+
// Focus styles used when :focus-visible isn't supported
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
45
|
+
'&:focus': baseInsetStyles,
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
34
47
|
'&:focus-visible': baseInsetStyles,
|
|
35
|
-
|
|
36
|
-
|
|
48
|
+
// Remove default focus styles for mouse interactions if :focus-visible is supported
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
50
|
+
'&:focus:not(:focus-visible)': {
|
|
51
|
+
outline: 'none'
|
|
37
52
|
},
|
|
38
53
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
39
54
|
'&:focus-visible': {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { Children, cloneElement, memo } from 'react';
|
|
3
|
+
|
|
4
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
5
|
import { ClassNames, css, jsx } from '@emotion/react';
|
|
4
6
|
const BORDER_WIDTH = 2;
|
|
5
7
|
const baseFocusOutsideStyles = css({
|
|
@@ -8,14 +10,21 @@ const baseFocusOutsideStyles = css({
|
|
|
8
10
|
});
|
|
9
11
|
const baseInsetStyles = css({
|
|
10
12
|
outlineColor: "var(--ds-border-focused, #2684FF)",
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
11
14
|
outlineOffset: -BORDER_WIDTH,
|
|
12
15
|
outlineStyle: 'solid',
|
|
13
16
|
outlineWidth: "var(--ds-border-width-outline, 2px)"
|
|
14
17
|
});
|
|
15
18
|
const focusRingStyles = css({
|
|
19
|
+
// Focus styles used when :focus-visible isn't supported
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
21
|
+
'&:focus': baseFocusOutsideStyles,
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
16
23
|
'&:focus-visible': baseFocusOutsideStyles,
|
|
17
|
-
|
|
18
|
-
|
|
24
|
+
// Remove default focus styles for mouse interactions if :focus-visible is supported
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
26
|
+
'&:focus:not(:focus-visible)': {
|
|
27
|
+
outline: 'none'
|
|
19
28
|
},
|
|
20
29
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
21
30
|
'&:focus-visible': {
|
|
@@ -24,9 +33,15 @@ const focusRingStyles = css({
|
|
|
24
33
|
}
|
|
25
34
|
});
|
|
26
35
|
const insetFocusRingStyles = css({
|
|
36
|
+
// Focus styles used when :focus-visible isn't supported
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
+
'&:focus': baseInsetStyles,
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
27
40
|
'&:focus-visible': baseInsetStyles,
|
|
28
|
-
|
|
29
|
-
|
|
41
|
+
// Remove default focus styles for mouse interactions if :focus-visible is supported
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
43
|
+
'&:focus:not(:focus-visible)': {
|
|
44
|
+
outline: 'none'
|
|
30
45
|
},
|
|
31
46
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
32
47
|
'&:focus-visible': {
|
package/dist/esm/focus-ring.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { Children, cloneElement, memo } from 'react';
|
|
3
|
+
|
|
4
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
5
|
import { ClassNames, css, jsx } from '@emotion/react';
|
|
4
6
|
var BORDER_WIDTH = 2;
|
|
5
7
|
var baseFocusOutsideStyles = css({
|
|
@@ -8,14 +10,21 @@ var baseFocusOutsideStyles = css({
|
|
|
8
10
|
});
|
|
9
11
|
var baseInsetStyles = css({
|
|
10
12
|
outlineColor: "var(--ds-border-focused, #2684FF)",
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
11
14
|
outlineOffset: -BORDER_WIDTH,
|
|
12
15
|
outlineStyle: 'solid',
|
|
13
16
|
outlineWidth: "var(--ds-border-width-outline, 2px)"
|
|
14
17
|
});
|
|
15
18
|
var focusRingStyles = css({
|
|
19
|
+
// Focus styles used when :focus-visible isn't supported
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
21
|
+
'&:focus': baseFocusOutsideStyles,
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
16
23
|
'&:focus-visible': baseFocusOutsideStyles,
|
|
17
|
-
|
|
18
|
-
|
|
24
|
+
// Remove default focus styles for mouse interactions if :focus-visible is supported
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
26
|
+
'&:focus:not(:focus-visible)': {
|
|
27
|
+
outline: 'none'
|
|
19
28
|
},
|
|
20
29
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
21
30
|
'&:focus-visible': {
|
|
@@ -24,9 +33,15 @@ var focusRingStyles = css({
|
|
|
24
33
|
}
|
|
25
34
|
});
|
|
26
35
|
var insetFocusRingStyles = css({
|
|
36
|
+
// Focus styles used when :focus-visible isn't supported
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
+
'&:focus': baseInsetStyles,
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
27
40
|
'&:focus-visible': baseInsetStyles,
|
|
28
|
-
|
|
29
|
-
|
|
41
|
+
// Remove default focus styles for mouse interactions if :focus-visible is supported
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
43
|
+
'&:focus:not(:focus-visible)': {
|
|
44
|
+
outline: 'none'
|
|
30
45
|
},
|
|
31
46
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
32
47
|
'&:focus-visible': {
|
package/package.json
CHANGED
|
@@ -1,80 +1,79 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
2
|
+
"name": "@atlaskit/focus-ring",
|
|
3
|
+
"version": "1.4.1",
|
|
4
|
+
"description": "A focus ring is used to indicate the currently focused item.",
|
|
5
|
+
"author": "Atlassian Pty Ltd",
|
|
6
|
+
"license": "Apache-2.0",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"registry": "https://registry.npmjs.org/"
|
|
9
|
+
},
|
|
10
|
+
"atlassian": {
|
|
11
|
+
"team": "Design System Team",
|
|
12
|
+
"releaseModel": "continuous",
|
|
13
|
+
"productPushConsumption": [
|
|
14
|
+
"jira"
|
|
15
|
+
],
|
|
16
|
+
"website": {
|
|
17
|
+
"name": "Focus ring",
|
|
18
|
+
"category": "Components"
|
|
19
|
+
},
|
|
20
|
+
"runReact18": true
|
|
21
|
+
},
|
|
22
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
23
|
+
"main": "dist/cjs/index.js",
|
|
24
|
+
"module": "dist/esm/index.js",
|
|
25
|
+
"module:es2019": "dist/es2019/index.js",
|
|
26
|
+
"types": "dist/types/index.d.ts",
|
|
27
|
+
"typesVersions": {
|
|
28
|
+
">=4.5 <4.9": {
|
|
29
|
+
"*": [
|
|
30
|
+
"dist/types-ts4.5/*",
|
|
31
|
+
"dist/types-ts4.5/index.d.ts"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"sideEffects": false,
|
|
36
|
+
"atlaskit:src": "src/index.tsx",
|
|
37
|
+
"af:exports": {
|
|
38
|
+
".": "./src/index.tsx"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"@atlaskit/tokens": "^1.50.0",
|
|
42
|
+
"@babel/runtime": "^7.0.0",
|
|
43
|
+
"@emotion/react": "^11.7.1"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@af/accessibility-testing": "*",
|
|
50
|
+
"@af/visual-regression": "*",
|
|
51
|
+
"@atlaskit/textfield": "^6.3.0",
|
|
52
|
+
"@testing-library/react": "^12.1.5",
|
|
53
|
+
"react-dom": "^16.8.0",
|
|
54
|
+
"typescript": "~5.4.2",
|
|
55
|
+
"wait-for-expect": "^1.2.0"
|
|
56
|
+
},
|
|
57
|
+
"techstack": {
|
|
58
|
+
"@atlassian/frontend": {
|
|
59
|
+
"import-structure": "atlassian-conventions",
|
|
60
|
+
"circular-dependencies": "file-and-folder-level"
|
|
61
|
+
},
|
|
62
|
+
"@repo/internal": {
|
|
63
|
+
"dom-events": "use-bind-event-listener",
|
|
64
|
+
"design-system": "v1",
|
|
65
|
+
"styling": [
|
|
66
|
+
"static",
|
|
67
|
+
"emotion"
|
|
68
|
+
],
|
|
69
|
+
"ui-components": "lite-mode",
|
|
70
|
+
"analytics": "analytics-next",
|
|
71
|
+
"design-tokens": [
|
|
72
|
+
"color",
|
|
73
|
+
"spacing"
|
|
74
|
+
],
|
|
75
|
+
"deprecation": "no-deprecated-imports"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
"homepage": "https://atlaskit.atlassian.com/packages/design-system/focus-ring"
|
|
79
|
+
}
|
package/report.api.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/focus-ring"
|
|
4
4
|
|
|
5
|
-
> Do not edit this file. This report is auto-generated using
|
|
5
|
+
> Do not edit this file. This report is auto-generated using
|
|
6
|
+
> [API Extractor](https://api-extractor.com/).
|
|
6
7
|
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
8
|
|
|
8
9
|
### Table of contents
|
|
@@ -21,10 +22,10 @@ import type { ReactElement } from 'react';
|
|
|
21
22
|
|
|
22
23
|
// @public (undocumented)
|
|
23
24
|
export interface FocusEventHandlers {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
// (undocumented)
|
|
26
|
+
onBlur: FocusEventHandler;
|
|
27
|
+
// (undocumented)
|
|
28
|
+
onFocus: FocusEventHandler;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
// @public
|
|
@@ -33,9 +34,9 @@ export default FocusRing;
|
|
|
33
34
|
|
|
34
35
|
// @public (undocumented)
|
|
35
36
|
export interface FocusRingProps {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
children: ReactElement;
|
|
38
|
+
focus?: FocusState;
|
|
39
|
+
isInset?: boolean;
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
// @public (undocumented)
|
|
@@ -43,8 +44,8 @@ export type FocusState = 'off' | 'on';
|
|
|
43
44
|
|
|
44
45
|
// @public
|
|
45
46
|
export const useFocusRing: (initialState?: FocusState) => {
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
readonly focusState: 'off' | 'on';
|
|
48
|
+
readonly focusProps: FocusEventHandlers;
|
|
48
49
|
};
|
|
49
50
|
|
|
50
51
|
// (No @packageDocumentation comment for this package)
|
|
@@ -58,7 +59,7 @@ export const useFocusRing: (initialState?: FocusState) => {
|
|
|
58
59
|
|
|
59
60
|
```json
|
|
60
61
|
{
|
|
61
|
-
|
|
62
|
+
"react": "^16.8.0"
|
|
62
63
|
}
|
|
63
64
|
```
|
|
64
65
|
|