@instructure/ui-tree-browser 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-tree-browser
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/TreeBrowser/v1/TreeButton/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _TreeButton;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -38,33 +38,36 @@ id: TreeBrowser.Button
 ---
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeButton = class TreeButton extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      if (el && typeof this.props.containerRef === 'function') {
-        this.props.containerRef(el.parentElement);
-      }
-      this.ref = el;
-    };
-  }
+let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class TreeButton extends Component {
+  static displayName = "TreeButton";
+  static componentId = 'TreeBrowser.Button';
+  static allowedProps = allowedProps;
+  static contextType = TreeBrowserContext;
+  static defaultProps = {
+    type: 'treeButton',
+    size: 'medium',
+    variant: 'folderTree',
+    selected: false,
+    focused: false,
+    expanded: false
+  };
+  ref = null;
   componentDidMount() {
-    var _this$props$makeStyle, _this$props, _this$context;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
-      animation: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.animation
+    this.props.makeStyles?.({
+      animation: this.context?.animation
     });
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2, _this$context2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
-      animation: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.animation
+    this.props.makeStyles?.({
+      animation: this.context?.animation
     });
   }
   defaultContentRenderer(props) {
-    const name = props.name,
-      descriptor = props.descriptor,
-      styles = props.styles;
+    const {
+      name,
+      descriptor,
+      styles
+    } = props;
     return _jsxs("span", {
       css: styles.layout,
       children: [this.renderImage(), _jsxs("span", {
@@ -81,7 +84,9 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     });
   }
   renderImage() {
-    const type = this.props.type;
+    const {
+      type
+    } = this.props;
     switch (type) {
       case 'collection':
         return this.renderCollectionIcon();
@@ -90,30 +95,32 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       default:
         break;
     }
-    return void 0;
+    return undefined;
   }
   renderCollectionIcon() {
-    const _this$props3 = this.props,
-      expanded = _this$props3.expanded,
-      collectionIcon = _this$props3.collectionIcon,
-      collectionIconExpanded = _this$props3.collectionIconExpanded,
-      styles = _this$props3.styles;
+    const {
+      expanded,
+      collectionIcon,
+      collectionIconExpanded,
+      styles
+    } = this.props;
     if (collectionIcon || collectionIconExpanded) {
       return _jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        css: styles?.icon,
         children: callRenderProp(expanded ? collectionIconExpanded : collectionIcon)
       });
     }
-    return void 0;
+    return undefined;
   }
   renderItemImage() {
-    const _this$props4 = this.props,
-      thumbnail = _this$props4.thumbnail,
-      itemIcon = _this$props4.itemIcon,
-      styles = _this$props4.styles;
+    const {
+      thumbnail,
+      itemIcon,
+      styles
+    } = this.props;
     if (thumbnail) {
       return _jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
+        css: styles?.thumbnail,
         children: _jsx(Img, {
           src: thumbnail,
           constrain: "cover",
@@ -123,34 +130,34 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     }
     if (itemIcon) {
       return _jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        css: styles?.icon,
         children: callRenderProp(itemIcon)
       });
     }
-    return void 0;
+    return undefined;
   }
+  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,
-      renderContent = _this$props5.renderContent;
+    const {
+      styles,
+      renderContent
+    } = this.props;
     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 _jsx("button", {
       ref: this.handleRef,
       tabIndex: -1,
       type: "button",
-      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
+      css: styles?.treeButton,
       "data-cid": "TreeButton",
       children: buttonContent
     });
   }
-}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = allowedProps, _TreeButton.contextType = TreeBrowserContext, _TreeButton.defaultProps = {
-  type: 'treeButton',
-  size: 'medium',
-  variant: 'folderTree',
-  selected: false,
-  focused: false,
-  expanded: false
-}, _TreeButton)) || _class);
+}) || _class);
 export default TreeButton;
 export { TreeButton };

package/es/TreeBrowser/v1/TreeButton/styles.js

@@ -45,11 +45,13 @@ const transform = keyframes`
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyles = (componentTheme, props, state) => {
-  const size = props.size,
-    variant = props.variant,
-    selected = props.selected,
-    focused = props.focused,
-    level = props.level;
+  const {
+    size,
+    variant,
+    selected,
+    focused,
+    level
+  } = props;
   const isRootButton = level && level === 1;
   const sizeMap = {
     small: {

package/es/TreeBrowser/v1/TreeButton/theme.js

@@ -28,12 +28,13 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9;
-  const colors = theme.colors,
-    borders = theme.borders,
-    typography = theme.typography,
-    themeName = theme.key,
-    spacing = theme.spacing;
+  const {
+    colors,
+    borders,
+    typography,
+    key: themeName,
+    spacing
+  } = theme;
   const themeSpecificStyles = {
     canvas: {
       iconColor: theme['ic-brand-font-color-dark'],
@@ -44,32 +45,32 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
-    hoverTextColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
-    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
-    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$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
-    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$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
-    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,
+    hoverBackgroundColor: colors?.contrasts?.blue4570,
+    hoverTextColor: colors?.contrasts?.white1010,
+    focusOutlineWidth: borders?.widthMedium,
+    focusOutlineColor: colors?.contrasts?.blue4570,
+    focusOutlineStyle: borders?.style,
+    iconColor: colors?.contrasts?.grey125125,
+    iconsMarginRight: spacing?.xSmall,
+    descriptorMarginTop: spacing?.xxxSmall,
+    descriptorTextColor: colors?.contrasts?.grey125125,
+    descriptorFontSizeSmall: typography?.fontSizeXSmall,
+    descriptorFontSizeMedium: typography?.fontSizeXSmall,
+    descriptorFontSizeLarge: typography?.fontSizeSmall,
+    nameTextColor: colors?.contrasts?.blue4570,
+    nameFontSizeSmall: typography?.fontSizeXSmall,
+    nameFontSizeMedium: typography?.fontSizeSmall,
+    nameFontSizeLarge: typography?.fontSizeMedium,
+    baseSpacingSmall: spacing?.xSmall,
+    baseSpacingMedium: spacing?.small,
     baseSpacingLarge: '1rem',
-    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$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey4570,
-    textLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
-    selectedTextColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.white1010,
-    selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey4570,
-    selectedOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthLarge
+    borderWidth: borders?.widthSmall,
+    borderRadius: borders?.radiusMedium,
+    borderColor: colors?.contrasts?.grey4570,
+    textLineHeight: typography?.lineHeightCondensed,
+    selectedTextColor: colors?.contrasts?.white1010,
+    selectedBackgroundColor: colors?.contrasts?.grey4570,
+    selectedOutlineWidth: borders?.widthLarge
   };
   return {
     ...componentVariables,

package/es/TreeBrowser/v1/TreeCollection/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _TreeCollection;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -39,72 +39,88 @@ parent: TreeBrowser
 id: TreeBrowser.Collection
 ---
 **/
-let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeCollection = class TreeCollection extends Component {
+let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class TreeCollection extends Component {
+  static displayName = "TreeCollection";
+  static componentId = 'TreeBrowser.Collection';
+  static allowedProps = allowedProps;
+  static contextType = TreeBrowserContext;
+  static defaultProps = {
+    collections: [],
+    items: [],
+    expanded: false,
+    selection: '',
+    size: 'medium',
+    variant: 'folderTree',
+    getItemProps: props => props,
+    getCollectionProps: props => props,
+    isCollectionFlattened: false
+  };
+  ref = null;
   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$props3, _this$context;
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, {
-      animation: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.animation
+    this.props.makeStyles?.({
+      animation: this.context?.animation
     });
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4, _this$context2;
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, {
-      animation: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.animation
+    this.props.makeStyles?.({
+      animation: this.context?.animation
     });
   }
   get itemsLevel() {
-    const _this$props5 = this.props,
-      level = _this$props5.level,
-      isCollectionFlattened = _this$props5.isCollectionFlattened;
+    const {
+      level,
+      isCollectionFlattened
+    } = this.props;
     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 {
+      id,
+      onCollectionClick,
+      expanded
+    } = this.props;
+    const collection = {
+      id,
+      expanded: !expanded,
+      type: 'collection'
+    };
+    if (onCollectionClick && typeof onCollectionClick === 'function') {
+      onCollectionClick(e, collection);
+    }
+  };
+  handleCollectionKeyDown = e => {
+    const {
+      id,
+      onKeyDown,
+      expanded
+    } = this.props;
+    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;
@@ -117,10 +133,11 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     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;
+    const {
+      collections,
+      items,
+      compareFunc
+    } = this.props;
     if (!compareFunc) return [];
     const collections_ = collections ? collections.map(collection => {
       return {
@@ -139,13 +156,14 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     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;
+    const {
+      collections,
+      items,
+      id,
+      renderBeforeItems,
+      renderAfterItems,
+      compareFunc
+    } = this.props;
     let position = 1;
     const sortedChildren = this.sortChildren();
     return _jsxs(_Fragment, {
@@ -163,11 +181,12 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     });
   }
   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;
+    const {
+      selection,
+      onKeyDown,
+      getItemProps,
+      styles
+    } = this.props;
     const key = `${collectionId}_${keyword}`;
     const ariaSelected = {};
     if (selection) {
@@ -187,7 +206,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       id: key
       /* eslint-disable-next-line jsx-a11y/role-has-required-aria-props */,
       role: "treeitem",
-      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      css: styles?.item,
       tabIndex: -1,
       "aria-posinset": position,
       "aria-setsize": this.childCount,
@@ -205,7 +224,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
         if (typeof child.props.onKeyDown === 'function') {
           child.props.onKeyDown(e);
         } else {
-          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash);
+          onKeyDown?.(e, itemHash);
         }
       },
       onBlur: e => this.handleBlur(e, itemHash),
@@ -234,12 +253,13 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     });
   }
   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;
+    const {
+      selection,
+      onItemClick,
+      onKeyDown,
+      getItemProps,
+      styles
+    } = this.props;
     const ariaSelected = {};
     if (selection) {
       ariaSelected['aria-selected'] = selection === `item_${item.id}`;
@@ -263,12 +283,12 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       /* eslint-disable-next-line jsx-a11y/role-has-required-aria-props */,
       role: "treeitem",
       "aria-label": item.name,
-      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      css: styles?.item,
       "aria-level": this.itemsLevel,
       "aria-posinset": position,
       "aria-setsize": this.childCount,
-      onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(e, itemHash),
-      onKeyDown: e => onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash),
+      onClick: e => onItemClick?.(e, itemHash),
+      onKeyDown: e => onKeyDown?.(e, itemHash),
       onFocus: e => this.handleFocus(e, itemHash),
       onBlur: e => this.handleBlur(e, itemHash),
       ...ariaSelected,
@@ -290,17 +310,18 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     };
   }
   render() {
-    const _this$props0 = this.props,
-      id = _this$props0.id,
-      name = _this$props0.name,
-      expanded = _this$props0.expanded,
-      collectionIcon = _this$props0.collectionIcon,
-      collectionIconExpanded = _this$props0.collectionIconExpanded,
-      isCollectionFlattened = _this$props0.isCollectionFlattened,
-      getCollectionProps = _this$props0.getCollectionProps,
-      level = _this$props0.level,
-      position = _this$props0.position,
-      styles = _this$props0.styles;
+    const {
+      id,
+      name,
+      expanded,
+      collectionIcon,
+      collectionIconExpanded,
+      isCollectionFlattened,
+      getCollectionProps,
+      level,
+      position,
+      styles
+    } = this.props;
     const collectionProps = getCollectionProps({
       ...this.getCommonButtonProps(),
       expanded: expanded,
@@ -313,14 +334,14 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       level
     });
     const ariaSelected = {
-      'aria-selected': void 0
+      'aria-selected': undefined
     };
     if (this.props.selection) ariaSelected['aria-selected'] = this.props.selection === `collection_${id}`;
     return isCollectionFlattened ? this.renderChildren() : _jsxs("li", {
       ref: el => {
         this.ref = el;
       },
-      css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
+      css: styles?.treeCollection,
       tabIndex: -1
       /* eslint-disable-next-line jsx-a11y/role-has-required-aria-props */,
       role: "treeitem",
@@ -345,22 +366,12 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
         ...collectionProps
       }), expanded && this.childCount > 0 && _jsx("ul", {
         "aria-label": name,
-        css: styles === null || styles === void 0 ? void 0 : styles.list,
+        css: styles?.list,
         role: "group",
         children: this.renderChildren()
       })]
     });
   }
-}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = allowedProps, _TreeCollection.contextType = TreeBrowserContext, _TreeCollection.defaultProps = {
-  collections: [],
-  items: [],
-  expanded: false,
-  selection: '',
-  size: 'medium',
-  variant: 'folderTree',
-  getItemProps: props => props,
-  getCollectionProps: props => props,
-  isCollectionFlattened: false
-}, _TreeCollection)) || _class);
+}) || _class);
 export default TreeCollection;
 export { TreeCollection };

package/es/TreeBrowser/v1/TreeCollection/styles.js

@@ -40,8 +40,10 @@ const list = keyframes`
  */
 
 const generateStyles = (componentTheme, props, state) => {
-  const size = props.size,
-    variant = props.variant;
+  const {
+    size,
+    variant
+  } = props;
   const sizeMap = {
     small: {
       indent: {

package/es/TreeBrowser/v1/TreeCollection/theme.js

@@ -28,18 +28,19 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const colors = theme.colors,
-    spacing = theme.spacing,
-    typography = theme.typography,
-    borders = theme.borders;
+  const {
+    colors,
+    spacing,
+    typography,
+    borders
+  } = theme;
   const componentVariables = {
-    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,
+    fontFamily: typography?.fontFamily,
+    baseSpacingSmall: spacing?.xSmall,
+    baseSpacingMedium: spacing?.small,
     baseSpacingLarge: '1rem',
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey4570
+    borderWidth: borders?.widthSmall,
+    borderColor: colors?.contrasts?.grey4570
   };
   return {
     ...componentVariables