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

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-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-15) (2022-06-23)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser
 

package/es/TreeBrowser/TreeButton/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -42,20 +42,19 @@ id: TreeBrowser.Button
 @tsProps
 **/
 
-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;
+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;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -143,14 +142,6 @@ 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,
@@ -165,6 +156,13 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     }, buttonContent);
   }
 
-}) || _class) || _class);
+}, _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);
 export default TreeButton;
 export { TreeButton };

package/es/TreeBrowser/TreeCollection/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -44,93 +44,81 @@ id: TreeBrowser.Collection
 ---
 @tsProps
 **/
-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;
-
+let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeCollection extends Component {
   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$props;
+    var _this$props$makeStyle, _this$props3;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_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$props2;
+    var _this$props$makeStyle2, _this$props4;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
   }
 
   get itemsLevel() {
-    const _this$props3 = this.props,
-          level = _this$props3.level,
-          isCollectionFlattened = _this$props3.isCollectionFlattened;
+    const _this$props5 = this.props,
+          level = _this$props5.level,
+          isCollectionFlattened = _this$props5.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;
@@ -372,6 +360,16 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     }, this.renderChildren()));
   }
 
-}) || _class) || _class);
+}, _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);
 export default TreeCollection;
 export { TreeCollection };

package/es/TreeBrowser/TreeNode/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -45,18 +45,19 @@ 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 = 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;
+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;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -70,14 +71,6 @@ 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);
   }
 
-  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,
@@ -118,6 +111,11 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
     }, children)));
   }
 
-}) || _class) || _class);
+}, _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);
 export default TreeNode;
 export { TreeNode };

package/es/TreeBrowser/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -44,33 +44,74 @@ category: components
 @tsProps
 **/
 
-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;
-
+let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeBrowser extends Component {
   constructor(props) {
+    var _this;
+
     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 = {
@@ -85,81 +126,25 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props3;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_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$props2;
+    var _this$props$makeStyle2, _this$props4;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_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;
   }
 
-  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$props4 = this.props,
-          collections = _this$props4.collections,
-          rootId = _this$props4.rootId;
+    const _this$props5 = this.props,
+          collections = _this$props5.collections,
+          rootId = _this$props5.rootId;
 
     if (typeof rootId !== 'undefined') {
       return [collections[rootId]];
@@ -177,9 +162,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
 
   expandOrCollapseNode(collection) {
-    var _this$props$onCollect, _this$props5;
+    var _this$props$onCollect, _this$props6;
 
-    (_this$props$onCollect = (_this$props5 = this.props).onCollectionToggle) === null || _this$props$onCollect === void 0 ? void 0 : _this$props$onCollect.call(_this$props5, collection);
+    (_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) => {
@@ -300,13 +285,6 @@ 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,
@@ -356,6 +334,20 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     }, this.renderRoot());
   }
 
-}) || _class) || _class);
+}, _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);
 export default TreeBrowser;
 export { TreeBrowser };

package/lib/TreeBrowser/TreeButton/index.js

@@ -23,7 +23,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 
@@ -34,20 +34,19 @@ id: TreeBrowser.Button
 ---
 @tsProps
 **/
-let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class TreeButton extends _react.Component {
-  static displayName = "TreeButton";
-  static componentId = 'TreeBrowser.Button';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    type: 'treeButton',
-    size: 'medium',
-    variant: 'folderTree',
-    selected: false,
-    focused: false,
-    expanded: false
-  };
-  ref = null;
+let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TreeButton extends _react.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;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -135,14 +134,6 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     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,
@@ -157,7 +148,14 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     }, buttonContent);
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "TreeButton", _class2.componentId = 'TreeBrowser.Button', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  type: 'treeButton',
+  size: 'medium',
+  variant: 'folderTree',
+  selected: false,
+  focused: false,
+  expanded: false
+}, _class2)) || _class) || _class);
 exports.TreeButton = TreeButton;
 var _default = TreeButton;
 exports.default = _default;