@instructure/ui-tree-browser 8.24.2 → 8.24.3-snapshot.6

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/TreeBrowser/TreeCollection/index.js

@@ -133,27 +133,56 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     return this.collectionsCount + this.itemsCount + (this.props.renderBeforeItems ? 1 : 0) + (this.props.renderAfterItems ? 1 : 0);
   }
 
-  renderChildren() {
+  sortChildren() {
     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;
+          compareFunc = _this$props6.compareFunc;
+    if (!compareFunc) return [];
+    const collections_ = collections ? collections.map(collection => {
+      return { ...collection,
+        type: 'collection'
+      };
+    }) : [];
+    const items_ = items ? items.map(item => {
+      return { ...item,
+        type: 'item'
+      };
+    }) : [];
+    const renderQueue = collections_.concat(items_);
+    renderQueue.sort(compareFunc);
+    return renderQueue;
+  }
+
+  renderChildren() {
+    const _this$props7 = this.props,
+          collections = _this$props7.collections,
+          items = _this$props7.items,
+          id = _this$props7.id,
+          renderBeforeItems = _this$props7.renderBeforeItems,
+          renderAfterItems = _this$props7.renderAfterItems,
+          compareFunc = _this$props7.compareFunc;
     let position = 1;
-    return jsx(React.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), collections.map(collection => {
+    const sortedChildren = this.sortChildren();
+    return jsx(React.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), !compareFunc && collections.map(collection => {
       return this.renderCollectionNode(collection, position++);
-    }), items.map(item => {
+    }), !compareFunc && items.map(item => {
       return this.renderItemNode(item, position++);
+    }), compareFunc && sortedChildren.map(child => {
+      if (child.type === 'collection') {
+        return this.renderCollectionNode(child, position++);
+      } else {
+        return this.renderItemNode(child, position++);
+      }
     }), renderAfterItems && this.renderCollectionChildren(id, renderAfterItems, position++, 'after'));
   }
 
   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$props8 = this.props,
+          selection = _this$props8.selection,
+          onKeyDown = _this$props8.onKeyDown,
+          getItemProps = _this$props8.getItemProps,
+          styles = _this$props8.styles;
     const key = `${collectionId}_${keyword}`;
     const ariaSelected = {};
 
@@ -218,17 +247,18 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       renderBeforeItems: collection.renderBeforeItems,
       renderAfterItems: collection.renderAfterItems,
       isCollectionFlattened: false // only the root needs to be flattened
-
+      ,
+      compareFunc: collection.compareFunc
     }));
   }
 
   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$props9 = this.props,
+          selection = _this$props9.selection,
+          onItemClick = _this$props9.onItemClick,
+          onKeyDown = _this$props9.onKeyDown,
+          getItemProps = _this$props9.getItemProps,
+          styles = _this$props9.styles;
     const ariaSelected = {};
 
     if (selection) {
@@ -278,17 +308,17 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
   }
 
   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$props10 = this.props,
+          id = _this$props10.id,
+          name = _this$props10.name,
+          expanded = _this$props10.expanded,
+          collectionIcon = _this$props10.collectionIcon,
+          collectionIconExpanded = _this$props10.collectionIconExpanded,
+          isCollectionFlattened = _this$props10.isCollectionFlattened,
+          getCollectionProps = _this$props10.getCollectionProps,
+          level = _this$props10.level,
+          position = _this$props10.position,
+          styles = _this$props10.styles;
     const collectionProps = getCollectionProps({ ...this.getCommonButtonProps(),
       expanded: expanded,
       collectionIcon: collectionIcon,

package/es/TreeBrowser/TreeCollection/props.js

@@ -49,7 +49,8 @@ const propTypes = {
   renderAfterItems: Children.oneOf([TreeNode]),
   containerRef: PropTypes.func,
   isCollectionFlattened: PropTypes.bool,
-  renderContent: PropTypes.func
+  renderContent: PropTypes.func,
+  compareFunc: PropTypes.func
 };
 const allowedProps = ['id', 'name', 'descriptor', 'items', 'collections', 'expanded', 'selection', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'onItemClick', 'onCollectionClick', 'onKeyDown', 'numChildren', 'level', 'position', 'renderBeforeItems', 'renderAfterItems', 'containerRef', 'isCollectionFlattened', 'renderContent'];
 export { propTypes, allowedProps };

package/es/TreeBrowser/index.js

@@ -296,7 +296,8 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       renderBeforeItems: collection.renderBeforeItems,
       renderAfterItems: collection.renderAfterItems,
       expanded: this.getExpandedIndex(this.expanded, collection.id) >= 0,
-      isCollectionFlattened: this.getIsFlattened(collection)
+      isCollectionFlattened: this.getIsFlattened(collection),
+      compareFunc: collection.compareFunc
     };
   }
 

package/lib/TreeBrowser/TreeCollection/index.js

@@ -123,27 +123,56 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     return this.collectionsCount + this.itemsCount + (this.props.renderBeforeItems ? 1 : 0) + (this.props.renderAfterItems ? 1 : 0);
   }
 
-  renderChildren() {
+  sortChildren() {
     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;
+          compareFunc = _this$props6.compareFunc;
+    if (!compareFunc) return [];
+    const collections_ = collections ? collections.map(collection => {
+      return { ...collection,
+        type: 'collection'
+      };
+    }) : [];
+    const items_ = items ? items.map(item => {
+      return { ...item,
+        type: 'item'
+      };
+    }) : [];
+    const renderQueue = collections_.concat(items_);
+    renderQueue.sort(compareFunc);
+    return renderQueue;
+  }
+
+  renderChildren() {
+    const _this$props7 = this.props,
+          collections = _this$props7.collections,
+          items = _this$props7.items,
+          id = _this$props7.id,
+          renderBeforeItems = _this$props7.renderBeforeItems,
+          renderAfterItems = _this$props7.renderAfterItems,
+          compareFunc = _this$props7.compareFunc;
     let position = 1;
-    return (0, _emotion.jsx)(_react.default.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), collections.map(collection => {
+    const sortedChildren = this.sortChildren();
+    return (0, _emotion.jsx)(_react.default.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), !compareFunc && collections.map(collection => {
       return this.renderCollectionNode(collection, position++);
-    }), items.map(item => {
+    }), !compareFunc && items.map(item => {
       return this.renderItemNode(item, position++);
+    }), compareFunc && sortedChildren.map(child => {
+      if (child.type === 'collection') {
+        return this.renderCollectionNode(child, position++);
+      } else {
+        return this.renderItemNode(child, position++);
+      }
     }), renderAfterItems && this.renderCollectionChildren(id, renderAfterItems, position++, 'after'));
   }
 
   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$props8 = this.props,
+          selection = _this$props8.selection,
+          onKeyDown = _this$props8.onKeyDown,
+          getItemProps = _this$props8.getItemProps,
+          styles = _this$props8.styles;
     const key = `${collectionId}_${keyword}`;
     const ariaSelected = {};
 
@@ -208,17 +237,18 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       renderBeforeItems: collection.renderBeforeItems,
       renderAfterItems: collection.renderAfterItems,
       isCollectionFlattened: false // only the root needs to be flattened
-
+      ,
+      compareFunc: collection.compareFunc
     }));
   }
 
   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$props9 = this.props,
+          selection = _this$props9.selection,
+          onItemClick = _this$props9.onItemClick,
+          onKeyDown = _this$props9.onKeyDown,
+          getItemProps = _this$props9.getItemProps,
+          styles = _this$props9.styles;
     const ariaSelected = {};
 
     if (selection) {
@@ -268,17 +298,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$props10 = this.props,
+          id = _this$props10.id,
+          name = _this$props10.name,
+          expanded = _this$props10.expanded,
+          collectionIcon = _this$props10.collectionIcon,
+          collectionIconExpanded = _this$props10.collectionIconExpanded,
+          isCollectionFlattened = _this$props10.isCollectionFlattened,
+          getCollectionProps = _this$props10.getCollectionProps,
+          level = _this$props10.level,
+          position = _this$props10.position,
+          styles = _this$props10.styles;
     const collectionProps = getCollectionProps({ ...this.getCommonButtonProps(),
       expanded: expanded,
       collectionIcon: collectionIcon,

package/lib/TreeBrowser/TreeCollection/props.js

@@ -61,7 +61,8 @@ const propTypes = {
   renderAfterItems: _Children.Children.oneOf([_TreeNode.TreeNode]),
   containerRef: _propTypes.default.func,
   isCollectionFlattened: _propTypes.default.bool,
-  renderContent: _propTypes.default.func
+  renderContent: _propTypes.default.func,
+  compareFunc: _propTypes.default.func
 };
 exports.propTypes = propTypes;
 const allowedProps = ['id', 'name', 'descriptor', 'items', 'collections', 'expanded', 'selection', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'onItemClick', 'onCollectionClick', 'onKeyDown', 'numChildren', 'level', 'position', 'renderBeforeItems', 'renderAfterItems', 'containerRef', 'isCollectionFlattened', 'renderContent'];

package/lib/TreeBrowser/index.js

@@ -295,7 +295,8 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       renderBeforeItems: collection.renderBeforeItems,
       renderAfterItems: collection.renderAfterItems,
       expanded: this.getExpandedIndex(this.expanded, collection.id) >= 0,
-      isCollectionFlattened: this.getIsFlattened(collection)
+      isCollectionFlattened: this.getIsFlattened(collection),
+      compareFunc: collection.compareFunc
     };
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "8.24.2",
+  "version": "8.24.3-snapshot.6+53afffb68",
   "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.24.2",
-    "@instructure/ui-color-utils": "8.24.2",
-    "@instructure/ui-test-locator": "8.24.2",
-    "@instructure/ui-test-utils": "8.24.2",
-    "@instructure/ui-themes": "8.24.2"
+    "@instructure/ui-babel-preset": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-color-utils": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-test-locator": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-test-utils": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-themes": "8.24.3-snapshot.6+53afffb68"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.24.2",
-    "@instructure/shared-types": "8.24.2",
-    "@instructure/ui-icons": "8.24.2",
-    "@instructure/ui-img": "8.24.2",
-    "@instructure/ui-prop-types": "8.24.2",
-    "@instructure/ui-react-utils": "8.24.2",
-    "@instructure/ui-testable": "8.24.2",
-    "@instructure/ui-utils": "8.24.2",
+    "@instructure/emotion": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/shared-types": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-icons": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-img": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-prop-types": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-react-utils": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-testable": "8.24.3-snapshot.6+53afffb68",
+    "@instructure/ui-utils": "8.24.3-snapshot.6+53afffb68",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -48,5 +48,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "53afffb68cdee592b6d98380f2b7559659c2caee"
 }

package/src/TreeBrowser/README.md

@@ -381,7 +381,7 @@ class Example extends React.Component {
 render(<Example/>)
 ```
 
-### Change the order of appearance of items and collection
+### Change the order of appearance of items and collections
 
 By default, the order of collections and items depend on the order of `collections` and `items` array. We can override it by providing a `sortOrder` comparison function.
 
@@ -455,6 +455,67 @@ render(<Example/>)
 
 ```
 
+There is another way to sort the children of one collection. By adding the `compareFunc` as the comparison function to the collection's properties. This will be effective only within the collection's scope. For more convenience, we support a prop called `type` to specify whether the collection's children is either an item or a subcollection (this is only make sense in `compareFunc`)
+
+```js
+---
+example: true
+render: false
+---
+class Example extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      size: 'medium'
+    }
+  }
+  render () {
+    return (
+        <TreeBrowser
+          size={this.state.size}
+          collections={{
+            1: {
+              id: 1,
+              name: "Assignments",
+              collections: [3,2],
+              items: [3],
+              descriptor: "Class Assignments",
+              // Sort the direct children of "Assignment" by their name in alphabetical order
+              compareFunc: (a,b)=>{return a.name.localeCompare(b.name)}
+            },
+            2: { id: 2, name: "English Assignments", collections: [4], items: [] },
+            3: { id: 3, name: "Math Assignments", collections: [5], items: [2,1],
+            //  The items appear before subcollections
+            compareFunc: (a,b)=>{
+              if(a.type === "item" && b.type === "collection"){
+                return -1
+              }
+              if(a.type === "collection" && b.type === "item"){
+                return 1
+              }
+              return 0
+            }},
+            4: { id: 4, name: "Reading Assignments", collections: [], items: [4] },
+            5: { id: 5, name: "Advanced Math Assignments", items: [5]}
+          }}
+          items={{
+            1: { id: 1, name: "Addition Worksheet" },
+            2: { id: 2, name: "Subtraction Worksheet" },
+            3: { id: 3, name: "General Questions" },
+            4: { id: 4, name: "Vogon Poetry" },
+            5: { id: 5, name: "Bistromath", descriptor: "Explain the Bistromathic Drive" }
+          }}
+          defaultExpanded={[1, 3]}
+          rootId={1}
+        />
+    )
+  }
+}
+
+render(<Example/>)
+
+```
+
 ### showRootCollection
 
 The `showRootCollection` prop sets whether the root collection (specified in `rootId` prop) is displayed or to begin with its immediate sub-collections and items instead. It defaults to `true`.

package/src/TreeBrowser/TreeCollection/index.tsx

@@ -36,6 +36,7 @@ import { TreeButton } from '../TreeButton'
 import generateStyles from './styles'
 import generateComponentTheme from './theme'
 import type { TreeBrowserCollectionProps, TreeCollectionState } from './props'
+import type { CompareObject } from '../props'
 import { allowedProps, propTypes } from './props'
 import { CollectionItem, CollectionProps, CollectionData } from '../props'
 
@@ -142,12 +143,35 @@ class TreeCollection extends Component<
       (this.props.renderAfterItems ? 1 : 0)
     )
   }
-
+  sortChildren() {
+    const { collections, items, compareFunc } = this.props
+    if (!compareFunc) return []
+    const collections_: CompareObject[] = collections
+      ? collections.map((collection) => {
+          return { ...collection, type: 'collection' }
+        })
+      : []
+    const items_: CompareObject[] = items
+      ? items.map((item) => {
+          return { ...item, type: 'item' }
+        })
+      : []
+    const renderQueue = collections_.concat(items_)
+    renderQueue.sort(compareFunc)
+    return renderQueue
+  }
   renderChildren() {
-    const { collections, items, id, renderBeforeItems, renderAfterItems } =
-      this.props
+    const {
+      collections,
+      items,
+      id,
+      renderBeforeItems,
+      renderAfterItems,
+      compareFunc
+    } = this.props
 
     let position = 1
+    const sortedChildren = this.sortChildren()
     return (
       <>
         {renderBeforeItems &&
@@ -157,12 +181,25 @@ class TreeCollection extends Component<
             position++,
             'before'
           )}
-        {collections!.map((collection) => {
-          return this.renderCollectionNode(collection, position++)
-        })}
-        {items!.map((item) => {
-          return this.renderItemNode(item, position++)
-        })}
+        {!compareFunc &&
+          collections!.map((collection) => {
+            return this.renderCollectionNode(collection, position++)
+          })}
+        {!compareFunc &&
+          items!.map((item) => {
+            return this.renderItemNode(item, position++)
+          })}
+        {compareFunc &&
+          sortedChildren.map((child) => {
+            if (child.type === 'collection') {
+              return this.renderCollectionNode(
+                child as CollectionProps,
+                position++
+              )
+            } else {
+              return this.renderItemNode(child as CollectionItem, position++)
+            }
+          })}
         {renderAfterItems &&
           this.renderCollectionChildren(
             id,
@@ -249,6 +286,7 @@ class TreeCollection extends Component<
         renderBeforeItems={collection.renderBeforeItems}
         renderAfterItems={collection.renderAfterItems}
         isCollectionFlattened={false} // only the root needs to be flattened
+        compareFunc={collection.compareFunc}
       />
     )
   }

package/src/TreeBrowser/TreeCollection/props.ts

@@ -84,7 +84,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderAfterItems: Children.oneOf([TreeNode]),
   containerRef: PropTypes.func,
   isCollectionFlattened: PropTypes.bool,
-  renderContent: PropTypes.func
+  renderContent: PropTypes.func,
+  compareFunc: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/TreeBrowser/index.tsx

@@ -327,7 +327,8 @@ class TreeBrowser extends Component<TreeBrowserProps, TreeBrowserState> {
       renderBeforeItems: collection.renderBeforeItems,
       renderAfterItems: collection.renderAfterItems,
       expanded: this.getExpandedIndex(this.expanded, collection.id) >= 0,
-      isCollectionFlattened: this.getIsFlattened(collection)
+      isCollectionFlattened: this.getIsFlattened(collection),
+      compareFunc: collection.compareFunc
     }
   }
 

package/src/TreeBrowser/props.ts

@@ -148,6 +148,7 @@ type CollectionBase = {
 type Collection = CollectionBase & {
   items?: number[]
   collections?: (number | string)[]
+  compareFunc?: (a: CompareObject, b: CompareObject) => number
 }
 
 type CollectionItem = {
@@ -163,8 +164,14 @@ type CollectionProps = {
   items?: CollectionItem[]
   expanded?: boolean
   isCollectionFlattened?: boolean
+  compareFunc?: (a: CompareObject, b: CompareObject) => number
 } & CollectionBase
 
+type CompareCollection = CollectionProps & { type: 'collection' }
+type CompareItem = CollectionItem & { type: 'item' }
+// this is a sum type, so CompareObject is one of CompareCollection OR CompareItem
+type CompareObject = CompareItem | CompareCollection
+
 type CollectionData = {
   id?: number | string
   expanded?: boolean
@@ -236,6 +243,9 @@ export type {
   CollectionData,
   Collection,
   CollectionItem,
+  CompareCollection,
+  CompareItem,
+  CompareObject,
   CollectionProps,
   TreeBrowserBaseProps,
   TreeBrowserCommonProps