@instructure/ui-focusable 8.25.1-snapshot-10 → 8.25.1-snapshot-13
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 +1 -1
- package/es/Focusable/index.js +55 -49
- package/lib/Focusable/index.js +55 -49
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [8.25.1-snapshot-
|
|
6
|
+
## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-focusable
|
|
9
9
|
|
package/es/Focusable/index.js
CHANGED
|
@@ -34,34 +34,40 @@ category: components/utilities
|
|
|
34
34
|
@tsProps
|
|
35
35
|
**/
|
|
36
36
|
class Focusable extends Component {
|
|
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
|
-
|
|
37
|
+
constructor() {
|
|
38
|
+
super(...arguments);
|
|
39
|
+
this._focusListener = null;
|
|
40
|
+
this._blurListener = null;
|
|
41
|
+
this._inputModeListener = null;
|
|
42
|
+
this.state = {
|
|
43
|
+
focused: false,
|
|
44
|
+
focusable: void 0
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
this.handleInputModeChange = () => {
|
|
48
|
+
this.forceUpdate();
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
this.handleFocus = () => {
|
|
52
|
+
this.removeFocusListener();
|
|
53
|
+
this.setState({
|
|
54
|
+
focused: true
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
this.handleBlur = () => {
|
|
59
|
+
this.removeBlurListener();
|
|
60
|
+
this.setState({
|
|
61
|
+
focused: false
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
this.ref = null;
|
|
66
|
+
|
|
67
|
+
this.attachRef = el => {
|
|
68
|
+
this.ref = el;
|
|
69
|
+
};
|
|
70
|
+
}
|
|
65
71
|
|
|
66
72
|
componentDidMount() {
|
|
67
73
|
const focusable = this.focusable,
|
|
@@ -155,22 +161,6 @@ class Focusable extends Component {
|
|
|
155
161
|
}
|
|
156
162
|
}
|
|
157
163
|
|
|
158
|
-
handleInputModeChange = () => {
|
|
159
|
-
this.forceUpdate();
|
|
160
|
-
};
|
|
161
|
-
handleFocus = () => {
|
|
162
|
-
this.removeFocusListener();
|
|
163
|
-
this.setState({
|
|
164
|
-
focused: true
|
|
165
|
-
});
|
|
166
|
-
};
|
|
167
|
-
handleBlur = () => {
|
|
168
|
-
this.removeBlurListener();
|
|
169
|
-
this.setState({
|
|
170
|
-
focused: false
|
|
171
|
-
});
|
|
172
|
-
};
|
|
173
|
-
|
|
174
164
|
get focused() {
|
|
175
165
|
return containsActiveElement(this);
|
|
176
166
|
}
|
|
@@ -203,11 +193,6 @@ class Focusable extends Component {
|
|
|
203
193
|
}
|
|
204
194
|
}
|
|
205
195
|
|
|
206
|
-
ref = null;
|
|
207
|
-
attachRef = el => {
|
|
208
|
-
this.ref = el;
|
|
209
|
-
};
|
|
210
|
-
|
|
211
196
|
isFocusVisible(focused, focusable) {
|
|
212
197
|
if (!focusable || !focused) return false; // always show focus for keyboard input mode
|
|
213
198
|
|
|
@@ -258,5 +243,26 @@ class Focusable extends Component {
|
|
|
258
243
|
|
|
259
244
|
}
|
|
260
245
|
|
|
246
|
+
Focusable.displayName = "Focusable";
|
|
247
|
+
Focusable.propTypes = propTypes;
|
|
248
|
+
Focusable.allowedProps = allowedProps;
|
|
249
|
+
Focusable.defaultProps = {
|
|
250
|
+
children: null
|
|
251
|
+
};
|
|
252
|
+
Focusable.inputTypes = {
|
|
253
|
+
text: true,
|
|
254
|
+
search: true,
|
|
255
|
+
url: true,
|
|
256
|
+
tel: true,
|
|
257
|
+
email: true,
|
|
258
|
+
password: true,
|
|
259
|
+
number: true,
|
|
260
|
+
date: true,
|
|
261
|
+
month: true,
|
|
262
|
+
week: true,
|
|
263
|
+
time: true,
|
|
264
|
+
datetime: true,
|
|
265
|
+
'datetime-local': true
|
|
266
|
+
};
|
|
261
267
|
export default Focusable;
|
|
262
268
|
export { Focusable };
|
package/lib/Focusable/index.js
CHANGED
|
@@ -52,34 +52,40 @@ category: components/utilities
|
|
|
52
52
|
@tsProps
|
|
53
53
|
**/
|
|
54
54
|
class Focusable extends _react.Component {
|
|
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
|
-
|
|
81
|
-
|
|
82
|
-
|
|
55
|
+
constructor() {
|
|
56
|
+
super(...arguments);
|
|
57
|
+
this._focusListener = null;
|
|
58
|
+
this._blurListener = null;
|
|
59
|
+
this._inputModeListener = null;
|
|
60
|
+
this.state = {
|
|
61
|
+
focused: false,
|
|
62
|
+
focusable: void 0
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
this.handleInputModeChange = () => {
|
|
66
|
+
this.forceUpdate();
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
this.handleFocus = () => {
|
|
70
|
+
this.removeFocusListener();
|
|
71
|
+
this.setState({
|
|
72
|
+
focused: true
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
this.handleBlur = () => {
|
|
77
|
+
this.removeBlurListener();
|
|
78
|
+
this.setState({
|
|
79
|
+
focused: false
|
|
80
|
+
});
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
this.ref = null;
|
|
84
|
+
|
|
85
|
+
this.attachRef = el => {
|
|
86
|
+
this.ref = el;
|
|
87
|
+
};
|
|
88
|
+
}
|
|
83
89
|
|
|
84
90
|
componentDidMount() {
|
|
85
91
|
const focusable = this.focusable,
|
|
@@ -173,22 +179,6 @@ class Focusable extends _react.Component {
|
|
|
173
179
|
}
|
|
174
180
|
}
|
|
175
181
|
|
|
176
|
-
handleInputModeChange = () => {
|
|
177
|
-
this.forceUpdate();
|
|
178
|
-
};
|
|
179
|
-
handleFocus = () => {
|
|
180
|
-
this.removeFocusListener();
|
|
181
|
-
this.setState({
|
|
182
|
-
focused: true
|
|
183
|
-
});
|
|
184
|
-
};
|
|
185
|
-
handleBlur = () => {
|
|
186
|
-
this.removeBlurListener();
|
|
187
|
-
this.setState({
|
|
188
|
-
focused: false
|
|
189
|
-
});
|
|
190
|
-
};
|
|
191
|
-
|
|
192
182
|
get focused() {
|
|
193
183
|
return (0, _containsActiveElement.containsActiveElement)(this);
|
|
194
184
|
}
|
|
@@ -221,11 +211,6 @@ class Focusable extends _react.Component {
|
|
|
221
211
|
}
|
|
222
212
|
}
|
|
223
213
|
|
|
224
|
-
ref = null;
|
|
225
|
-
attachRef = el => {
|
|
226
|
-
this.ref = el;
|
|
227
|
-
};
|
|
228
|
-
|
|
229
214
|
isFocusVisible(focused, focusable) {
|
|
230
215
|
if (!focusable || !focused) return false; // always show focus for keyboard input mode
|
|
231
216
|
|
|
@@ -277,5 +262,26 @@ class Focusable extends _react.Component {
|
|
|
277
262
|
}
|
|
278
263
|
|
|
279
264
|
exports.Focusable = Focusable;
|
|
265
|
+
Focusable.displayName = "Focusable";
|
|
266
|
+
Focusable.propTypes = _props.propTypes;
|
|
267
|
+
Focusable.allowedProps = _props.allowedProps;
|
|
268
|
+
Focusable.defaultProps = {
|
|
269
|
+
children: null
|
|
270
|
+
};
|
|
271
|
+
Focusable.inputTypes = {
|
|
272
|
+
text: true,
|
|
273
|
+
search: true,
|
|
274
|
+
url: true,
|
|
275
|
+
tel: true,
|
|
276
|
+
email: true,
|
|
277
|
+
password: true,
|
|
278
|
+
number: true,
|
|
279
|
+
date: true,
|
|
280
|
+
month: true,
|
|
281
|
+
week: true,
|
|
282
|
+
time: true,
|
|
283
|
+
datetime: true,
|
|
284
|
+
'datetime-local': true
|
|
285
|
+
};
|
|
280
286
|
var _default = Focusable;
|
|
281
287
|
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-focusable",
|
|
3
|
-
"version": "8.25.1-snapshot-
|
|
3
|
+
"version": "8.25.1-snapshot-13",
|
|
4
4
|
"description": "A utility used to identify when an element receives focus.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-babel-preset": "8.25.1-snapshot-
|
|
27
|
-
"@instructure/ui-test-utils": "8.25.1-snapshot-
|
|
26
|
+
"@instructure/ui-babel-preset": "8.25.1-snapshot-13",
|
|
27
|
+
"@instructure/ui-test-utils": "8.25.1-snapshot-13"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@babel/runtime": "^7.13.10",
|
|
31
|
-
"@instructure/console": "8.25.1-snapshot-
|
|
32
|
-
"@instructure/ui-dom-utils": "8.25.1-snapshot-
|
|
33
|
-
"@instructure/ui-react-utils": "8.25.1-snapshot-
|
|
34
|
-
"@instructure/ui-utils": "8.25.1-snapshot-
|
|
35
|
-
"@instructure/ui-view": "8.25.1-snapshot-
|
|
31
|
+
"@instructure/console": "8.25.1-snapshot-13",
|
|
32
|
+
"@instructure/ui-dom-utils": "8.25.1-snapshot-13",
|
|
33
|
+
"@instructure/ui-react-utils": "8.25.1-snapshot-13",
|
|
34
|
+
"@instructure/ui-utils": "8.25.1-snapshot-13",
|
|
35
|
+
"@instructure/ui-view": "8.25.1-snapshot-13",
|
|
36
36
|
"prop-types": "^15"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|