@instructure/ui-tree-browser 11.6.0 → 11.6.1-snapshot-129

package/es/{index.js → TreeBrowser/v2/TreeNode/props.js}

@@ -21,7 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { TreeBrowser } from "./TreeBrowser/index.js";
-export { TreeButton } from "./TreeBrowser/TreeButton/index.js";
-export { TreeCollection } from "./TreeBrowser/TreeCollection/index.js";
-export { TreeNode } from "./TreeBrowser/TreeNode/index.js";
+
+const allowedProps = ['id', 'size', 'variant', 'selected', 'focused', 'itemIcon', 'thumbnail', 'level', 'children', 'containerRef', 'onKeyDown', 'onClick', 'hoverable'];
+export { allowedProps };

package/es/TreeBrowser/v2/index.js

@@ -0,0 +1,347 @@
+var _dec, _class, _TreeBrowser;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import { Component } from 'react';
+import keycode from 'keycode';
+import { FolderClosedInstUIIcon, FileTextInstUIIcon } from '@instructure/ui-icons';
+import { omitProps, pickProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import { TreeCollection } from "./TreeCollection/index.js";
+import { TreeButton } from "./TreeButton/index.js";
+import { TreeNode } from "./TreeNode/index.js";
+import generateStyles from "./styles.js";
+import { allowedProps } from "./props.js";
+import TreeBrowserContext from "./TreeBrowserContext.js";
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+let TreeBrowser = (_dec = withStyle(generateStyles), _dec(_class = (_TreeBrowser = class TreeBrowser extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.handleCollectionClick = (e, collection, expand = true) => {
+      e.stopPropagation();
+      const onCollectionClick = this.props.onCollectionClick;
+      if (expand) this.expandOrCollapseNode(collection);
+      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();
+      (_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) => {
+      switch (event.keyCode) {
+        case keycode.codes.down:
+        case keycode.codes.j:
+          event.stopPropagation();
+          this.moveFocus(1);
+          break;
+        case keycode.codes.up:
+        case keycode.codes.k:
+          event.stopPropagation();
+          this.moveFocus(-1);
+          break;
+        case keycode.codes.home:
+        case keycode.codes.end:
+          event.stopPropagation();
+          this.homeOrEnd(event.keyCode);
+          break;
+        case keycode.codes.left:
+        case keycode.codes.right:
+          event.stopPropagation();
+          this.handleLeftOrRightArrow(event.keyCode, node);
+          break;
+        case keycode.codes.enter:
+        case keycode.codes.space:
+          event.stopPropagation();
+          this.handleActivation(event, node);
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+    };
+    this.clearSelection = () => {
+      const onSelectionChange = this.props.onSelectionChange;
+
+      // Call the callback if provided (for controlled selection)
+      if (onSelectionChange) {
+        onSelectionChange('', 'item', void 0);
+      }
+
+      // Update internal state only if uncontrolled
+      if (typeof this.props.selection === 'undefined') {
+        this.setState({
+          selection: ''
+        });
+      }
+    };
+    this.getIsFlattened = collection => {
+      const _this$props2 = this.props,
+        rootId = _this$props2.rootId,
+        showRootCollection = _this$props2.showRootCollection;
+      return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
+    };
+    const initialState = {
+      selection: ''
+    };
+
+    // Handle expanded state (controlled vs uncontrolled)
+    if (typeof this.props.expanded === 'undefined') {
+      initialState.expanded = this.props.defaultExpanded;
+    }
+
+    // Handle selection state (controlled vs uncontrolled)
+    if (typeof this.props.selection === 'undefined') {
+      initialState.selection = this.props.defaultSelection || '';
+    }
+    this.state = initialState;
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props3;
+    (_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$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+  }
+  get _root() {
+    return this.ref;
+  }
+  get collections() {
+    const _this$props5 = this.props,
+      collections = _this$props5.collections,
+      rootId = _this$props5.rootId;
+    if (typeof rootId !== 'undefined') {
+      return [collections[rootId]];
+    } else {
+      return Object.keys(collections).map(id => collections[id]).filter(collection => collection != null);
+    }
+  }
+  get expanded() {
+    return this.getExpanded(this.state, this.props);
+  }
+  getExpanded(state, props) {
+    return typeof props.expanded === 'undefined' ? state.expanded : props.expanded;
+  }
+  get selection() {
+    return this.getSelection(this.state, this.props);
+  }
+  getSelection(state, props) {
+    return typeof props.selection === 'undefined' ? state.selection : props.selection;
+  }
+  expandOrCollapseNode(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 = [...this.getExpanded(state, props)];
+        const expandedIndex = this.getExpandedIndex(expanded, collection.id);
+        if (collection.expanded && expandedIndex < 0) {
+          expanded.push(collection.id);
+        } else if (expandedIndex >= 0) {
+          expanded.splice(expandedIndex, 1);
+        }
+        return {
+          expanded
+        };
+      });
+    }
+  }
+  handleSelection(id, type) {
+    const _this$props7 = this.props,
+      selectionType = _this$props7.selectionType,
+      onSelectionChange = _this$props7.onSelectionChange;
+    if (selectionType !== 'single') return;
+    const selection = `${type}_${id}`;
+
+    // Call the callback if provided (for controlled selection)
+    if (onSelectionChange) {
+      onSelectionChange(selection, type, id);
+    }
+
+    // Update internal state only if uncontrolled
+    if (typeof this.props.selection === 'undefined') {
+      this.setState(state => {
+        if (state.selection !== selection) {
+          return {
+            selection
+          };
+        } else {
+          return state;
+        }
+      });
+    }
+  }
+  getNavigableNodes() {
+    return Array.from(this.ref.querySelectorAll('[role="treeitem"]'));
+  }
+  moveFocus(delta) {
+    const nodes = this.getNavigableNodes();
+    const closest = window.document.activeElement.closest('[role="treeitem"]');
+    const active = nodes.indexOf(closest);
+    let next = active + delta;
+    if (next < 0) {
+      next = 0;
+    } else if (next >= nodes.length) {
+      next = nodes.length - 1;
+    }
+    nodes.forEach(n => {
+      n.setAttribute('tabindex', '-1');
+    });
+    nodes[next].setAttribute('tabindex', '0');
+    nodes[next].focus();
+  }
+  homeOrEnd(keyCode) {
+    const length = this.getNavigableNodes().length;
+    if (keyCode === keycode.codes.home) {
+      this.moveFocus(1 - length);
+    } else {
+      this.moveFocus(length - 1);
+    }
+  }
+  handleLeftOrRightArrow(keyCode, node) {
+    const ltr = !(this.ref.parentElement.dir === 'rtl' || document.dir === 'rtl');
+    if (ltr && keyCode === keycode.codes.left || !ltr && keyCode == keycode.codes.right) {
+      this.handleCloseOrPrevious(node);
+    } else {
+      this.handleOpenOrNext(node);
+    }
+  }
+  handleOpenOrNext(node) {
+    if (node && !this.expanded.includes(node.id) && node.type === 'collection') {
+      this.expandOrCollapseNode(node);
+    } else {
+      this.moveFocus(1);
+    }
+  }
+  handleCloseOrPrevious(node) {
+    if (node && this.expanded.includes(node.id) && node.type === 'collection') {
+      this.expandOrCollapseNode(node);
+    } else {
+      this.moveFocus(-1);
+    }
+  }
+  handleActivation(event, node) {
+    if (node == null) return;
+    if (node.type === 'collection') {
+      this.handleCollectionClick(event, node, this.props.selectionType === 'none');
+    } else {
+      this.handleItemClick(event, node);
+    }
+  }
+  getSubCollections(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);
+  }
+  getItems(collection) {
+    if (collection.items) {
+      const items = collection.items ? [...collection.items] : [];
+      return items.map(id => {
+        return {
+          ...this.props.items[id]
+        };
+      }).filter(item => item != null).sort(this.props.sortOrder);
+    } else {
+      return [];
+    }
+  }
+  getCollectionProps(collection) {
+    return {
+      id: collection.id,
+      name: collection.name,
+      collections: this.getSubCollections(collection),
+      items: this.getItems(collection),
+      descriptor: collection.descriptor,
+      containerRef: collection.containerRef,
+      renderBeforeItems: collection.renderBeforeItems,
+      renderAfterItems: collection.renderAfterItems,
+      expanded: this.getExpandedIndex(this.expanded, collection.id) >= 0,
+      isCollectionFlattened: this.getIsFlattened(collection),
+      compareFunc: collection.compareFunc
+    };
+  }
+  getExpandedIndex(expanded, id) {
+    return expanded.findIndex(expanded => String(expanded) === String(id));
+  }
+  renderRoot() {
+    return this.collections.sort(this.props.sortOrder).map((collection, i) => _jsx(TreeCollection, {
+      ...pickProps(omitProps(this.props), TreeCollection.allowedProps),
+      ...this.getCollectionProps(collection),
+      selection: this.selection,
+      onItemClick: this.handleItemClick,
+      onCollectionClick: this.handleCollectionClick,
+      onKeyDown: this.handleKeyDown,
+      numChildren: this.collections.length,
+      level: 1,
+      position: 1,
+      renderContent: this.props.renderContent
+    }, i));
+  }
+  render() {
+    const styles = this.props.styles;
+    return _jsx(TreeBrowserContext.Provider, {
+      value: {
+        animation: this.props.animation,
+        clearSelection: this.clearSelection
+      },
+      children: _jsx("ul", {
+        css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
+        tabIndex: 0,
+        role: "tree",
+        onKeyDown: this.handleKeyDown,
+        ref: el => {
+          this.ref = el;
+        },
+        "aria-label": this.props.treeLabel,
+        "data-cid": "TreeBrowser",
+        children: this.renderRoot()
+      })
+    });
+  }
+}, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = allowedProps, _TreeBrowser.defaultProps = {
+  size: 'medium',
+  variant: 'folderTree',
+  showRootCollection: true,
+  collectionIcon: FolderClosedInstUIIcon,
+  collectionIconExpanded: FolderClosedInstUIIcon,
+  itemIcon: FileTextInstUIIcon,
+  getItemProps: props => props,
+  getCollectionProps: props => props,
+  defaultExpanded: [],
+  selectionType: 'none',
+  sortOrder: function () {
+    return 0;
+  },
+  animation: true
+}, _TreeBrowser.Node = TreeNode, _TreeBrowser.Collection = TreeCollection, _TreeBrowser.Button = TreeButton, _TreeBrowser)) || _class);
+export default TreeBrowser;
+export { TreeBrowser };

package/es/TreeBrowser/v2/props.js

@@ -0,0 +1,35 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+// props shared between TreeBrowser, TreeCollection
+
+// props shared between TreeBrowser, TreeCollection, TreeButton
+
+// For now it doesn't need the OtherHTMLAttributes, because the extra props
+// get passed to TreeCollection and it doesn't handle them
+
+// this is a sum type, so CompareObject is one of CompareCollection OR CompareItem
+
+const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selection', 'defaultSelection', 'onSelectionChange', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder', 'animation'];
+export { allowedProps };

package/es/TreeBrowser/v2/styles.js

@@ -0,0 +1,71 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import { calcFocusOutlineStyles } from '@instructure/emotion';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} _props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+
+const generateStyles = (componentTheme, _props, sharedTokens) => {
+  return {
+    treeBrowser: {
+      label: 'treeBrowser',
+      boxSizing: 'border-box',
+      margin: '0',
+      padding: '0',
+      listStyleType: 'none',
+      position: 'relative',
+      outline: 'none',
+      borderRadius: componentTheme.borderRadius,
+      ...calcFocusOutlineStyles(sharedTokens.focusOutline),
+      '&::before': {
+        content: '""',
+        pointerEvents: 'none',
+        boxSizing: 'border-box',
+        display: 'block',
+        position: 'absolute',
+        top: '-0.25rem',
+        bottom: '-0.25rem',
+        left: '-0.25rem',
+        right: '-0.25rem',
+        transition: 'all 0.2s',
+        opacity: 0,
+        transform: 'scale(0.95)'
+      },
+      '&:focus::before': {
+        opacity: 1,
+        transform: 'scale(1)'
+      }
+    }
+  };
+};
+export default generateStyles;

package/es/exports/a.js

@@ -0,0 +1,27 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+export { TreeBrowser } from "../TreeBrowser/v1/index.js";
+export { TreeButton } from "../TreeBrowser/v1/TreeButton/index.js";
+export { TreeCollection } from "../TreeBrowser/v1/TreeCollection/index.js";
+export { TreeNode } from "../TreeBrowser/v1/TreeNode/index.js";

package/es/exports/b.js

@@ -0,0 +1,27 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+export { TreeBrowser } from "../TreeBrowser/v2/index.js";
+export { TreeButton } from "../TreeBrowser/v2/TreeButton/index.js";
+export { TreeCollection } from "../TreeBrowser/v2/TreeCollection/index.js";
+export { TreeNode } from "../TreeBrowser/v2/TreeNode/index.js";

package/lib/TreeBrowser/{TreeButton → v1/TreeButton}/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TreeButton = void 0;
 var _react = require("react");
-var _Img = require("@instructure/ui-img/lib/Img");
+var _v11_ = require("@instructure/ui-img/v11_6");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
@@ -45,7 +45,7 @@ parent: TreeBrowser
 id: TreeBrowser.Button
 ---
 **/
-let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeButton = class TreeButton extends _react.Component {
+let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_TreeButton = class TreeButton extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -121,7 +121,7 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
     if (thumbnail) {
       return (0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
-        children: (0, _jsxRuntime.jsx)(_Img.Img, {
+        children: (0, _jsxRuntime.jsx)(_v11_.Img, {
           src: thumbnail,
           constrain: "cover",
           alt: ""

package/lib/TreeBrowser/{TreeCollection → v1/TreeCollection}/index.js

@@ -45,7 +45,7 @@ parent: TreeBrowser
 id: TreeBrowser.Collection
 ---
 **/
-let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeCollection = class TreeCollection extends _react.Component {
+let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_TreeCollection = class TreeCollection extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;

package/lib/TreeBrowser/{TreeNode → v1/TreeNode}/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TreeNode = void 0;
 var _react = require("react");
-var _Img = require("@instructure/ui-img/lib/Img");
+var _v11_ = require("@instructure/ui-img/v11_6");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("../TreeButton/styles"));
@@ -47,7 +47,7 @@ id: TreeBrowser.Node
 A helper class used to render the :renderBeforeItems and :renderAfterItems
 in the TreeBrowser.
 **/
-let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeNode = class TreeNode extends _react.Component {
+let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_TreeNode = class TreeNode extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -78,7 +78,7 @@ let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.defaul
     if (thumbnail) {
       return (0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
-        children: (0, _jsxRuntime.jsx)(_Img.Img, {
+        children: (0, _jsxRuntime.jsx)(_v11_.Img, {
           src: thumbnail,
           constrain: "cover",
           alt: ""

package/lib/TreeBrowser/{index.js → v1/index.js}

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TreeBrowser = void 0;
 var _react = require("react");
 var _keycode = _interopRequireDefault(require("keycode"));
-var _IconFolderLine = require("@instructure/ui-icons/lib/IconFolderLine.js");
-var _IconDocumentLine = require("@instructure/ui-icons/lib/IconDocumentLine.js");
+var _IconFolderLine = require("@instructure/ui-icons/lib/generated/IconFolderLine.js");
+var _IconDocumentLine = require("@instructure/ui-icons/lib/generated/IconDocumentLine.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _emotion = require("@instructure/emotion");
@@ -49,7 +49,7 @@ var _dec, _class, _TreeBrowser;
 category: components
 ---
 **/
-let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeBrowser = class TreeBrowser extends _react.Component {
+let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_TreeBrowser = class TreeBrowser extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;

package/lib/TreeBrowser/v2/TreeBrowserContext.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TreeBrowserContext = void 0;
+var _react = require("react");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+/**
+ * ---
+ * category: components/contexts
+ * ---
+ * React context created by the `TreeBrowser` component to hold its data which are
+ * read by its children.
+ *
+ * @module
+ */
+const TreeBrowserContext = exports.TreeBrowserContext = /*#__PURE__*/(0, _react.createContext)({
+  animation: true
+});
+var _default = exports.default = TreeBrowserContext;