@royaloperahouse/chord 0.7.22 → 0.7.23
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 +3 -0
- package/dist/chord.cjs.development.js +27 -3
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +27 -3
- package/dist/chord.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/chord.esm.js
CHANGED
|
@@ -4661,7 +4661,16 @@ var Accordion = function Accordion(_ref) {
|
|
|
4661
4661
|
|
|
4662
4662
|
var _useState3 = useState(initOpen ? 'Detract' : 'Expand'),
|
|
4663
4663
|
iconName = _useState3[0],
|
|
4664
|
-
setIconName = _useState3[1];
|
|
4664
|
+
setIconName = _useState3[1]; // Contents children visibility is set to prevent it from being keyboard tabbable when the accordion is closed
|
|
4665
|
+
|
|
4666
|
+
|
|
4667
|
+
var _useState4 = useState(initOpen ? {
|
|
4668
|
+
visibility: 'visible'
|
|
4669
|
+
} : {
|
|
4670
|
+
visibility: 'hidden'
|
|
4671
|
+
}),
|
|
4672
|
+
childrenVisibility = _useState4[0],
|
|
4673
|
+
setChildrenVisibility = _useState4[1];
|
|
4665
4674
|
|
|
4666
4675
|
var content = useRef(null);
|
|
4667
4676
|
useEffect(function () {
|
|
@@ -4674,10 +4683,23 @@ var Accordion = function Accordion(_ref) {
|
|
|
4674
4683
|
setOpenAccordion(!openAccordion);
|
|
4675
4684
|
setTextHeight(openAccordion ? '0px' : content.current.scrollHeight + "px");
|
|
4676
4685
|
setIconName(openAccordion ? 'Expand' : 'Detract');
|
|
4686
|
+
setChildrenVisibility(openAccordion ? {
|
|
4687
|
+
visibility: 'hidden'
|
|
4688
|
+
} : {
|
|
4689
|
+
visibility: 'visible'
|
|
4690
|
+
});
|
|
4691
|
+
};
|
|
4692
|
+
|
|
4693
|
+
var keyDown = function keyDown(e) {
|
|
4694
|
+
if (e.key === 'Enter' || e.key === 'Space') {
|
|
4695
|
+
toggleAccordion();
|
|
4696
|
+
}
|
|
4677
4697
|
};
|
|
4678
4698
|
|
|
4679
4699
|
return /*#__PURE__*/React__default.createElement(AccordionContainer, null, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
|
|
4680
|
-
onClick: toggleAccordion
|
|
4700
|
+
onClick: toggleAccordion,
|
|
4701
|
+
onKeyDown: keyDown,
|
|
4702
|
+
tabIndex: 0
|
|
4681
4703
|
}, /*#__PURE__*/React__default.createElement("a", null, title), /*#__PURE__*/React__default.createElement(Icon, {
|
|
4682
4704
|
iconName: iconName
|
|
4683
4705
|
})), /*#__PURE__*/React__default.createElement(ContentContainer, {
|
|
@@ -4686,7 +4708,9 @@ var Accordion = function Accordion(_ref) {
|
|
|
4686
4708
|
style: {
|
|
4687
4709
|
maxHeight: "" + textHeight
|
|
4688
4710
|
}
|
|
4689
|
-
}, /*#__PURE__*/React__default.createElement(ChildrenContainer,
|
|
4711
|
+
}, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
4712
|
+
style: childrenVisibility
|
|
4713
|
+
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
4690
4714
|
};
|
|
4691
4715
|
|
|
4692
4716
|
var _templateObject$C;
|