@instructure/ui-tree-browser 8.18.0 → 8.18.1-snapshot.12

package/lib/TreeBrowser/TreeButton/theme.js

@@ -50,32 +50,32 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    hoverBackgroundColor: colors?.backgroundBrand,
-    hoverTextColor: colors?.textLightest,
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineColor: colors?.borderBrand,
-    focusOutlineStyle: borders?.style,
-    iconColor: colors?.textDarkest,
-    iconsMarginRight: spacing?.xSmall,
-    descriptorMarginTop: spacing?.xxxSmall,
-    descriptorTextColor: colors?.textDarkest,
-    descriptorFontSizeSmall: typography?.fontSizeXSmall,
-    descriptorFontSizeMedium: typography?.fontSizeXSmall,
-    descriptorFontSizeLarge: typography?.fontSizeSmall,
-    nameTextColor: colors?.textBrand,
-    nameFontSizeSmall: typography?.fontSizeXSmall,
-    nameFontSizeMedium: typography?.fontSizeSmall,
-    nameFontSizeLarge: typography?.fontSizeMedium,
-    baseSpacingSmall: spacing?.xSmall,
-    baseSpacingMedium: spacing?.small,
+    hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    hoverTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    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,
+    iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    iconsMarginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    descriptorMarginTop: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
+    descriptorTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    descriptorFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
+    descriptorFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
+    descriptorFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    nameTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
+    nameFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
+    nameFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    nameFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    baseSpacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    baseSpacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     baseSpacingLarge: '1rem',
-    borderWidth: borders?.widthSmall,
-    borderRadius: borders?.radiusMedium,
-    borderColor: colors?.borderDark,
-    textLineHeight: typography?.lineHeightCondensed,
-    selectedTextColor: colors?.textLightest,
-    selectedBackgroundColor: colors?.backgroundDark,
-    selectedOutlineWidth: borders?.widthLarge
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDark,
+    textLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    selectedTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
+    selectedOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthLarge
   };
   return { ...componentVariables,
     ...themeSpecificStyles[themeName]

package/lib/TreeBrowser/TreeCollection/index.js

@@ -91,17 +91,21 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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$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;
   }
 
@@ -120,12 +124,12 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   renderChildren() {
-    const _this$props4 = this.props,
-          collections = _this$props4.collections,
-          items = _this$props4.items,
-          id = _this$props4.id,
-          renderBeforeItems = _this$props4.renderBeforeItems,
-          renderAfterItems = _this$props4.renderAfterItems;
+    const _this$props6 = this.props,
+          collections = _this$props6.collections,
+          items = _this$props6.items,
+          id = _this$props6.id,
+          renderBeforeItems = _this$props6.renderBeforeItems,
+          renderAfterItems = _this$props6.renderAfterItems;
     let position = 1;
     return (0, _emotion.jsx)(_react.default.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), collections.map(collection => {
       return this.renderCollectionNode(collection, position++);
@@ -135,11 +139,11 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   renderCollectionChildren(collectionId, child, position, keyword) {
-    const _this$props5 = this.props,
-          selection = _this$props5.selection,
-          onKeyDown = _this$props5.onKeyDown,
-          getItemProps = _this$props5.getItemProps,
-          styles = _this$props5.styles;
+    const _this$props7 = this.props,
+          selection = _this$props7.selection,
+          onKeyDown = _this$props7.onKeyDown,
+          getItemProps = _this$props7.getItemProps,
+          styles = _this$props7.styles;
     const key = `${collectionId}_${keyword}`;
     const ariaSelected = {};
 
@@ -160,7 +164,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     return (0, _emotion.jsx)("li", Object.assign({
       id: key,
       role: "treeitem",
-      css: styles?.item,
+      css: styles === null || styles === void 0 ? void 0 : styles.item,
       tabIndex: -1,
       key: key,
       "aria-posinset": position,
@@ -181,7 +185,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
         if (typeof child.props.onKeyDown === 'function') {
           child.props.onKeyDown(e, n);
         } else {
-          onKeyDown?.(e, itemHash);
+          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash);
         }
       },
       onBlur: e => this.handleBlur(e, itemHash)
@@ -209,12 +213,12 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   renderItemNode(item, position) {
-    const _this$props6 = this.props,
-          selection = _this$props6.selection,
-          onItemClick = _this$props6.onItemClick,
-          onKeyDown = _this$props6.onKeyDown,
-          getItemProps = _this$props6.getItemProps,
-          styles = _this$props6.styles;
+    const _this$props8 = this.props,
+          selection = _this$props8.selection,
+          onItemClick = _this$props8.onItemClick,
+          onKeyDown = _this$props8.onKeyDown,
+          getItemProps = _this$props8.getItemProps,
+          styles = _this$props8.styles;
     const ariaSelected = {};
 
     if (selection) {
@@ -239,12 +243,12 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       tabIndex: -1,
       role: "treeitem",
       "aria-label": item.name,
-      css: styles?.item,
+      css: styles === null || styles === void 0 ? void 0 : styles.item,
       "aria-level": this.itemsLevel,
       "aria-posinset": position,
       "aria-setsize": this.childCount,
-      onClick: e => onItemClick?.(e, itemHash),
-      onKeyDown: e => onKeyDown?.(e, itemHash),
+      onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(e, itemHash),
+      onKeyDown: e => onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash),
       onFocus: e => this.handleFocus(e, itemHash),
       onBlur: e => this.handleBlur(e, itemHash)
     }, ariaSelected), (0, _emotion.jsx)(_TreeButton.TreeButton, itemProps));
@@ -264,17 +268,17 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   render() {
-    const _this$props7 = this.props,
-          id = _this$props7.id,
-          name = _this$props7.name,
-          expanded = _this$props7.expanded,
-          collectionIcon = _this$props7.collectionIcon,
-          collectionIconExpanded = _this$props7.collectionIconExpanded,
-          isCollectionFlattened = _this$props7.isCollectionFlattened,
-          getCollectionProps = _this$props7.getCollectionProps,
-          level = _this$props7.level,
-          position = _this$props7.position,
-          styles = _this$props7.styles;
+    const _this$props9 = this.props,
+          id = _this$props9.id,
+          name = _this$props9.name,
+          expanded = _this$props9.expanded,
+          collectionIcon = _this$props9.collectionIcon,
+          collectionIconExpanded = _this$props9.collectionIconExpanded,
+          isCollectionFlattened = _this$props9.isCollectionFlattened,
+          getCollectionProps = _this$props9.getCollectionProps,
+          level = _this$props9.level,
+          position = _this$props9.position,
+          styles = _this$props9.styles;
     const collectionProps = getCollectionProps({ ...this.getCommonButtonProps(),
       expanded: expanded,
       collectionIcon: collectionIcon,
@@ -291,7 +295,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       ref: el => {
         this.ref = el;
       },
-      css: styles?.treeCollection,
+      css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
       tabIndex: -1,
       role: "treeitem",
       "aria-label": this.props.name,
@@ -311,7 +315,7 @@ let TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
       })
     }, ariaSelected), (0, _emotion.jsx)(_TreeButton.TreeButton, collectionProps), expanded && this.childCount > 0 && (0, _emotion.jsx)("ul", {
       "aria-label": name,
-      css: styles?.list,
+      css: styles === null || styles === void 0 ? void 0 : styles.list,
       role: "group"
     }, this.renderChildren()));
   }

package/lib/TreeBrowser/TreeCollection/theme.js

@@ -40,12 +40,12 @@ const generateComponentTheme = theme => {
         typography = theme.typography,
         borders = theme.borders;
   const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    baseSpacingSmall: spacing?.xSmall,
-    baseSpacingMedium: spacing?.small,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    baseSpacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    baseSpacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     baseSpacingLarge: '1rem',
-    borderWidth: borders?.widthSmall,
-    borderColor: colors?.borderDark
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDark
   };
   return { ...componentVariables
   };

package/lib/TreeBrowser/TreeNode/index.js

@@ -51,24 +51,28 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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() {
     var _Img;
 
-    const _this$props = this.props,
-          thumbnail = _this$props.thumbnail,
-          itemIcon = _this$props.itemIcon,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          thumbnail = _this$props3.thumbnail,
+          itemIcon = _this$props3.itemIcon,
+          styles = _this$props3.styles;
 
     if (thumbnail) {
       return (0, _emotion.jsx)("div", {
-        css: styles?.thumbnail
+        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
       }, _Img || (_Img = (0, _emotion.jsx)(_Img2.Img, {
         src: thumbnail,
         constrain: "cover",
@@ -78,7 +82,7 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 
     if (itemIcon) {
       return (0, _emotion.jsx)("div", {
-        css: styles?.icon
+        css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, (0, _callRenderProp.callRenderProp)(itemIcon));
     }
 
@@ -86,17 +90,17 @@ let TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   render() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          styles = _this$props4.styles;
     return (0, _emotion.jsx)("div", {
       ref: this.handleRef,
       tabIndex: -1,
-      css: styles?.treeButton
+      css: styles === null || styles === void 0 ? void 0 : styles.treeButton
     }, (0, _emotion.jsx)("span", {
-      css: styles?.layout
+      css: styles === null || styles === void 0 ? void 0 : styles.layout
     }, this.renderItemImage(), (0, _emotion.jsx)("span", {
-      css: styles?.node
+      css: styles === null || styles === void 0 ? void 0 : styles.node
     }, children)));
   }
 

package/lib/TreeBrowser/index.js

@@ -56,14 +56,16 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
       e.stopPropagation();
       const onCollectionClick = _this.props.onCollectionClick;
       if (expand) _this.expandOrCollapseNode(collection);
-      onCollectionClick?.(collection.id, collection); // TODO: this should pass the event as the first arg
+      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.onItemClick?.(item);
+      (_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');
     };
 
@@ -104,9 +106,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     };
 
     this.getIsFlattened = collection => {
-      const _this$props = this.props,
-            rootId = _this$props.rootId,
-            showRootCollection = _this$props.showRootCollection;
+      const _this$props2 = this.props,
+            rootId = _this$props2.rootId,
+            showRootCollection = _this$props2.showRootCollection;
       return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
     };
 
@@ -123,11 +125,15 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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() {
@@ -135,9 +141,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   get collections() {
-    const _this$props2 = this.props,
-          collections = _this$props2.collections,
-          rootId = _this$props2.rootId;
+    const _this$props5 = this.props,
+          collections = _this$props5.collections,
+          rootId = _this$props5.rootId;
 
     if (typeof rootId !== 'undefined') {
       return [collections[rootId]];
@@ -155,7 +161,9 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   expandOrCollapseNode(collection) {
-    this.props.onCollectionToggle?.(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) => {
@@ -313,7 +321,7 @@ let TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   render() {
     const styles = this.props.styles;
     return (0, _emotion.jsx)("ul", {
-      css: styles?.treeBrowser,
+      css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
       tabIndex: 0,
       role: "tree",
       onKeyDown: this.handleKeyDown,

package/lib/TreeBrowser/theme.js

@@ -38,10 +38,10 @@ const generateComponentTheme = theme => {
   const colors = theme.colors,
         borders = theme.borders;
   const componentVariables = {
-    borderRadius: borders?.radiusMedium,
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineColor: colors?.borderBrand,
-    focusOutlineStyle: borders?.style
+    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
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "8.18.0",
+  "version": "8.18.1-snapshot.12+ca14b3dc8",
   "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.18.0",
-    "@instructure/ui-color-utils": "8.18.0",
-    "@instructure/ui-test-locator": "8.18.0",
-    "@instructure/ui-test-utils": "8.18.0",
-    "@instructure/ui-themes": "8.18.0"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.18.0",
-    "@instructure/shared-types": "8.18.0",
-    "@instructure/ui-icons": "8.18.0",
-    "@instructure/ui-img": "8.18.0",
-    "@instructure/ui-prop-types": "8.18.0",
-    "@instructure/ui-react-utils": "8.18.0",
-    "@instructure/ui-testable": "8.18.0",
-    "@instructure/ui-utils": "8.18.0",
+    "@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-icons": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-img": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-prop-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-utils": "8.18.1-snapshot.12+ca14b3dc8",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -48,5 +48,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
 }