@instructure/ui-tree-browser 8.12.1-snapshot.7 → 8.13.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
+
+### Features
+
+- add 'sortOrder' property to TreeBrowser component ([e669e54](https://github.com/instructure/instructure-ui/pull/776/commits/e669e5405864b26c6f98b378e11cef6603fcca58))
+
 # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser

package/es/TreeBrowser/TreeBrowserLocator.js

@@ -26,10 +26,10 @@ import { TreeBrowser } from './index'; // TODO: if we make a TreeBrowserItem com
 
 const TreeBrowserItemLocator = locator('[role="treeitem"]');
 export const TreeBrowserLocator = locator(TreeBrowser.selector, {
-  findAllItems: (...args) => {
-    return TreeBrowserItemLocator.findAll(...args);
+  findAllItems: function () {
+    return TreeBrowserItemLocator.findAll(...arguments);
   },
-  findItem: (...args) => {
-    return TreeBrowserItemLocator.find(...args);
+  findItem: function () {
+    return TreeBrowserItemLocator.find(...arguments);
   }
 });

package/es/TreeBrowser/TreeButton/index.js

@@ -42,8 +42,8 @@ id: TreeBrowser.Button
 // 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(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {

package/es/TreeBrowser/TreeNode/index.js

@@ -45,8 +45,8 @@ 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(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {

package/es/TreeBrowser/index.js

@@ -45,16 +45,20 @@ category: components
 
 let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class TreeBrowser extends Component {
   constructor(props) {
+    var _this;
+
     super(props);
+    _this = this;
     this.ref = null;
 
-    this.handleCollectionClick = (e, collection, expand = true) => {
+    this.handleCollectionClick = function (e, collection) {
+      let expand = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
       e.stopPropagation();
-      const onCollectionClick = this.props.onCollectionClick;
-      if (expand) this.expandOrCollapseNode(collection);
+      const onCollectionClick = _this.props.onCollectionClick;
+      if (expand) _this.expandOrCollapseNode(collection);
       onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
 
-      this.handleSelection(collection.id, 'collection');
+      _this.handleSelection(collection.id, 'collection');
     };
 
     this.handleItemClick = (e, item) => {
@@ -259,7 +263,7 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
 
   getSubCollections(collection) {
     const collections = [].concat(collection.collections || []);
-    return collections.map(id => this.getCollectionProps(this.props.collections[id])).filter(collection => collection != null);
+    return collections.map(id => this.getCollectionProps(this.props.collections[id])).filter(collection => collection != null).sort(this.props.sortOrder);
   }
 
   getItems(collection) {
@@ -268,7 +272,7 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       return items.map(id => {
         return { ...this.props.items[id]
         };
-      }).filter(item => item != null);
+      }).filter(item => item != null).sort(this.props.sortOrder);
     } else {
       return [];
     }
@@ -294,7 +298,7 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   renderRoot() {
-    return this.collections.map((collection, i) => jsx(TreeCollection, Object.assign({
+    return this.collections.sort(this.props.sortOrder).map((collection, i) => jsx(TreeCollection, Object.assign({
       key: i
     }, pickProps(omitProps(this.props), TreeCollection.allowedProps), this.getCollectionProps(collection), {
       selection: this.state.selection,
@@ -335,7 +339,10 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   selectionType: 'none',
   onItemClick: function (item) {},
   onCollectionClick: function (id, collection) {},
-  onCollectionToggle: function (collection) {}
+  onCollectionToggle: function (collection) {},
+  sortOrder: function (obj1, obj2) {
+    return 0;
+  }
 }, _class2.Node = TreeNode, _class2.Collection = TreeCollection, _class2.Button = TreeButton, _temp)) || _class) || _class);
 export default TreeBrowser;
 export { TreeBrowser };

package/es/TreeBrowser/props.js

@@ -93,7 +93,12 @@ const propTypes = {
    * An optional label to assist visually impaired users
    */
   treeLabel: PropTypes.string,
-  renderContent: PropTypes.func
+  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'];
+const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder'];
 export { propTypes, allowedProps };

package/lib/TreeBrowser/TreeBrowserLocator.js

@@ -35,11 +35,11 @@ var _index = require("./index");
 // TODO: if we make a TreeBrowserItem component + locator we could use it here.
 const TreeBrowserItemLocator = (0, _locator.locator)('[role="treeitem"]');
 const TreeBrowserLocator = (0, _locator.locator)(_index.TreeBrowser.selector, {
-  findAllItems: (...args) => {
-    return TreeBrowserItemLocator.findAll(...args);
+  findAllItems: function () {
+    return TreeBrowserItemLocator.findAll(...arguments);
   },
-  findItem: (...args) => {
-    return TreeBrowserItemLocator.find(...args);
+  findItem: function () {
+    return TreeBrowserItemLocator.find(...arguments);
   }
 });
 exports.TreeBrowserLocator = TreeBrowserLocator;

package/lib/TreeBrowser/TreeButton/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeButton = exports.default = void 0;
+exports.default = exports.TreeButton = void 0;
 
 var _react = require("react");
 
@@ -33,8 +33,8 @@ id: TreeBrowser.Button
 **/
 // 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(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {

package/lib/TreeBrowser/TreeButton/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/TreeBrowser/TreeCollection/index.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeCollection = exports.default = void 0;
+exports.default = exports.TreeCollection = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/lib/TreeBrowser/TreeCollection/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/TreeBrowser/TreeNode/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeNode = exports.default = void 0;
+exports.default = exports.TreeNode = void 0;
 
 var _react = require("react");
 
@@ -35,8 +35,8 @@ 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(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {

package/lib/TreeBrowser/TreeNode/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/TreeBrowser/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeBrowser = exports.default = void 0;
+exports.default = exports.TreeBrowser = void 0;
 
 var _react = require("react");
 
@@ -44,16 +44,20 @@ category: components
 **/
 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) {
+    var _this;
+
     super(props);
+    _this = this;
     this.ref = null;
 
-    this.handleCollectionClick = (e, collection, expand = true) => {
+    this.handleCollectionClick = function (e, collection) {
+      let expand = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
       e.stopPropagation();
-      const onCollectionClick = this.props.onCollectionClick;
-      if (expand) this.expandOrCollapseNode(collection);
+      const onCollectionClick = _this.props.onCollectionClick;
+      if (expand) _this.expandOrCollapseNode(collection);
       onCollectionClick(collection.id, collection); // TODO: this should pass the event as the first arg
 
-      this.handleSelection(collection.id, 'collection');
+      _this.handleSelection(collection.id, 'collection');
     };
 
     this.handleItemClick = (e, item) => {
@@ -258,7 +262,7 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
 
   getSubCollections(collection) {
     const collections = [].concat(collection.collections || []);
-    return collections.map(id => this.getCollectionProps(this.props.collections[id])).filter(collection => collection != null);
+    return collections.map(id => this.getCollectionProps(this.props.collections[id])).filter(collection => collection != null).sort(this.props.sortOrder);
   }
 
   getItems(collection) {
@@ -267,7 +271,7 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       return items.map(id => {
         return { ...this.props.items[id]
         };
-      }).filter(item => item != null);
+      }).filter(item => item != null).sort(this.props.sortOrder);
     } else {
       return [];
     }
@@ -293,7 +297,7 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   renderRoot() {
-    return this.collections.map((collection, i) => (0, _emotion.jsx)(_TreeCollection.TreeCollection, Object.assign({
+    return this.collections.sort(this.props.sortOrder).map((collection, i) => (0, _emotion.jsx)(_TreeCollection.TreeCollection, Object.assign({
       key: i
     }, (0, _pickProps.pickProps)((0, _omitProps.omitProps)(this.props), _TreeCollection.TreeCollection.allowedProps), this.getCollectionProps(collection), {
       selection: this.state.selection,
@@ -334,7 +338,10 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   selectionType: 'none',
   onItemClick: function (item) {},
   onCollectionClick: function (id, collection) {},
-  onCollectionToggle: function (collection) {}
+  onCollectionToggle: function (collection) {},
+  sortOrder: function (obj1, obj2) {
+    return 0;
+  }
 }, _class2.Node = _TreeNode.TreeNode, _class2.Collection = _TreeCollection.TreeCollection, _class2.Button = _TreeButton.TreeButton, _temp)) || _class) || _class);
 exports.TreeBrowser = TreeBrowser;
 var _default = TreeBrowser;

package/lib/TreeBrowser/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -104,8 +104,13 @@ const propTypes = {
    * An optional label to assist visually impaired users
    */
   treeLabel: _propTypes.default.string,
-  renderContent: _propTypes.default.func
+  renderContent: _propTypes.default.func,
+
+  /**
+   * An optional compare function to specify order of the collections and the items
+   */
+  sortOrder: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent'];
+const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder'];
 exports.allowedProps = allowedProps;

package/package.json

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

package/src/TreeBrowser/README.md

@@ -381,6 +381,80 @@ class Example extends React.Component {
 render(<Example/>)
 ```
 
+### Change the order of appearance of items and collection
+
+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.
+
+---
+
+**NOTE**
+
+This works with all collections and items of the TreeBrowser.
+
+---
+
+```js
+---
+example: true
+render: false
+---
+class Example extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      size: 'medium',
+      sorted: false
+    }
+  }
+  toogleSort = (event)=>{ this.setState({sorted:!this.state.sorted}) }
+  render () {
+    return (
+      <>
+        <View display="block" margin="none none medium">
+         <FormFieldGroup description="Turn of/off sorting">
+              <Checkbox
+                checked={this.state.sorted}
+                label="Sort"
+                onChange={this.toogleSort}
+              />
+               </FormFieldGroup>
+        </View>
+
+        <TreeBrowser
+          size={this.state.size}
+          collections={{
+            1: {
+              id: 1,
+              name: "Assignments",
+              collections: [3,2],
+              items: [3],
+              descriptor: "Class Assignments"
+            },
+            2: { id: 2, name: "English Assignments", collections: [4], items: [] },
+            3: { id: 3, name: "Math Assignments", collections: [5], items: [2,1] },
+            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}
+         sortOrder={this.state.sorted? (a,b)=>{return(a.name).localeCompare(b.name)}: (a,b)=>{return 0} }
+        />
+      </>
+    )
+  }
+}
+
+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/index.tsx

@@ -73,7 +73,11 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     // @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) {}
+    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) {
+      return 0
+    }
   }
 
   static Node = TreeNode
@@ -309,6 +313,7 @@ class TreeBrowser extends Component<TreeBrowserProps> {
     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
@@ -321,6 +326,7 @@ class TreeBrowser extends Component<TreeBrowserProps> {
           return { ...this.props.items[id] }
         })
         .filter((item) => item != null)
+        .sort(this.props.sortOrder)
     } else {
       return []
     }
@@ -359,7 +365,7 @@ class TreeBrowser extends Component<TreeBrowserProps> {
   }
 
   renderRoot() {
-    return this.collections.map((collection, i) => (
+    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.

package/src/TreeBrowser/props.ts

@@ -52,6 +52,7 @@ type TreeBrowserOwnProps = {
   onItemClick?: (...args: any[]) => any
   treeLabel?: string
   renderContent?: (...args: any[]) => any
+  sortOrder?: (obj1: any, obj2: any) => number
 }
 
 type PropKeys = keyof TreeBrowserOwnProps
@@ -134,7 +135,11 @@ const propTypes: PropValidators<PropKeys> = {
    * An optional label to assist visually impaired users
    */
   treeLabel: PropTypes.string,
-  renderContent: PropTypes.func
+  renderContent: PropTypes.func,
+  /**
+   * An optional compare function to specify order of the collections and the items
+   */
+  sortOrder: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -156,7 +161,8 @@ const allowedProps: AllowedPropKeys = [
   'onCollectionToggle',
   'onItemClick',
   'treeLabel',
-  'renderContent'
+  'renderContent',
+  'sortOrder'
 ]
 
 export type { TreeBrowserProps, TreeBrowserStyle }

package/types/TreeBrowser/index.d.ts

@@ -33,6 +33,7 @@ declare class TreeBrowser extends Component<TreeBrowserProps> {
         onItemClick?: ((...args: any[]) => any) | undefined;
         treeLabel?: string | undefined;
         renderContent?: ((...args: any[]) => any) | undefined;
+        sortOrder?: ((obj1: any, obj2: any) => number) | undefined;
     })[];
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
         collections: any;
@@ -54,6 +55,7 @@ declare class TreeBrowser extends Component<TreeBrowserProps> {
         onItemClick?: ((...args: any[]) => any) | undefined;
         treeLabel?: string | undefined;
         renderContent?: ((...args: any[]) => any) | undefined;
+        sortOrder?: ((obj1: any, obj2: any) => number) | undefined;
     }>;
     static defaultProps: {
         size: string;
@@ -69,6 +71,7 @@ declare class TreeBrowser extends Component<TreeBrowserProps> {
         onItemClick: (item: any) => void;
         onCollectionClick: (id: any, collection: any) => void;
         onCollectionToggle: (collection: any) => void;
+        sortOrder: (obj1: any, obj2: any) => number;
     };
     static Node: typeof TreeNode;
     static Collection: typeof TreeCollection;

package/types/TreeBrowser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TreeBrowser/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAIxE,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG/C;;;;GAIG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAE3C,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;MAmBlB;IAED,MAAM,CAAC,IAAI,kBAAW;IACtB,MAAM,CAAC,UAAU,wBAAiB;IAClC,MAAM,CAAC,MAAM,oBAAa;IAC1B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;gBAGd,KAAK,KAAA;IAUjB,iBAAiB;IAGjB,kBAAkB;IAGlB,IAAI,KAAK,mBAMR;IAGD,qBAAqB,sDAQpB;IAGD,eAAe,8BAMd;IAGD,aAAa,kCA2BZ;IAED,IAAI,WAAW,UAUd;IAED,IAAI,QAAQ,QAEX;IAGD,WAAW,CAAC,KAAK,KAAA,EAAE,KAAK,KAAA;IAOxB,oBAAoB,CAAC,UAAU,KAAA;IAsB/B,eAAe,CAAC,EAAE,KAAA,EAAE,IAAI,KAAA;IAcxB,iBAAiB;IAKjB,SAAS,CAAC,KAAK,KAAA;IAoBf,SAAS,CAAC,OAAO,KAAA;IAUjB,sBAAsB,CAAC,OAAO,KAAA,EAAE,IAAI,KAAA;IAgBpC,gBAAgB,CAAC,IAAI,KAAA;IAarB,qBAAqB,CAAC,IAAI,KAAA;IAS1B,gBAAgB,CAAC,KAAK,KAAA,EAAE,IAAI,KAAA;IAc5B,iBAAiB,CAAC,UAAU,KAAA;IAS5B,QAAQ,CAAC,UAAU,KAAA;IAenB,cAAc,+BAOb;IAGD,kBAAkB,CAAC,UAAU,KAAA;IAgB7B,gBAAgB,CAAC,QAAQ,KAAA,EAAE,EAAE,KAAA;IAK7B,UAAU;IAoBV,MAAM;CAmBP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TreeBrowser/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAIxE,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG/C;;;;GAIG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAE3C,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;MAuBlB;IAED,MAAM,CAAC,IAAI,kBAAW;IACtB,MAAM,CAAC,UAAU,wBAAiB;IAClC,MAAM,CAAC,MAAM,oBAAa;IAC1B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;gBAGd,KAAK,KAAA;IAUjB,iBAAiB;IAGjB,kBAAkB;IAGlB,IAAI,KAAK,mBAMR;IAGD,qBAAqB,sDAQpB;IAGD,eAAe,8BAMd;IAGD,aAAa,kCA2BZ;IAED,IAAI,WAAW,UAUd;IAED,IAAI,QAAQ,QAEX;IAGD,WAAW,CAAC,KAAK,KAAA,EAAE,KAAK,KAAA;IAOxB,oBAAoB,CAAC,UAAU,KAAA;IAsB/B,eAAe,CAAC,EAAE,KAAA,EAAE,IAAI,KAAA;IAcxB,iBAAiB;IAKjB,SAAS,CAAC,KAAK,KAAA;IAoBf,SAAS,CAAC,OAAO,KAAA;IAUjB,sBAAsB,CAAC,OAAO,KAAA,EAAE,IAAI,KAAA;IAgBpC,gBAAgB,CAAC,IAAI,KAAA;IAarB,qBAAqB,CAAC,IAAI,KAAA;IAS1B,gBAAgB,CAAC,KAAK,KAAA,EAAE,IAAI,KAAA;IAc5B,iBAAiB,CAAC,UAAU,KAAA;IAU5B,QAAQ,CAAC,UAAU,KAAA;IAgBnB,cAAc,+BAOb;IAGD,kBAAkB,CAAC,UAAU,KAAA;IAgB7B,gBAAgB,CAAC,QAAQ,KAAA,EAAE,EAAE,KAAA;IAK7B,UAAU;IAoBV,MAAM;CAmBP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/types/TreeBrowser/props.d.ts

@@ -21,6 +21,7 @@ declare type TreeBrowserOwnProps = {
     onItemClick?: (...args: any[]) => any;
     treeLabel?: string;
     renderContent?: (...args: any[]) => any;
+    sortOrder?: (obj1: any, obj2: any) => number;
 };
 declare type PropKeys = keyof TreeBrowserOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;

package/types/TreeBrowser/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/TreeBrowser/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EACjB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,GAAG,CAAA;IAChB,KAAK,EAAE,GAAG,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACrC,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACjC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IACjC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC5D,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACtD,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC5C,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC3C,kBAAkB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC5C,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;CACxC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAIhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAA;AAEpD,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAsEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAoBnB,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/TreeBrowser/props.ts"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EACjB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,GAAG,CAAA;IAChB,KAAK,EAAE,GAAG,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,eAAe,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACrC,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACjC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IACjC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IAC5D,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,CAAA;IACtD,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC5C,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC3C,kBAAkB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAC5C,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,MAAM,CAAA;CAC7C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAIhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAA;AAEpD,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA0EvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAqBnB,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/LICENSE.md

@@ -1,27 +0,0 @@
----
-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.