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

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.15.0](https://github.com/instructure/instructure-ui/compare/v8.14.0...v8.15.0) (2022-01-26)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
 # [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser

package/es/TreeBrowser/TreeBrowserLocator.js

@@ -24,7 +24,8 @@
 import { locator } from '@instructure/ui-test-locator';
 import { TreeBrowser } from './index'; // TODO: if we make a TreeBrowserItem component + locator we could use it here.
 
-const TreeBrowserItemLocator = locator('[role="treeitem"]');
+const TreeBrowserItemLocator = locator('[role="treeitem"]'); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const TreeBrowserLocator = locator(TreeBrowser.selector, {
   findAllItems: function () {
     return TreeBrowserItemLocator.findAll(...arguments);

package/es/TreeBrowser/TreeButton/index.js

@@ -32,14 +32,15 @@ import { callRenderProp } from '@instructure/ui-react-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps, propTypes } 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
 
 let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeButton extends Component {
   constructor() {
@@ -47,7 +48,10 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     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;
     };
   }
@@ -93,6 +97,8 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       default:
         break;
     }
+
+    return void 0;
   }
 
   renderCollectionIcon() {
@@ -107,6 +113,8 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, callRenderProp(expanded ? collectionIconExpanded : collectionIcon));
     }
+
+    return void 0;
   }
 
   renderItemImage() {
@@ -132,6 +140,8 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, callRenderProp(itemIcon));
     }
+
+    return void 0;
   }
 
   render() {
@@ -154,18 +164,7 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   variant: 'folderTree',
   selected: false,
   focused: false,
-  onClick: function () {},
-  id: void 0,
-  name: void 0,
-  collectionIcon: void 0,
-  collectionIconExpanded: void 0,
-  itemIcon: void 0,
-  thumbnail: void 0,
-  expanded: false,
-  descriptor: void 0,
-  level: void 0,
-  containerRef: function () {},
-  renderContent: void 0
+  expanded: false
 }, _temp)) || _class) || _class);
 export default TreeButton;
 export { TreeButton };

package/es/TreeBrowser/TreeCollection/index.js

@@ -36,13 +36,14 @@ import { TreeButton } from '../TreeButton';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 parent: TreeBrowser
 id: TreeBrowser.Collection
 ---
+@tsProps
 **/
-
 let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeCollection extends Component {
   constructor(props) {
     super(props);
@@ -55,7 +56,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       });
     };
 
-    this.handleBlur = (e, item) => {
+    this.handleBlur = (e, _item) => {
       e.stopPropagation();
       this.setState({
         focused: ''
@@ -174,12 +175,13 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       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);
@@ -187,15 +189,16 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
           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)
     }), safeCloneElement(child, itemProps));
   }
 
@@ -247,17 +250,17 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     });
     return 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), jsx(TreeButton, itemProps));
   }
 
@@ -303,7 +306,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
         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,
@@ -312,11 +315,11 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       "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'
       })
@@ -334,25 +337,9 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
   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);
 export default TreeCollection;
 export { TreeCollection };

package/es/TreeBrowser/TreeCollection/props.js

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

package/es/TreeBrowser/TreeNode/index.js

@@ -33,16 +33,17 @@ import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyles from '../TreeButton/styles';
 import generateComponentTheme from '../TreeButton/theme';
-import { allowedProps, propTypes } from './props';
+import { allowedProps, propTypes } from './props'; // 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 = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeNode extends Component {
   constructor() {
@@ -50,7 +51,10 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
     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;
     };
   }
@@ -90,6 +94,8 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, callRenderProp(itemIcon));
     }
+
+    return void 0;
   }
 
   render() {
@@ -108,19 +114,10 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
   }
 
 }, _class2.displayName = "TreeNode", _class2.componentId = 'TreeBrowser.Node', _class2.allowedProps = allowedProps, _class2.propTypes = 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);
 export default TreeNode;
 export { TreeNode };

package/es/TreeBrowser/TreeNode/props.js

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

package/es/TreeBrowser/index.js

@@ -28,7 +28,7 @@ var _dec, _dec2, _class, _class2, _temp;
 import { Component } from 'react';
 import keycode from 'keycode';
 import { IconFolderLine, IconDocumentLine } from '@instructure/ui-icons';
-import { pickProps, omitProps } from '@instructure/ui-react-utils';
+import { omitProps, pickProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import { TreeCollection } from './TreeCollection';
@@ -41,6 +41,7 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeBrowser extends Component {
@@ -56,16 +57,17 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       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) => {
@@ -105,31 +107,34 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     };
 
     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() {
@@ -137,9 +142,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   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]];
@@ -157,11 +162,13 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   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) {
@@ -262,13 +269,13 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   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]
         };
@@ -282,13 +289,13 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     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)
     };
   }
@@ -337,10 +344,7 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   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, _class2.Collection = TreeCollection, _class2.Button = TreeButton, _temp)) || _class) || _class);

package/es/TreeBrowser/props.js

@@ -24,80 +24,25 @@
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
 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.object.isRequired,
-
-  /**
-   * a hash of items, keyed by id, that contain an :id, :name,
-   * optional :descriptor text, and optional :thumbnail url
-   */
   items: PropTypes.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.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * an array of expanded collection ids, must be accompanied by an 'onCollectionToggle' prop
-   */
   expanded: controllable(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), 'onCollectionToggle'),
-
-  /**
-   * an array of collection ids to expand by default
-   */
   defaultExpanded: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.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.oneOf(['none', 'single']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   variant: PropTypes.oneOf(['folderTree', 'indent']),
   collectionIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   collectionIconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.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.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.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.bool,
   onCollectionClick: PropTypes.func,
   onCollectionToggle: PropTypes.func,
   onItemClick: PropTypes.func,
-
-  /**
-   * An optional label to assist visually impaired users
-   */
   treeLabel: PropTypes.string,
   renderContent: PropTypes.func,
-
-  /**
-   * An optional compare function to specify order of the collections and the items
-   */
   sortOrder: PropTypes.func
 };
 const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder'];

package/lib/TreeBrowser/TreeBrowserLocator.js

@@ -33,7 +33,8 @@ var _index = require("./index");
  * SOFTWARE.
  */
 // TODO: if we make a TreeBrowserItem component + locator we could use it here.
-const TreeBrowserItemLocator = (0, _locator.locator)('[role="treeitem"]');
+const TreeBrowserItemLocator = (0, _locator.locator)('[role="treeitem"]'); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 const TreeBrowserLocator = (0, _locator.locator)(_index.TreeBrowser.selector, {
   findAllItems: function () {
     return TreeBrowserItemLocator.findAll(...arguments);

package/lib/TreeBrowser/TreeButton/index.js

@@ -25,20 +25,25 @@ 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.Button
 ---
+@tsProps
 **/
-// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeButton 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;
     };
   }
@@ -84,6 +89,8 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       default:
         break;
     }
+
+    return void 0;
   }
 
   renderCollectionIcon() {
@@ -98,6 +105,8 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, (0, _callRenderProp.callRenderProp)(expanded ? collectionIconExpanded : collectionIcon));
     }
+
+    return void 0;
   }
 
   renderItemImage() {
@@ -123,6 +132,8 @@ let TreeButton = (_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() {
@@ -145,18 +156,7 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   variant: 'folderTree',
   selected: false,
   focused: false,
-  onClick: function () {},
-  id: void 0,
-  name: void 0,
-  collectionIcon: void 0,
-  collectionIconExpanded: void 0,
-  itemIcon: void 0,
-  thumbnail: void 0,
-  expanded: false,
-  descriptor: void 0,
-  level: void 0,
-  containerRef: function () {},
-  renderContent: void 0
+  expanded: false
 }, _temp)) || _class) || _class);
 exports.TreeButton = TreeButton;
 var _default = TreeButton;