@instructure/ui-tree-browser 8.33.1 → 8.33.2

package/lib/TreeBrowser/index.js

@@ -1,42 +1,25 @@
 "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 _IconFolderLine = require("@instructure/ui-icons/lib/IconFolderLine.js");
-
 var _IconDocumentLine = require("@instructure/ui-icons/lib/IconDocumentLine.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _TreeCollection = require("./TreeCollection");
-
 var _TreeButton = require("./TreeButton");
-
 var _TreeNode = require("./TreeNode");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -46,72 +29,57 @@ category: components
 let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TreeBrowser extends _react.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.default.codes.down:
         case _keycode.default.codes.j:
           this.moveFocus(1);
           break;
-
         case _keycode.default.codes.up:
         case _keycode.default.codes.k:
           this.moveFocus(-1);
           break;
-
         case _keycode.default.codes.home:
         case _keycode.default.codes.end:
           this.homeOrEnd(event.keyCode);
           break;
-
         case _keycode.default.codes.left:
         case _keycode.default.codes.right:
           this.handleLeftOrRightArrow(event.keyCode, node);
           break;
-
         case _keycode.default.codes.enter:
         case _keycode.default.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;
+        rootId = _this$props2.rootId,
+        showRootCollection = _this$props2.showRootCollection;
       return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
     };
-
     if (typeof this.props.expanded === 'undefined') {
       this.state = {
         expanded: this.props.defaultExpanded,
@@ -123,71 +91,55 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       };
     }
   }
-
   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;
-
+      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;
   }
-
   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 selectionType = this.props.selectionType;
     selectionType === 'single' && this.setState(state => {
       const selection = `${type}_${id}`;
-
       if (state.selection !== selection) {
         return {
           selection
@@ -197,50 +149,41 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       }
     });
   }
-
   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);
@@ -248,7 +191,6 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       this.moveFocus(1);
     }
   }
-
   handleCloseOrPrevious(node) {
     if (node && this.expanded.includes(node.id) && node.type === 'collection') {
       this.expandOrCollapseNode(node);
@@ -256,34 +198,30 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       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]
+        return {
+          ...this.props.items[id]
         };
       }).filter(item => item != null).sort(this.props.sortOrder);
     } else {
       return [];
     }
   }
-
   getCollectionProps(collection) {
     return {
       id: collection.id,
@@ -299,11 +237,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       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, _emotion.jsx)(_TreeCollection.TreeCollection, Object.assign({
       key: i
@@ -318,7 +254,6 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       renderContent: this.props.renderContent
     })));
   }
-
   render() {
     const styles = this.props.styles;
     return (0, _emotion.jsx)("ul", {
@@ -332,7 +267,6 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       "aria-label": this.props.treeLabel
     }, this.renderRoot());
   }
-
 }, _class2.displayName = "TreeBrowser", _class2.componentId = 'TreeBrowser', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   size: 'medium',
   variant: 'folderTree',

package/lib/TreeBrowser/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "TreeBrowserLocator", {
   }
 });
 exports.default = void 0;
-
 var _TreeBrowserLocator = require("./TreeBrowserLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/TreeBrowser/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   collections: _propTypes.default.object.isRequired,
   items: _propTypes.default.object.isRequired,

package/lib/TreeBrowser/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -39,6 +38,7 @@ exports.default = void 0;
  * @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 => {
   return {
     treeBrowser: {
@@ -72,6 +72,5 @@ const generateStyles = componentTheme => {
     }
   };
 };
-
 var _default = generateStyles;
 exports.default = _default;

package/lib/TreeBrowser/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,16 +35,16 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        borders = theme.borders;
+    borders = theme.borders;
   const componentVariables = {
     borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
     focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
     focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
     focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "TreeBrowser", {
     return _TreeBrowser.TreeBrowser;
   }
 });
-
 var _TreeBrowser = require("./TreeBrowser");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "8.33.1",
+  "version": "8.33.2",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,22 +23,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.1",
-    "@instructure/ui-color-utils": "8.33.1",
-    "@instructure/ui-test-locator": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1",
-    "@instructure/ui-themes": "8.33.1"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-color-utils": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2",
+    "@instructure/ui-themes": "8.33.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.33.1",
-    "@instructure/shared-types": "8.33.1",
-    "@instructure/ui-icons": "8.33.1",
-    "@instructure/ui-img": "8.33.1",
-    "@instructure/ui-prop-types": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
-    "@instructure/ui-utils": "8.33.1",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-icons": "8.33.2",
+    "@instructure/ui-img": "8.33.2",
+    "@instructure/ui-prop-types": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-utils": "8.33.2",
     "keycode": "^2",
     "prop-types": "^15"
   },