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

package/src/TreeBrowser/index.tsx

@@ -24,12 +24,12 @@
 
 /** @jsx jsx */
 
-import { Component } from 'react'
+import { Component, SyntheticEvent } 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'
 
@@ -39,17 +39,24 @@ import { TreeNode } from './TreeNode'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'
-import type { TreeBrowserProps } from './props'
+import type {
+  Collection,
+  CollectionData,
+  CollectionProps,
+  TreeBrowserProps,
+  TreeBrowserState
+} from './props'
 import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyles, generateComponentTheme)
 @testable()
-class TreeBrowser extends Component<TreeBrowserProps> {
+class TreeBrowser extends Component<TreeBrowserProps, TreeBrowserState> {
   static readonly componentId = 'TreeBrowser'
 
   static allowedProps = allowedProps
@@ -62,20 +69,11 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     collectionIcon: IconFolderLine,
     collectionIconExpanded: IconFolderLine,
     itemIcon: IconDocumentLine,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-    getItemProps: (props) => props,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-    getCollectionProps: (props) => props,
+    getItemProps: (props: unknown) => props,
+    getCollectionProps: (props: unknown) => props,
     defaultExpanded: [],
     selectionType: 'none',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'item' is declared but its value is never read.
-    onItemClick: function (item) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'id' is declared but its value is never read.
-    onCollectionClick: function (id, collection) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'collection' is declared but its value is never re... Remove this comment to see the full error message
-    onCollectionToggle: function (collection) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'foo' and 'bar' are declared but their values are never read.
-    sortOrder: function (obj1, obj2) {
+    sortOrder: function () {
       return 0
     }
   }
@@ -83,55 +81,53 @@ class TreeBrowser extends Component<TreeBrowserProps> {
   static Node = TreeNode
   static Collection = TreeCollection
   static Button = TreeButton
+
   ref: Element | null = null
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: TreeBrowserProps) {
     super(props)
-
-    this.state = { selection: '' }
-
     if (typeof this.props.expanded === 'undefined') {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'expanded' does not exist on type 'Readon... Remove this comment to see the full error message
-      this.state.expanded = props.defaultExpanded
+      this.state = { expanded: this.props.defaultExpanded, selection: '' }
+    } else {
+      this.state = { selection: '' }
     }
   }
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
+
   componentDidUpdate() {
     this.props.makeStyles?.()
   }
+
   get _root() {
     console.warn(
       '_root property is deprecated and will be removed in v9, please use ref instead'
     )
-
     return this.ref
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleCollectionClick = (e, collection, expand = true) => {
+  handleCollectionClick = (
+    e: SyntheticEvent,
+    collection: CollectionData,
+    expand = true
+  ) => {
     e.stopPropagation()
     const { onCollectionClick } = this.props
 
     if (expand) this.expandOrCollapseNode(collection)
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    onCollectionClick(collection.id, collection) // TODO: this should pass the event as the first arg
+    onCollectionClick?.(collection.id as any, collection) // TODO: this should pass the event as the first arg
     this.handleSelection(collection.id, 'collection')
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleItemClick = (e, item) => {
+  handleItemClick = (e: SyntheticEvent, item: CollectionData) => {
     e.stopPropagation()
-    const { onItemClick } = this.props
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    onItemClick(item)
-    this.handleSelection(item.id, 'item') // TODO: this should pass the event as the first arg
+    this.props.onItemClick?.(item)
+    this.handleSelection(item.id, 'item')
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleKeyDown = (event, node) => {
+  handleKeyDown = (event: React.KeyboardEvent, node?: CollectionData) => {
     event.stopPropagation()
     switch (event.keyCode) {
       case keycode.codes.down:
@@ -162,7 +158,6 @@ class TreeBrowser extends Component<TreeBrowserProps> {
 
   get collections() {
     const { collections, rootId } = this.props
-
     if (typeof rootId !== 'undefined') {
       return [collections[rootId]]
     } else {
@@ -176,42 +171,33 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     return this.getExpanded(this.state, this.props)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'state' implicitly has an 'any' type.
-  getExpanded(state, props) {
+  getExpanded(state: TreeBrowserState, props: TreeBrowserProps) {
     return typeof props.expanded === 'undefined'
-      ? state.expanded
+      ? state.expanded!
       : props.expanded
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'collection' implicitly has an 'any' typ... Remove this comment to see the full error message
-  expandOrCollapseNode(collection) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.onCollectionToggle(collection)
+  expandOrCollapseNode(collection: CollectionData) {
+    this.props.onCollectionToggle?.(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) {
-          // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
           expanded.push(collection.id)
         } else if (expandedIndex >= 0) {
           expanded.splice(expandedIndex, 1)
         }
-
         return { expanded }
       })
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'id' implicitly has an 'any' type.
-  handleSelection(id, type) {
+  handleSelection(id: string | number | undefined, type: string) {
     const { selectionType } = this.props
     selectionType === 'single' &&
       this.setState((state) => {
         const selection = `${type}_${id}`
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'selection' does not exist on type 'Reado... Remove this comment to see the full error message
         if (state.selection !== selection) {
           return { selection }
         } else {
@@ -224,12 +210,10 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     return Array.from(this.ref!.querySelectorAll('[role="treeitem"]'))
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'delta' implicitly has an 'any' type.
-  moveFocus(delta) {
+  moveFocus(delta: number) {
     const nodes = this.getNavigableNodes()
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    const closest = window.document.activeElement.closest('[role="treeitem"]')
-    const active = nodes.indexOf(closest!)
+    const closest = window.document.activeElement!.closest('[role="treeitem"]')!
+    const active = nodes.indexOf(closest)
     let next = active + delta
     if (next < 0) {
       next = 0
@@ -240,12 +224,10 @@ class TreeBrowser extends Component<TreeBrowserProps> {
       n.setAttribute('tabindex', '-1')
     })
     nodes[next].setAttribute('tabindex', '0')
-    // @ts-expect-error ts-migrate(2571) FIXME: Object is of type 'unknown'.
-    nodes[next].focus()
+    ;(nodes[next] as any).focus()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'keyCode' implicitly has an 'any' type.
-  homeOrEnd(keyCode) {
+  homeOrEnd(keyCode: number) {
     const length = this.getNavigableNodes().length
     if (keyCode === keycode.codes.home) {
       this.moveFocus(1 - length)
@@ -254,11 +236,9 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'keyCode' implicitly has an 'any' type.
-  handleLeftOrRightArrow(keyCode, node) {
+  handleLeftOrRightArrow(keyCode: number, node?: CollectionData) {
     const ltr = !(
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' is possibly null
-      (this.ref.parentElement.dir === 'rtl' || document.dir === 'rtl')
+      this.ref!.parentElement!.dir === 'rtl' || document.dir === 'rtl'
     )
     if (
       (ltr && keyCode === keycode.codes.left) ||
@@ -270,8 +250,7 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleOpenOrNext(node) {
+  handleOpenOrNext(node?: CollectionData) {
     if (
       node &&
       !this.expanded.includes(node.id) &&
@@ -283,8 +262,7 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleCloseOrPrevious(node) {
+  handleCloseOrPrevious(node?: CollectionData) {
     if (node && this.expanded.includes(node.id) && node.type === 'collection') {
       this.expandOrCollapseNode(node)
     } else {
@@ -292,8 +270,7 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleActivation(event, node) {
+  handleActivation(event: React.KeyboardEvent, node?: CollectionData) {
     if (node == null) return
     if (node.type === 'collection') {
       this.handleCollectionClick(
@@ -306,21 +283,19 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7023) FIXME: 'getSubCollections' implicitly has return type 'an... Remove this comment to see the full error message
-  getSubCollections(collection) {
-    const collections = [].concat(collection.collections || [])
-
+  getSubCollections(collection: Collection) {
+    const collections = collection.collections
+      ? [...collection.collections]
+      : []
     return collections
       .map((id) => this.getCollectionProps(this.props.collections[id]))
       .filter((collection) => collection != null)
       .sort(this.props.sortOrder)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'collection' implicitly has an 'any' typ... Remove this comment to see the full error message
-  getItems(collection) {
+  getItems(collection: Collection) {
     if (collection.items) {
-      const items = [].concat(collection.items)
-
+      const items = collection.items ? [...collection.items] : []
       return items
         .map((id) => {
           return { ...this.props.items[id] }
@@ -332,8 +307,7 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'collection' implicitly has an 'any' typ... Remove this comment to see the full error message
-  getIsFlattened = (collection) => {
+  getIsFlattened = (collection: Collection) => {
     const { rootId, showRootCollection } = this.props
     return (
       !showRootCollection &&
@@ -342,46 +316,46 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7023) FIXME: 'getCollectionProps' implicitly has return type 'a... Remove this comment to see the full error message
-  getCollectionProps(collection) {
+  getCollectionProps(collection: Collection): CollectionProps {
     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)
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'expanded' implicitly has an 'any' type.
-  getExpandedIndex(expanded, id) {
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'expanded' implicitly has an 'any' type.
+  getExpandedIndex(
+    expanded: (string | number | undefined)[],
+    id?: string | number
+  ) {
     return expanded.findIndex((expanded) => String(expanded) === String(id))
   }
 
   renderRoot() {
-    return this.collections.sort(this.props.sortOrder).map((collection, i) => (
-      <TreeCollection
-        key={i}
-        // @ts-expect-error ts-migrate(2554) FIXME: Expected 3 arguments, but got 2.
-        {...pickProps(omitProps(this.props), TreeCollection.allowedProps)}
-        {...this.getCollectionProps(collection)}
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'selection' does not exist on type 'Reado... Remove this comment to see the full error message
-        selection={this.state.selection}
-        onItemClick={this.handleItemClick}
-        onCollectionClick={this.handleCollectionClick}
-        onKeyDown={this.handleKeyDown}
-        numChildren={this.collections.length}
-        level={1}
-        position={1}
-        renderContent={this.props.renderContent}
-      />
-    ))
+    return this.collections
+      .sort(this.props.sortOrder)
+      .map((collection, i) => (
+        <TreeCollection
+          key={i}
+          {...pickProps(omitProps(this.props), TreeCollection.allowedProps)}
+          {...this.getCollectionProps(collection)}
+          selection={this.state.selection}
+          onItemClick={this.handleItemClick}
+          onCollectionClick={this.handleCollectionClick}
+          onKeyDown={this.handleKeyDown}
+          numChildren={this.collections.length}
+          level={1}
+          position={1}
+          renderContent={this.props.renderContent}
+        />
+      ))
   }
 
   render() {
@@ -392,7 +366,6 @@ class TreeBrowser extends Component<TreeBrowserProps> {
         css={styles?.treeBrowser}
         tabIndex={0}
         role="tree"
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(event: any, node: any) => void' is not assi... Remove this comment to see the full error message
         onKeyDown={this.handleKeyDown}
         ref={(el) => {
           this.ref = el

package/src/TreeBrowser/props.ts

@@ -31,28 +31,88 @@ import type {
   TreeBrowserTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import React, { ReactElement } from 'react'
+import type { TreeBrowserButtonProps } from './TreeButton/props'
 
 type TreeBrowserOwnProps = {
-  collections: any
-  items: any
+  /**
+   * a normalized hash of collections, keyed by id, that contains 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: Record<number | string, Collection>
+  /**
+   * a hash of items, keyed by id, that contain an :id, :name,
+   * optional :descriptor text, and optional :thumbnail url
+   */
+  items: Record<number, CollectionItem>
+  /**
+   * 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?: string | number
-  expanded?: any // TODO: controllable( PropTypes.arrayOf( PropTypes.oneOfType([PropTypes.string, PropTypes.number]) ), 'onCollectionToggle' )
+  /**
+   * an array of expanded collection ids, must be accompanied by an 'onCollectionToggle' prop
+   */
+  expanded?: (string | number | undefined)[] // TODO: controllable( PropTypes.arrayOf( PropTypes.oneOfType([PropTypes.string, PropTypes.number]) ), 'onCollectionToggle' )
+  /**
+   * an array of collection ids to expand by default
+   */
   defaultExpanded?: (string | 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?: 'none' | 'single'
-  size?: 'small' | 'medium' | 'large'
-  variant?: 'folderTree' | 'indent'
-  collectionIcon?: React.ReactNode | ((...args: any[]) => any)
-  collectionIconExpanded?: React.ReactNode | ((...args: any[]) => any)
-  itemIcon?: React.ReactNode | ((...args: any[]) => any)
-  getItemProps?: (...args: any[]) => any
-  getCollectionProps?: (...args: any[]) => any
+  onCollectionToggle?: (collection: CollectionData) => void
+  onItemClick?: (data: CollectionData) => void
+  /**
+   * Whether or not to show the root collection specified in rootId prop or
+   * to begin with its immediate subcollections and items instead
+   */
   showRootCollection?: boolean
-  onCollectionClick?: (...args: any[]) => any
-  onCollectionToggle?: (...args: any[]) => any
-  onItemClick?: (...args: any[]) => any
+  /**
+   * An optional label to assist visually impaired users
+   */
   treeLabel?: string
-  renderContent?: (...args: any[]) => any
+  /**
+   * An optional compare function to specify order of the collections and the items
+   */
   sortOrder?: (obj1: any, obj2: any) => number
+} & TreeBrowserBaseProps
+
+// props shared between TreeBrowser, TreeCollection
+type TreeBrowserBaseProps = {
+  /**
+   * 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?: (props: Record<string, any>) => Record<string, any> // cant use generics here :/
+  /**
+   * 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?: (props: Record<string, any>) => TreeBrowserButtonProps
+  onCollectionClick?: (e: React.MouseEvent, data: CollectionData) => void
+} & TreeBrowserCommonProps
+
+// props shared between TreeBrowser, TreeCollection, TreeButton
+type TreeBrowserCommonProps = {
+  size?: 'small' | 'medium' | 'large'
+  variant?: 'folderTree' | 'indent'
+  collectionIcon?: React.ReactNode | ((props: unknown) => React.ReactNode)
+  collectionIconExpanded?:
+    | React.ReactNode
+    | ((props: unknown) => React.ReactNode)
+  itemIcon?: React.ReactNode | ((props: unknown) => React.ReactNode)
+  renderContent?: (props: TreeBrowserButtonProps) => JSX.Element
 }
 
 type PropKeys = keyof TreeBrowserOwnProps
@@ -66,79 +126,78 @@ type TreeBrowserProps = TreeBrowserOwnProps &
 
 type TreeBrowserStyle = ComponentStyle<'treeBrowser'>
 
-const propTypes: PropValidators<PropKeys> = {
+type CollectionBase = {
+  id: number | string
+  name: string
+  descriptor?: string
   /**
-   * 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.
+   * A function that returns a reference to the underlying HTML container
+   * @param el The DOM HTMLElement
    */
-  collections: PropTypes.object.isRequired,
+  containerRef?: (el: HTMLElement | null) => void
   /**
-   * a hash of items, keyed by id, that contain an :id, :name,
-   * optional :descriptor text, and optional :thumbnail url
+   * children of type TreeNode
    */
-  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]),
+  renderBeforeItems?: ReactElement // TODO: Children.oneOf([TreeNode])
   /**
-   * an array of expanded collection ids, must be accompanied by an 'onCollectionToggle' prop
+   * children of type TreeNode
    */
+  renderAfterItems?: ReactElement // TODO: Children.oneOf([TreeNode])
+}
+
+type Collection = CollectionBase & {
+  items?: number[]
+  collections?: (number | string)[]
+}
+
+type CollectionItem = {
+  id: number | string
+  name: string
+  descriptor?: string
+  thumbnail?: string
+  [key: string]: unknown // allow users to extend it
+}
+
+type CollectionProps = {
+  collections?: CollectionProps[]
+  items?: CollectionItem[]
+  expanded?: boolean
+  isCollectionFlattened?: boolean
+} & CollectionBase
+
+type CollectionData = {
+  id?: number | string
+  expanded?: boolean
+  type: 'child' | 'collection' | 'item'
+}
+
+const propTypes: PropValidators<PropKeys> = {
+  collections: PropTypes.object.isRequired,
+  items: PropTypes.object.isRequired,
+  rootId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   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
 }
 
@@ -165,5 +224,20 @@ const allowedProps: AllowedPropKeys = [
   'sortOrder'
 ]
 
-export type { TreeBrowserProps, TreeBrowserStyle }
+type TreeBrowserState = {
+  selection: string
+  expanded?: (string | number | undefined)[]
+}
+
+export type {
+  TreeBrowserProps,
+  TreeBrowserState,
+  TreeBrowserStyle,
+  CollectionData,
+  Collection,
+  CollectionItem,
+  CollectionProps,
+  TreeBrowserBaseProps,
+  TreeBrowserCommonProps
+}
 export { propTypes, allowedProps }