@instructure/ui-tree-browser 8.33.1 → 8.33.2

package/lib/TreeBrowser/TreeCollection/index.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TreeCollection = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _TreeButton = require("../TreeButton");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 parent: TreeBrowser
@@ -38,104 +26,90 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   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;
+        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;
+        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;
-
     (_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 itemsLevel() {
     const _this$props5 = this.props,
-          level = _this$props5.level,
-          isCollectionFlattened = _this$props5.isCollectionFlattened;
+      level = _this$props5.level,
+      isCollectionFlattened = _this$props5.isCollectionFlattened;
     return isCollectionFlattened ? level : level + 1;
   }
-
   get collectionsCount() {
     const collections = this.props.collections;
     return collections && collections.length > 0 ? collections.length : 0;
   }
-
   get itemsCount() {
     const items = this.props.items;
     return items && items.length > 0 ? items.length : 0;
   }
-
   get childCount() {
     return this.collectionsCount + this.itemsCount + (this.props.renderBeforeItems ? 1 : 0) + (this.props.renderAfterItems ? 1 : 0);
   }
-
   sortChildren() {
     const _this$props6 = this.props,
-          collections = _this$props6.collections,
-          items = _this$props6.items,
-          compareFunc = _this$props6.compareFunc;
+      collections = _this$props6.collections,
+      items = _this$props6.items,
+      compareFunc = _this$props6.compareFunc;
     if (!compareFunc) return [];
     const collections_ = collections ? collections.map(collection => {
-      return { ...collection,
+      return {
+        ...collection,
         type: 'collection'
       };
     }) : [];
     const items_ = items ? items.map(item => {
-      return { ...item,
+      return {
+        ...item,
         type: 'item'
       };
     }) : [];
@@ -143,15 +117,14 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     renderQueue.sort(compareFunc);
     return renderQueue;
   }
-
   renderChildren() {
     const _this$props7 = this.props,
-          collections = _this$props7.collections,
-          items = _this$props7.items,
-          id = _this$props7.id,
-          renderBeforeItems = _this$props7.renderBeforeItems,
-          renderAfterItems = _this$props7.renderAfterItems,
-          compareFunc = _this$props7.compareFunc;
+      collections = _this$props7.collections,
+      items = _this$props7.items,
+      id = _this$props7.id,
+      renderBeforeItems = _this$props7.renderBeforeItems,
+      renderAfterItems = _this$props7.renderAfterItems,
+      compareFunc = _this$props7.compareFunc;
     let position = 1;
     const sortedChildren = this.sortChildren();
     return (0, _emotion.jsx)(_react.default.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), !compareFunc && collections.map(collection => {
@@ -166,20 +139,17 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       }
     }), renderAfterItems && this.renderCollectionChildren(id, renderAfterItems, position++, 'after'));
   }
-
   renderCollectionChildren(collectionId, child, position, keyword) {
     const _this$props8 = this.props,
-          selection = _this$props8.selection,
-          onKeyDown = _this$props8.onKeyDown,
-          getItemProps = _this$props8.getItemProps,
-          styles = _this$props8.styles;
+      selection = _this$props8.selection,
+      onKeyDown = _this$props8.onKeyDown,
+      getItemProps = _this$props8.getItemProps,
+      styles = _this$props8.styles;
     const key = `${collectionId}_${keyword}`;
     const ariaSelected = {};
-
     if (selection) {
       ariaSelected['aria-selected'] = selection === `child_${key}`;
     }
-
     const itemHash = {
       id: key,
       type: 'child'
@@ -218,7 +188,6 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       onBlur: e => this.handleBlur(e, itemHash)
     }), (0, _safeCloneElement.safeCloneElement)(child, itemProps));
   }
-
   renderCollectionNode(collection, position) {
     return (0, _emotion.jsx)(TreeCollection, Object.assign({}, this.props, {
       key: `c${position}`,
@@ -239,25 +208,23 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       compareFunc: collection.compareFunc
     }));
   }
-
   renderItemNode(item, position) {
     const _this$props9 = this.props,
-          selection = _this$props9.selection,
-          onItemClick = _this$props9.onItemClick,
-          onKeyDown = _this$props9.onKeyDown,
-          getItemProps = _this$props9.getItemProps,
-          styles = _this$props9.styles;
+      selection = _this$props9.selection,
+      onItemClick = _this$props9.onItemClick,
+      onKeyDown = _this$props9.onKeyDown,
+      getItemProps = _this$props9.getItemProps,
+      styles = _this$props9.styles;
     const ariaSelected = {};
-
     if (selection) {
       ariaSelected['aria-selected'] = selection === `item_${item.id}`;
     }
-
     const itemHash = {
       id: item.id,
       type: 'item'
     };
-    const itemProps = getItemProps({ ...this.getCommonButtonProps(),
+    const itemProps = getItemProps({
+      ...this.getCommonButtonProps(),
       id: item.id,
       name: item.name,
       descriptor: item.descriptor,
@@ -281,7 +248,6 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       onBlur: e => this.handleBlur(e, itemHash)
     }, ariaSelected), (0, _emotion.jsx)(_TreeButton.TreeButton, itemProps));
   }
-
   getCommonButtonProps() {
     return {
       id: this.props.id,
@@ -294,20 +260,20 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       renderContent: this.props.renderContent
     };
   }
-
   render() {
     const _this$props10 = this.props,
-          id = _this$props10.id,
-          name = _this$props10.name,
-          expanded = _this$props10.expanded,
-          collectionIcon = _this$props10.collectionIcon,
-          collectionIconExpanded = _this$props10.collectionIconExpanded,
-          isCollectionFlattened = _this$props10.isCollectionFlattened,
-          getCollectionProps = _this$props10.getCollectionProps,
-          level = _this$props10.level,
-          position = _this$props10.position,
-          styles = _this$props10.styles;
-    const collectionProps = getCollectionProps({ ...this.getCommonButtonProps(),
+      id = _this$props10.id,
+      name = _this$props10.name,
+      expanded = _this$props10.expanded,
+      collectionIcon = _this$props10.collectionIcon,
+      collectionIconExpanded = _this$props10.collectionIconExpanded,
+      isCollectionFlattened = _this$props10.isCollectionFlattened,
+      getCollectionProps = _this$props10.getCollectionProps,
+      level = _this$props10.level,
+      position = _this$props10.position,
+      styles = _this$props10.styles;
+    const collectionProps = getCollectionProps({
+      ...this.getCommonButtonProps(),
       expanded: expanded,
       collectionIcon: collectionIcon,
       collectionIconExpanded: collectionIconExpanded,
@@ -347,7 +313,6 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       role: "group"
     }, this.renderChildren()));
   }
-
 }, _class2.displayName = "TreeCollection", _class2.componentId = 'TreeBrowser.Collection', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   collections: [],
   items: [],

package/lib/TreeBrowser/TreeCollection/props.js

@@ -1,18 +1,13 @@
 "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 _Children = require("@instructure/ui-prop-types/lib/Children.js");
-
 var _TreeNode = require("../TreeNode");
-
 /*
  * The MIT License (MIT)
  *
@@ -36,6 +31,7 @@ var _TreeNode = require("../TreeNode");
  * 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/TreeCollection/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,10 +28,12 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const list = (0, _emotion.keyframes)`
   to {
     transform: scaleY(1);
   }`;
+
 /**
  *  ---
  * private: true
@@ -47,7 +47,7 @@ const list = (0, _emotion.keyframes)`
 
 const generateStyles = (componentTheme, props) => {
   const size = props.size,
-        variant = props.variant;
+    variant = props.variant;
   const sizeMap = {
     small: {
       indent: {
@@ -133,6 +133,5 @@ const generateStyles = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyles;
 exports.default = _default;

package/lib/TreeBrowser/TreeCollection/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,9 +35,9 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        typography = theme.typography,
-        borders = theme.borders;
+    spacing = theme.spacing,
+    typography = theme.typography,
+    borders = theme.borders;
   const componentVariables = {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     baseSpacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
@@ -47,9 +46,9 @@ const generateComponentTheme = theme => {
     borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDark
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/TreeBrowser/TreeNode/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.TreeNode = void 0;
-
 var _react = require("react");
-
 var _Img = require("@instructure/ui-img/lib/Img");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("../TreeButton/styles"));
-
 var _theme = _interopRequireDefault(require("../TreeButton/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
@@ -40,34 +28,26 @@ let TreeNode = (_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);
   }
-
   renderItemImage() {
     const _this$props3 = this.props,
-          thumbnail = _this$props3.thumbnail,
-          itemIcon = _this$props3.itemIcon,
-          styles = _this$props3.styles;
-
+      thumbnail = _this$props3.thumbnail,
+      itemIcon = _this$props3.itemIcon,
+      styles = _this$props3.styles;
     if (thumbnail) {
       return (0, _emotion.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
@@ -77,20 +57,17 @@ let TreeNode = (_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$props4 = this.props,
-          children = _this$props4.children,
-          styles = _this$props4.styles;
+      children = _this$props4.children,
+      styles = _this$props4.styles;
     return (0, _emotion.jsx)("div", {
       ref: this.handleRef,
       tabIndex: -1,
@@ -101,7 +78,6 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       css: styles === null || styles === void 0 ? void 0 : styles.node
     }, children)));
   }
-
 }, _class2.displayName = "TreeNode", _class2.componentId = 'TreeBrowser.Node', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   size: 'medium',
   variant: 'folderTree',

package/lib/TreeBrowser/TreeNode/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]),
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),