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

package/lib/TreeBrowser/v2/TreeNode/index.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TreeNode = void 0;
+var _react = require("react");
+var _latest = require("@instructure/ui-img/latest");
+var _emotion = require("@instructure/emotion");
+var _renderIconWithProps = require("@instructure/ui-icons/lib/IconPropsProvider/renderIconWithProps.js");
+var _styles = _interopRequireDefault(require("../TreeButton/styles"));
+var _props = require("./props");
+var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _TreeNode;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2021 - 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.
+ */
+// Map TreeBrowser size tokens to icon size tokens
+const treeBrowserSizeToIconSize = {
+  small: 'md',
+  medium: 'lg',
+  large: 'xl'
+};
+
+// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
+
+/**
+---
+parent: TreeBrowser
+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, 'TreeBrowserTreeButton'), _dec(_class = (_TreeNode = class TreeNode extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.state = {
+      isHovered: false
+    };
+    this.handleRef = el => {
+      if (el && typeof this.props.containerRef === 'function') {
+        this.props.containerRef(el.parentElement);
+      }
+      this.ref = el;
+    };
+    this.handleMouseEnter = () => {
+      if (this.props.hoverable) {
+        this.setState({
+          isHovered: true
+        });
+      }
+    };
+    this.handleMouseLeave = () => {
+      if (this.props.hoverable) {
+        this.setState({
+          isHovered: false
+        });
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props, _this$context;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
+      animation: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.animation,
+      hoverable: this.props.hoverable
+    });
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2, _this$context2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
+      animation: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.animation,
+      hoverable: this.props.hoverable
+    });
+  }
+  getIconColor() {
+    const selected = this.props.selected;
+    const isHovered = this.state.isHovered;
+
+    // Priority: selected > hover > default
+    if (selected) return 'onColor';
+    if (isHovered) return 'inverseColor';
+    return 'baseColor';
+  }
+  renderItemImage() {
+    const _this$props3 = this.props,
+      thumbnail = _this$props3.thumbnail,
+      itemIcon = _this$props3.itemIcon,
+      styles = _this$props3.styles,
+      size = _this$props3.size;
+    if (thumbnail) {
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
+        children: (0, _jsxRuntime.jsx)(_latest.Img, {
+          src: thumbnail,
+          constrain: "cover",
+          alt: ""
+        })
+      });
+    }
+    if (itemIcon) {
+      const iconSize = treeBrowserSizeToIconSize[size];
+      const iconColor = this.getIconColor();
+      const iconElement = (0, _renderIconWithProps.renderIconWithProps)(itemIcon, iconSize, iconColor);
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: iconElement
+      });
+    }
+    return void 0;
+  }
+  render() {
+    const _this$props4 = this.props,
+      children = _this$props4.children,
+      styles = _this$props4.styles;
+    return (0, _jsxRuntime.jsx)("div", {
+      ref: this.handleRef,
+      tabIndex: -1,
+      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
+      "data-cid": "TreeNode",
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      children: (0, _jsxRuntime.jsxs)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.layout,
+        children: [this.renderItemImage(), (0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.node,
+          children: children
+        })]
+      })
+    });
+  }
+}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = _props.allowedProps, _TreeNode.contextType = _TreeBrowserContext.default, _TreeNode.defaultProps = {
+  size: 'medium',
+  variant: 'folderTree',
+  selected: false,
+  focused: false,
+  hoverable: true
+}, _TreeNode)) || _class);
+var _default = exports.default = TreeNode;

package/lib/TreeBrowser/v2/TreeNode/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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.
+ */
+
+const allowedProps = exports.allowedProps = ['id', 'size', 'variant', 'selected', 'focused', 'itemIcon', 'thumbnail', 'level', 'children', 'containerRef', 'onKeyDown', 'onClick', 'hoverable'];

package/lib/TreeBrowser/v2/index.js

@@ -0,0 +1,353 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TreeBrowser = void 0;
+var _react = require("react");
+var _keycode = _interopRequireDefault(require("keycode"));
+var _uiIcons = require("@instructure/ui-icons");
+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");
+var _TreeCollection = require("./TreeCollection");
+var _TreeButton = require("./TreeButton");
+var _TreeNode = require("./TreeNode");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _TreeBrowserContext = _interopRequireDefault(require("./TreeBrowserContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+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.
+ */
+/**
+---
+category: components
+---
+**/
+let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_TreeBrowser = class TreeBrowser extends _react.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.default.codes.down:
+        case _keycode.default.codes.j:
+          event.stopPropagation();
+          this.moveFocus(1);
+          break;
+        case _keycode.default.codes.up:
+        case _keycode.default.codes.k:
+          event.stopPropagation();
+          this.moveFocus(-1);
+          break;
+        case _keycode.default.codes.home:
+        case _keycode.default.codes.end:
+          event.stopPropagation();
+          this.homeOrEnd(event.keyCode);
+          break;
+        case _keycode.default.codes.left:
+        case _keycode.default.codes.right:
+          event.stopPropagation();
+          this.handleLeftOrRightArrow(event.keyCode, node);
+          break;
+        case _keycode.default.codes.enter:
+        case _keycode.default.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.default.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.default.codes.left || !ltr && keyCode == _keycode.default.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) => (0, _jsxRuntime.jsx)(_TreeCollection.TreeCollection, {
+      ...(0, _pickProps.pickProps)((0, _omitProps.omitProps)(this.props), _TreeCollection.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 (0, _jsxRuntime.jsx)(_TreeBrowserContext.default.Provider, {
+      value: {
+        animation: this.props.animation,
+        clearSelection: this.clearSelection
+      },
+      children: (0, _jsxRuntime.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 = _props.allowedProps, _TreeBrowser.defaultProps = {
+  size: 'medium',
+  variant: 'folderTree',
+  showRootCollection: true,
+  collectionIcon: _uiIcons.FolderClosedInstUIIcon,
+  collectionIconExpanded: _uiIcons.FolderClosedInstUIIcon,
+  itemIcon: _uiIcons.FileTextInstUIIcon,
+  getItemProps: props => props,
+  getCollectionProps: props => props,
+  defaultExpanded: [],
+  selectionType: 'none',
+  sortOrder: function () {
+    return 0;
+  },
+  animation: true
+}, _TreeBrowser.Node = _TreeNode.TreeNode, _TreeBrowser.Collection = _TreeCollection.TreeCollection, _TreeBrowser.Button = _TreeButton.TreeButton, _TreeBrowser)) || _class);
+var _default = exports.default = TreeBrowser;

package/lib/TreeBrowser/v2/props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.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'];

package/lib/TreeBrowser/v2/styles.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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,
+      ...(0, _emotion.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)'
+      }
+    }
+  };
+};
+var _default = exports.default = generateStyles;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "TreeBrowser", {
   enumerable: true,
   get: function () {
-    return _TreeBrowser.TreeBrowser;
+    return _v.TreeBrowser;
   }
 });
 Object.defineProperty(exports, "TreeButton", {
@@ -27,7 +27,7 @@ Object.defineProperty(exports, "TreeNode", {
     return _TreeNode.TreeNode;
   }
 });
-var _TreeBrowser = require("./TreeBrowser");
-var _TreeButton = require("./TreeBrowser/TreeButton");
-var _TreeCollection = require("./TreeBrowser/TreeCollection");
-var _TreeNode = require("./TreeBrowser/TreeNode");
+var _v = require("../TreeBrowser/v1");
+var _TreeButton = require("../TreeBrowser/v1/TreeButton");
+var _TreeCollection = require("../TreeBrowser/v1/TreeCollection");
+var _TreeNode = require("../TreeBrowser/v1/TreeNode");