@khanacademy/wonder-blocks-popover 5.0.8 → 5.1.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 +697 -661
- package/LICENSE +21 -0
- package/dist/es/index.js +12 -11
- package/dist/index.js +12 -11
- package/package.json +12 -13
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Khan Academy
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/es/index.js
CHANGED
|
@@ -248,14 +248,14 @@ class FocusManager extends React.Component {
|
|
|
248
248
|
if (e.key === "Tab" && e.shiftKey) {
|
|
249
249
|
var _this$props$anchorEle;
|
|
250
250
|
e.preventDefault();
|
|
251
|
-
(_this$props$anchorEle = this.props.anchorElement) == null
|
|
251
|
+
(_this$props$anchorEle = this.props.anchorElement) == null || _this$props$anchorEle.focus();
|
|
252
252
|
}
|
|
253
253
|
};
|
|
254
254
|
this.handleKeydownLastFocusableElement = e => {
|
|
255
255
|
if (this.nextElementAfterPopover && e.key === "Tab" && !e.shiftKey) {
|
|
256
256
|
var _this$nextElementAfte;
|
|
257
257
|
e.preventDefault();
|
|
258
|
-
(_this$nextElementAfte = this.nextElementAfterPopover) == null
|
|
258
|
+
(_this$nextElementAfte = this.nextElementAfterPopover) == null || _this$nextElementAfte.focus();
|
|
259
259
|
}
|
|
260
260
|
};
|
|
261
261
|
this.getNextFocusableElement = () => {
|
|
@@ -307,14 +307,14 @@ class FocusManager extends React.Component {
|
|
|
307
307
|
if (e.key === "Tab" && !e.shiftKey) {
|
|
308
308
|
var _this$firstFocusableE;
|
|
309
309
|
e.preventDefault();
|
|
310
|
-
(_this$firstFocusableE = this.firstFocusableElementInPopover) == null
|
|
310
|
+
(_this$firstFocusableE = this.firstFocusableElementInPopover) == null || _this$firstFocusableE.focus();
|
|
311
311
|
}
|
|
312
312
|
};
|
|
313
313
|
this.handleKeydownNextFocusableElement = e => {
|
|
314
314
|
if (e.key === "Tab" && e.shiftKey) {
|
|
315
315
|
var _this$lastFocusableEl;
|
|
316
316
|
e.preventDefault();
|
|
317
|
-
(_this$lastFocusableEl = this.lastFocusableElementInPopover) == null
|
|
317
|
+
(_this$lastFocusableEl = this.lastFocusableElementInPopover) == null || _this$lastFocusableEl.focus();
|
|
318
318
|
}
|
|
319
319
|
};
|
|
320
320
|
}
|
|
@@ -389,7 +389,7 @@ class Popover extends React.Component {
|
|
|
389
389
|
} = this.props;
|
|
390
390
|
if (closedFocusId) {
|
|
391
391
|
const focusElement = ReactDOM.findDOMNode(document.getElementById(closedFocusId));
|
|
392
|
-
focusElement == null
|
|
392
|
+
focusElement == null || focusElement.focus();
|
|
393
393
|
return;
|
|
394
394
|
}
|
|
395
395
|
if (anchorElement) {
|
|
@@ -401,7 +401,7 @@ class Popover extends React.Component {
|
|
|
401
401
|
opened: false
|
|
402
402
|
}, () => {
|
|
403
403
|
var _this$props$onClose, _this$props;
|
|
404
|
-
(_this$props$onClose = (_this$props = this.props).onClose) == null
|
|
404
|
+
(_this$props$onClose = (_this$props = this.props).onClose) == null || _this$props$onClose.call(_this$props);
|
|
405
405
|
if (shouldReturnFocus) {
|
|
406
406
|
this.maybeReturnFocus();
|
|
407
407
|
}
|
|
@@ -478,9 +478,10 @@ class Popover extends React.Component {
|
|
|
478
478
|
initialFocusId: initialFocusId
|
|
479
479
|
}, popperContent);
|
|
480
480
|
} else {
|
|
481
|
-
return React.createElement(InitialFocus, {
|
|
482
|
-
|
|
483
|
-
|
|
481
|
+
return (React.createElement(InitialFocus, {
|
|
482
|
+
initialFocusId: initialFocusId
|
|
483
|
+
}, popperContent)
|
|
484
|
+
);
|
|
484
485
|
}
|
|
485
486
|
}
|
|
486
487
|
getHost() {
|
|
@@ -621,7 +622,7 @@ const styles$1 = StyleSheet.create({
|
|
|
621
622
|
}
|
|
622
623
|
});
|
|
623
624
|
|
|
624
|
-
const
|
|
625
|
+
const StyledImg = addStyle("img");
|
|
625
626
|
class PopoverContent extends React.Component {
|
|
626
627
|
constructor(...args) {
|
|
627
628
|
super(...args);
|
|
@@ -647,7 +648,7 @@ class PopoverContent extends React.Component {
|
|
|
647
648
|
}
|
|
648
649
|
return React.createElement(View, {
|
|
649
650
|
style: styles.iconContainer
|
|
650
|
-
}, typeof icon !== "string" ? icon : React.createElement(
|
|
651
|
+
}, typeof icon !== "string" ? icon : React.createElement(StyledImg, {
|
|
651
652
|
src: icon,
|
|
652
653
|
style: styles.icon
|
|
653
654
|
}));
|
package/dist/index.js
CHANGED
|
@@ -278,14 +278,14 @@ class FocusManager extends React__namespace.Component {
|
|
|
278
278
|
if (e.key === "Tab" && e.shiftKey) {
|
|
279
279
|
var _this$props$anchorEle;
|
|
280
280
|
e.preventDefault();
|
|
281
|
-
(_this$props$anchorEle = this.props.anchorElement) == null
|
|
281
|
+
(_this$props$anchorEle = this.props.anchorElement) == null || _this$props$anchorEle.focus();
|
|
282
282
|
}
|
|
283
283
|
};
|
|
284
284
|
this.handleKeydownLastFocusableElement = e => {
|
|
285
285
|
if (this.nextElementAfterPopover && e.key === "Tab" && !e.shiftKey) {
|
|
286
286
|
var _this$nextElementAfte;
|
|
287
287
|
e.preventDefault();
|
|
288
|
-
(_this$nextElementAfte = this.nextElementAfterPopover) == null
|
|
288
|
+
(_this$nextElementAfte = this.nextElementAfterPopover) == null || _this$nextElementAfte.focus();
|
|
289
289
|
}
|
|
290
290
|
};
|
|
291
291
|
this.getNextFocusableElement = () => {
|
|
@@ -337,14 +337,14 @@ class FocusManager extends React__namespace.Component {
|
|
|
337
337
|
if (e.key === "Tab" && !e.shiftKey) {
|
|
338
338
|
var _this$firstFocusableE;
|
|
339
339
|
e.preventDefault();
|
|
340
|
-
(_this$firstFocusableE = this.firstFocusableElementInPopover) == null
|
|
340
|
+
(_this$firstFocusableE = this.firstFocusableElementInPopover) == null || _this$firstFocusableE.focus();
|
|
341
341
|
}
|
|
342
342
|
};
|
|
343
343
|
this.handleKeydownNextFocusableElement = e => {
|
|
344
344
|
if (e.key === "Tab" && e.shiftKey) {
|
|
345
345
|
var _this$lastFocusableEl;
|
|
346
346
|
e.preventDefault();
|
|
347
|
-
(_this$lastFocusableEl = this.lastFocusableElementInPopover) == null
|
|
347
|
+
(_this$lastFocusableEl = this.lastFocusableElementInPopover) == null || _this$lastFocusableEl.focus();
|
|
348
348
|
}
|
|
349
349
|
};
|
|
350
350
|
}
|
|
@@ -419,7 +419,7 @@ class Popover extends React__namespace.Component {
|
|
|
419
419
|
} = this.props;
|
|
420
420
|
if (closedFocusId) {
|
|
421
421
|
const focusElement = ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));
|
|
422
|
-
focusElement == null
|
|
422
|
+
focusElement == null || focusElement.focus();
|
|
423
423
|
return;
|
|
424
424
|
}
|
|
425
425
|
if (anchorElement) {
|
|
@@ -431,7 +431,7 @@ class Popover extends React__namespace.Component {
|
|
|
431
431
|
opened: false
|
|
432
432
|
}, () => {
|
|
433
433
|
var _this$props$onClose, _this$props;
|
|
434
|
-
(_this$props$onClose = (_this$props = this.props).onClose) == null
|
|
434
|
+
(_this$props$onClose = (_this$props = this.props).onClose) == null || _this$props$onClose.call(_this$props);
|
|
435
435
|
if (shouldReturnFocus) {
|
|
436
436
|
this.maybeReturnFocus();
|
|
437
437
|
}
|
|
@@ -508,9 +508,10 @@ class Popover extends React__namespace.Component {
|
|
|
508
508
|
initialFocusId: initialFocusId
|
|
509
509
|
}, popperContent);
|
|
510
510
|
} else {
|
|
511
|
-
return React__namespace.createElement(InitialFocus, {
|
|
512
|
-
|
|
513
|
-
|
|
511
|
+
return (React__namespace.createElement(InitialFocus, {
|
|
512
|
+
initialFocusId: initialFocusId
|
|
513
|
+
}, popperContent)
|
|
514
|
+
);
|
|
514
515
|
}
|
|
515
516
|
}
|
|
516
517
|
getHost() {
|
|
@@ -651,7 +652,7 @@ const styles$1 = aphrodite.StyleSheet.create({
|
|
|
651
652
|
}
|
|
652
653
|
});
|
|
653
654
|
|
|
654
|
-
const
|
|
655
|
+
const StyledImg = wonderBlocksCore.addStyle("img");
|
|
655
656
|
class PopoverContent extends React__namespace.Component {
|
|
656
657
|
constructor(...args) {
|
|
657
658
|
super(...args);
|
|
@@ -677,7 +678,7 @@ class PopoverContent extends React__namespace.Component {
|
|
|
677
678
|
}
|
|
678
679
|
return React__namespace.createElement(wonderBlocksCore.View, {
|
|
679
680
|
style: styles.iconContainer
|
|
680
|
-
}, typeof icon !== "string" ? icon : React__namespace.createElement(
|
|
681
|
+
}, typeof icon !== "string" ? icon : React__namespace.createElement(StyledImg, {
|
|
681
682
|
src: icon,
|
|
682
683
|
style: styles.icon
|
|
683
684
|
}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-popover",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -9,20 +9,16 @@
|
|
|
9
9
|
"main": "dist/index.js",
|
|
10
10
|
"module": "dist/es/index.js",
|
|
11
11
|
"types": "dist/index.d.ts",
|
|
12
|
-
"scripts": {
|
|
13
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
14
|
-
"prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
|
|
15
|
-
},
|
|
16
12
|
"author": "",
|
|
17
13
|
"license": "MIT",
|
|
18
14
|
"dependencies": {
|
|
19
|
-
"@babel/runtime": "^7.
|
|
20
|
-
"@khanacademy/wonder-blocks-core": "
|
|
21
|
-
"@khanacademy/wonder-blocks-icon-button": "
|
|
22
|
-
"@khanacademy/wonder-blocks-modal": "
|
|
23
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
24
|
-
"@khanacademy/wonder-blocks-tooltip": "
|
|
25
|
-
"@khanacademy/wonder-blocks-typography": "
|
|
15
|
+
"@babel/runtime": "^7.24.5",
|
|
16
|
+
"@khanacademy/wonder-blocks-core": "12.1.1",
|
|
17
|
+
"@khanacademy/wonder-blocks-icon-button": "6.1.1",
|
|
18
|
+
"@khanacademy/wonder-blocks-modal": "7.1.1",
|
|
19
|
+
"@khanacademy/wonder-blocks-tokens": "4.2.1",
|
|
20
|
+
"@khanacademy/wonder-blocks-tooltip": "4.1.1",
|
|
21
|
+
"@khanacademy/wonder-blocks-typography": "3.1.1"
|
|
26
22
|
},
|
|
27
23
|
"peerDependencies": {
|
|
28
24
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -33,6 +29,9 @@
|
|
|
33
29
|
"react-popper": "^2.0.0"
|
|
34
30
|
},
|
|
35
31
|
"devDependencies": {
|
|
36
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
32
|
+
"@khanacademy/wb-dev-build-settings": "2.1.1"
|
|
33
|
+
},
|
|
34
|
+
"scripts": {
|
|
35
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
37
36
|
}
|
|
38
37
|
}
|