@mackin.com/styleguide 11.0.7 → 11.0.9
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/index.esm.js +35 -4
- package/index.js +35 -4
- package/package.json +1 -1
package/index.esm.js
CHANGED
|
@@ -565,7 +565,6 @@ const Accordion = (props) => {
|
|
|
565
565
|
}, [open]);
|
|
566
566
|
React.useEffect(() => {
|
|
567
567
|
var _a;
|
|
568
|
-
console.warn('props.open', 'changed', props.open);
|
|
569
568
|
if (props.open === undefined) {
|
|
570
569
|
// technically, we only need to use this effect if props.open was initialized with a boolean.
|
|
571
570
|
// you can't have conditional effects so here we go...
|
|
@@ -591,7 +590,6 @@ const Accordion = (props) => {
|
|
|
591
590
|
width: ((_c = props.block) !== null && _c !== void 0 ? _c : true) ? '100%' : 'auto'
|
|
592
591
|
}, props.headerButtonClassName)), onClick: e => {
|
|
593
592
|
e.stopPropagation();
|
|
594
|
-
console.warn('click');
|
|
595
593
|
if (props.onChange) {
|
|
596
594
|
props.onChange(!open);
|
|
597
595
|
}
|
|
@@ -982,8 +980,32 @@ const TabLocker = (props) => {
|
|
|
982
980
|
if (e.key === 'Tab') {
|
|
983
981
|
e.preventDefault();
|
|
984
982
|
e.stopPropagation();
|
|
985
|
-
|
|
986
|
-
|
|
983
|
+
let tabElements;
|
|
984
|
+
try {
|
|
985
|
+
tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(tabQuery)) !== null && _b !== void 0 ? _b : [])
|
|
986
|
+
.filter(el => {
|
|
987
|
+
if (el.hasAttribute('disabled')) {
|
|
988
|
+
// seems to be unreliable when done in the query itself
|
|
989
|
+
return false;
|
|
990
|
+
}
|
|
991
|
+
if (el.getAttribute('tabindex') === '-1') {
|
|
992
|
+
// '[tabindex]:not([tabindex="-1"])' is in the query, but is ignored for controls that can already
|
|
993
|
+
// receive focus like buttons. We'll leave it in because it DOSE ignore non-focus elements with a tabindex.
|
|
994
|
+
return false;
|
|
995
|
+
}
|
|
996
|
+
if (el.hasAttribute('hidden')) {
|
|
997
|
+
return false;
|
|
998
|
+
}
|
|
999
|
+
if (el.closest('[hidden]')) {
|
|
1000
|
+
return false;
|
|
1001
|
+
}
|
|
1002
|
+
return true;
|
|
1003
|
+
});
|
|
1004
|
+
}
|
|
1005
|
+
catch (err) {
|
|
1006
|
+
console.error(err);
|
|
1007
|
+
}
|
|
1008
|
+
if (tabElements === null || tabElements === void 0 ? void 0 : tabElements.length) {
|
|
987
1009
|
const direction = e.shiftKey ? -1 : 1;
|
|
988
1010
|
const index = tabElements.findIndex(x => x === document.activeElement);
|
|
989
1011
|
if (index === undefined) {
|
|
@@ -1002,6 +1024,15 @@ const TabLocker = (props) => {
|
|
|
1002
1024
|
}
|
|
1003
1025
|
} }, props.children));
|
|
1004
1026
|
};
|
|
1027
|
+
// easier to look at!
|
|
1028
|
+
const tabQuery = [
|
|
1029
|
+
'a',
|
|
1030
|
+
'button',
|
|
1031
|
+
'input',
|
|
1032
|
+
'textarea',
|
|
1033
|
+
'select',
|
|
1034
|
+
'[tabindex]:not([tabindex="-1"])'
|
|
1035
|
+
].join(',');
|
|
1005
1036
|
|
|
1006
1037
|
/*
|
|
1007
1038
|
ARIA info:
|
package/index.js
CHANGED
|
@@ -583,7 +583,6 @@ const Accordion = (props) => {
|
|
|
583
583
|
}, [open]);
|
|
584
584
|
React__namespace.useEffect(() => {
|
|
585
585
|
var _a;
|
|
586
|
-
console.warn('props.open', 'changed', props.open);
|
|
587
586
|
if (props.open === undefined) {
|
|
588
587
|
// technically, we only need to use this effect if props.open was initialized with a boolean.
|
|
589
588
|
// you can't have conditional effects so here we go...
|
|
@@ -609,7 +608,6 @@ const Accordion = (props) => {
|
|
|
609
608
|
width: ((_c = props.block) !== null && _c !== void 0 ? _c : true) ? '100%' : 'auto'
|
|
610
609
|
}, props.headerButtonClassName)), onClick: e => {
|
|
611
610
|
e.stopPropagation();
|
|
612
|
-
console.warn('click');
|
|
613
611
|
if (props.onChange) {
|
|
614
612
|
props.onChange(!open);
|
|
615
613
|
}
|
|
@@ -1000,8 +998,32 @@ const TabLocker = (props) => {
|
|
|
1000
998
|
if (e.key === 'Tab') {
|
|
1001
999
|
e.preventDefault();
|
|
1002
1000
|
e.stopPropagation();
|
|
1003
|
-
|
|
1004
|
-
|
|
1001
|
+
let tabElements;
|
|
1002
|
+
try {
|
|
1003
|
+
tabElements = Array.from((_b = (_a = tabLocker.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(tabQuery)) !== null && _b !== void 0 ? _b : [])
|
|
1004
|
+
.filter(el => {
|
|
1005
|
+
if (el.hasAttribute('disabled')) {
|
|
1006
|
+
// seems to be unreliable when done in the query itself
|
|
1007
|
+
return false;
|
|
1008
|
+
}
|
|
1009
|
+
if (el.getAttribute('tabindex') === '-1') {
|
|
1010
|
+
// '[tabindex]:not([tabindex="-1"])' is in the query, but is ignored for controls that can already
|
|
1011
|
+
// receive focus like buttons. We'll leave it in because it DOSE ignore non-focus elements with a tabindex.
|
|
1012
|
+
return false;
|
|
1013
|
+
}
|
|
1014
|
+
if (el.hasAttribute('hidden')) {
|
|
1015
|
+
return false;
|
|
1016
|
+
}
|
|
1017
|
+
if (el.closest('[hidden]')) {
|
|
1018
|
+
return false;
|
|
1019
|
+
}
|
|
1020
|
+
return true;
|
|
1021
|
+
});
|
|
1022
|
+
}
|
|
1023
|
+
catch (err) {
|
|
1024
|
+
console.error(err);
|
|
1025
|
+
}
|
|
1026
|
+
if (tabElements === null || tabElements === void 0 ? void 0 : tabElements.length) {
|
|
1005
1027
|
const direction = e.shiftKey ? -1 : 1;
|
|
1006
1028
|
const index = tabElements.findIndex(x => x === document.activeElement);
|
|
1007
1029
|
if (index === undefined) {
|
|
@@ -1020,6 +1042,15 @@ const TabLocker = (props) => {
|
|
|
1020
1042
|
}
|
|
1021
1043
|
} }, props.children));
|
|
1022
1044
|
};
|
|
1045
|
+
// easier to look at!
|
|
1046
|
+
const tabQuery = [
|
|
1047
|
+
'a',
|
|
1048
|
+
'button',
|
|
1049
|
+
'input',
|
|
1050
|
+
'textarea',
|
|
1051
|
+
'select',
|
|
1052
|
+
'[tabindex]:not([tabindex="-1"])'
|
|
1053
|
+
].join(',');
|
|
1023
1054
|
|
|
1024
1055
|
/*
|
|
1025
1056
|
ARIA info:
|