@instructure/ui-tree-browser 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 (10) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/TreeBrowser/TreeButton/index.js +22 -24
  3. package/es/TreeBrowser/TreeCollection/index.js +68 -70
  4. package/es/TreeBrowser/TreeNode/index.js +20 -22
  5. package/es/TreeBrowser/index.js +91 -99
  6. package/lib/TreeBrowser/TreeButton/index.js +22 -24
  7. package/lib/TreeBrowser/TreeCollection/index.js +68 -70
  8. package/lib/TreeBrowser/TreeNode/index.js +20 -22
  9. package/lib/TreeBrowser/index.js +91 -99
  10. package/package.json +14 -14
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-tree-browser
9
9
 
package/es/TreeBrowser/TreeButton/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class;
1
+ var _dec, _dec2, _class, _class2;
2
2
 
3
3
  /*
4
4
  * The MIT License (MIT)
@@ -42,20 +42,19 @@ id: TreeBrowser.Button
42
42
  @tsProps
43
43
  **/
44
44
 
45
- let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeButton extends Component {
46
- static displayName = "TreeButton";
47
- static componentId = 'TreeBrowser.Button';
48
- static allowedProps = allowedProps;
49
- static propTypes = propTypes;
50
- static defaultProps = {
51
- type: 'treeButton',
52
- size: 'medium',
53
- variant: 'folderTree',
54
- selected: false,
55
- focused: false,
56
- expanded: false
57
- };
58
- ref = null;
45
+ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeButton extends Component {
46
+ constructor() {
47
+ super(...arguments);
48
+ this.ref = null;
49
+
50
+ this.handleRef = el => {
51
+ if (el && typeof this.props.containerRef === 'function') {
52
+ this.props.containerRef(el.parentElement);
53
+ }
54
+
55
+ this.ref = el;
56
+ };
57
+ }
59
58
 
60
59
  componentDidMount() {
61
60
  var _this$props$makeStyle, _this$props;
@@ -143,14 +142,6 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
143
142
  return void 0;
144
143
  }
145
144
 
146
- handleRef = el => {
147
- if (el && typeof this.props.containerRef === 'function') {
148
- this.props.containerRef(el.parentElement);
149
- }
150
-
151
- this.ref = el;
152
- };
153
-
154
145
  render() {
155
146
  const _this$props5 = this.props,
156
147
  styles = _this$props5.styles,
@@ -165,6 +156,13 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
165
156
  }, buttonContent);
166
157
  }
167
158
 
168
- }) || _class) || _class);
159
+ }, _class2.displayName = "TreeButton", _class2.componentId = 'TreeBrowser.Button', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
160
+ type: 'treeButton',
161
+ size: 'medium',
162
+ variant: 'folderTree',
163
+ selected: false,
164
+ focused: false,
165
+ expanded: false
166
+ }, _class2)) || _class) || _class);
169
167
  export default TreeButton;
170
168
  export { TreeButton };
package/es/TreeBrowser/TreeCollection/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class;
1
+ var _dec, _dec2, _class, _class2;
2
2
 
3
3
  /*
4
4
  * The MIT License (MIT)
@@ -44,93 +44,81 @@ id: TreeBrowser.Collection
44
44
  ---
45
45
  @tsProps
46
46
  **/
47
- let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeCollection extends Component {
48
- static displayName = "TreeCollection";
49
- static componentId = 'TreeBrowser.Collection';
50
- static allowedProps = allowedProps;
51
- static propTypes = propTypes;
52
- static defaultProps = {
53
- collections: [],
54
- items: [],
55
- expanded: false,
56
- selection: '',
57
- size: 'medium',
58
- variant: 'folderTree',
59
- getItemProps: props => props,
60
- getCollectionProps: props => props,
61
- isCollectionFlattened: false
62
- };
63
- ref = null;
64
-
47
+ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeCollection extends Component {
65
48
  constructor(props) {
66
49
  super(props);
50
+ this.ref = null;
51
+
52
+ this.handleFocus = (e, item) => {
53
+ e.stopPropagation();
54
+ this.setState({
55
+ focused: `${item.type}_${item.id}`
56
+ });
57
+ };
58
+
59
+ this.handleBlur = (e, _item) => {
60
+ e.stopPropagation();
61
+ this.setState({
62
+ focused: ''
63
+ });
64
+ };
65
+
66
+ this.handleCollectionClick = e => {
67
+ const _this$props = this.props,
68
+ id = _this$props.id,
69
+ onCollectionClick = _this$props.onCollectionClick,
70
+ expanded = _this$props.expanded;
71
+ const collection = {
72
+ id,
73
+ expanded: !expanded,
74
+ type: 'collection'
75
+ };
76
+
77
+ if (onCollectionClick && typeof onCollectionClick === 'function') {
78
+ onCollectionClick(e, collection);
79
+ }
80
+ };
81
+
82
+ this.handleCollectionKeyDown = e => {
83
+ const _this$props2 = this.props,
84
+ id = _this$props2.id,
85
+ onKeyDown = _this$props2.onKeyDown,
86
+ expanded = _this$props2.expanded;
87
+ const collection = {
88
+ id,
89
+ expanded: !expanded,
90
+ type: 'collection'
91
+ };
92
+
93
+ if (onKeyDown && typeof onKeyDown === 'function') {
94
+ onKeyDown(e, collection);
95
+ }
96
+ };
97
+
67
98
  this.state = {
68
99
  focused: ''
69
100
  };
70
101
  }
71
102
 
72
103
  componentDidMount() {
73
- var _this$props$makeStyle, _this$props;
104
+ var _this$props$makeStyle, _this$props3;
74
105
 
75
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
106
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
76
107
  }
77
108
 
78
109
  componentDidUpdate() {
79
- var _this$props$makeStyle2, _this$props2;
110
+ var _this$props$makeStyle2, _this$props4;
80
111
 
81
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
112
+ (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
82
113
  }
83
114
 
84
115
  get itemsLevel() {
85
- const _this$props3 = this.props,
86
- level = _this$props3.level,
87
- isCollectionFlattened = _this$props3.isCollectionFlattened;
116
+ const _this$props5 = this.props,
117
+ level = _this$props5.level,
118
+ isCollectionFlattened = _this$props5.isCollectionFlattened;
88
119
  return isCollectionFlattened ? level : level + 1;
89
120
  }
90
121
 
91
- handleFocus = (e, item) => {
92
- e.stopPropagation();
93
- this.setState({
94
- focused: `${item.type}_${item.id}`
95
- });
96
- };
97
- handleBlur = (e, _item) => {
98
- e.stopPropagation();
99
- this.setState({
100
- focused: ''
101
- });
102
- };
103
- handleCollectionClick = e => {
104
- const _this$props4 = this.props,
105
- id = _this$props4.id,
106
- onCollectionClick = _this$props4.onCollectionClick,
107
- expanded = _this$props4.expanded;
108
- const collection = {
109
- id,
110
- expanded: !expanded,
111
- type: 'collection'
112
- };
113
-
114
- if (onCollectionClick && typeof onCollectionClick === 'function') {
115
- onCollectionClick(e, collection);
116
- }
117
- };
118
- handleCollectionKeyDown = e => {
119
- const _this$props5 = this.props,
120
- id = _this$props5.id,
121
- onKeyDown = _this$props5.onKeyDown,
122
- expanded = _this$props5.expanded;
123
- const collection = {
124
- id,
125
- expanded: !expanded,
126
- type: 'collection'
127
- };
128
-
129
- if (onKeyDown && typeof onKeyDown === 'function') {
130
- onKeyDown(e, collection);
131
- }
132
- };
133
-
134
122
  get collectionsCount() {
135
123
  const collections = this.props.collections;
136
124
  return collections && collections.length > 0 ? collections.length : 0;
@@ -372,6 +360,16 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
372
360
  }, this.renderChildren()));
373
361
  }
374
362
 
375
- }) || _class) || _class);
363
+ }, _class2.displayName = "TreeCollection", _class2.componentId = 'TreeBrowser.Collection', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
364
+ collections: [],
365
+ items: [],
366
+ expanded: false,
367
+ selection: '',
368
+ size: 'medium',
369
+ variant: 'folderTree',
370
+ getItemProps: props => props,
371
+ getCollectionProps: props => props,
372
+ isCollectionFlattened: false
373
+ }, _class2)) || _class) || _class);
376
374
  export default TreeCollection;
377
375
  export { TreeCollection };
package/es/TreeBrowser/TreeNode/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class;
1
+ var _dec, _dec2, _class, _class2;
2
2
 
3
3
  /*
4
4
  * The MIT License (MIT)
@@ -45,18 +45,19 @@ A helper class used to render the :renderBeforeItems and :renderAfterItems
45
45
  in the TreeBrowser.
46
46
  **/
47
47
 
48
- let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeNode extends Component {
49
- static displayName = "TreeNode";
50
- static componentId = 'TreeBrowser.Node';
51
- static allowedProps = allowedProps;
52
- static propTypes = propTypes;
53
- static defaultProps = {
54
- size: 'medium',
55
- variant: 'folderTree',
56
- selected: false,
57
- focused: false
58
- };
59
- ref = null;
48
+ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeNode extends Component {
49
+ constructor() {
50
+ super(...arguments);
51
+ this.ref = null;
52
+
53
+ this.handleRef = el => {
54
+ if (el && typeof this.props.containerRef === 'function') {
55
+ this.props.containerRef(el.parentElement);
56
+ }
57
+
58
+ this.ref = el;
59
+ };
60
+ }
60
61
 
61
62
  componentDidMount() {
62
63
  var _this$props$makeStyle, _this$props;
@@ -70,14 +71,6 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
70
71
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
71
72
  }
72
73
 
73
- handleRef = el => {
74
- if (el && typeof this.props.containerRef === 'function') {
75
- this.props.containerRef(el.parentElement);
76
- }
77
-
78
- this.ref = el;
79
- };
80
-
81
74
  renderItemImage() {
82
75
  const _this$props3 = this.props,
83
76
  thumbnail = _this$props3.thumbnail,
@@ -118,6 +111,11 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
118
111
  }, children)));
119
112
  }
120
113
 
121
- }) || _class) || _class);
114
+ }, _class2.displayName = "TreeNode", _class2.componentId = 'TreeBrowser.Node', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
115
+ size: 'medium',
116
+ variant: 'folderTree',
117
+ selected: false,
118
+ focused: false
119
+ }, _class2)) || _class) || _class);
122
120
  export default TreeNode;
123
121
  export { TreeNode };
package/es/TreeBrowser/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class;
1
+ var _dec, _dec2, _class, _class2;
2
2
 
3
3
  /*
4
4
  * The MIT License (MIT)
@@ -44,33 +44,74 @@ category: components
44
44
  @tsProps
45
45
  **/
46
46
 
47
- let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeBrowser extends Component {
48
- static displayName = "TreeBrowser";
49
- static componentId = 'TreeBrowser';
50
- static allowedProps = allowedProps;
51
- static propTypes = propTypes;
52
- static defaultProps = {
53
- size: 'medium',
54
- variant: 'folderTree',
55
- showRootCollection: true,
56
- collectionIcon: IconFolderLine,
57
- collectionIconExpanded: IconFolderLine,
58
- itemIcon: IconDocumentLine,
59
- getItemProps: props => props,
60
- getCollectionProps: props => props,
61
- defaultExpanded: [],
62
- selectionType: 'none',
63
- sortOrder: function () {
64
- return 0;
65
- }
66
- };
67
- static Node = TreeNode;
68
- static Collection = TreeCollection;
69
- static Button = TreeButton;
70
- ref = null;
71
-
47
+ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeBrowser extends Component {
72
48
  constructor(props) {
49
+ var _this;
50
+
73
51
  super(props);
52
+ _this = this;
53
+ this.ref = null;
54
+
55
+ this.handleCollectionClick = function (e, collection) {
56
+ let expand = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
57
+ e.stopPropagation();
58
+ const onCollectionClick = _this.props.onCollectionClick;
59
+ if (expand) _this.expandOrCollapseNode(collection);
60
+ onCollectionClick === null || onCollectionClick === void 0 ? void 0 : onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
61
+
62
+ _this.handleSelection(collection.id, 'collection');
63
+ };
64
+
65
+ this.handleItemClick = (e, item) => {
66
+ var _this$props$onItemCli, _this$props;
67
+
68
+ e.stopPropagation();
69
+ (_this$props$onItemCli = (_this$props = this.props).onItemClick) === null || _this$props$onItemCli === void 0 ? void 0 : _this$props$onItemCli.call(_this$props, item);
70
+ this.handleSelection(item.id, 'item');
71
+ };
72
+
73
+ this.handleKeyDown = (event, node) => {
74
+ event.stopPropagation();
75
+
76
+ switch (event.keyCode) {
77
+ case keycode.codes.down:
78
+ case keycode.codes.j:
79
+ this.moveFocus(1);
80
+ break;
81
+
82
+ case keycode.codes.up:
83
+ case keycode.codes.k:
84
+ this.moveFocus(-1);
85
+ break;
86
+
87
+ case keycode.codes.home:
88
+ case keycode.codes.end:
89
+ this.homeOrEnd(event.keyCode);
90
+ break;
91
+
92
+ case keycode.codes.left:
93
+ case keycode.codes.right:
94
+ this.handleLeftOrRightArrow(event.keyCode, node);
95
+ break;
96
+
97
+ case keycode.codes.enter:
98
+ case keycode.codes.space:
99
+ this.handleActivation(event, node);
100
+ break;
101
+
102
+ default:
103
+ return;
104
+ }
105
+
106
+ event.preventDefault();
107
+ };
108
+
109
+ this.getIsFlattened = collection => {
110
+ const _this$props2 = this.props,
111
+ rootId = _this$props2.rootId,
112
+ showRootCollection = _this$props2.showRootCollection;
113
+ return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
114
+ };
74
115
 
75
116
  if (typeof this.props.expanded === 'undefined') {
76
117
  this.state = {
@@ -85,81 +126,25 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
85
126
  }
86
127
 
87
128
  componentDidMount() {
88
- var _this$props$makeStyle, _this$props;
129
+ var _this$props$makeStyle, _this$props3;
89
130
 
90
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
131
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
91
132
  }
92
133
 
93
134
  componentDidUpdate() {
94
- var _this$props$makeStyle2, _this$props2;
135
+ var _this$props$makeStyle2, _this$props4;
95
136
 
96
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
137
+ (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
97
138
  }
98
139
 
99
140
  get _root() {
100
141
  return this.ref;
101
142
  }
102
143
 
103
- handleCollectionClick = (() => {
104
- var _this = this;
105
-
106
- return function (e, collection) {
107
- let expand = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
108
- e.stopPropagation();
109
- const onCollectionClick = _this.props.onCollectionClick;
110
- if (expand) _this.expandOrCollapseNode(collection);
111
- onCollectionClick === null || onCollectionClick === void 0 ? void 0 : onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
112
-
113
- _this.handleSelection(collection.id, 'collection');
114
- };
115
- })();
116
- handleItemClick = (e, item) => {
117
- var _this$props$onItemCli, _this$props3;
118
-
119
- e.stopPropagation();
120
- (_this$props$onItemCli = (_this$props3 = this.props).onItemClick) === null || _this$props$onItemCli === void 0 ? void 0 : _this$props$onItemCli.call(_this$props3, item);
121
- this.handleSelection(item.id, 'item');
122
- };
123
- handleKeyDown = (event, node) => {
124
- event.stopPropagation();
125
-
126
- switch (event.keyCode) {
127
- case keycode.codes.down:
128
- case keycode.codes.j:
129
- this.moveFocus(1);
130
- break;
131
-
132
- case keycode.codes.up:
133
- case keycode.codes.k:
134
- this.moveFocus(-1);
135
- break;
136
-
137
- case keycode.codes.home:
138
- case keycode.codes.end:
139
- this.homeOrEnd(event.keyCode);
140
- break;
141
-
142
- case keycode.codes.left:
143
- case keycode.codes.right:
144
- this.handleLeftOrRightArrow(event.keyCode, node);
145
- break;
146
-
147
- case keycode.codes.enter:
148
- case keycode.codes.space:
149
- this.handleActivation(event, node);
150
- break;
151
-
152
- default:
153
- return;
154
- }
155
-
156
- event.preventDefault();
157
- };
158
-
159
144
  get collections() {
160
- const _this$props4 = this.props,
161
- collections = _this$props4.collections,
162
- rootId = _this$props4.rootId;
145
+ const _this$props5 = this.props,
146
+ collections = _this$props5.collections,
147
+ rootId = _this$props5.rootId;
163
148
 
164
149
  if (typeof rootId !== 'undefined') {
165
150
  return [collections[rootId]];
@@ -177,9 +162,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
177
162
  }
178
163
 
179
164
  expandOrCollapseNode(collection) {
180
- var _this$props$onCollect, _this$props5;
165
+ var _this$props$onCollect, _this$props6;
181
166
 
182
- (_this$props$onCollect = (_this$props5 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props5, collection);
167
+ (_this$props$onCollect = (_this$props6 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props6, collection);
183
168
 
184
169
  if (typeof this.props.expanded === 'undefined') {
185
170
  this.setState((state, props) => {
@@ -300,13 +285,6 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
300
285
  }
301
286
  }
302
287
 
303
- getIsFlattened = collection => {
304
- const _this$props6 = this.props,
305
- rootId = _this$props6.rootId,
306
- showRootCollection = _this$props6.showRootCollection;
307
- return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
308
- };
309
-
310
288
  getCollectionProps(collection) {
311
289
  return {
312
290
  id: collection.id,
@@ -356,6 +334,20 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
356
334
  }, this.renderRoot());
357
335
  }
358
336
 
359
- }) || _class) || _class);
337
+ }, _class2.displayName = "TreeBrowser", _class2.componentId = 'TreeBrowser', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
338
+ size: 'medium',
339
+ variant: 'folderTree',
340
+ showRootCollection: true,
341
+ collectionIcon: IconFolderLine,
342
+ collectionIconExpanded: IconFolderLine,
343
+ itemIcon: IconDocumentLine,
344
+ getItemProps: props => props,
345
+ getCollectionProps: props => props,
346
+ defaultExpanded: [],
347
+ selectionType: 'none',
348
+ sortOrder: function () {
349
+ return 0;
350
+ }
351
+ }, _class2.Node = TreeNode, _class2.Collection = TreeCollection, _class2.Button = TreeButton, _class2)) || _class) || _class);
360
352
  export default TreeBrowser;
361
353
  export { TreeBrowser };
package/lib/TreeBrowser/TreeButton/index.js CHANGED
@@ -23,7 +23,7 @@ var _theme = _interopRequireDefault(require("./theme"));
23
23
 
24
24
  var _props = require("./props");
25
25
 
26
- var _dec, _dec2, _class;
26
+ var _dec, _dec2, _class, _class2;
27
27
 
28
28
  // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
29
29
 
@@ -34,20 +34,19 @@ id: TreeBrowser.Button
34
34
  ---
35
35
  @tsProps
36
36
  **/
37
- let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class TreeButton extends _react.Component {
38
- static displayName = "TreeButton";
39
- static componentId = 'TreeBrowser.Button';
40
- static allowedProps = _props.allowedProps;
41
- static propTypes = _props.propTypes;
42
- static defaultProps = {
43
- type: 'treeButton',
44
- size: 'medium',
45
- variant: 'folderTree',
46
- selected: false,
47
- focused: false,
48
- expanded: false
49
- };
50
- ref = null;
37
+ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TreeButton extends _react.Component {
38
+ constructor() {
39
+ super(...arguments);
40
+ this.ref = null;
41
+
42
+ this.handleRef = el => {
43
+ if (el && typeof this.props.containerRef === 'function') {
44
+ this.props.containerRef(el.parentElement);
45
+ }
46
+
47
+ this.ref = el;
48
+ };
49
+ }
51
50
 
52
51
  componentDidMount() {
53
52
  var _this$props$makeStyle, _this$props;
@@ -135,14 +134,6 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
135
134
  return void 0;
136
135
  }
137
136
 
138
- handleRef = el => {
139
- if (el && typeof this.props.containerRef === 'function') {
140
- this.props.containerRef(el.parentElement);
141
- }
142
-
143
- this.ref = el;
144
- };
145
-
146
137
  render() {
147
138
  const _this$props5 = this.props,
148
139
  styles = _this$props5.styles,
@@ -157,7 +148,14 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
157
148
  }, buttonContent);
158
149
  }
159
150
 
160
- }) || _class) || _class);
151
+ }, _class2.displayName = "TreeButton", _class2.componentId = 'TreeBrowser.Button', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
152
+ type: 'treeButton',
153
+ size: 'medium',
154
+ variant: 'folderTree',
155
+ selected: false,
156
+ focused: false,
157
+ expanded: false
158
+ }, _class2)) || _class) || _class);
161
159
  exports.TreeButton = TreeButton;
162
160
  var _default = TreeButton;
163
161
  exports.default = _default;
package/lib/TreeBrowser/TreeCollection/index.js CHANGED
@@ -25,7 +25,7 @@ var _theme = _interopRequireDefault(require("./theme"));
25
25
 
26
26
  var _props = require("./props");
27
27
 
28
- var _dec, _dec2, _class;
28
+ var _dec, _dec2, _class, _class2;
29
29
 
30
30
  /**
31
31
  ---
@@ -34,93 +34,81 @@ id: TreeBrowser.Collection
34
34
  ---
35
35
  @tsProps
36
36
  **/
37
- let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class TreeCollection extends _react.Component {
38
- static displayName = "TreeCollection";
39
- static componentId = 'TreeBrowser.Collection';
40
- static allowedProps = _props.allowedProps;
41
- static propTypes = _props.propTypes;
42
- static defaultProps = {
43
- collections: [],
44
- items: [],
45
- expanded: false,
46
- selection: '',
47
- size: 'medium',
48
- variant: 'folderTree',
49
- getItemProps: props => props,
50
- getCollectionProps: props => props,
51
- isCollectionFlattened: false
52
- };
53
- ref = null;
54
-
37
+ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TreeCollection extends _react.Component {
55
38
  constructor(props) {
56
39
  super(props);
40
+ this.ref = null;
41
+
42
+ this.handleFocus = (e, item) => {
43
+ e.stopPropagation();
44
+ this.setState({
45
+ focused: `${item.type}_${item.id}`
46
+ });
47
+ };
48
+
49
+ this.handleBlur = (e, _item) => {
50
+ e.stopPropagation();
51
+ this.setState({
52
+ focused: ''
53
+ });
54
+ };
55
+
56
+ this.handleCollectionClick = e => {
57
+ const _this$props = this.props,
58
+ id = _this$props.id,
59
+ onCollectionClick = _this$props.onCollectionClick,
60
+ expanded = _this$props.expanded;
61
+ const collection = {
62
+ id,
63
+ expanded: !expanded,
64
+ type: 'collection'
65
+ };
66
+
67
+ if (onCollectionClick && typeof onCollectionClick === 'function') {
68
+ onCollectionClick(e, collection);
69
+ }
70
+ };
71
+
72
+ this.handleCollectionKeyDown = e => {
73
+ const _this$props2 = this.props,
74
+ id = _this$props2.id,
75
+ onKeyDown = _this$props2.onKeyDown,
76
+ expanded = _this$props2.expanded;
77
+ const collection = {
78
+ id,
79
+ expanded: !expanded,
80
+ type: 'collection'
81
+ };
82
+
83
+ if (onKeyDown && typeof onKeyDown === 'function') {
84
+ onKeyDown(e, collection);
85
+ }
86
+ };
87
+
57
88
  this.state = {
58
89
  focused: ''
59
90
  };
60
91
  }
61
92
 
62
93
  componentDidMount() {
63
- var _this$props$makeStyle, _this$props;
94
+ var _this$props$makeStyle, _this$props3;
64
95
 
65
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
96
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
66
97
  }
67
98
 
68
99
  componentDidUpdate() {
69
- var _this$props$makeStyle2, _this$props2;
100
+ var _this$props$makeStyle2, _this$props4;
70
101
 
71
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
102
+ (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
72
103
  }
73
104
 
74
105
  get itemsLevel() {
75
- const _this$props3 = this.props,
76
- level = _this$props3.level,
77
- isCollectionFlattened = _this$props3.isCollectionFlattened;
106
+ const _this$props5 = this.props,
107
+ level = _this$props5.level,
108
+ isCollectionFlattened = _this$props5.isCollectionFlattened;
78
109
  return isCollectionFlattened ? level : level + 1;
79
110
  }
80
111
 
81
- handleFocus = (e, item) => {
82
- e.stopPropagation();
83
- this.setState({
84
- focused: `${item.type}_${item.id}`
85
- });
86
- };
87
- handleBlur = (e, _item) => {
88
- e.stopPropagation();
89
- this.setState({
90
- focused: ''
91
- });
92
- };
93
- handleCollectionClick = e => {
94
- const _this$props4 = this.props,
95
- id = _this$props4.id,
96
- onCollectionClick = _this$props4.onCollectionClick,
97
- expanded = _this$props4.expanded;
98
- const collection = {
99
- id,
100
- expanded: !expanded,
101
- type: 'collection'
102
- };
103
-
104
- if (onCollectionClick && typeof onCollectionClick === 'function') {
105
- onCollectionClick(e, collection);
106
- }
107
- };
108
- handleCollectionKeyDown = e => {
109
- const _this$props5 = this.props,
110
- id = _this$props5.id,
111
- onKeyDown = _this$props5.onKeyDown,
112
- expanded = _this$props5.expanded;
113
- const collection = {
114
- id,
115
- expanded: !expanded,
116
- type: 'collection'
117
- };
118
-
119
- if (onKeyDown && typeof onKeyDown === 'function') {
120
- onKeyDown(e, collection);
121
- }
122
- };
123
-
124
112
  get collectionsCount() {
125
113
  const collections = this.props.collections;
126
114
  return collections && collections.length > 0 ? collections.length : 0;
@@ -362,7 +350,17 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
362
350
  }, this.renderChildren()));
363
351
  }
364
352
 
365
- }) || _class) || _class);
353
+ }, _class2.displayName = "TreeCollection", _class2.componentId = 'TreeBrowser.Collection', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
354
+ collections: [],
355
+ items: [],
356
+ expanded: false,
357
+ selection: '',
358
+ size: 'medium',
359
+ variant: 'folderTree',
360
+ getItemProps: props => props,
361
+ getCollectionProps: props => props,
362
+ isCollectionFlattened: false
363
+ }, _class2)) || _class) || _class);
366
364
  exports.TreeCollection = TreeCollection;
367
365
  var _default = TreeCollection;
368
366
  exports.default = _default;
package/lib/TreeBrowser/TreeNode/index.js CHANGED
@@ -23,7 +23,7 @@ var _theme = _interopRequireDefault(require("../TreeButton/theme"));
23
23
 
24
24
  var _props = require("./props");
25
25
 
26
- var _dec, _dec2, _class;
26
+ var _dec, _dec2, _class, _class2;
27
27
 
28
28
  // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
29
29
 
@@ -36,18 +36,19 @@ id: TreeBrowser.Node
36
36
  A helper class used to render the :renderBeforeItems and :renderAfterItems
37
37
  in the TreeBrowser.
38
38
  **/
39
- let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class TreeNode extends _react.Component {
40
- static displayName = "TreeNode";
41
- static componentId = 'TreeBrowser.Node';
42
- static allowedProps = _props.allowedProps;
43
- static propTypes = _props.propTypes;
44
- static defaultProps = {
45
- size: 'medium',
46
- variant: 'folderTree',
47
- selected: false,
48
- focused: false
49
- };
50
- ref = null;
39
+ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TreeNode extends _react.Component {
40
+ constructor() {
41
+ super(...arguments);
42
+ this.ref = null;
43
+
44
+ this.handleRef = el => {
45
+ if (el && typeof this.props.containerRef === 'function') {
46
+ this.props.containerRef(el.parentElement);
47
+ }
48
+
49
+ this.ref = el;
50
+ };
51
+ }
51
52
 
52
53
  componentDidMount() {
53
54
  var _this$props$makeStyle, _this$props;
@@ -61,14 +62,6 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
61
62
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
62
63
  }
63
64
 
64
- handleRef = el => {
65
- if (el && typeof this.props.containerRef === 'function') {
66
- this.props.containerRef(el.parentElement);
67
- }
68
-
69
- this.ref = el;
70
- };
71
-
72
65
  renderItemImage() {
73
66
  const _this$props3 = this.props,
74
67
  thumbnail = _this$props3.thumbnail,
@@ -109,7 +102,12 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
109
102
  }, children)));
110
103
  }
111
104
 
112
- }) || _class) || _class);
105
+ }, _class2.displayName = "TreeNode", _class2.componentId = 'TreeBrowser.Node', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
106
+ size: 'medium',
107
+ variant: 'folderTree',
108
+ selected: false,
109
+ focused: false
110
+ }, _class2)) || _class) || _class);
113
111
  exports.TreeNode = TreeNode;
114
112
  var _default = TreeNode;
115
113
  exports.default = _default;
package/lib/TreeBrowser/index.js CHANGED
@@ -35,7 +35,7 @@ var _theme = _interopRequireDefault(require("./theme"));
35
35
 
36
36
  var _props = require("./props");
37
37
 
38
- var _dec, _dec2, _class;
38
+ var _dec, _dec2, _class, _class2;
39
39
 
40
40
  /**
41
41
  ---
@@ -43,33 +43,74 @@ category: components
43
43
  ---
44
44
  @tsProps
45
45
  **/
46
- let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class TreeBrowser extends _react.Component {
47
- static displayName = "TreeBrowser";
48
- static componentId = 'TreeBrowser';
49
- static allowedProps = _props.allowedProps;
50
- static propTypes = _props.propTypes;
51
- static defaultProps = {
52
- size: 'medium',
53
- variant: 'folderTree',
54
- showRootCollection: true,
55
- collectionIcon: _IconFolderLine.IconFolderLine,
56
- collectionIconExpanded: _IconFolderLine.IconFolderLine,
57
- itemIcon: _IconDocumentLine.IconDocumentLine,
58
- getItemProps: props => props,
59
- getCollectionProps: props => props,
60
- defaultExpanded: [],
61
- selectionType: 'none',
62
- sortOrder: function () {
63
- return 0;
64
- }
65
- };
66
- static Node = _TreeNode.TreeNode;
67
- static Collection = _TreeCollection.TreeCollection;
68
- static Button = _TreeButton.TreeButton;
69
- ref = null;
70
-
46
+ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TreeBrowser extends _react.Component {
71
47
  constructor(props) {
48
+ var _this;
49
+
72
50
  super(props);
51
+ _this = this;
52
+ this.ref = null;
53
+
54
+ this.handleCollectionClick = function (e, collection) {
55
+ let expand = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
56
+ e.stopPropagation();
57
+ const onCollectionClick = _this.props.onCollectionClick;
58
+ if (expand) _this.expandOrCollapseNode(collection);
59
+ onCollectionClick === null || onCollectionClick === void 0 ? void 0 : onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
60
+
61
+ _this.handleSelection(collection.id, 'collection');
62
+ };
63
+
64
+ this.handleItemClick = (e, item) => {
65
+ var _this$props$onItemCli, _this$props;
66
+
67
+ e.stopPropagation();
68
+ (_this$props$onItemCli = (_this$props = this.props).onItemClick) === null || _this$props$onItemCli === void 0 ? void 0 : _this$props$onItemCli.call(_this$props, item);
69
+ this.handleSelection(item.id, 'item');
70
+ };
71
+
72
+ this.handleKeyDown = (event, node) => {
73
+ event.stopPropagation();
74
+
75
+ switch (event.keyCode) {
76
+ case _keycode.default.codes.down:
77
+ case _keycode.default.codes.j:
78
+ this.moveFocus(1);
79
+ break;
80
+
81
+ case _keycode.default.codes.up:
82
+ case _keycode.default.codes.k:
83
+ this.moveFocus(-1);
84
+ break;
85
+
86
+ case _keycode.default.codes.home:
87
+ case _keycode.default.codes.end:
88
+ this.homeOrEnd(event.keyCode);
89
+ break;
90
+
91
+ case _keycode.default.codes.left:
92
+ case _keycode.default.codes.right:
93
+ this.handleLeftOrRightArrow(event.keyCode, node);
94
+ break;
95
+
96
+ case _keycode.default.codes.enter:
97
+ case _keycode.default.codes.space:
98
+ this.handleActivation(event, node);
99
+ break;
100
+
101
+ default:
102
+ return;
103
+ }
104
+
105
+ event.preventDefault();
106
+ };
107
+
108
+ this.getIsFlattened = collection => {
109
+ const _this$props2 = this.props,
110
+ rootId = _this$props2.rootId,
111
+ showRootCollection = _this$props2.showRootCollection;
112
+ return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
113
+ };
73
114
 
74
115
  if (typeof this.props.expanded === 'undefined') {
75
116
  this.state = {
@@ -84,81 +125,25 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
84
125
  }
85
126
 
86
127
  componentDidMount() {
87
- var _this$props$makeStyle, _this$props;
128
+ var _this$props$makeStyle, _this$props3;
88
129
 
89
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
130
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
90
131
  }
91
132
 
92
133
  componentDidUpdate() {
93
- var _this$props$makeStyle2, _this$props2;
134
+ var _this$props$makeStyle2, _this$props4;
94
135
 
95
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
136
+ (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
96
137
  }
97
138
 
98
139
  get _root() {
99
140
  return this.ref;
100
141
  }
101
142
 
102
- handleCollectionClick = (() => {
103
- var _this = this;
104
-
105
- return function (e, collection) {
106
- let expand = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
107
- e.stopPropagation();
108
- const onCollectionClick = _this.props.onCollectionClick;
109
- if (expand) _this.expandOrCollapseNode(collection);
110
- onCollectionClick === null || onCollectionClick === void 0 ? void 0 : onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
111
-
112
- _this.handleSelection(collection.id, 'collection');
113
- };
114
- })();
115
- handleItemClick = (e, item) => {
116
- var _this$props$onItemCli, _this$props3;
117
-
118
- e.stopPropagation();
119
- (_this$props$onItemCli = (_this$props3 = this.props).onItemClick) === null || _this$props$onItemCli === void 0 ? void 0 : _this$props$onItemCli.call(_this$props3, item);
120
- this.handleSelection(item.id, 'item');
121
- };
122
- handleKeyDown = (event, node) => {
123
- event.stopPropagation();
124
-
125
- switch (event.keyCode) {
126
- case _keycode.default.codes.down:
127
- case _keycode.default.codes.j:
128
- this.moveFocus(1);
129
- break;
130
-
131
- case _keycode.default.codes.up:
132
- case _keycode.default.codes.k:
133
- this.moveFocus(-1);
134
- break;
135
-
136
- case _keycode.default.codes.home:
137
- case _keycode.default.codes.end:
138
- this.homeOrEnd(event.keyCode);
139
- break;
140
-
141
- case _keycode.default.codes.left:
142
- case _keycode.default.codes.right:
143
- this.handleLeftOrRightArrow(event.keyCode, node);
144
- break;
145
-
146
- case _keycode.default.codes.enter:
147
- case _keycode.default.codes.space:
148
- this.handleActivation(event, node);
149
- break;
150
-
151
- default:
152
- return;
153
- }
154
-
155
- event.preventDefault();
156
- };
157
-
158
143
  get collections() {
159
- const _this$props4 = this.props,
160
- collections = _this$props4.collections,
161
- rootId = _this$props4.rootId;
144
+ const _this$props5 = this.props,
145
+ collections = _this$props5.collections,
146
+ rootId = _this$props5.rootId;
162
147
 
163
148
  if (typeof rootId !== 'undefined') {
164
149
  return [collections[rootId]];
@@ -176,9 +161,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
176
161
  }
177
162
 
178
163
  expandOrCollapseNode(collection) {
179
- var _this$props$onCollect, _this$props5;
164
+ var _this$props$onCollect, _this$props6;
180
165
 
181
- (_this$props$onCollect = (_this$props5 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props5, collection);
166
+ (_this$props$onCollect = (_this$props6 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props6, collection);
182
167
 
183
168
  if (typeof this.props.expanded === 'undefined') {
184
169
  this.setState((state, props) => {
@@ -299,13 +284,6 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
299
284
  }
300
285
  }
301
286
 
302
- getIsFlattened = collection => {
303
- const _this$props6 = this.props,
304
- rootId = _this$props6.rootId,
305
- showRootCollection = _this$props6.showRootCollection;
306
- return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
307
- };
308
-
309
287
  getCollectionProps(collection) {
310
288
  return {
311
289
  id: collection.id,
@@ -355,7 +333,21 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
355
333
  }, this.renderRoot());
356
334
  }
357
335
 
358
- }) || _class) || _class);
336
+ }, _class2.displayName = "TreeBrowser", _class2.componentId = 'TreeBrowser', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
337
+ size: 'medium',
338
+ variant: 'folderTree',
339
+ showRootCollection: true,
340
+ collectionIcon: _IconFolderLine.IconFolderLine,
341
+ collectionIconExpanded: _IconFolderLine.IconFolderLine,
342
+ itemIcon: _IconDocumentLine.IconDocumentLine,
343
+ getItemProps: props => props,
344
+ getCollectionProps: props => props,
345
+ defaultExpanded: [],
346
+ selectionType: 'none',
347
+ sortOrder: function () {
348
+ return 0;
349
+ }
350
+ }, _class2.Node = _TreeNode.TreeNode, _class2.Collection = _TreeCollection.TreeCollection, _class2.Button = _TreeButton.TreeButton, _class2)) || _class) || _class);
359
351
  exports.TreeBrowser = TreeBrowser;
360
352
  var _default = TreeBrowser;
361
353
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tree-browser",
3
- "version": "8.25.1-snapshot-10",
3
+ "version": "8.25.1-snapshot-13",
4
4
  "description": "A component for displaying a hierarchical view of information",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,22 +23,22 @@
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/emotion": "8.25.1-snapshot-10",
35
- "@instructure/shared-types": "8.25.1-snapshot-10",
36
- "@instructure/ui-icons": "8.25.1-snapshot-10",
37
- "@instructure/ui-img": "8.25.1-snapshot-10",
38
- "@instructure/ui-prop-types": "8.25.1-snapshot-10",
39
- "@instructure/ui-react-utils": "8.25.1-snapshot-10",
40
- "@instructure/ui-testable": "8.25.1-snapshot-10",
41
- "@instructure/ui-utils": "8.25.1-snapshot-10",
34
+ "@instructure/emotion": "8.25.1-snapshot-13",
35
+ "@instructure/shared-types": "8.25.1-snapshot-13",
36
+ "@instructure/ui-icons": "8.25.1-snapshot-13",
37
+ "@instructure/ui-img": "8.25.1-snapshot-13",
38
+ "@instructure/ui-prop-types": "8.25.1-snapshot-13",
39
+ "@instructure/ui-react-utils": "8.25.1-snapshot-13",
40
+ "@instructure/ui-testable": "8.25.1-snapshot-13",
41
+ "@instructure/ui-utils": "8.25.1-snapshot-13",
42
42
  "keycode": "^2",
43
43
  "prop-types": "^15"
44
44
  },