@instructure/ui-tree-browser 8.33.1 → 8.33.2

package/es/TreeBrowser/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -25,6 +24,7 @@ var _dec, _dec2, _class, _class2;
  */
 
 /** @jsx jsx */
+
 import { Component } from 'react';
 import keycode from 'keycode';
 import { IconFolderLine, IconDocumentLine } from '@instructure/ui-icons';
@@ -37,82 +37,67 @@ import { TreeNode } from './TreeNode';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 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;
+        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,
@@ -124,71 +109,55 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       };
     }
   }
-
   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
@@ -198,50 +167,41 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       }
     });
   }
-
   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);
@@ -249,7 +209,6 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       this.moveFocus(1);
     }
   }
-
   handleCloseOrPrevious(node) {
     if (node && this.expanded.includes(node.id) && node.type === 'collection') {
       this.expandOrCollapseNode(node);
@@ -257,34 +216,30 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       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,
@@ -300,11 +255,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       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, Object.assign({
       key: i
@@ -319,7 +272,6 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       renderContent: this.props.renderContent
     })));
   }
-
   render() {
     const styles = this.props.styles;
     return jsx("ul", {
@@ -333,7 +285,6 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       "aria-label": this.props.treeLabel
     }, this.renderRoot());
   }
-
 }, _class2.displayName = "TreeBrowser", _class2.componentId = 'TreeBrowser', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   size: 'medium',
   variant: 'folderTree',

package/es/TreeBrowser/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
 const propTypes = {

package/es/TreeBrowser/styles.js

@@ -32,6 +32,7 @@
  * @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: {
@@ -65,5 +66,4 @@ const generateStyles = componentTheme => {
     }
   };
 };
-
 export default generateStyles;

package/es/TreeBrowser/theme.js

@@ -29,15 +29,15 @@
  */
 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
   };
 };
-
 export default generateComponentTheme;

package/lib/TreeBrowser/TreeBrowserLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TreeBrowserLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,9 +29,11 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // TODO: if we make a TreeBrowserItem component + locator we could use it here.
-const TreeBrowserItemLocator = (0, _locator.locator)('[role="treeitem"]'); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const TreeBrowserItemLocator = (0, _locator.locator)('[role="treeitem"]');
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const TreeBrowserLocator = (0, _locator.locator)(_index.TreeBrowser.selector, {
   findAllItems: function () {
     return TreeBrowserItemLocator.findAll(...arguments);

package/lib/TreeBrowser/TreeButton/index.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TreeButton = void 0;
-
 var _react = require("react");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _Img = require("@instructure/ui-img/lib/Img");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
-
 /**
 ---
 parent: TreeBrowser
@@ -38,32 +26,25 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   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;
-
     (_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$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   defaultContentRenderer(props) {
     const name = props.name,
-          descriptor = props.descriptor,
-          styles = props.styles;
+      descriptor = props.descriptor,
+      styles = props.styles;
     return (0, _emotion.jsx)("span", {
       css: styles.layout
     }, this.renderImage(), (0, _emotion.jsx)("span", {
@@ -75,46 +56,36 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       title: descriptor
     }, descriptor) : null));
   }
-
   renderImage() {
     const type = this.props.type;
-
     switch (type) {
       case 'collection':
         return this.renderCollectionIcon();
-
       case 'item':
         return this.renderItemImage();
-
       default:
         break;
     }
-
     return void 0;
   }
-
   renderCollectionIcon() {
     const _this$props3 = this.props,
-          expanded = _this$props3.expanded,
-          collectionIcon = _this$props3.collectionIcon,
-          collectionIconExpanded = _this$props3.collectionIconExpanded,
-          styles = _this$props3.styles;
-
+      expanded = _this$props3.expanded,
+      collectionIcon = _this$props3.collectionIcon,
+      collectionIconExpanded = _this$props3.collectionIconExpanded,
+      styles = _this$props3.styles;
     if (collectionIcon || collectionIconExpanded) {
       return (0, _emotion.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, (0, _callRenderProp.callRenderProp)(expanded ? collectionIconExpanded : collectionIcon));
     }
-
     return void 0;
   }
-
   renderItemImage() {
     const _this$props4 = this.props,
-          thumbnail = _this$props4.thumbnail,
-          itemIcon = _this$props4.itemIcon,
-          styles = _this$props4.styles;
-
+      thumbnail = _this$props4.thumbnail,
+      itemIcon = _this$props4.itemIcon,
+      styles = _this$props4.styles;
     if (thumbnail) {
       return (0, _emotion.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
@@ -124,22 +95,19 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
         alt: ""
       }));
     }
-
     if (itemIcon) {
       return (0, _emotion.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, (0, _callRenderProp.callRenderProp)(itemIcon));
     }
-
     return void 0;
   }
-
   render() {
     const _this$props5 = this.props,
-          styles = _this$props5.styles,
-          renderContent = _this$props5.renderContent;
-    const buttonContent = renderContent ? renderContent(this.props) : this.defaultContentRenderer(this.props); // VoiceOver can't navigate without the buttons, even though they don't do anything
-
+      styles = _this$props5.styles,
+      renderContent = _this$props5.renderContent;
+    const buttonContent = renderContent ? renderContent(this.props) : this.defaultContentRenderer(this.props);
+    // VoiceOver can't navigate without the buttons, even though they don't do anything
     return (0, _emotion.jsx)("button", {
       ref: this.handleRef,
       tabIndex: -1,
@@ -147,7 +115,6 @@ let TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       css: styles === null || styles === void 0 ? void 0 : styles.treeButton
     }, buttonContent);
   }
-
 }, _class2.displayName = "TreeButton", _class2.componentId = 'TreeBrowser.Button', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   type: 'treeButton',
   size: 'medium',

package/lib/TreeBrowser/TreeButton/props.js

@@ -1,14 +1,11 @@
 "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"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   name: _propTypes.default.string,

package/lib/TreeBrowser/TreeButton/styles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -30,6 +28,7 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const transform = (0, _emotion.keyframes)`
   50% {
     opacity: 0.5;
@@ -50,13 +49,12 @@ const transform = (0, _emotion.keyframes)`
  * @param  {Object} props the props 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) => {
   const size = props.size,
-        variant = props.variant,
-        selected = props.selected,
-        focused = props.focused,
-        level = props.level;
+    variant = props.variant,
+    selected = props.selected,
+    focused = props.focused,
+    level = props.level;
   const isRootButton = level && level === 1;
   const sizeMap = {
     small: {
@@ -332,6 +330,5 @@ const generateStyles = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyles;
 exports.default = _default;

package/lib/TreeBrowser/TreeButton/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,10 +35,10 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        borders = theme.borders,
-        typography = theme.typography,
-        themeName = theme.key,
-        spacing = theme.spacing;
+    borders = theme.borders,
+    typography = theme.typography,
+    themeName = theme.key,
+    spacing = theme.spacing;
   const themeSpecificStyles = {
     canvas: {
       iconColor: theme['ic-brand-font-color-dark'],
@@ -77,10 +76,10 @@ const generateComponentTheme = theme => {
     selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
     selectedOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthLarge
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyles[themeName]
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;