@pie-element/passage 2.18.7-next.1 → 2.18.7-next.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.
@@ -130,25 +130,37 @@ var StimulusTabs = /*#__PURE__*/function (_React$Component) {
130
130
 
131
131
  switch (key) {
132
132
  case 'ArrowRight':
133
- case 'ArrowDown':
133
+ // Move to the next tab
134
134
  newTabIndex = (currentIndex + 1) % tabs.length;
135
135
  break;
136
136
 
137
137
  case 'ArrowLeft':
138
- case 'ArrowUp':
138
+ // Move to the previous tab
139
139
  newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;
140
140
  break;
141
+ // Commented out ArrowDown and ArrowUp for future vertical tab navigation
142
+ // case 'ArrowDown':
143
+ // // Move to the next tab (for vertical alignment)
144
+ // newTabIndex = (currentIndex + 1) % tabs.length;
145
+ // break;
146
+ // case 'ArrowUp':
147
+ // // Move to the previous tab (for vertical alignment)
148
+ // newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;
149
+ // break;
141
150
 
142
151
  case 'Home':
152
+ // Move to the first tab
143
153
  newTabIndex = 0;
144
154
  break;
145
155
 
146
156
  case 'End':
157
+ // Move to the last tab
147
158
  newTabIndex = tabs.length - 1;
148
159
  break;
149
160
 
150
161
  case 'Enter':
151
162
  case ' ':
163
+ // Activate the current tab
152
164
  newTabIndex = currentIndex;
153
165
  break;
154
166
 
@@ -160,6 +172,8 @@ var StimulusTabs = /*#__PURE__*/function (_React$Component) {
160
172
  event.preventDefault();
161
173
 
162
174
  _this.handleChange(event, tabs[newTabIndex].id);
175
+
176
+ document.getElementById("button-".concat(tabs[newTabIndex].id)).focus();
163
177
  }
164
178
  });
165
179
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "parsedText", function () {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/stimulus-tabs.jsx"],"names":["styles","theme","passages","flexGrow","backgroundColor","color","background","text","passage","padding","spacing","unit","passageTitle","fontSize","passageSubtitle","passageAuthor","passageText","stickyTabs","position","top","tab","palette","common","white","black","tabButton","breakSpaces","whiteSpace","teacherInstructions","marginBottom","StimulusTabs","activeTab","event","setState","setTimeout","tabChangeEvent","CustomEvent","detail","window","dispatchEvent","currentTabId","key","tabs","props","newTabIndex","currentIndex","findIndex","id","length","preventDefault","handleChange","div","document","createElement","innerHTML","replace","audio","querySelector","source","setAttribute","getAttribute","removeAttribute","appendChild","showTeacherInstructions","disabledTabs","teacherInstructionsDiv","hidden","visible","classes","renderInstructions","__html","parsedText","title","subtitle","author","state","selectedTab","find","map","renderTab","root","flexContainer","handleKeyDown","React","Component","propTypes","PropTypes","object","isRequired","arrayOf","shape","number","string","bool"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Collapsible, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport classNames from 'classnames';\n\nconst styles = (theme) => ({\n passages: {\n flexGrow: 1,\n backgroundColor: color.background(),\n color: color.text(),\n },\n passage: {\n backgroundColor: color.background(),\n color: color.text(),\n padding: theme.spacing.unit * 2,\n },\n passageTitle: {\n fontSize: '1.75rem',\n },\n passageSubtitle: {\n fontSize: '1.5rem',\n },\n passageAuthor: {\n fontSize: '1.25rem',\n },\n passageText: {},\n stickyTabs: {\n background: color.background(),\n position: 'sticky',\n top: 0,\n },\n tab: {\n background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n fontSize: 'inherit',\n color: theme.palette.common.black, // remove when PD-2801 is DONE\n },\n tabButton: {\n background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n },\n breakSpaces: {\n whiteSpace: 'break-spaces',\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n});\n\nclass StimulusTabs extends React.Component {\n state = {\n activeTab: 0,\n };\n\n handleChange = (event, activeTab) => {\n this.setState(() => ({ activeTab }));\n\n setTimeout(() => {\n const tabChangeEvent = new CustomEvent('pie-ui-passage-tabChanged', {\n detail: { tab: activeTab },\n });\n\n window.dispatchEvent(tabChangeEvent);\n });\n };\n\n handleKeyDown = (event, currentTabId) => {\n const { key } = event;\n const { tabs } = this.props;\n\n let newTabIndex = -1;\n const currentIndex = tabs.findIndex((tab) => tab.id === currentTabId);\n\n switch (key) {\n case 'ArrowRight':\n case 'ArrowDown':\n newTabIndex = (currentIndex + 1) % tabs.length;\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n break;\n case 'Home':\n newTabIndex = 0;\n break;\n case 'End':\n newTabIndex = tabs.length - 1;\n break;\n case 'Enter':\n case ' ':\n newTabIndex = currentIndex;\n break;\n default:\n break;\n }\n\n if (newTabIndex !== -1) {\n event.preventDefault();\n this.handleChange(event, tabs[newTabIndex].id);\n }\n };\n\n parsedText = (text = '') => {\n // fix imported audio content for Safari PD-1391\n const div = document.createElement('div');\n div.innerHTML = text.replace(/(<br\\/>\\n)/g, '<br/>');\n\n const audio = div.querySelector('audio');\n\n if (audio) {\n const source = document.createElement('source');\n\n source.setAttribute('type', 'audio/mp3');\n source.setAttribute('src', audio.getAttribute('src'));\n\n audio.removeAttribute('src');\n audio.appendChild(source);\n }\n\n return div.innerHTML;\n };\n\n renderInstructions(showTeacherInstructions, teacherInstructions, disabledTabs = false) {\n if (!showTeacherInstructions || !teacherInstructions) {\n return;\n }\n\n const teacherInstructionsDiv = (\n <PreviewPrompt\n tagName=\"div\"\n className=\"prompt\"\n defaultClassName=\"teacher-instructions\"\n prompt={teacherInstructions}\n />\n );\n\n if (disabledTabs) {\n return teacherInstructionsDiv;\n }\n\n return (\n <Collapsible\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n {teacherInstructionsDiv}\n </Collapsible>\n );\n }\n\n renderTab(tab, showTeacherInstructions, disabledTabs) {\n const { classes } = this.props;\n\n return (\n <div\n className={classNames(classes.passage, 'passage')}\n key={tab.id}\n id={`tabpanel-${tab.id}`}\n role=\"tabpanel\"\n aria-labelledby={`button-${tab.id}`}\n >\n {this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs)}\n <h2>\n <div\n className={classNames(classes.passageTitle, 'title')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }}\n />\n <div\n className={classNames(classes.passageSubtitle, 'subtitle')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.subtitle) }}\n />\n </h2>\n <div\n className={classNames(classes.passageAuthor, 'author')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.author) }}\n />\n <div\n key={tab.id}\n className={classNames(classes.passageText, 'text')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.text) }}\n />\n </div>\n );\n }\n\n render() {\n const { classes, tabs, disabledTabs, showTeacherInstructions } = this.props;\n const { activeTab } = this.state;\n\n if (!tabs?.length) {\n return;\n }\n\n const selectedTab = (tabs || []).find((tab) => tab.id === activeTab);\n\n return (\n <div className={classNames(classes.passages, { [classes.breakSpaces]: tabs.length === 1 }, 'passages')}>\n {disabledTabs || tabs.length === 1 ? (\n tabs.map((tab) => this.renderTab(tab, showTeacherInstructions, disabledTabs))\n ) : (\n <>\n <Tabs\n classes={{\n root: classes.stickyTabs,\n flexContainer: classes.tabButton,\n }}\n value={activeTab}\n onChange={this.handleChange}\n >\n {tabs.map((tab) => (\n <Tab\n className={classes.tab}\n key={tab.id}\n id={`button-${tab.id}`}\n label={<span dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }} />}\n value={tab.id}\n tabIndex={activeTab === tab.id ? 0 : -1}\n aria-controls={`tabpanel-${tab.id}`}\n aria-selected={activeTab === tab.id}\n onFocus={() => this.handleChange(null, tab.id)}\n onKeyDown={(event) => this.handleKeyDown(event, tab.id)}\n />\n ))}\n </Tabs>\n {selectedTab ? this.renderTab(selectedTab, showTeacherInstructions, disabledTabs) : null}\n </>\n )}\n </div>\n );\n }\n}\n\nStimulusTabs.propTypes = {\n classes: PropTypes.object.isRequired,\n tabs: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.string,\n author: PropTypes.string,\n text: PropTypes.string.isRequired,\n teacherInstructions: PropTypes.string,\n }).isRequired,\n ).isRequired,\n disabledTabs: PropTypes.bool,\n showTeacherInstructions: PropTypes.bool,\n};\n\nexport default withStyles(styles)(StimulusTabs);\n"],"file":"stimulus-tabs.js"}
1
+ {"version":3,"sources":["../src/stimulus-tabs.jsx"],"names":["styles","theme","passages","flexGrow","backgroundColor","color","background","text","passage","padding","spacing","unit","passageTitle","fontSize","passageSubtitle","passageAuthor","passageText","stickyTabs","position","top","tab","palette","common","white","black","tabButton","breakSpaces","whiteSpace","teacherInstructions","marginBottom","StimulusTabs","activeTab","event","setState","setTimeout","tabChangeEvent","CustomEvent","detail","window","dispatchEvent","currentTabId","key","tabs","props","newTabIndex","currentIndex","findIndex","id","length","preventDefault","handleChange","document","getElementById","focus","div","createElement","innerHTML","replace","audio","querySelector","source","setAttribute","getAttribute","removeAttribute","appendChild","showTeacherInstructions","disabledTabs","teacherInstructionsDiv","hidden","visible","classes","renderInstructions","__html","parsedText","title","subtitle","author","state","selectedTab","find","map","renderTab","root","flexContainer","handleKeyDown","React","Component","propTypes","PropTypes","object","isRequired","arrayOf","shape","number","string","bool"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Collapsible, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport classNames from 'classnames';\n\nconst styles = (theme) => ({\n passages: {\n flexGrow: 1,\n backgroundColor: color.background(),\n color: color.text(),\n },\n passage: {\n backgroundColor: color.background(),\n color: color.text(),\n padding: theme.spacing.unit * 2,\n },\n passageTitle: {\n fontSize: '1.75rem',\n },\n passageSubtitle: {\n fontSize: '1.5rem',\n },\n passageAuthor: {\n fontSize: '1.25rem',\n },\n passageText: {},\n stickyTabs: {\n background: color.background(),\n position: 'sticky',\n top: 0,\n },\n tab: {\n background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n fontSize: 'inherit',\n color: theme.palette.common.black, // remove when PD-2801 is DONE\n },\n tabButton: {\n background: theme.palette.common.white, // replace with color.background() once PD-2801 is DONE\n },\n breakSpaces: {\n whiteSpace: 'break-spaces',\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n});\n\nclass StimulusTabs extends React.Component {\n state = {\n activeTab: 0,\n };\n\n handleChange = (event, activeTab) => {\n this.setState(() => ({ activeTab }));\n\n setTimeout(() => {\n const tabChangeEvent = new CustomEvent('pie-ui-passage-tabChanged', {\n detail: { tab: activeTab },\n });\n\n window.dispatchEvent(tabChangeEvent);\n });\n };\n\n handleKeyDown = (event, currentTabId) => {\n const { key } = event;\n const { tabs } = this.props;\n\n let newTabIndex = -1;\n const currentIndex = tabs.findIndex((tab) => tab.id === currentTabId);\n\n switch (key) {\n case 'ArrowRight':\n // Move to the next tab\n newTabIndex = (currentIndex + 1) % tabs.length;\n break;\n case 'ArrowLeft':\n // Move to the previous tab\n newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n break;\n // Commented out ArrowDown and ArrowUp for future vertical tab navigation\n // case 'ArrowDown':\n // // Move to the next tab (for vertical alignment)\n // newTabIndex = (currentIndex + 1) % tabs.length;\n // break;\n // case 'ArrowUp':\n // // Move to the previous tab (for vertical alignment)\n // newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n // break;\n case 'Home':\n // Move to the first tab\n newTabIndex = 0;\n break;\n case 'End':\n // Move to the last tab\n newTabIndex = tabs.length - 1;\n break;\n case 'Enter':\n case ' ':\n // Activate the current tab\n newTabIndex = currentIndex;\n break;\n default:\n break;\n }\n\n if (newTabIndex !== -1) {\n event.preventDefault();\n this.handleChange(event, tabs[newTabIndex].id);\n document.getElementById(`button-${tabs[newTabIndex].id}`).focus();\n }\n };\n\n parsedText = (text = '') => {\n // fix imported audio content for Safari PD-1391\n const div = document.createElement('div');\n div.innerHTML = text.replace(/(<br\\/>\\n)/g, '<br/>');\n\n const audio = div.querySelector('audio');\n\n if (audio) {\n const source = document.createElement('source');\n\n source.setAttribute('type', 'audio/mp3');\n source.setAttribute('src', audio.getAttribute('src'));\n\n audio.removeAttribute('src');\n audio.appendChild(source);\n }\n\n return div.innerHTML;\n };\n\n renderInstructions(showTeacherInstructions, teacherInstructions, disabledTabs = false) {\n if (!showTeacherInstructions || !teacherInstructions) {\n return;\n }\n\n const teacherInstructionsDiv = (\n <PreviewPrompt\n tagName=\"div\"\n className=\"prompt\"\n defaultClassName=\"teacher-instructions\"\n prompt={teacherInstructions}\n />\n );\n\n if (disabledTabs) {\n return teacherInstructionsDiv;\n }\n\n return (\n <Collapsible\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n {teacherInstructionsDiv}\n </Collapsible>\n );\n }\n\n renderTab(tab, showTeacherInstructions, disabledTabs) {\n const { classes } = this.props;\n\n return (\n <div\n className={classNames(classes.passage, 'passage')}\n key={tab.id}\n id={`tabpanel-${tab.id}`}\n role=\"tabpanel\"\n aria-labelledby={`button-${tab.id}`}\n >\n {this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs)}\n <h2>\n <div\n className={classNames(classes.passageTitle, 'title')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }}\n />\n <div\n className={classNames(classes.passageSubtitle, 'subtitle')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.subtitle) }}\n />\n </h2>\n <div\n className={classNames(classes.passageAuthor, 'author')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.author) }}\n />\n <div\n key={tab.id}\n className={classNames(classes.passageText, 'text')}\n dangerouslySetInnerHTML={{ __html: this.parsedText(tab.text) }}\n />\n </div>\n );\n }\n\n render() {\n const { classes, tabs, disabledTabs, showTeacherInstructions } = this.props;\n const { activeTab } = this.state;\n\n if (!tabs?.length) {\n return;\n }\n\n const selectedTab = (tabs || []).find((tab) => tab.id === activeTab);\n\n return (\n <div className={classNames(classes.passages, { [classes.breakSpaces]: tabs.length === 1 }, 'passages')}>\n {disabledTabs || tabs.length === 1 ? (\n tabs.map((tab) => this.renderTab(tab, showTeacherInstructions, disabledTabs))\n ) : (\n <>\n <Tabs\n classes={{\n root: classes.stickyTabs,\n flexContainer: classes.tabButton,\n }}\n value={activeTab}\n onChange={this.handleChange}\n >\n {tabs.map((tab) => (\n <Tab\n className={classes.tab}\n key={tab.id}\n id={`button-${tab.id}`}\n label={<span dangerouslySetInnerHTML={{ __html: this.parsedText(tab.title) }} />}\n value={tab.id}\n tabIndex={activeTab === tab.id ? 0 : -1}\n aria-controls={`tabpanel-${tab.id}`}\n aria-selected={activeTab === tab.id}\n onFocus={() => this.handleChange(null, tab.id)}\n onKeyDown={(event) => this.handleKeyDown(event, tab.id)}\n />\n ))}\n </Tabs>\n {selectedTab ? this.renderTab(selectedTab, showTeacherInstructions, disabledTabs) : null}\n </>\n )}\n </div>\n );\n }\n}\n\nStimulusTabs.propTypes = {\n classes: PropTypes.object.isRequired,\n tabs: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.string,\n author: PropTypes.string,\n text: PropTypes.string.isRequired,\n teacherInstructions: PropTypes.string,\n }).isRequired,\n ).isRequired,\n disabledTabs: PropTypes.bool,\n showTeacherInstructions: PropTypes.bool,\n};\n\nexport default withStyles(styles)(StimulusTabs);\n"],"file":"stimulus-tabs.js"}
package/module/element.js CHANGED
@@ -8680,11 +8680,9 @@ class StimulusTabs extends React$1.Component {
8680
8680
  const currentIndex = tabs.findIndex(tab => tab.id === currentTabId);
8681
8681
  switch (key) {
8682
8682
  case 'ArrowRight':
8683
- case 'ArrowDown':
8684
8683
  newTabIndex = (currentIndex + 1) % tabs.length;
8685
8684
  break;
8686
8685
  case 'ArrowLeft':
8687
- case 'ArrowUp':
8688
8686
  newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;
8689
8687
  break;
8690
8688
  case 'Home':
@@ -8701,6 +8699,7 @@ class StimulusTabs extends React$1.Component {
8701
8699
  if (newTabIndex !== -1) {
8702
8700
  event.preventDefault();
8703
8701
  this.handleChange(event, tabs[newTabIndex].id);
8702
+ document.getElementById(`button-${tabs[newTabIndex].id}`).focus();
8704
8703
  }
8705
8704
  };
8706
8705
  }
@@ -8731,7 +8730,7 @@ class StimulusTabs extends React$1.Component {
8731
8730
  __self: this,
8732
8731
  __source: {
8733
8732
  fileName: _jsxFileName,
8734
- lineNumber: 130
8733
+ lineNumber: 143
8735
8734
  }
8736
8735
  });
8737
8736
  if (disabledTabs) {
@@ -8745,7 +8744,7 @@ class StimulusTabs extends React$1.Component {
8745
8744
  __self: this,
8746
8745
  __source: {
8747
8746
  fileName: _jsxFileName,
8748
- lineNumber: 143
8747
+ lineNumber: 156
8749
8748
  }
8750
8749
  }, teacherInstructionsDiv);
8751
8750
  }
@@ -8760,13 +8759,13 @@ class StimulusTabs extends React$1.Component {
8760
8759
  __self: this,
8761
8760
  __source: {
8762
8761
  fileName: _jsxFileName,
8763
- lineNumber: 158
8762
+ lineNumber: 171
8764
8763
  }
8765
8764
  }, this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs), React$1.createElement('h2', {
8766
8765
  __self: this,
8767
8766
  __source: {
8768
8767
  fileName: _jsxFileName,
8769
- lineNumber: 166
8768
+ lineNumber: 179
8770
8769
  }
8771
8770
  }, React$1.createElement('div', {
8772
8771
  className: classNames(classes.passageTitle, 'title'),
@@ -8776,7 +8775,7 @@ class StimulusTabs extends React$1.Component {
8776
8775
  __self: this,
8777
8776
  __source: {
8778
8777
  fileName: _jsxFileName,
8779
- lineNumber: 167
8778
+ lineNumber: 180
8780
8779
  }
8781
8780
  }), React$1.createElement('div', {
8782
8781
  className: classNames(classes.passageSubtitle, 'subtitle'),
@@ -8786,7 +8785,7 @@ class StimulusTabs extends React$1.Component {
8786
8785
  __self: this,
8787
8786
  __source: {
8788
8787
  fileName: _jsxFileName,
8789
- lineNumber: 171
8788
+ lineNumber: 184
8790
8789
  }
8791
8790
  })), React$1.createElement('div', {
8792
8791
  className: classNames(classes.passageAuthor, 'author'),
@@ -8796,7 +8795,7 @@ class StimulusTabs extends React$1.Component {
8796
8795
  __self: this,
8797
8796
  __source: {
8798
8797
  fileName: _jsxFileName,
8799
- lineNumber: 176
8798
+ lineNumber: 189
8800
8799
  }
8801
8800
  }), React$1.createElement('div', {
8802
8801
  key: tab.id,
@@ -8807,7 +8806,7 @@ class StimulusTabs extends React$1.Component {
8807
8806
  __self: this,
8808
8807
  __source: {
8809
8808
  fileName: _jsxFileName,
8810
- lineNumber: 180
8809
+ lineNumber: 193
8811
8810
  }
8812
8811
  }));
8813
8812
  }
@@ -8825,7 +8824,7 @@ class StimulusTabs extends React$1.Component {
8825
8824
  __self: this,
8826
8825
  __source: {
8827
8826
  fileName: _jsxFileName,
8828
- lineNumber: 200
8827
+ lineNumber: 213
8829
8828
  }
8830
8829
  }, disabledTabs || tabs.length === 1 ? tabs.map(tab => this.renderTab(tab, showTeacherInstructions, disabledTabs)) : React$1.createElement(React$1.Fragment, null, React$1.createElement(Tabs, {
8831
8830
  classes: {
@@ -8837,7 +8836,7 @@ class StimulusTabs extends React$1.Component {
8837
8836
  __self: this,
8838
8837
  __source: {
8839
8838
  fileName: _jsxFileName,
8840
- lineNumber: 205
8839
+ lineNumber: 218
8841
8840
  }
8842
8841
  }, tabs.map(tab => React$1.createElement(Tab, {
8843
8842
  className: classes.tab,
@@ -8850,7 +8849,7 @@ class StimulusTabs extends React$1.Component {
8850
8849
  __self: this,
8851
8850
  __source: {
8852
8851
  fileName: _jsxFileName,
8853
- lineNumber: 218
8852
+ lineNumber: 231
8854
8853
  }
8855
8854
  }),
8856
8855
  value: tab.id,
@@ -8862,7 +8861,7 @@ class StimulusTabs extends React$1.Component {
8862
8861
  __self: this,
8863
8862
  __source: {
8864
8863
  fileName: _jsxFileName,
8865
- lineNumber: 214
8864
+ lineNumber: 227
8866
8865
  }
8867
8866
  }))), selectedTab ? this.renderTab(selectedTab, showTeacherInstructions, disabledTabs) : null));
8868
8867
  }
package/module/print.js CHANGED
@@ -8643,11 +8643,9 @@ class StimulusTabs extends React$1.Component {
8643
8643
  const currentIndex = tabs.findIndex(tab => tab.id === currentTabId);
8644
8644
  switch (key) {
8645
8645
  case 'ArrowRight':
8646
- case 'ArrowDown':
8647
8646
  newTabIndex = (currentIndex + 1) % tabs.length;
8648
8647
  break;
8649
8648
  case 'ArrowLeft':
8650
- case 'ArrowUp':
8651
8649
  newTabIndex = (currentIndex - 1 + tabs.length) % tabs.length;
8652
8650
  break;
8653
8651
  case 'Home':
@@ -8664,6 +8662,7 @@ class StimulusTabs extends React$1.Component {
8664
8662
  if (newTabIndex !== -1) {
8665
8663
  event.preventDefault();
8666
8664
  this.handleChange(event, tabs[newTabIndex].id);
8665
+ document.getElementById(`button-${tabs[newTabIndex].id}`).focus();
8667
8666
  }
8668
8667
  };
8669
8668
  }
@@ -8694,7 +8693,7 @@ class StimulusTabs extends React$1.Component {
8694
8693
  __self: this,
8695
8694
  __source: {
8696
8695
  fileName: _jsxFileName,
8697
- lineNumber: 130
8696
+ lineNumber: 143
8698
8697
  }
8699
8698
  });
8700
8699
  if (disabledTabs) {
@@ -8708,7 +8707,7 @@ class StimulusTabs extends React$1.Component {
8708
8707
  __self: this,
8709
8708
  __source: {
8710
8709
  fileName: _jsxFileName,
8711
- lineNumber: 143
8710
+ lineNumber: 156
8712
8711
  }
8713
8712
  }, teacherInstructionsDiv);
8714
8713
  }
@@ -8723,13 +8722,13 @@ class StimulusTabs extends React$1.Component {
8723
8722
  __self: this,
8724
8723
  __source: {
8725
8724
  fileName: _jsxFileName,
8726
- lineNumber: 158
8725
+ lineNumber: 171
8727
8726
  }
8728
8727
  }, this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs), React$1.createElement('h2', {
8729
8728
  __self: this,
8730
8729
  __source: {
8731
8730
  fileName: _jsxFileName,
8732
- lineNumber: 166
8731
+ lineNumber: 179
8733
8732
  }
8734
8733
  }, React$1.createElement('div', {
8735
8734
  className: classNames(classes.passageTitle, 'title'),
@@ -8739,7 +8738,7 @@ class StimulusTabs extends React$1.Component {
8739
8738
  __self: this,
8740
8739
  __source: {
8741
8740
  fileName: _jsxFileName,
8742
- lineNumber: 167
8741
+ lineNumber: 180
8743
8742
  }
8744
8743
  }), React$1.createElement('div', {
8745
8744
  className: classNames(classes.passageSubtitle, 'subtitle'),
@@ -8749,7 +8748,7 @@ class StimulusTabs extends React$1.Component {
8749
8748
  __self: this,
8750
8749
  __source: {
8751
8750
  fileName: _jsxFileName,
8752
- lineNumber: 171
8751
+ lineNumber: 184
8753
8752
  }
8754
8753
  })), React$1.createElement('div', {
8755
8754
  className: classNames(classes.passageAuthor, 'author'),
@@ -8759,7 +8758,7 @@ class StimulusTabs extends React$1.Component {
8759
8758
  __self: this,
8760
8759
  __source: {
8761
8760
  fileName: _jsxFileName,
8762
- lineNumber: 176
8761
+ lineNumber: 189
8763
8762
  }
8764
8763
  }), React$1.createElement('div', {
8765
8764
  key: tab.id,
@@ -8770,7 +8769,7 @@ class StimulusTabs extends React$1.Component {
8770
8769
  __self: this,
8771
8770
  __source: {
8772
8771
  fileName: _jsxFileName,
8773
- lineNumber: 180
8772
+ lineNumber: 193
8774
8773
  }
8775
8774
  }));
8776
8775
  }
@@ -8788,7 +8787,7 @@ class StimulusTabs extends React$1.Component {
8788
8787
  __self: this,
8789
8788
  __source: {
8790
8789
  fileName: _jsxFileName,
8791
- lineNumber: 200
8790
+ lineNumber: 213
8792
8791
  }
8793
8792
  }, disabledTabs || tabs.length === 1 ? tabs.map(tab => this.renderTab(tab, showTeacherInstructions, disabledTabs)) : React$1.createElement(React$1.Fragment, null, React$1.createElement(Tabs, {
8794
8793
  classes: {
@@ -8800,7 +8799,7 @@ class StimulusTabs extends React$1.Component {
8800
8799
  __self: this,
8801
8800
  __source: {
8802
8801
  fileName: _jsxFileName,
8803
- lineNumber: 205
8802
+ lineNumber: 218
8804
8803
  }
8805
8804
  }, tabs.map(tab => React$1.createElement(Tab, {
8806
8805
  className: classes.tab,
@@ -8813,7 +8812,7 @@ class StimulusTabs extends React$1.Component {
8813
8812
  __self: this,
8814
8813
  __source: {
8815
8814
  fileName: _jsxFileName,
8816
- lineNumber: 218
8815
+ lineNumber: 231
8817
8816
  }
8818
8817
  }),
8819
8818
  value: tab.id,
@@ -8825,7 +8824,7 @@ class StimulusTabs extends React$1.Component {
8825
8824
  __self: this,
8826
8825
  __source: {
8827
8826
  fileName: _jsxFileName,
8828
- lineNumber: 214
8827
+ lineNumber: 227
8829
8828
  }
8830
8829
  }))), selectedTab ? this.renderTab(selectedTab, showTeacherInstructions, disabledTabs) : null));
8831
8830
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/passage",
3
- "version": "2.18.7-next.1+5f0ae3443",
3
+ "version": "2.18.7-next.13+a5e9a364d",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -17,7 +17,7 @@
17
17
  "react": "^16.8.1",
18
18
  "react-dom": "^16.8.1"
19
19
  },
20
- "gitHead": "5f0ae34434cf64c6c7af3f3a01624fbb46ff132f",
20
+ "gitHead": "a5e9a364d7f613f804adc677ba00bb18784b9dea",
21
21
  "scripts": {
22
22
  "postpublish": "../../scripts/postpublish"
23
23
  },