@instructure/ui-tree-browser 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser

package/es/TreeBrowser/TreeBrowserLocator.js

@@ -22,10 +22,12 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { TreeBrowser } from './index'; // TODO: if we make a TreeBrowserItem component + locator we could use it here.
+import { TreeBrowser } from './index';
 
-const TreeBrowserItemLocator = 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
+// TODO: if we make a TreeBrowserItem component + locator we could use it here.
+const TreeBrowserItemLocator = 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
 export const TreeBrowserLocator = locator(TreeBrowser.selector, {
   findAllItems: function () {
     return TreeBrowserItemLocator.findAll(...arguments);

package/es/TreeBrowser/TreeButton/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -32,7 +31,9 @@ import { callRenderProp } from '@instructure/ui-react-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
-import { allowedProps, propTypes } from './props'; // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
+import { allowedProps, propTypes } from './props';
+
+// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 
 /**
 ---
@@ -41,37 +42,29 @@ id: TreeBrowser.Button
 ---
 @tsProps
 **/
-
 let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeButton extends Component {
   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 jsx("span", {
       css: styles.layout
     }, this.renderImage(), jsx("span", {
@@ -83,46 +76,36 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       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 jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, 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 jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
@@ -132,22 +115,19 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
         alt: ""
       }));
     }
-
     if (itemIcon) {
       return jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, 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 jsx("button", {
       ref: this.handleRef,
       tabIndex: -1,
@@ -155,7 +135,6 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       css: styles === null || styles === void 0 ? void 0 : styles.treeButton
     }, buttonContent);
   }
-
 }, _class2.displayName = "TreeButton", _class2.componentId = 'TreeBrowser.Button', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   type: 'treeButton',
   size: 'medium',

package/es/TreeBrowser/TreeButton/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';
 const propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/es/TreeBrowser/TreeButton/styles.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { keyframes } from '@instructure/emotion';
 const transform = keyframes`
   50% {
@@ -42,13 +43,12 @@ const transform = 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: {
@@ -324,5 +324,4 @@ const generateStyles = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyles;

package/es/TreeBrowser/TreeButton/theme.js

@@ -29,10 +29,10 @@
  */
 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'],
@@ -70,9 +70,9 @@ 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]
   };
 };
-
 export default generateComponentTheme;

package/es/TreeBrowser/TreeCollection/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +24,6 @@ var _dec, _dec2, _class, _class2;
  */
 
 /** @jsx jsx */
-
 /** @jsxFrag React.Fragment */
 // eslint-disable-next-line no-unused-vars
 import React, { Component } from 'react';
@@ -36,7 +34,6 @@ import { TreeButton } from '../TreeButton';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
-
 /**
 ---
 parent: TreeBrowser
@@ -48,104 +45,90 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
   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'
       };
     }) : [];
@@ -153,15 +136,14 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     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 jsx(React.Fragment, null, renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), !compareFunc && collections.map(collection => {
@@ -176,20 +158,17 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       }
     }), 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'
@@ -228,7 +207,6 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       onBlur: e => this.handleBlur(e, itemHash)
     }), safeCloneElement(child, itemProps));
   }
-
   renderCollectionNode(collection, position) {
     return jsx(TreeCollection, Object.assign({}, this.props, {
       key: `c${position}`,
@@ -249,25 +227,23 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       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,
@@ -291,7 +267,6 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       onBlur: e => this.handleBlur(e, itemHash)
     }, ariaSelected), jsx(TreeButton, itemProps));
   }
-
   getCommonButtonProps() {
     return {
       id: this.props.id,
@@ -304,20 +279,20 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       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,
@@ -357,7 +332,6 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       role: "group"
     }, this.renderChildren()));
   }
-
 }, _class2.displayName = "TreeCollection", _class2.componentId = 'TreeBrowser.Collection', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   collections: [],
   items: [],

package/es/TreeBrowser/TreeCollection/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 { Children } from '@instructure/ui-prop-types';
 import { TreeNode } from '../TreeNode';

package/es/TreeBrowser/TreeCollection/styles.js

@@ -21,11 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { keyframes } from '@instructure/emotion';
 const list = keyframes`
   to {
     transform: scaleY(1);
   }`;
+
 /**
  *  ---
  * private: true
@@ -39,7 +41,7 @@ const list = keyframes`
 
 const generateStyles = (componentTheme, props) => {
   const size = props.size,
-        variant = props.variant;
+    variant = props.variant;
   const sizeMap = {
     small: {
       indent: {
@@ -125,5 +127,4 @@ const generateStyles = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyles;

package/es/TreeBrowser/TreeCollection/theme.js

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

package/es/TreeBrowser/TreeNode/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -33,7 +32,9 @@ import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyles from '../TreeButton/styles';
 import generateComponentTheme from '../TreeButton/theme';
-import { allowedProps, propTypes } from './props'; // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
+import { allowedProps, propTypes } from './props';
+
+// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 
 /**
 ---
@@ -44,39 +45,30 @@ id: TreeBrowser.Node
 A helper class used to render the :renderBeforeItems and :renderAfterItems
 in the TreeBrowser.
 **/
-
 let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TreeNode extends Component {
   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 jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
@@ -86,20 +78,17 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
         alt: ""
       }));
     }
-
     if (itemIcon) {
       return jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.icon
       }, 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 jsx("div", {
       ref: this.handleRef,
       tabIndex: -1,
@@ -110,7 +99,6 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
       css: styles === null || styles === void 0 ? void 0 : styles.node
     }, children)));
   }
-
 }, _class2.displayName = "TreeNode", _class2.componentId = 'TreeBrowser.Node', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   size: 'medium',
   variant: 'folderTree',

package/es/TreeBrowser/TreeNode/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';
 const propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),