@instructure/ui-tree-browser 8.17.1-snapshot.21 → 8.17.1-snapshot.71

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 (16) hide show
  1. package/es/TreeBrowser/TreeButton/index.js +18 -22
  2. package/es/TreeBrowser/TreeButton/theme.js +25 -25
  3. package/es/TreeBrowser/TreeCollection/index.js +40 -44
  4. package/es/TreeBrowser/TreeCollection/theme.js +5 -5
  5. package/es/TreeBrowser/TreeNode/index.js +14 -18
  6. package/es/TreeBrowser/index.js +12 -20
  7. package/es/TreeBrowser/theme.js +4 -4
  8. package/lib/TreeBrowser/TreeButton/index.js +18 -22
  9. package/lib/TreeBrowser/TreeButton/theme.js +25 -25
  10. package/lib/TreeBrowser/TreeCollection/index.js +40 -44
  11. package/lib/TreeBrowser/TreeCollection/theme.js +5 -5
  12. package/lib/TreeBrowser/TreeNode/index.js +14 -18
  13. package/lib/TreeBrowser/index.js +12 -20
  14. package/lib/TreeBrowser/theme.js +4 -4
  15. package/package.json +15 -15
  16. package/tsconfig.build.tsbuildinfo +1 -1
package/es/TreeBrowser/TreeButton/index.js CHANGED
@@ -57,15 +57,11 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
57
57
  }
58
58
 
59
59
  componentDidMount() {
60
- var _this$props$makeStyle, _this$props;
61
-
62
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
60
+ this.props.makeStyles?.();
63
61
  }
64
62
 
65
63
  componentDidUpdate() {
66
- var _this$props$makeStyle2, _this$props2;
67
-
68
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
64
+ this.props.makeStyles?.();
69
65
  }
70
66
 
71
67
  defaultContentRenderer(props) {
@@ -102,15 +98,15 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
102
98
  }
103
99
 
104
100
  renderCollectionIcon() {
105
- const _this$props3 = this.props,
106
- expanded = _this$props3.expanded,
107
- collectionIcon = _this$props3.collectionIcon,
108
- collectionIconExpanded = _this$props3.collectionIconExpanded,
109
- styles = _this$props3.styles;
101
+ const _this$props = this.props,
102
+ expanded = _this$props.expanded,
103
+ collectionIcon = _this$props.collectionIcon,
104
+ collectionIconExpanded = _this$props.collectionIconExpanded,
105
+ styles = _this$props.styles;
110
106
 
111
107
  if (collectionIcon || collectionIconExpanded) {
112
108
  return jsx("div", {
113
- css: styles === null || styles === void 0 ? void 0 : styles.icon
109
+ css: styles?.icon
114
110
  }, callRenderProp(expanded ? collectionIconExpanded : collectionIcon));
115
111
  }
116
112
 
@@ -120,14 +116,14 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
120
116
  renderItemImage() {
121
117
  var _Img;
122
118
 
123
- const _this$props4 = this.props,
124
- thumbnail = _this$props4.thumbnail,
125
- itemIcon = _this$props4.itemIcon,
126
- styles = _this$props4.styles;
119
+ const _this$props2 = this.props,
120
+ thumbnail = _this$props2.thumbnail,
121
+ itemIcon = _this$props2.itemIcon,
122
+ styles = _this$props2.styles;
127
123
 
128
124
  if (thumbnail) {
129
125
  return jsx("div", {
130
- css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
126
+ css: styles?.thumbnail
131
127
  }, _Img || (_Img = jsx(Img, {
132
128
  src: thumbnail,
133
129
  constrain: "cover",
@@ -137,7 +133,7 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
137
133
 
138
134
  if (itemIcon) {
139
135
  return jsx("div", {
140
- css: styles === null || styles === void 0 ? void 0 : styles.icon
136
+ css: styles?.icon
141
137
  }, callRenderProp(itemIcon));
142
138
  }
143
139
 
@@ -145,16 +141,16 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
145
141
  }
146
142
 
147
143
  render() {
148
- const _this$props5 = this.props,
149
- styles = _this$props5.styles,
150
- renderContent = _this$props5.renderContent;
144
+ const _this$props3 = this.props,
145
+ styles = _this$props3.styles,
146
+ renderContent = _this$props3.renderContent;
151
147
  const buttonContent = renderContent ? renderContent(this.props) : this.defaultContentRenderer(this.props); // VoiceOver can't navigate without the buttons, even though they don't do anything
152
148
 
153
149
  return jsx("button", {
154
150
  ref: this.handleRef,
155
151
  tabIndex: -1,
156
152
  type: "button",
157
- css: styles === null || styles === void 0 ? void 0 : styles.treeButton
153
+ css: styles?.treeButton
158
154
  }, buttonContent);
159
155
  }
160
156
 
package/es/TreeBrowser/TreeButton/theme.js CHANGED
@@ -43,32 +43,32 @@ const generateComponentTheme = theme => {
43
43
  }
44
44
  };
45
45
  const componentVariables = {
46
- hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
47
- hoverTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
48
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
49
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
50
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
51
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
52
- iconsMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
53
- descriptorMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
54
- descriptorTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
55
- descriptorFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
56
- descriptorFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
57
- descriptorFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
58
- nameTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
59
- nameFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
60
- nameFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
61
- nameFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
62
- baseSpacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
63
- baseSpacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.small,
46
+ hoverBackgroundColor: colors?.backgroundBrand,
47
+ hoverTextColor: colors?.textLightest,
48
+ focusOutlineWidth: borders?.widthMedium,
49
+ focusOutlineColor: colors?.borderBrand,
50
+ focusOutlineStyle: borders?.style,
51
+ iconColor: colors?.textDarkest,
52
+ iconsMarginRight: spacing?.xSmall,
53
+ descriptorMarginTop: spacing?.xxxSmall,
54
+ descriptorTextColor: colors?.textDarkest,
55
+ descriptorFontSizeSmall: typography?.fontSizeXSmall,
56
+ descriptorFontSizeMedium: typography?.fontSizeXSmall,
57
+ descriptorFontSizeLarge: typography?.fontSizeSmall,
58
+ nameTextColor: colors?.textBrand,
59
+ nameFontSizeSmall: typography?.fontSizeXSmall,
60
+ nameFontSizeMedium: typography?.fontSizeSmall,
61
+ nameFontSizeLarge: typography?.fontSizeMedium,
62
+ baseSpacingSmall: spacing?.xSmall,
63
+ baseSpacingMedium: spacing?.small,
64
64
  baseSpacingLarge: '1rem',
65
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
66
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
67
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDark,
68
- textLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
69
- selectedTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
70
- selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
71
- selectedOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthLarge
65
+ borderWidth: borders?.widthSmall,
66
+ borderRadius: borders?.radiusMedium,
67
+ borderColor: colors?.borderDark,
68
+ textLineHeight: typography?.lineHeightCondensed,
69
+ selectedTextColor: colors?.textLightest,
70
+ selectedBackgroundColor: colors?.backgroundDark,
71
+ selectedOutlineWidth: borders?.widthLarge
72
72
  };
73
73
  return { ...componentVariables,
74
74
  ...themeSpecificStyles[themeName]
package/es/TreeBrowser/TreeCollection/index.js CHANGED
@@ -101,21 +101,17 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
101
101
  }
102
102
 
103
103
  componentDidMount() {
104
- var _this$props$makeStyle, _this$props3;
105
-
106
- (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
104
+ this.props.makeStyles?.();
107
105
  }
108
106
 
109
107
  componentDidUpdate() {
110
- var _this$props$makeStyle2, _this$props4;
111
-
112
- (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
108
+ this.props.makeStyles?.();
113
109
  }
114
110
 
115
111
  get itemsLevel() {
116
- const _this$props5 = this.props,
117
- level = _this$props5.level,
118
- isCollectionFlattened = _this$props5.isCollectionFlattened;
112
+ const _this$props3 = this.props,
113
+ level = _this$props3.level,
114
+ isCollectionFlattened = _this$props3.isCollectionFlattened;
119
115
  return isCollectionFlattened ? level : level + 1;
120
116
  }
121
117
 
@@ -134,12 +130,12 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
134
130
  }
135
131
 
136
132
  renderChildren() {
137
- const _this$props6 = this.props,
138
- collections = _this$props6.collections,
139
- items = _this$props6.items,
140
- id = _this$props6.id,
141
- renderBeforeItems = _this$props6.renderBeforeItems,
142
- renderAfterItems = _this$props6.renderAfterItems;
133
+ const _this$props4 = this.props,
134
+ collections = _this$props4.collections,
135
+ items = _this$props4.items,
136
+ id = _this$props4.id,
137
+ renderBeforeItems = _this$props4.renderBeforeItems,
138
+ renderAfterItems = _this$props4.renderAfterItems;
143
139
  let position = 1;
144
140
  return jsx(React.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), collections.map(collection => {
145
141
  return this.renderCollectionNode(collection, position++);
@@ -149,11 +145,11 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
149
145
  }
150
146
 
151
147
  renderCollectionChildren(collectionId, child, position, keyword) {
152
- const _this$props7 = this.props,
153
- selection = _this$props7.selection,
154
- onKeyDown = _this$props7.onKeyDown,
155
- getItemProps = _this$props7.getItemProps,
156
- styles = _this$props7.styles;
148
+ const _this$props5 = this.props,
149
+ selection = _this$props5.selection,
150
+ onKeyDown = _this$props5.onKeyDown,
151
+ getItemProps = _this$props5.getItemProps,
152
+ styles = _this$props5.styles;
157
153
  const key = `${collectionId}_${keyword}`;
158
154
  const ariaSelected = {};
159
155
 
@@ -174,7 +170,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
174
170
  return jsx("li", Object.assign({
175
171
  id: key,
176
172
  role: "treeitem",
177
- css: styles === null || styles === void 0 ? void 0 : styles.item,
173
+ css: styles?.item,
178
174
  tabIndex: -1,
179
175
  key: key,
180
176
  "aria-posinset": position,
@@ -195,7 +191,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
195
191
  if (typeof child.props.onKeyDown === 'function') {
196
192
  child.props.onKeyDown(e, n);
197
193
  } else {
198
- onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash);
194
+ onKeyDown?.(e, itemHash);
199
195
  }
200
196
  },
201
197
  onBlur: e => this.handleBlur(e, itemHash)
@@ -223,12 +219,12 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
223
219
  }
224
220
 
225
221
  renderItemNode(item, position) {
226
- const _this$props8 = this.props,
227
- selection = _this$props8.selection,
228
- onItemClick = _this$props8.onItemClick,
229
- onKeyDown = _this$props8.onKeyDown,
230
- getItemProps = _this$props8.getItemProps,
231
- styles = _this$props8.styles;
222
+ const _this$props6 = this.props,
223
+ selection = _this$props6.selection,
224
+ onItemClick = _this$props6.onItemClick,
225
+ onKeyDown = _this$props6.onKeyDown,
226
+ getItemProps = _this$props6.getItemProps,
227
+ styles = _this$props6.styles;
232
228
  const ariaSelected = {};
233
229
 
234
230
  if (selection) {
@@ -253,12 +249,12 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
253
249
  tabIndex: -1,
254
250
  role: "treeitem",
255
251
  "aria-label": item.name,
256
- css: styles === null || styles === void 0 ? void 0 : styles.item,
252
+ css: styles?.item,
257
253
  "aria-level": this.itemsLevel,
258
254
  "aria-posinset": position,
259
255
  "aria-setsize": this.childCount,
260
- onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(e, itemHash),
261
- onKeyDown: e => onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash),
256
+ onClick: e => onItemClick?.(e, itemHash),
257
+ onKeyDown: e => onKeyDown?.(e, itemHash),
262
258
  onFocus: e => this.handleFocus(e, itemHash),
263
259
  onBlur: e => this.handleBlur(e, itemHash)
264
260
  }, ariaSelected), jsx(TreeButton, itemProps));
@@ -278,17 +274,17 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
278
274
  }
279
275
 
280
276
  render() {
281
- const _this$props9 = this.props,
282
- id = _this$props9.id,
283
- name = _this$props9.name,
284
- expanded = _this$props9.expanded,
285
- collectionIcon = _this$props9.collectionIcon,
286
- collectionIconExpanded = _this$props9.collectionIconExpanded,
287
- isCollectionFlattened = _this$props9.isCollectionFlattened,
288
- getCollectionProps = _this$props9.getCollectionProps,
289
- level = _this$props9.level,
290
- position = _this$props9.position,
291
- styles = _this$props9.styles;
277
+ const _this$props7 = this.props,
278
+ id = _this$props7.id,
279
+ name = _this$props7.name,
280
+ expanded = _this$props7.expanded,
281
+ collectionIcon = _this$props7.collectionIcon,
282
+ collectionIconExpanded = _this$props7.collectionIconExpanded,
283
+ isCollectionFlattened = _this$props7.isCollectionFlattened,
284
+ getCollectionProps = _this$props7.getCollectionProps,
285
+ level = _this$props7.level,
286
+ position = _this$props7.position,
287
+ styles = _this$props7.styles;
292
288
  const collectionProps = getCollectionProps({ ...this.getCommonButtonProps(),
293
289
  expanded: expanded,
294
290
  collectionIcon: collectionIcon,
@@ -305,7 +301,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
305
301
  ref: el => {
306
302
  this.ref = el;
307
303
  },
308
- css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
304
+ css: styles?.treeCollection,
309
305
  tabIndex: -1,
310
306
  role: "treeitem",
311
307
  "aria-label": this.props.name,
@@ -325,7 +321,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
325
321
  })
326
322
  }, ariaSelected), jsx(TreeButton, collectionProps), expanded && this.childCount > 0 && jsx("ul", {
327
323
  "aria-label": name,
328
- css: styles === null || styles === void 0 ? void 0 : styles.list,
324
+ css: styles?.list,
329
325
  role: "group"
330
326
  }, this.renderChildren()));
331
327
  }
package/es/TreeBrowser/TreeCollection/theme.js CHANGED
@@ -33,12 +33,12 @@ const generateComponentTheme = theme => {
33
33
  typography = theme.typography,
34
34
  borders = theme.borders;
35
35
  const componentVariables = {
36
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
37
- baseSpacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
38
- baseSpacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.small,
36
+ fontFamily: typography?.fontFamily,
37
+ baseSpacingSmall: spacing?.xSmall,
38
+ baseSpacingMedium: spacing?.small,
39
39
  baseSpacingLarge: '1rem',
40
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
41
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDark
40
+ borderWidth: borders?.widthSmall,
41
+ borderColor: colors?.borderDark
42
42
  };
43
43
  return { ...componentVariables
44
44
  };
package/es/TreeBrowser/TreeNode/index.js CHANGED
@@ -60,28 +60,24 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
60
60
  }
61
61
 
62
62
  componentDidMount() {
63
- var _this$props$makeStyle, _this$props;
64
-
65
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
63
+ this.props.makeStyles?.();
66
64
  }
67
65
 
68
66
  componentDidUpdate() {
69
- var _this$props$makeStyle2, _this$props2;
70
-
71
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
67
+ this.props.makeStyles?.();
72
68
  }
73
69
 
74
70
  renderItemImage() {
75
71
  var _Img;
76
72
 
77
- const _this$props3 = this.props,
78
- thumbnail = _this$props3.thumbnail,
79
- itemIcon = _this$props3.itemIcon,
80
- styles = _this$props3.styles;
73
+ const _this$props = this.props,
74
+ thumbnail = _this$props.thumbnail,
75
+ itemIcon = _this$props.itemIcon,
76
+ styles = _this$props.styles;
81
77
 
82
78
  if (thumbnail) {
83
79
  return jsx("div", {
84
- css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
80
+ css: styles?.thumbnail
85
81
  }, _Img || (_Img = jsx(Img, {
86
82
  src: thumbnail,
87
83
  constrain: "cover",
@@ -91,7 +87,7 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
91
87
 
92
88
  if (itemIcon) {
93
89
  return jsx("div", {
94
- css: styles === null || styles === void 0 ? void 0 : styles.icon
90
+ css: styles?.icon
95
91
  }, callRenderProp(itemIcon));
96
92
  }
97
93
 
@@ -99,17 +95,17 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
99
95
  }
100
96
 
101
97
  render() {
102
- const _this$props4 = this.props,
103
- children = _this$props4.children,
104
- styles = _this$props4.styles;
98
+ const _this$props2 = this.props,
99
+ children = _this$props2.children,
100
+ styles = _this$props2.styles;
105
101
  return jsx("div", {
106
102
  ref: this.handleRef,
107
103
  tabIndex: -1,
108
- css: styles === null || styles === void 0 ? void 0 : styles.treeButton
104
+ css: styles?.treeButton
109
105
  }, jsx("span", {
110
- css: styles === null || styles === void 0 ? void 0 : styles.layout
106
+ css: styles?.layout
111
107
  }, this.renderItemImage(), jsx("span", {
112
- css: styles === null || styles === void 0 ? void 0 : styles.node
108
+ css: styles?.node
113
109
  }, children)));
114
110
  }
115
111
 
package/es/TreeBrowser/index.js CHANGED
@@ -57,16 +57,14 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
57
57
  e.stopPropagation();
58
58
  const onCollectionClick = _this.props.onCollectionClick;
59
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
60
+ onCollectionClick?.(collection.id, collection); // TODO: this should pass the event as the first arg
61
61
 
62
62
  _this.handleSelection(collection.id, 'collection');
63
63
  };
64
64
 
65
65
  this.handleItemClick = (e, item) => {
66
- var _this$props$onItemCli, _this$props;
67
-
68
66
  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);
67
+ this.props.onItemClick?.(item);
70
68
  this.handleSelection(item.id, 'item');
71
69
  };
72
70
 
@@ -107,9 +105,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
107
105
  };
108
106
 
109
107
  this.getIsFlattened = collection => {
110
- const _this$props2 = this.props,
111
- rootId = _this$props2.rootId,
112
- showRootCollection = _this$props2.showRootCollection;
108
+ const _this$props = this.props,
109
+ rootId = _this$props.rootId,
110
+ showRootCollection = _this$props.showRootCollection;
113
111
  return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
114
112
  };
115
113
 
@@ -126,15 +124,11 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
126
124
  }
127
125
 
128
126
  componentDidMount() {
129
- var _this$props$makeStyle, _this$props3;
130
-
131
- (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
127
+ this.props.makeStyles?.();
132
128
  }
133
129
 
134
130
  componentDidUpdate() {
135
- var _this$props$makeStyle2, _this$props4;
136
-
137
- (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
131
+ this.props.makeStyles?.();
138
132
  }
139
133
 
140
134
  get _root() {
@@ -142,9 +136,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
142
136
  }
143
137
 
144
138
  get collections() {
145
- const _this$props5 = this.props,
146
- collections = _this$props5.collections,
147
- rootId = _this$props5.rootId;
139
+ const _this$props2 = this.props,
140
+ collections = _this$props2.collections,
141
+ rootId = _this$props2.rootId;
148
142
 
149
143
  if (typeof rootId !== 'undefined') {
150
144
  return [collections[rootId]];
@@ -162,9 +156,7 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
162
156
  }
163
157
 
164
158
  expandOrCollapseNode(collection) {
165
- var _this$props$onCollect, _this$props6;
166
-
167
- (_this$props$onCollect = (_this$props6 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props6, collection);
159
+ this.props.onCollectionToggle?.(collection);
168
160
 
169
161
  if (typeof this.props.expanded === 'undefined') {
170
162
  this.setState((state, props) => {
@@ -322,7 +314,7 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
322
314
  render() {
323
315
  const styles = this.props.styles;
324
316
  return jsx("ul", {
325
- css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
317
+ css: styles?.treeBrowser,
326
318
  tabIndex: 0,
327
319
  role: "tree",
328
320
  onKeyDown: this.handleKeyDown,
package/es/TreeBrowser/theme.js CHANGED
@@ -31,10 +31,10 @@ const generateComponentTheme = theme => {
31
31
  const colors = theme.colors,
32
32
  borders = theme.borders;
33
33
  const componentVariables = {
34
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
35
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
36
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
37
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
34
+ borderRadius: borders?.radiusMedium,
35
+ focusOutlineWidth: borders?.widthMedium,
36
+ focusOutlineColor: colors?.borderBrand,
37
+ focusOutlineStyle: borders?.style
38
38
  };
39
39
  return { ...componentVariables
40
40
  };
package/lib/TreeBrowser/TreeButton/index.js CHANGED
@@ -49,15 +49,11 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
49
49
  }
50
50
 
51
51
  componentDidMount() {
52
- var _this$props$makeStyle, _this$props;
53
-
54
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
52
+ this.props.makeStyles?.();
55
53
  }
56
54
 
57
55
  componentDidUpdate() {
58
- var _this$props$makeStyle2, _this$props2;
59
-
60
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
56
+ this.props.makeStyles?.();
61
57
  }
62
58
 
63
59
  defaultContentRenderer(props) {
@@ -94,15 +90,15 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
94
90
  }
95
91
 
96
92
  renderCollectionIcon() {
97
- const _this$props3 = this.props,
98
- expanded = _this$props3.expanded,
99
- collectionIcon = _this$props3.collectionIcon,
100
- collectionIconExpanded = _this$props3.collectionIconExpanded,
101
- styles = _this$props3.styles;
93
+ const _this$props = this.props,
94
+ expanded = _this$props.expanded,
95
+ collectionIcon = _this$props.collectionIcon,
96
+ collectionIconExpanded = _this$props.collectionIconExpanded,
97
+ styles = _this$props.styles;
102
98
 
103
99
  if (collectionIcon || collectionIconExpanded) {
104
100
  return (0, _emotion.jsx)("div", {
105
- css: styles === null || styles === void 0 ? void 0 : styles.icon
101
+ css: styles?.icon
106
102
  }, (0, _callRenderProp.callRenderProp)(expanded ? collectionIconExpanded : collectionIcon));
107
103
  }
108
104
 
@@ -112,14 +108,14 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
112
108
  renderItemImage() {
113
109
  var _Img;
114
110
 
115
- const _this$props4 = this.props,
116
- thumbnail = _this$props4.thumbnail,
117
- itemIcon = _this$props4.itemIcon,
118
- styles = _this$props4.styles;
111
+ const _this$props2 = this.props,
112
+ thumbnail = _this$props2.thumbnail,
113
+ itemIcon = _this$props2.itemIcon,
114
+ styles = _this$props2.styles;
119
115
 
120
116
  if (thumbnail) {
121
117
  return (0, _emotion.jsx)("div", {
122
- css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
118
+ css: styles?.thumbnail
123
119
  }, _Img || (_Img = (0, _emotion.jsx)(_Img2.Img, {
124
120
  src: thumbnail,
125
121
  constrain: "cover",
@@ -129,7 +125,7 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
129
125
 
130
126
  if (itemIcon) {
131
127
  return (0, _emotion.jsx)("div", {
132
- css: styles === null || styles === void 0 ? void 0 : styles.icon
128
+ css: styles?.icon
133
129
  }, (0, _callRenderProp.callRenderProp)(itemIcon));
134
130
  }
135
131
 
@@ -137,16 +133,16 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
137
133
  }
138
134
 
139
135
  render() {
140
- const _this$props5 = this.props,
141
- styles = _this$props5.styles,
142
- renderContent = _this$props5.renderContent;
136
+ const _this$props3 = this.props,
137
+ styles = _this$props3.styles,
138
+ renderContent = _this$props3.renderContent;
143
139
  const buttonContent = renderContent ? renderContent(this.props) : this.defaultContentRenderer(this.props); // VoiceOver can't navigate without the buttons, even though they don't do anything
144
140
 
145
141
  return (0, _emotion.jsx)("button", {
146
142
  ref: this.handleRef,
147
143
  tabIndex: -1,
148
144
  type: "button",
149
- css: styles === null || styles === void 0 ? void 0 : styles.treeButton
145
+ css: styles?.treeButton
150
146
  }, buttonContent);
151
147
  }
152
148
 
package/lib/TreeBrowser/TreeButton/theme.js CHANGED
@@ -50,32 +50,32 @@ const generateComponentTheme = theme => {
50
50
  }
51
51
  };
52
52
  const componentVariables = {
53
- hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
54
- hoverTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
55
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
56
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
57
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
58
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
59
- iconsMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
60
- descriptorMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
61
- descriptorTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
62
- descriptorFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
63
- descriptorFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
64
- descriptorFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
65
- nameTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
66
- nameFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
67
- nameFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
68
- nameFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
69
- baseSpacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
70
- baseSpacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.small,
53
+ hoverBackgroundColor: colors?.backgroundBrand,
54
+ hoverTextColor: colors?.textLightest,
55
+ focusOutlineWidth: borders?.widthMedium,
56
+ focusOutlineColor: colors?.borderBrand,
57
+ focusOutlineStyle: borders?.style,
58
+ iconColor: colors?.textDarkest,
59
+ iconsMarginRight: spacing?.xSmall,
60
+ descriptorMarginTop: spacing?.xxxSmall,
61
+ descriptorTextColor: colors?.textDarkest,
62
+ descriptorFontSizeSmall: typography?.fontSizeXSmall,
63
+ descriptorFontSizeMedium: typography?.fontSizeXSmall,
64
+ descriptorFontSizeLarge: typography?.fontSizeSmall,
65
+ nameTextColor: colors?.textBrand,
66
+ nameFontSizeSmall: typography?.fontSizeXSmall,
67
+ nameFontSizeMedium: typography?.fontSizeSmall,
68
+ nameFontSizeLarge: typography?.fontSizeMedium,
69
+ baseSpacingSmall: spacing?.xSmall,
70
+ baseSpacingMedium: spacing?.small,
71
71
  baseSpacingLarge: '1rem',
72
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
73
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
74
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDark,
75
- textLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
76
- selectedTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
77
- selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
78
- selectedOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthLarge
72
+ borderWidth: borders?.widthSmall,
73
+ borderRadius: borders?.radiusMedium,
74
+ borderColor: colors?.borderDark,
75
+ textLineHeight: typography?.lineHeightCondensed,
76
+ selectedTextColor: colors?.textLightest,
77
+ selectedBackgroundColor: colors?.backgroundDark,
78
+ selectedOutlineWidth: borders?.widthLarge
79
79
  };
80
80
  return { ...componentVariables,
81
81
  ...themeSpecificStyles[themeName]