@instructure/ui-tree-browser 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/lib/TreeBrowser/TreeCollection/index.js

@@ -32,6 +32,7 @@ var _dec, _dec2, _class, _class2, _temp;
 parent: TreeBrowser
 id: TreeBrowser.Collection
 ---
+@tsProps
 **/
 let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeCollection extends _react.Component {
   constructor(props) {
@@ -45,7 +46,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       });
     };
 
-    this.handleBlur = (e, item) => {
+    this.handleBlur = (e, _item) => {
       e.stopPropagation();
       this.setState({
         focused: ''
@@ -164,12 +165,13 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       id: key,
       role: "treeitem",
       css: styles === null || styles === void 0 ? void 0 : styles.item,
-      tabIndex: "-1",
+      tabIndex: -1,
       key: key,
       "aria-posinset": position,
       "aria-setsize": this.childCount,
       "aria-level": this.itemsLevel
     }, ariaSelected, {
+      // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
       onClick: (e, n) => {
         if (typeof child.props.onClick === 'function') {
           child.props.onClick(e, n);
@@ -177,15 +179,16 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           e.stopPropagation();
         }
       },
-      onFocus: (e, n) => this.handleFocus(e, itemHash),
+      onFocus: e => this.handleFocus(e, itemHash) // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
+      ,
       onKeyDown: (e, n) => {
         if (typeof child.props.onKeyDown === 'function') {
           child.props.onKeyDown(e, n);
         } else {
-          onKeyDown(e, itemHash);
+          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash);
         }
       },
-      onBlur: (e, n) => this.handleBlur(e, itemHash)
+      onBlur: e => this.handleBlur(e, itemHash)
     }), (0, _safeCloneElement.safeCloneElement)(child, itemProps));
   }
 
@@ -237,17 +240,17 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     });
     return (0, _emotion.jsx)("li", Object.assign({
       key: `i${position}`,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "treeitem",
       "aria-label": item.name,
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       "aria-level": this.itemsLevel,
       "aria-posinset": position,
       "aria-setsize": this.childCount,
-      onClick: (e, n) => onItemClick(e, itemHash),
-      onKeyDown: (e, n) => onKeyDown(e, itemHash),
-      onFocus: (e, n) => this.handleFocus(e, itemHash),
-      onBlur: (e, n) => this.handleBlur(e, itemHash)
+      onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(e, itemHash),
+      onKeyDown: e => onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash),
+      onFocus: e => this.handleFocus(e, itemHash),
+      onBlur: e => this.handleBlur(e, itemHash)
     }, ariaSelected), (0, _emotion.jsx)(_TreeButton.TreeButton, itemProps));
   }
 
@@ -293,7 +296,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
         this.ref = el;
       },
       css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "treeitem",
       "aria-label": this.props.name,
       "aria-level": level,
@@ -302,11 +305,11 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       "aria-expanded": expanded,
       onClick: this.handleCollectionClick,
       onKeyDown: this.handleCollectionKeyDown,
-      onFocus: (e, n) => this.handleFocus(e, {
+      onFocus: e => this.handleFocus(e, {
         id: id,
         type: 'collection'
       }),
-      onBlur: (e, n) => this.handleBlur(e, {
+      onBlur: e => this.handleBlur(e, {
         id: id,
         type: 'collection'
       })
@@ -324,25 +327,9 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   selection: '',
   size: 'medium',
   variant: 'folderTree',
-  onItemClick: function () {},
-  onCollectionClick: function () {},
-  onKeyDown: function () {},
-  id: void 0,
-  name: void 0,
-  descriptor: void 0,
-  collectionIconExpanded: void 0,
-  collectionIcon: void 0,
-  itemIcon: void 0,
   getItemProps: props => props,
   getCollectionProps: props => props,
-  numChildren: void 0,
-  level: void 0,
-  position: void 0,
-  renderBeforeItems: null,
-  renderAfterItems: null,
-  containerRef: function () {},
-  isCollectionFlattened: false,
-  renderContent: void 0
+  isCollectionFlattened: false
 }, _temp)) || _class) || _class);
 exports.TreeCollection = TreeCollection;
 var _default = TreeCollection;

package/lib/TreeBrowser/TreeCollection/props.js

@@ -55,17 +55,9 @@ const propTypes = {
   onCollectionClick: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
   numChildren: _propTypes.default.number,
-  level: _propTypes.default.number,
+  level: _propTypes.default.number.isRequired,
   position: _propTypes.default.number,
-
-  /**
-   * children of type TreeNode
-   */
   renderBeforeItems: _Children.Children.oneOf([_TreeNode.TreeNode]),
-
-  /**
-   * children of type TreeNode
-   */
   renderAfterItems: _Children.Children.oneOf([_TreeNode.TreeNode]),
   containerRef: _propTypes.default.func,
   isCollectionFlattened: _propTypes.default.bool,

package/lib/TreeBrowser/TreeNode/index.js

@@ -25,22 +25,27 @@ var _props = require("./props");
 
 var _dec, _dec2, _class, _class2, _temp;
 
+// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
+
 /**
 ---
 parent: TreeBrowser
 id: TreeBrowser.Node
 ---
+@tsProps
 A helper class used to render the :renderBeforeItems and :renderAfterItems
 in the TreeBrowser.
 **/
-// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeNode extends _react.Component {
   constructor() {
     super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
-      el && this.props.containerRef(el.parentElement);
+      if (el && typeof this.props.containerRef === 'function') {
+        this.props.containerRef(el.parentElement);
+      }
+
       this.ref = el;
     };
   }
@@ -80,6 +85,8 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, (0, _callRenderProp.callRenderProp)(itemIcon));
     }
+
+    return void 0;
   }
 
   render() {
@@ -98,19 +105,10 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
 }, _class2.displayName = "TreeNode", _class2.componentId = 'TreeBrowser.Node', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  id: void 0,
   size: 'medium',
   variant: 'folderTree',
   selected: false,
-  focused: false,
-  children: void 0,
-  itemIcon: void 0,
-  thumbnail: void 0,
-  level: void 0,
-  containerRef: function () {},
-  parentRef: void 0,
-  onKeyDown: void 0,
-  onClick: void 0
+  focused: false
 }, _temp)) || _class) || _class);
 exports.TreeNode = TreeNode;
 var _default = TreeNode;

package/lib/TreeBrowser/TreeNode/props.js

@@ -41,15 +41,7 @@ const propTypes = {
   itemIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   thumbnail: _propTypes.default.string,
   level: _propTypes.default.number,
-
-  /**
-   * The children to be rendered within the `<TreeNode />`
-   */
   children: _propTypes.default.node,
-
-  /**
-   * A function that returns a reference to the parent li element
-   */
   containerRef: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
   onClick: _propTypes.default.func

package/lib/TreeBrowser/index.js

@@ -15,10 +15,10 @@ var _IconFolderLine = require("@instructure/ui-icons/lib/IconFolderLine.js");
 
 var _IconDocumentLine = require("@instructure/ui-icons/lib/IconDocumentLine.js");
 
-var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
+var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
+
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _emotion = require("@instructure/emotion");
@@ -41,6 +41,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeBrowser extends _react.Component {
   constructor(props) {
@@ -55,16 +56,17 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       e.stopPropagation();
       const onCollectionClick = _this.props.onCollectionClick;
       if (expand) _this.expandOrCollapseNode(collection);
-      onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
+      onCollectionClick === null || onCollectionClick === void 0 ? void 0 : 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();
-      const onItemClick = this.props.onItemClick;
-      onItemClick(item);
-      this.handleSelection(item.id, 'item'); // TODO: this should pass the event as the first arg
+      (_this$props$onItemCli = (_this$props = this.props).onItemClick) === null || _this$props$onItemCli === void 0 ? void 0 : _this$props$onItemCli.call(_this$props, item);
+      this.handleSelection(item.id, 'item');
     };
 
     this.handleKeyDown = (event, node) => {
@@ -104,31 +106,34 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     };
 
     this.getIsFlattened = collection => {
-      const _this$props = this.props,
-            rootId = _this$props.rootId,
-            showRootCollection = _this$props.showRootCollection;
+      const _this$props2 = this.props,
+            rootId = _this$props2.rootId,
+            showRootCollection = _this$props2.showRootCollection;
       return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
     };
 
-    this.state = {
-      selection: ''
-    };
-
     if (typeof this.props.expanded === 'undefined') {
-      this.state.expanded = props.defaultExpanded;
+      this.state = {
+        expanded: this.props.defaultExpanded,
+        selection: ''
+      };
+    } else {
+      this.state = {
+        selection: ''
+      };
     }
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
+    var _this$props$makeStyle, _this$props3;
 
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
+    var _this$props$makeStyle2, _this$props4;
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
   }
 
   get _root() {
@@ -136,9 +141,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   get collections() {
-    const _this$props4 = this.props,
-          collections = _this$props4.collections,
-          rootId = _this$props4.rootId;
+    const _this$props5 = this.props,
+          collections = _this$props5.collections,
+          rootId = _this$props5.rootId;
 
     if (typeof rootId !== 'undefined') {
       return [collections[rootId]];
@@ -156,11 +161,13 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   expandOrCollapseNode(collection) {
-    this.props.onCollectionToggle(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);
 
     if (typeof this.props.expanded === 'undefined') {
       this.setState((state, props) => {
-        const expanded = [].concat(this.getExpanded(state, props));
+        const expanded = [...this.getExpanded(state, props)];
         const expandedIndex = this.getExpandedIndex(expanded, collection.id);
 
         if (collection.expanded && expandedIndex < 0) {
@@ -261,13 +268,13 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   getSubCollections(collection) {
-    const collections = [].concat(collection.collections || []);
+    const collections = collection.collections ? [...collection.collections] : [];
     return collections.map(id => this.getCollectionProps(this.props.collections[id])).filter(collection => collection != null).sort(this.props.sortOrder);
   }
 
   getItems(collection) {
     if (collection.items) {
-      const items = [].concat(collection.items);
+      const items = collection.items ? [...collection.items] : [];
       return items.map(id => {
         return { ...this.props.items[id]
         };
@@ -281,13 +288,13 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     return {
       id: collection.id,
       name: collection.name,
-      descriptor: collection.descriptor,
-      expanded: this.getExpandedIndex(this.expanded, collection.id) >= 0,
-      items: this.getItems(collection),
       collections: this.getSubCollections(collection),
+      items: this.getItems(collection),
+      descriptor: collection.descriptor,
+      containerRef: collection.containerRef,
       renderBeforeItems: collection.renderBeforeItems,
       renderAfterItems: collection.renderAfterItems,
-      containerRef: collection.containerRef,
+      expanded: this.getExpandedIndex(this.expanded, collection.id) >= 0,
       isCollectionFlattened: this.getIsFlattened(collection)
     };
   }
@@ -336,10 +343,7 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   getCollectionProps: props => props,
   defaultExpanded: [],
   selectionType: 'none',
-  onItemClick: function (item) {},
-  onCollectionClick: function (id, collection) {},
-  onCollectionToggle: function (collection) {},
-  sortOrder: function (obj1, obj2) {
+  sortOrder: function () {
     return 0;
   }
 }, _class2.Node = _TreeNode.TreeNode, _class2.Collection = _TreeCollection.TreeCollection, _class2.Button = _TreeButton.TreeButton, _temp)) || _class) || _class);

package/lib/TreeBrowser/props.js

@@ -35,80 +35,25 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * a normalized hash of collections, keyed by id, that contain an
-   * :id, :name, :items (an array of item ids), :collections (an array of
-   * collection ids), optional :descriptor text, optional :containerRef function,
-   * an optional :renderBeforeItems TreeNode, and an optional :renderAfterItems TreeNode.
-   * Each collection must have a unique id.
-   */
   collections: _propTypes.default.object.isRequired,
-
-  /**
-   * a hash of items, keyed by id, that contain an :id, :name,
-   * optional :descriptor text, and optional :thumbnail url
-   */
   items: _propTypes.default.object.isRequired,
-
-  /**
-   * specifies the id of the root level collection, if present.
-   * if no root is specified, all collections will be rendered
-   * at the top level
-   **/
   rootId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * an array of expanded collection ids, must be accompanied by an 'onCollectionToggle' prop
-   */
   expanded: (0, _controllable.controllable)(_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])), 'onCollectionToggle'),
-
-  /**
-   * an array of collection ids to expand by default
-   */
   defaultExpanded: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
-  // There are 2 types of tree selection:  single and multi.
-  // This is set up to allow for "multi" in the future without having to deprecate the old API.
   selectionType: _propTypes.default.oneOf(['none', 'single']),
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   variant: _propTypes.default.oneOf(['folderTree', 'indent']),
   collectionIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   collectionIconExpanded: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   itemIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * A function called with each item's props as an argument. The return value of this function is a
-   * props object which will be passed to the item when it is rendered. This is useful for situations where
-   * you need to render the item differently depending on it's props. For example, if you would like to
-   * display a different icon for items with a certain name.
-   */
   getItemProps: _propTypes.default.func,
-
-  /**
-   * A function called with each collection's props as an argument. The return value of this function is a
-   * props object which will be passed to the collection when it is rendered. This is useful for situations where
-   * you need to render the collection differently depending on it's props. For example, if you would like to
-   * display a different icon for collections with a certain name.
-   */
   getCollectionProps: _propTypes.default.func,
-
-  /**
-   * whether or not to show the root collection specified in rootId prop or
-   * to begin with its immediate subcollections and items instead
-   */
   showRootCollection: _propTypes.default.bool,
   onCollectionClick: _propTypes.default.func,
   onCollectionToggle: _propTypes.default.func,
   onItemClick: _propTypes.default.func,
-
-  /**
-   * An optional label to assist visually impaired users
-   */
   treeLabel: _propTypes.default.string,
   renderContent: _propTypes.default.func,
-
-  /**
-   * An optional compare function to specify order of the collections and the items
-   */
   sortOrder: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "8.14.1-snapshot.7+845d7ec6c",
+  "version": "8.15.1-snapshot.2+00f55c738",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,22 +24,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-color-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-locator": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
+    "@instructure/ui-babel-preset": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-color-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-locator": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-themes": "8.15.1-snapshot.2+00f55c738"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-icons": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-img": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-testable": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/emotion": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/shared-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-icons": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-img": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-prop-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-react-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-testable": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-utils": "8.15.1-snapshot.2+00f55c738",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
+  "gitHead": "00f55c7382e82209ea553c107951c4356ba202bf"
 }

package/src/TreeBrowser/TreeButton/index.tsx

@@ -35,15 +35,15 @@ import generateComponentTheme from './theme'
 import type { TreeBrowserButtonProps } from './props'
 import { allowedProps, propTypes } from './props'
 
+// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
+
 /**
 ---
 parent: TreeBrowser
 id: TreeBrowser.Button
 ---
+@tsProps
 **/
-
-// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
-
 @withStyle(generateStyles, generateComponentTheme)
 @testable()
 class TreeButton extends Component<TreeBrowserButtonProps> {
@@ -51,44 +51,35 @@ class TreeButton extends Component<TreeBrowserButtonProps> {
 
   static allowedProps = allowedProps
   static propTypes = propTypes
+
   static defaultProps = {
     type: 'treeButton',
     size: 'medium',
     variant: 'folderTree',
     selected: false,
     focused: false,
-    onClick: function () {},
-    id: undefined,
-    name: undefined,
-    collectionIcon: undefined,
-    collectionIconExpanded: undefined,
-    itemIcon: undefined,
-    thumbnail: undefined,
-    expanded: false,
-    descriptor: undefined,
-    level: undefined,
-    containerRef: function () {},
-    renderContent: undefined
+    expanded: false
   }
+
   ref: Element | null = null
 
   componentDidMount() {
     this.props.makeStyles?.()
   }
+
   componentDidUpdate() {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  defaultContentRenderer(props) {
+  defaultContentRenderer(props: TreeBrowserButtonProps) {
     const { name, descriptor, styles } = props
     return (
-      <span css={styles.layout}>
+      <span css={styles!.layout}>
         {this.renderImage()}
-        <span css={styles.text}>
-          <span css={styles.textName}>{name}</span>
+        <span css={styles!.text}>
+          <span css={styles!.textName}>{name}</span>
           {descriptor ? (
-            <span css={styles.textDescriptor} title={descriptor}>
+            <span css={styles!.textDescriptor} title={descriptor}>
               {descriptor}
             </span>
           ) : null}
@@ -97,7 +88,6 @@ class TreeButton extends Component<TreeBrowserButtonProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
   renderImage() {
     const { type } = this.props
     switch (type) {
@@ -108,16 +98,12 @@ class TreeButton extends Component<TreeBrowserButtonProps> {
       default:
         break
     }
+    return undefined
   }
 
-  // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
   renderCollectionIcon() {
-    const {
-      expanded,
-      collectionIcon,
-      collectionIconExpanded,
-      styles
-    } = this.props
+    const { expanded, collectionIcon, collectionIconExpanded, styles } =
+      this.props
 
     if (collectionIcon || collectionIconExpanded) {
       return (
@@ -126,12 +112,11 @@ class TreeButton extends Component<TreeBrowserButtonProps> {
         </div>
       )
     }
+    return undefined
   }
 
-  // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
   renderItemImage() {
     const { thumbnail, itemIcon, styles } = this.props
-
     if (thumbnail) {
       return (
         <div css={styles?.thumbnail}>
@@ -139,16 +124,16 @@ class TreeButton extends Component<TreeBrowserButtonProps> {
         </div>
       )
     }
-
     if (itemIcon) {
       return <div css={styles?.icon}>{callRenderProp(itemIcon)}</div>
     }
+    return undefined
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-  handleRef = (el) => {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    el && this.props.containerRef(el.parentElement)
+  handleRef = (el: HTMLButtonElement) => {
+    if (el && typeof this.props.containerRef === 'function') {
+      this.props.containerRef(el.parentElement)
+    }
     this.ref = el
   }