@instructure/ui-tabs 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.
Files changed (8) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Tabs/Panel/index.js +22 -24
  3. package/es/Tabs/Tab/index.js +52 -53
  4. package/es/Tabs/index.js +62 -65
  5. package/lib/Tabs/Panel/index.js +22 -24
  6. package/lib/Tabs/Tab/index.js +52 -53
  7. package/lib/Tabs/index.js +62 -65
  8. package/package.json +20 -20
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-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
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-tabs
9
9
 
package/es/Tabs/Panel/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
2
  const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles"];
3
3
 
4
- var _dec, _class;
4
+ var _dec, _class, _class2;
5
5
 
6
6
  /*
7
7
  * The MIT License (MIT)
@@ -44,18 +44,20 @@ id: Tabs.Panel
44
44
  @tsProps
45
45
  **/
46
46
 
47
- let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Panel extends Component {
48
- static displayName = "Panel";
49
- static componentId = 'Tabs.Panel';
50
- static allowedProps = allowedProps;
51
- static propTypes = propTypes;
52
- static defaultProps = {
53
- isDisabled: false,
54
- textAlign: 'start',
55
- variant: 'default',
56
- isSelected: false,
57
- padding: 'small'
58
- };
47
+ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Panel extends Component {
48
+ constructor() {
49
+ super(...arguments);
50
+ this.ref = null;
51
+
52
+ this.handleRef = el => {
53
+ const elementRef = this.props.elementRef;
54
+ this.ref = el;
55
+
56
+ if (typeof elementRef === 'function') {
57
+ elementRef(el);
58
+ }
59
+ };
60
+ }
59
61
 
60
62
  componentDidMount() {
61
63
  var _this$props$makeStyle, _this$props;
@@ -69,16 +71,6 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
69
71
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
70
72
  }
71
73
 
72
- ref = null;
73
- handleRef = el => {
74
- const elementRef = this.props.elementRef;
75
- this.ref = el;
76
-
77
- if (typeof elementRef === 'function') {
78
- elementRef(el);
79
- }
80
- };
81
-
82
74
  render() {
83
75
  const _this$props3 = this.props,
84
76
  labelledBy = _this$props3.labelledBy,
@@ -118,6 +110,12 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
118
110
  }, children)));
119
111
  }
120
112
 
121
- }) || _class);
113
+ }, _class2.displayName = "Panel", _class2.componentId = 'Tabs.Panel', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
114
+ isDisabled: false,
115
+ textAlign: 'start',
116
+ variant: 'default',
117
+ isSelected: false,
118
+ padding: 'small'
119
+ }, _class2)) || _class);
122
120
  export default Panel;
123
121
  export { Panel };
package/es/Tabs/Tab/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
2
  const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
3
3
 
4
- var _dec, _class;
4
+ var _dec, _class, _class2;
5
5
 
6
6
  /*
7
7
  * The MIT License (MIT)
@@ -43,66 +43,61 @@ id: Tabs.Tab
43
43
  @tsProps
44
44
  **/
45
45
 
46
- let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Tab extends Component {
47
- static displayName = "Tab";
48
- static componentId = 'Tabs.Tab';
49
- static allowedProps = allowedProps;
50
- static propTypes = propTypes;
51
- static defaultProps = {
52
- variant: 'default',
53
- isDisabled: false,
54
- isSelected: false
55
- };
46
+ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Tab extends Component {
47
+ constructor() {
48
+ super(...arguments);
49
+
50
+ this.handleClick = event => {
51
+ const _this$props = this.props,
52
+ onClick = _this$props.onClick,
53
+ index = _this$props.index,
54
+ id = _this$props.id,
55
+ isDisabled = _this$props.isDisabled;
56
+
57
+ if (isDisabled) {
58
+ return;
59
+ }
60
+
61
+ if (typeof onClick === 'function') {
62
+ onClick(event, {
63
+ index,
64
+ id
65
+ });
66
+ }
67
+ };
68
+
69
+ this.handleKeyDown = event => {
70
+ const _this$props2 = this.props,
71
+ onKeyDown = _this$props2.onKeyDown,
72
+ index = _this$props2.index,
73
+ id = _this$props2.id,
74
+ isDisabled = _this$props2.isDisabled;
75
+
76
+ if (isDisabled) {
77
+ return;
78
+ }
79
+
80
+ if (typeof onKeyDown === 'function') {
81
+ onKeyDown(event, {
82
+ index,
83
+ id
84
+ });
85
+ }
86
+ };
87
+ }
56
88
 
57
89
  componentDidMount() {
58
- var _this$props$makeStyle, _this$props;
90
+ var _this$props$makeStyle, _this$props3;
59
91
 
60
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
92
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
61
93
  }
62
94
 
63
95
  componentDidUpdate() {
64
- var _this$props$makeStyle2, _this$props2;
96
+ var _this$props$makeStyle2, _this$props4;
65
97
 
66
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
98
+ (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
67
99
  }
68
100
 
69
- handleClick = event => {
70
- const _this$props3 = this.props,
71
- onClick = _this$props3.onClick,
72
- index = _this$props3.index,
73
- id = _this$props3.id,
74
- isDisabled = _this$props3.isDisabled;
75
-
76
- if (isDisabled) {
77
- return;
78
- }
79
-
80
- if (typeof onClick === 'function') {
81
- onClick(event, {
82
- index,
83
- id
84
- });
85
- }
86
- };
87
- handleKeyDown = event => {
88
- const _this$props4 = this.props,
89
- onKeyDown = _this$props4.onKeyDown,
90
- index = _this$props4.index,
91
- id = _this$props4.id,
92
- isDisabled = _this$props4.isDisabled;
93
-
94
- if (isDisabled) {
95
- return;
96
- }
97
-
98
- if (typeof onKeyDown === 'function') {
99
- onKeyDown(event, {
100
- index,
101
- id
102
- });
103
- }
104
- };
105
-
106
101
  render() {
107
102
  const _this$props5 = this.props,
108
103
  id = _this$props5.id,
@@ -130,6 +125,10 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
130
125
  }), callRenderProp(children));
131
126
  }
132
127
 
133
- }) || _class);
128
+ }, _class2.displayName = "Tab", _class2.componentId = 'Tabs.Tab', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
129
+ variant: 'default',
130
+ isDisabled: false,
131
+ isSelected: false
132
+ }, _class2)) || _class);
134
133
  export default Tab;
135
134
  export { Tab };
package/es/Tabs/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
2
  const _excluded = ["children", "elementRef", "maxWidth", "variant", "margin", "screenReaderLabel", "onRequestTabChange", "tabOverflow", "styles"];
3
3
 
4
- var _dec, _dec2, _dec3, _class;
4
+ var _dec, _dec2, _dec3, _class, _class2;
5
5
 
6
6
  /*
7
7
  * The MIT License (MIT)
@@ -53,35 +53,64 @@ category: components
53
53
  ---
54
54
  @tsProps
55
55
  **/
56
- let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Tabs extends Component {
57
- static displayName = "Tabs";
58
- static componentId = 'Tabs';
59
- static allowedProps = allowedProps;
60
- static propTypes = propTypes;
61
- static defaultProps = {
62
- variant: 'default',
63
- shouldFocusOnRender: false,
64
- tabOverflow: 'stack'
65
- };
66
- static Panel = Panel;
67
- static Tab = Tab;
68
- _tabList = null;
69
- _focusable = null;
70
- _tabListPosition;
71
- _debounced;
72
- _resizeListener;
73
- ref = null;
74
- handleRef = el => {
75
- const elementRef = this.props.elementRef;
76
- this.ref = el;
77
-
78
- if (typeof elementRef === 'function') {
79
- elementRef(el);
80
- }
81
- };
82
-
56
+ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Tabs extends Component {
83
57
  constructor(props) {
84
58
  super(props);
59
+ this._tabList = null;
60
+ this._focusable = null;
61
+ this._tabListPosition = void 0;
62
+ this._debounced = void 0;
63
+ this._resizeListener = void 0;
64
+ this.ref = null;
65
+
66
+ this.handleRef = el => {
67
+ const elementRef = this.props.elementRef;
68
+ this.ref = el;
69
+
70
+ if (typeof elementRef === 'function') {
71
+ elementRef(el);
72
+ }
73
+ };
74
+
75
+ this.handleTabClick = (event, _ref) => {
76
+ let index = _ref.index;
77
+ const nextTab = this.getNextTab(index, 0);
78
+ this.fireOnChange(event, nextTab);
79
+ };
80
+
81
+ this.handleTabKeyDown = (event, _ref2) => {
82
+ let index = _ref2.index;
83
+ let nextTab;
84
+
85
+ if (event.keyCode === keycode.codes.up || event.keyCode === keycode.codes.left) {
86
+ // Select next tab to the left
87
+ nextTab = this.getNextTab(index, -1);
88
+ } else if (event.keyCode === keycode.codes.down || event.keyCode === keycode.codes.right) {
89
+ // Select next tab to the right
90
+ nextTab = this.getNextTab(index, 1);
91
+ }
92
+
93
+ if (nextTab) {
94
+ event.preventDefault();
95
+ this.fireOnChange(event, nextTab);
96
+ }
97
+ };
98
+
99
+ this.handleResize = () => {
100
+ this.setState({
101
+ withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
102
+ });
103
+ this._tabListPosition = getBoundingClientRect(this._tabList);
104
+ };
105
+
106
+ this.handleFocusableRef = el => {
107
+ this._focusable = el;
108
+ };
109
+
110
+ this.handleTabListRef = el => {
111
+ this._tabList = el;
112
+ };
113
+
85
114
  this.state = {
86
115
  withTabListOverflow: false
87
116
  };
@@ -219,35 +248,6 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
219
248
  }
220
249
  }
221
250
 
222
- handleTabClick = (event, _ref) => {
223
- let index = _ref.index;
224
- const nextTab = this.getNextTab(index, 0);
225
- this.fireOnChange(event, nextTab);
226
- };
227
- handleTabKeyDown = (event, _ref2) => {
228
- let index = _ref2.index;
229
- let nextTab;
230
-
231
- if (event.keyCode === keycode.codes.up || event.keyCode === keycode.codes.left) {
232
- // Select next tab to the left
233
- nextTab = this.getNextTab(index, -1);
234
- } else if (event.keyCode === keycode.codes.down || event.keyCode === keycode.codes.right) {
235
- // Select next tab to the right
236
- nextTab = this.getNextTab(index, 1);
237
- }
238
-
239
- if (nextTab) {
240
- event.preventDefault();
241
- this.fireOnChange(event, nextTab);
242
- }
243
- };
244
- handleResize = () => {
245
- this.setState({
246
- withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
247
- });
248
- this._tabListPosition = getBoundingClientRect(this._tabList);
249
- };
250
-
251
251
  getNextTab(startIndex, step) {
252
252
  const tabs = React.Children.toArray(this.props.children).map(child => matchComponentTypes(child, [Panel]) && child);
253
253
  const count = tabs.length;
@@ -315,13 +315,6 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
315
315
  });
316
316
  }
317
317
 
318
- handleFocusableRef = el => {
319
- this._focusable = el;
320
- };
321
- handleTabListRef = el => {
322
- this._tabList = el;
323
- };
324
-
325
318
  focus() {
326
319
  this._focusable && typeof this._focusable.focus === 'function' && this._focusable.focus();
327
320
  }
@@ -392,6 +385,10 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
392
385
  }, panels));
393
386
  }
394
387
 
395
- }) || _class) || _class) || _class);
388
+ }, _class2.displayName = "Tabs", _class2.componentId = 'Tabs', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
389
+ variant: 'default',
390
+ shouldFocusOnRender: false,
391
+ tabOverflow: 'stack'
392
+ }, _class2.Panel = Panel, _class2.Tab = Tab, _class2)) || _class) || _class) || _class);
396
393
  export default Tabs;
397
394
  export { Tabs, Panel };
package/lib/Tabs/Panel/index.js CHANGED
@@ -27,7 +27,7 @@ var _props = require("./props");
27
27
 
28
28
  const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles"];
29
29
 
30
- var _dec, _class;
30
+ var _dec, _class, _class2;
31
31
 
32
32
  /**
33
33
  ---
@@ -36,18 +36,20 @@ id: Tabs.Panel
36
36
  ---
37
37
  @tsProps
38
38
  **/
39
- let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Panel extends _react.Component {
40
- static displayName = "Panel";
41
- static componentId = 'Tabs.Panel';
42
- static allowedProps = _props.allowedProps;
43
- static propTypes = _props.propTypes;
44
- static defaultProps = {
45
- isDisabled: false,
46
- textAlign: 'start',
47
- variant: 'default',
48
- isSelected: false,
49
- padding: 'small'
50
- };
39
+ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Panel extends _react.Component {
40
+ constructor() {
41
+ super(...arguments);
42
+ this.ref = null;
43
+
44
+ this.handleRef = el => {
45
+ const elementRef = this.props.elementRef;
46
+ this.ref = el;
47
+
48
+ if (typeof elementRef === 'function') {
49
+ elementRef(el);
50
+ }
51
+ };
52
+ }
51
53
 
52
54
  componentDidMount() {
53
55
  var _this$props$makeStyle, _this$props;
@@ -61,16 +63,6 @@ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
61
63
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
62
64
  }
63
65
 
64
- ref = null;
65
- handleRef = el => {
66
- const elementRef = this.props.elementRef;
67
- this.ref = el;
68
-
69
- if (typeof elementRef === 'function') {
70
- elementRef(el);
71
- }
72
- };
73
-
74
66
  render() {
75
67
  const _this$props3 = this.props,
76
68
  labelledBy = _this$props3.labelledBy,
@@ -109,7 +101,13 @@ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
109
101
  }, children)));
110
102
  }
111
103
 
112
- }) || _class);
104
+ }, _class2.displayName = "Panel", _class2.componentId = 'Tabs.Panel', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
105
+ isDisabled: false,
106
+ textAlign: 'start',
107
+ variant: 'default',
108
+ isSelected: false,
109
+ padding: 'small'
110
+ }, _class2)) || _class);
113
111
  exports.Panel = Panel;
114
112
  var _default = Panel;
115
113
  exports.default = _default;
package/lib/Tabs/Tab/index.js CHANGED
@@ -29,7 +29,7 @@ var _props = require("./props");
29
29
 
30
30
  const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
31
31
 
32
- var _dec, _class;
32
+ var _dec, _class, _class2;
33
33
 
34
34
  /**
35
35
  ---
@@ -38,66 +38,61 @@ id: Tabs.Tab
38
38
  ---
39
39
  @tsProps
40
40
  **/
41
- let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class Tab extends _react.Component {
42
- static displayName = "Tab";
43
- static componentId = 'Tabs.Tab';
44
- static allowedProps = _props.allowedProps;
45
- static propTypes = _props.propTypes;
46
- static defaultProps = {
47
- variant: 'default',
48
- isDisabled: false,
49
- isSelected: false
50
- };
41
+ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Tab extends _react.Component {
42
+ constructor() {
43
+ super(...arguments);
44
+
45
+ this.handleClick = event => {
46
+ const _this$props = this.props,
47
+ onClick = _this$props.onClick,
48
+ index = _this$props.index,
49
+ id = _this$props.id,
50
+ isDisabled = _this$props.isDisabled;
51
+
52
+ if (isDisabled) {
53
+ return;
54
+ }
55
+
56
+ if (typeof onClick === 'function') {
57
+ onClick(event, {
58
+ index,
59
+ id
60
+ });
61
+ }
62
+ };
63
+
64
+ this.handleKeyDown = event => {
65
+ const _this$props2 = this.props,
66
+ onKeyDown = _this$props2.onKeyDown,
67
+ index = _this$props2.index,
68
+ id = _this$props2.id,
69
+ isDisabled = _this$props2.isDisabled;
70
+
71
+ if (isDisabled) {
72
+ return;
73
+ }
74
+
75
+ if (typeof onKeyDown === 'function') {
76
+ onKeyDown(event, {
77
+ index,
78
+ id
79
+ });
80
+ }
81
+ };
82
+ }
51
83
 
52
84
  componentDidMount() {
53
- var _this$props$makeStyle, _this$props;
85
+ var _this$props$makeStyle, _this$props3;
54
86
 
55
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
87
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
56
88
  }
57
89
 
58
90
  componentDidUpdate() {
59
- var _this$props$makeStyle2, _this$props2;
91
+ var _this$props$makeStyle2, _this$props4;
60
92
 
61
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
93
+ (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
62
94
  }
63
95
 
64
- handleClick = event => {
65
- const _this$props3 = this.props,
66
- onClick = _this$props3.onClick,
67
- index = _this$props3.index,
68
- id = _this$props3.id,
69
- isDisabled = _this$props3.isDisabled;
70
-
71
- if (isDisabled) {
72
- return;
73
- }
74
-
75
- if (typeof onClick === 'function') {
76
- onClick(event, {
77
- index,
78
- id
79
- });
80
- }
81
- };
82
- handleKeyDown = event => {
83
- const _this$props4 = this.props,
84
- onKeyDown = _this$props4.onKeyDown,
85
- index = _this$props4.index,
86
- id = _this$props4.id,
87
- isDisabled = _this$props4.isDisabled;
88
-
89
- if (isDisabled) {
90
- return;
91
- }
92
-
93
- if (typeof onKeyDown === 'function') {
94
- onKeyDown(event, {
95
- index,
96
- id
97
- });
98
- }
99
- };
100
-
101
96
  render() {
102
97
  const _this$props5 = this.props,
103
98
  id = _this$props5.id,
@@ -124,7 +119,11 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
124
119
  }), (0, _callRenderProp.callRenderProp)(children));
125
120
  }
126
121
 
127
- }) || _class);
122
+ }, _class2.displayName = "Tab", _class2.componentId = 'Tabs.Tab', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
123
+ variant: 'default',
124
+ isDisabled: false,
125
+ isSelected: false
126
+ }, _class2)) || _class);
128
127
  exports.Tab = Tab;
129
128
  var _default = Tab;
130
129
  exports.default = _default;
package/lib/Tabs/index.js CHANGED
@@ -59,7 +59,7 @@ var _props = require("./props");
59
59
 
60
60
  const _excluded = ["children", "elementRef", "maxWidth", "variant", "margin", "screenReaderLabel", "onRequestTabChange", "tabOverflow", "styles"];
61
61
 
62
- var _dec, _dec2, _dec3, _class;
62
+ var _dec, _dec2, _dec3, _class, _class2;
63
63
 
64
64
  /**
65
65
  ---
@@ -67,35 +67,64 @@ category: components
67
67
  ---
68
68
  @tsProps
69
69
  **/
70
- let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Tabs extends _react.Component {
71
- static displayName = "Tabs";
72
- static componentId = 'Tabs';
73
- static allowedProps = _props.allowedProps;
74
- static propTypes = _props.propTypes;
75
- static defaultProps = {
76
- variant: 'default',
77
- shouldFocusOnRender: false,
78
- tabOverflow: 'stack'
79
- };
80
- static Panel = _Panel.Panel;
81
- static Tab = _Tab.Tab;
82
- _tabList = null;
83
- _focusable = null;
84
- _tabListPosition;
85
- _debounced;
86
- _resizeListener;
87
- ref = null;
88
- handleRef = el => {
89
- const elementRef = this.props.elementRef;
90
- this.ref = el;
91
-
92
- if (typeof elementRef === 'function') {
93
- elementRef(el);
94
- }
95
- };
96
-
70
+ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Tabs extends _react.Component {
97
71
  constructor(props) {
98
72
  super(props);
73
+ this._tabList = null;
74
+ this._focusable = null;
75
+ this._tabListPosition = void 0;
76
+ this._debounced = void 0;
77
+ this._resizeListener = void 0;
78
+ this.ref = null;
79
+
80
+ this.handleRef = el => {
81
+ const elementRef = this.props.elementRef;
82
+ this.ref = el;
83
+
84
+ if (typeof elementRef === 'function') {
85
+ elementRef(el);
86
+ }
87
+ };
88
+
89
+ this.handleTabClick = (event, _ref) => {
90
+ let index = _ref.index;
91
+ const nextTab = this.getNextTab(index, 0);
92
+ this.fireOnChange(event, nextTab);
93
+ };
94
+
95
+ this.handleTabKeyDown = (event, _ref2) => {
96
+ let index = _ref2.index;
97
+ let nextTab;
98
+
99
+ if (event.keyCode === _keycode.default.codes.up || event.keyCode === _keycode.default.codes.left) {
100
+ // Select next tab to the left
101
+ nextTab = this.getNextTab(index, -1);
102
+ } else if (event.keyCode === _keycode.default.codes.down || event.keyCode === _keycode.default.codes.right) {
103
+ // Select next tab to the right
104
+ nextTab = this.getNextTab(index, 1);
105
+ }
106
+
107
+ if (nextTab) {
108
+ event.preventDefault();
109
+ this.fireOnChange(event, nextTab);
110
+ }
111
+ };
112
+
113
+ this.handleResize = () => {
114
+ this.setState({
115
+ withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
116
+ });
117
+ this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
118
+ };
119
+
120
+ this.handleFocusableRef = el => {
121
+ this._focusable = el;
122
+ };
123
+
124
+ this.handleTabListRef = el => {
125
+ this._tabList = el;
126
+ };
127
+
99
128
  this.state = {
100
129
  withTabListOverflow: false
101
130
  };
@@ -233,35 +262,6 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
233
262
  }
234
263
  }
235
264
 
236
- handleTabClick = (event, _ref) => {
237
- let index = _ref.index;
238
- const nextTab = this.getNextTab(index, 0);
239
- this.fireOnChange(event, nextTab);
240
- };
241
- handleTabKeyDown = (event, _ref2) => {
242
- let index = _ref2.index;
243
- let nextTab;
244
-
245
- if (event.keyCode === _keycode.default.codes.up || event.keyCode === _keycode.default.codes.left) {
246
- // Select next tab to the left
247
- nextTab = this.getNextTab(index, -1);
248
- } else if (event.keyCode === _keycode.default.codes.down || event.keyCode === _keycode.default.codes.right) {
249
- // Select next tab to the right
250
- nextTab = this.getNextTab(index, 1);
251
- }
252
-
253
- if (nextTab) {
254
- event.preventDefault();
255
- this.fireOnChange(event, nextTab);
256
- }
257
- };
258
- handleResize = () => {
259
- this.setState({
260
- withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
261
- });
262
- this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
263
- };
264
-
265
265
  getNextTab(startIndex, step) {
266
266
  const tabs = _react.default.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel]) && child);
267
267
 
@@ -330,13 +330,6 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
330
330
  });
331
331
  }
332
332
 
333
- handleFocusableRef = el => {
334
- this._focusable = el;
335
- };
336
- handleTabListRef = el => {
337
- this._tabList = el;
338
- };
339
-
340
333
  focus() {
341
334
  this._focusable && typeof this._focusable.focus === 'function' && this._focusable.focus();
342
335
  }
@@ -409,7 +402,11 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
409
402
  }, panels));
410
403
  }
411
404
 
412
- }) || _class) || _class) || _class);
405
+ }, _class2.displayName = "Tabs", _class2.componentId = 'Tabs', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
406
+ variant: 'default',
407
+ shouldFocusOnRender: false,
408
+ tabOverflow: 'stack'
409
+ }, _class2.Panel = _Panel.Panel, _class2.Tab = _Tab.Tab, _class2)) || _class) || _class) || _class);
413
410
  exports.Tabs = Tabs;
414
411
  var _default = Tabs;
415
412
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tabs",
3
- "version": "8.25.1-snapshot-10",
3
+ "version": "8.25.1-snapshot-13",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,28 +23,28 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
27
- "@instructure/ui-color-utils": "8.25.1-snapshot-10",
28
- "@instructure/ui-test-locator": "8.25.1-snapshot-10",
29
- "@instructure/ui-test-utils": "8.25.1-snapshot-10",
30
- "@instructure/ui-themes": "8.25.1-snapshot-10"
26
+ "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
27
+ "@instructure/ui-color-utils": "8.25.1-snapshot-13",
28
+ "@instructure/ui-test-locator": "8.25.1-snapshot-13",
29
+ "@instructure/ui-test-utils": "8.25.1-snapshot-13",
30
+ "@instructure/ui-themes": "8.25.1-snapshot-13"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/console": "8.25.1-snapshot-10",
35
- "@instructure/debounce": "8.25.1-snapshot-10",
36
- "@instructure/emotion": "8.25.1-snapshot-10",
37
- "@instructure/shared-types": "8.25.1-snapshot-10",
38
- "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
39
- "@instructure/ui-focusable": "8.25.1-snapshot-10",
40
- "@instructure/ui-i18n": "8.25.1-snapshot-10",
41
- "@instructure/ui-motion": "8.25.1-snapshot-10",
42
- "@instructure/ui-prop-types": "8.25.1-snapshot-10",
43
- "@instructure/ui-react-utils": "8.25.1-snapshot-10",
44
- "@instructure/ui-testable": "8.25.1-snapshot-10",
45
- "@instructure/ui-utils": "8.25.1-snapshot-10",
46
- "@instructure/ui-view": "8.25.1-snapshot-10",
47
- "@instructure/uid": "8.25.1-snapshot-10",
34
+ "@instructure/console": "8.25.1-snapshot-13",
35
+ "@instructure/debounce": "8.25.1-snapshot-13",
36
+ "@instructure/emotion": "8.25.1-snapshot-13",
37
+ "@instructure/shared-types": "8.25.1-snapshot-13",
38
+ "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
39
+ "@instructure/ui-focusable": "8.25.1-snapshot-13",
40
+ "@instructure/ui-i18n": "8.25.1-snapshot-13",
41
+ "@instructure/ui-motion": "8.25.1-snapshot-13",
42
+ "@instructure/ui-prop-types": "8.25.1-snapshot-13",
43
+ "@instructure/ui-react-utils": "8.25.1-snapshot-13",
44
+ "@instructure/ui-testable": "8.25.1-snapshot-13",
45
+ "@instructure/ui-utils": "8.25.1-snapshot-13",
46
+ "@instructure/ui-view": "8.25.1-snapshot-13",
47
+ "@instructure/uid": "8.25.1-snapshot-13",
48
48
  "keycode": "^2",
49
49
  "prop-types": "^15"
50
50
  },