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

package/lib/TreeBrowser/TreeCollection/index.js

@@ -91,21 +91,17 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
-
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    this.props.makeStyles?.();
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
-
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    this.props.makeStyles?.();
   }
 
   get itemsLevel() {
-    const _this$props5 = this.props,
-          level = _this$props5.level,
-          isCollectionFlattened = _this$props5.isCollectionFlattened;
+    const _this$props3 = this.props,
+          level = _this$props3.level,
+          isCollectionFlattened = _this$props3.isCollectionFlattened;
     return isCollectionFlattened ? level : level + 1;
   }
 
@@ -124,12 +120,12 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   renderChildren() {
-    const _this$props6 = this.props,
-          collections = _this$props6.collections,
-          items = _this$props6.items,
-          id = _this$props6.id,
-          renderBeforeItems = _this$props6.renderBeforeItems,
-          renderAfterItems = _this$props6.renderAfterItems;
+    const _this$props4 = this.props,
+          collections = _this$props4.collections,
+          items = _this$props4.items,
+          id = _this$props4.id,
+          renderBeforeItems = _this$props4.renderBeforeItems,
+          renderAfterItems = _this$props4.renderAfterItems;
     let position = 1;
     return (0, _emotion.jsx)(_react.default.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), collections.map(collection => {
       return this.renderCollectionNode(collection, position++);
@@ -139,11 +135,11 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   renderCollectionChildren(collectionId, child, position, keyword) {
-    const _this$props7 = this.props,
-          selection = _this$props7.selection,
-          onKeyDown = _this$props7.onKeyDown,
-          getItemProps = _this$props7.getItemProps,
-          styles = _this$props7.styles;
+    const _this$props5 = this.props,
+          selection = _this$props5.selection,
+          onKeyDown = _this$props5.onKeyDown,
+          getItemProps = _this$props5.getItemProps,
+          styles = _this$props5.styles;
     const key = `${collectionId}_${keyword}`;
     const ariaSelected = {};
 
@@ -164,7 +160,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     return (0, _emotion.jsx)("li", Object.assign({
       id: key,
       role: "treeitem",
-      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      css: styles?.item,
       tabIndex: -1,
       key: key,
       "aria-posinset": position,
@@ -185,7 +181,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
         if (typeof child.props.onKeyDown === 'function') {
           child.props.onKeyDown(e, n);
         } else {
-          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash);
+          onKeyDown?.(e, itemHash);
         }
       },
       onBlur: e => this.handleBlur(e, itemHash)
@@ -213,12 +209,12 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   renderItemNode(item, position) {
-    const _this$props8 = this.props,
-          selection = _this$props8.selection,
-          onItemClick = _this$props8.onItemClick,
-          onKeyDown = _this$props8.onKeyDown,
-          getItemProps = _this$props8.getItemProps,
-          styles = _this$props8.styles;
+    const _this$props6 = this.props,
+          selection = _this$props6.selection,
+          onItemClick = _this$props6.onItemClick,
+          onKeyDown = _this$props6.onKeyDown,
+          getItemProps = _this$props6.getItemProps,
+          styles = _this$props6.styles;
     const ariaSelected = {};
 
     if (selection) {
@@ -243,12 +239,12 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       tabIndex: -1,
       role: "treeitem",
       "aria-label": item.name,
-      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      css: styles?.item,
       "aria-level": this.itemsLevel,
       "aria-posinset": position,
       "aria-setsize": this.childCount,
-      onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(e, itemHash),
-      onKeyDown: e => onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash),
+      onClick: e => onItemClick?.(e, itemHash),
+      onKeyDown: e => onKeyDown?.(e, itemHash),
       onFocus: e => this.handleFocus(e, itemHash),
       onBlur: e => this.handleBlur(e, itemHash)
     }, ariaSelected), (0, _emotion.jsx)(_TreeButton.TreeButton, itemProps));
@@ -268,17 +264,17 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   render() {
-    const _this$props9 = this.props,
-          id = _this$props9.id,
-          name = _this$props9.name,
-          expanded = _this$props9.expanded,
-          collectionIcon = _this$props9.collectionIcon,
-          collectionIconExpanded = _this$props9.collectionIconExpanded,
-          isCollectionFlattened = _this$props9.isCollectionFlattened,
-          getCollectionProps = _this$props9.getCollectionProps,
-          level = _this$props9.level,
-          position = _this$props9.position,
-          styles = _this$props9.styles;
+    const _this$props7 = this.props,
+          id = _this$props7.id,
+          name = _this$props7.name,
+          expanded = _this$props7.expanded,
+          collectionIcon = _this$props7.collectionIcon,
+          collectionIconExpanded = _this$props7.collectionIconExpanded,
+          isCollectionFlattened = _this$props7.isCollectionFlattened,
+          getCollectionProps = _this$props7.getCollectionProps,
+          level = _this$props7.level,
+          position = _this$props7.position,
+          styles = _this$props7.styles;
     const collectionProps = getCollectionProps({ ...this.getCommonButtonProps(),
       expanded: expanded,
       collectionIcon: collectionIcon,
@@ -295,7 +291,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       ref: el => {
         this.ref = el;
       },
-      css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
+      css: styles?.treeCollection,
       tabIndex: -1,
       role: "treeitem",
       "aria-label": this.props.name,
@@ -315,7 +311,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       })
     }, ariaSelected), (0, _emotion.jsx)(_TreeButton.TreeButton, collectionProps), expanded && this.childCount > 0 && (0, _emotion.jsx)("ul", {
       "aria-label": name,
-      css: styles === null || styles === void 0 ? void 0 : styles.list,
+      css: styles?.list,
       role: "group"
     }, this.renderChildren()));
   }

package/lib/TreeBrowser/TreeCollection/theme.js

@@ -40,12 +40,12 @@ const generateComponentTheme = theme => {
         typography = theme.typography,
         borders = theme.borders;
   const componentVariables = {
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    baseSpacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
-    baseSpacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    fontFamily: typography?.fontFamily,
+    baseSpacingSmall: spacing?.xSmall,
+    baseSpacingMedium: spacing?.small,
     baseSpacingLarge: '1rem',
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDark
+    borderWidth: borders?.widthSmall,
+    borderColor: colors?.borderDark
   };
   return { ...componentVariables
   };

package/lib/TreeBrowser/TreeNode/index.js

@@ -51,28 +51,24 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    this.props.makeStyles?.();
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
 
   renderItemImage() {
     var _Img;
 
-    const _this$props3 = this.props,
-          thumbnail = _this$props3.thumbnail,
-          itemIcon = _this$props3.itemIcon,
-          styles = _this$props3.styles;
+    const _this$props = this.props,
+          thumbnail = _this$props.thumbnail,
+          itemIcon = _this$props.itemIcon,
+          styles = _this$props.styles;
 
     if (thumbnail) {
       return (0, _emotion.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
+        css: styles?.thumbnail
       }, _Img || (_Img = (0, _emotion.jsx)(_Img2.Img, {
         src: thumbnail,
         constrain: "cover",
@@ -82,7 +78,7 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 
     if (itemIcon) {
       return (0, _emotion.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon
+        css: styles?.icon
       }, (0, _callRenderProp.callRenderProp)(itemIcon));
     }
 
@@ -90,17 +86,17 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   render() {
-    const _this$props4 = this.props,
-          children = _this$props4.children,
-          styles = _this$props4.styles;
+    const _this$props2 = this.props,
+          children = _this$props2.children,
+          styles = _this$props2.styles;
     return (0, _emotion.jsx)("div", {
       ref: this.handleRef,
       tabIndex: -1,
-      css: styles === null || styles === void 0 ? void 0 : styles.treeButton
+      css: styles?.treeButton
     }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.layout
+      css: styles?.layout
     }, this.renderItemImage(), (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.node
+      css: styles?.node
     }, children)));
   }
 

package/lib/TreeBrowser/index.js

@@ -56,16 +56,14 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       e.stopPropagation();
       const onCollectionClick = _this.props.onCollectionClick;
       if (expand) _this.expandOrCollapseNode(collection);
-      onCollectionClick === null || onCollectionClick === void 0 ? void 0 : onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
+      onCollectionClick?.(collection.id, collection); // TODO: this should pass the event as the first arg
 
       _this.handleSelection(collection.id, 'collection');
     };
 
     this.handleItemClick = (e, item) => {
-      var _this$props$onItemCli, _this$props;
-
       e.stopPropagation();
-      (_this$props$onItemCli = (_this$props = this.props).onItemClick) === null || _this$props$onItemCli === void 0 ? void 0 : _this$props$onItemCli.call(_this$props, item);
+      this.props.onItemClick?.(item);
       this.handleSelection(item.id, 'item');
     };
 
@@ -106,9 +104,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     };
 
     this.getIsFlattened = collection => {
-      const _this$props2 = this.props,
-            rootId = _this$props2.rootId,
-            showRootCollection = _this$props2.showRootCollection;
+      const _this$props = this.props,
+            rootId = _this$props.rootId,
+            showRootCollection = _this$props.showRootCollection;
       return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
     };
 
@@ -125,15 +123,11 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
-
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    this.props.makeStyles?.();
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
-
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    this.props.makeStyles?.();
   }
 
   get _root() {
@@ -141,9 +135,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   get collections() {
-    const _this$props5 = this.props,
-          collections = _this$props5.collections,
-          rootId = _this$props5.rootId;
+    const _this$props2 = this.props,
+          collections = _this$props2.collections,
+          rootId = _this$props2.rootId;
 
     if (typeof rootId !== 'undefined') {
       return [collections[rootId]];
@@ -161,9 +155,7 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   expandOrCollapseNode(collection) {
-    var _this$props$onCollect, _this$props6;
-
-    (_this$props$onCollect = (_this$props6 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props6, collection);
+    this.props.onCollectionToggle?.(collection);
 
     if (typeof this.props.expanded === 'undefined') {
       this.setState((state, props) => {
@@ -321,7 +313,7 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   render() {
     const styles = this.props.styles;
     return (0, _emotion.jsx)("ul", {
-      css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
+      css: styles?.treeBrowser,
       tabIndex: 0,
       role: "tree",
       onKeyDown: this.handleKeyDown,

package/lib/TreeBrowser/theme.js

@@ -38,10 +38,10 @@ const generateComponentTheme = theme => {
   const colors = theme.colors,
         borders = theme.borders;
   const componentVariables = {
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
+    borderRadius: borders?.radiusMedium,
+    focusOutlineWidth: borders?.widthMedium,
+    focusOutlineColor: colors?.borderBrand,
+    focusOutlineStyle: borders?.style
   };
   return { ...componentVariables
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "8.17.1-snapshot.21+79d490548",
+  "version": "8.17.1-snapshot.30+cb1322c25",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,22 +23,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-color-utils": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-test-locator": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-color-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-test-locator": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-themes": "8.17.1-snapshot.30+cb1322c25"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
-    "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-img": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-prop-types": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-testable": "8.17.1-snapshot.21+79d490548",
-    "@instructure/ui-utils": "8.17.1-snapshot.21+79d490548",
+    "@instructure/emotion": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/shared-types": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-icons": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-img": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-prop-types": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-testable": "8.17.1-snapshot.30+cb1322c25",
+    "@instructure/ui-utils": "8.17.1-snapshot.30+cb1322c25",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
+  "gitHead": "cb1322c25257139750149d7a817f1fb32571c1ed"
 }