@instructure/ui-tree-browser 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser
 

package/es/TreeBrowser/TreeButton/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -42,19 +42,20 @@ id: TreeBrowser.Button
 @tsProps
 **/
 
-let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeButton extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      if (el && typeof this.props.containerRef === 'function') {
-        this.props.containerRef(el.parentElement);
-      }
-
-      this.ref = el;
-    };
-  }
+let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeButton extends Component {
+  static displayName = "TreeButton";
+  static componentId = 'TreeBrowser.Button';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    type: 'treeButton',
+    size: 'medium',
+    variant: 'folderTree',
+    selected: false,
+    focused: false,
+    expanded: false
+  };
+  ref = null;
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -118,8 +119,6 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   renderItemImage() {
-    var _Img;
-
     const _this$props4 = this.props,
           thumbnail = _this$props4.thumbnail,
           itemIcon = _this$props4.itemIcon,
@@ -128,11 +127,11 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     if (thumbnail) {
       return jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
-      }, _Img || (_Img = jsx(Img, {
+      }, jsx(Img, {
         src: thumbnail,
         constrain: "cover",
         alt: ""
-      })));
+      }));
     }
 
     if (itemIcon) {
@@ -144,6 +143,14 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     return void 0;
   }
 
+  handleRef = el => {
+    if (el && typeof this.props.containerRef === 'function') {
+      this.props.containerRef(el.parentElement);
+    }
+
+    this.ref = el;
+  };
+
   render() {
     const _this$props5 = this.props,
           styles = _this$props5.styles,
@@ -158,13 +165,6 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     }, buttonContent);
   }
 
-}, _class2.displayName = "TreeButton", _class2.componentId = 'TreeBrowser.Button', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  type: 'treeButton',
-  size: 'medium',
-  variant: 'folderTree',
-  selected: false,
-  focused: false,
-  expanded: false
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default TreeButton;
 export { TreeButton };

package/es/TreeBrowser/TreeCollection/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -44,81 +44,93 @@ id: TreeBrowser.Collection
 ---
 @tsProps
 **/
-let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeCollection extends Component {
+let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeCollection extends Component {
+  static displayName = "TreeCollection";
+  static componentId = 'TreeBrowser.Collection';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    collections: [],
+    items: [],
+    expanded: false,
+    selection: '',
+    size: 'medium',
+    variant: 'folderTree',
+    getItemProps: props => props,
+    getCollectionProps: props => props,
+    isCollectionFlattened: false
+  };
+  ref = null;
+
   constructor(props) {
     super(props);
-    this.ref = null;
-
-    this.handleFocus = (e, item) => {
-      e.stopPropagation();
-      this.setState({
-        focused: `${item.type}_${item.id}`
-      });
-    };
-
-    this.handleBlur = (e, _item) => {
-      e.stopPropagation();
-      this.setState({
-        focused: ''
-      });
-    };
-
-    this.handleCollectionClick = e => {
-      const _this$props = this.props,
-            id = _this$props.id,
-            onCollectionClick = _this$props.onCollectionClick,
-            expanded = _this$props.expanded;
-      const collection = {
-        id,
-        expanded: !expanded,
-        type: 'collection'
-      };
-
-      if (onCollectionClick && typeof onCollectionClick === 'function') {
-        onCollectionClick(e, collection);
-      }
-    };
-
-    this.handleCollectionKeyDown = e => {
-      const _this$props2 = this.props,
-            id = _this$props2.id,
-            onKeyDown = _this$props2.onKeyDown,
-            expanded = _this$props2.expanded;
-      const collection = {
-        id,
-        expanded: !expanded,
-        type: 'collection'
-      };
-
-      if (onKeyDown && typeof onKeyDown === 'function') {
-        onKeyDown(e, collection);
-      }
-    };
-
     this.state = {
       focused: ''
     };
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get itemsLevel() {
-    const _this$props5 = this.props,
-          level = _this$props5.level,
-          isCollectionFlattened = _this$props5.isCollectionFlattened;
+    const _this$props3 = this.props,
+          level = _this$props3.level,
+          isCollectionFlattened = _this$props3.isCollectionFlattened;
     return isCollectionFlattened ? level : level + 1;
   }
 
+  handleFocus = (e, item) => {
+    e.stopPropagation();
+    this.setState({
+      focused: `${item.type}_${item.id}`
+    });
+  };
+  handleBlur = (e, _item) => {
+    e.stopPropagation();
+    this.setState({
+      focused: ''
+    });
+  };
+  handleCollectionClick = e => {
+    const _this$props4 = this.props,
+          id = _this$props4.id,
+          onCollectionClick = _this$props4.onCollectionClick,
+          expanded = _this$props4.expanded;
+    const collection = {
+      id,
+      expanded: !expanded,
+      type: 'collection'
+    };
+
+    if (onCollectionClick && typeof onCollectionClick === 'function') {
+      onCollectionClick(e, collection);
+    }
+  };
+  handleCollectionKeyDown = e => {
+    const _this$props5 = this.props,
+          id = _this$props5.id,
+          onKeyDown = _this$props5.onKeyDown,
+          expanded = _this$props5.expanded;
+    const collection = {
+      id,
+      expanded: !expanded,
+      type: 'collection'
+    };
+
+    if (onKeyDown && typeof onKeyDown === 'function') {
+      onKeyDown(e, collection);
+    }
+  };
+
   get collectionsCount() {
     const collections = this.props.collections;
     return collections && collections.length > 0 ? collections.length : 0;
@@ -360,16 +372,6 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     }, this.renderChildren()));
   }
 
-}, _class2.displayName = "TreeCollection", _class2.componentId = 'TreeBrowser.Collection', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  collections: [],
-  items: [],
-  expanded: false,
-  selection: '',
-  size: 'medium',
-  variant: 'folderTree',
-  getItemProps: props => props,
-  getCollectionProps: props => props,
-  isCollectionFlattened: false
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default TreeCollection;
 export { TreeCollection };

package/es/TreeBrowser/TreeNode/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -45,19 +45,18 @@ A helper class used to render the :renderBeforeItems and :renderAfterItems
 in the TreeBrowser.
 **/
 
-let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeNode extends Component {
-  constructor() {
-    super(...arguments);
-    this.ref = null;
-
-    this.handleRef = el => {
-      if (el && typeof this.props.containerRef === 'function') {
-        this.props.containerRef(el.parentElement);
-      }
-
-      this.ref = el;
-    };
-  }
+let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeNode extends Component {
+  static displayName = "TreeNode";
+  static componentId = 'TreeBrowser.Node';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    size: 'medium',
+    variant: 'folderTree',
+    selected: false,
+    focused: false
+  };
+  ref = null;
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -71,9 +70,15 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
-  renderItemImage() {
-    var _Img;
+  handleRef = el => {
+    if (el && typeof this.props.containerRef === 'function') {
+      this.props.containerRef(el.parentElement);
+    }
+
+    this.ref = el;
+  };
 
+  renderItemImage() {
     const _this$props3 = this.props,
           thumbnail = _this$props3.thumbnail,
           itemIcon = _this$props3.itemIcon,
@@ -82,11 +87,11 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
     if (thumbnail) {
       return jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
-      }, _Img || (_Img = jsx(Img, {
+      }, jsx(Img, {
         src: thumbnail,
         constrain: "cover",
         alt: ""
-      })));
+      }));
     }
 
     if (itemIcon) {
@@ -113,11 +118,6 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
     }, children)));
   }
 
-}, _class2.displayName = "TreeNode", _class2.componentId = 'TreeBrowser.Node', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  size: 'medium',
-  variant: 'folderTree',
-  selected: false,
-  focused: false
-}, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default TreeNode;
 export { TreeNode };

package/es/TreeBrowser/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -44,74 +44,33 @@ category: components
 @tsProps
 **/
 
-let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeBrowser extends Component {
-  constructor(props) {
-    var _this;
+let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class TreeBrowser extends Component {
+  static displayName = "TreeBrowser";
+  static componentId = 'TreeBrowser';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    size: 'medium',
+    variant: 'folderTree',
+    showRootCollection: true,
+    collectionIcon: IconFolderLine,
+    collectionIconExpanded: IconFolderLine,
+    itemIcon: IconDocumentLine,
+    getItemProps: props => props,
+    getCollectionProps: props => props,
+    defaultExpanded: [],
+    selectionType: 'none',
+    sortOrder: function () {
+      return 0;
+    }
+  };
+  static Node = TreeNode;
+  static Collection = TreeCollection;
+  static Button = TreeButton;
+  ref = null;
 
+  constructor(props) {
     super(props);
-    _this = this;
-    this.ref = null;
-
-    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);
-      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) => {
-      event.stopPropagation();
-
-      switch (event.keyCode) {
-        case keycode.codes.down:
-        case keycode.codes.j:
-          this.moveFocus(1);
-          break;
-
-        case keycode.codes.up:
-        case keycode.codes.k:
-          this.moveFocus(-1);
-          break;
-
-        case keycode.codes.home:
-        case keycode.codes.end:
-          this.homeOrEnd(event.keyCode);
-          break;
-
-        case keycode.codes.left:
-        case keycode.codes.right:
-          this.handleLeftOrRightArrow(event.keyCode, node);
-          break;
-
-        case keycode.codes.enter:
-        case keycode.codes.space:
-          this.handleActivation(event, node);
-          break;
-
-        default:
-          return;
-      }
-
-      event.preventDefault();
-    };
-
-    this.getIsFlattened = collection => {
-      const _this$props2 = this.props,
-            rootId = _this$props2.rootId,
-            showRootCollection = _this$props2.showRootCollection;
-      return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
-    };
 
     if (typeof this.props.expanded === 'undefined') {
       this.state = {
@@ -126,25 +85,81 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get _root() {
     return this.ref;
   }
 
+  handleCollectionClick = (() => {
+    var _this = this;
+
+    return 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);
+      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');
+    };
+  })();
+  handleItemClick = (e, item) => {
+    var _this$props$onItemCli, _this$props3;
+
+    e.stopPropagation();
+    (_this$props$onItemCli = (_this$props3 = this.props).onItemClick) === null || _this$props$onItemCli === void 0 ? void 0 : _this$props$onItemCli.call(_this$props3, item);
+    this.handleSelection(item.id, 'item');
+  };
+  handleKeyDown = (event, node) => {
+    event.stopPropagation();
+
+    switch (event.keyCode) {
+      case keycode.codes.down:
+      case keycode.codes.j:
+        this.moveFocus(1);
+        break;
+
+      case keycode.codes.up:
+      case keycode.codes.k:
+        this.moveFocus(-1);
+        break;
+
+      case keycode.codes.home:
+      case keycode.codes.end:
+        this.homeOrEnd(event.keyCode);
+        break;
+
+      case keycode.codes.left:
+      case keycode.codes.right:
+        this.handleLeftOrRightArrow(event.keyCode, node);
+        break;
+
+      case keycode.codes.enter:
+      case keycode.codes.space:
+        this.handleActivation(event, node);
+        break;
+
+      default:
+        return;
+    }
+
+    event.preventDefault();
+  };
+
   get collections() {
-    const _this$props5 = this.props,
-          collections = _this$props5.collections,
-          rootId = _this$props5.rootId;
+    const _this$props4 = this.props,
+          collections = _this$props4.collections,
+          rootId = _this$props4.rootId;
 
     if (typeof rootId !== 'undefined') {
       return [collections[rootId]];
@@ -162,9 +177,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   expandOrCollapseNode(collection) {
-    var _this$props$onCollect, _this$props6;
+    var _this$props$onCollect, _this$props5;
 
-    (_this$props$onCollect = (_this$props6 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props6, collection);
+    (_this$props$onCollect = (_this$props5 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props5, collection);
 
     if (typeof this.props.expanded === 'undefined') {
       this.setState((state, props) => {
@@ -285,6 +300,13 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     }
   }
 
+  getIsFlattened = collection => {
+    const _this$props6 = this.props,
+          rootId = _this$props6.rootId,
+          showRootCollection = _this$props6.showRootCollection;
+    return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
+  };
+
   getCollectionProps(collection) {
     return {
       id: collection.id,
@@ -334,20 +356,6 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     }, this.renderRoot());
   }
 
-}, _class2.displayName = "TreeBrowser", _class2.componentId = 'TreeBrowser', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  size: 'medium',
-  variant: 'folderTree',
-  showRootCollection: true,
-  collectionIcon: IconFolderLine,
-  collectionIconExpanded: IconFolderLine,
-  itemIcon: IconDocumentLine,
-  getItemProps: props => props,
-  getCollectionProps: props => props,
-  defaultExpanded: [],
-  selectionType: 'none',
-  sortOrder: function () {
-    return 0;
-  }
-}, _class2.Node = TreeNode, _class2.Collection = TreeCollection, _class2.Button = TreeButton, _class2)) || _class) || _class);
+}) || _class) || _class);
 export default TreeBrowser;
 export { TreeBrowser };