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

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

@@ -1,4 +1,4 @@
-var _dec, _class, _TreeNode;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,37 +40,43 @@ A helper class used to render the :renderBeforeItems and :renderAfterItems
 in the TreeBrowser.
 **/
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeNode = class TreeNode 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 TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class TreeNode extends Component {
+  static displayName = "TreeNode";
+  static componentId = 'TreeBrowser.Node';
+  static allowedProps = allowedProps;
+  static contextType = TreeBrowserContext;
+  static defaultProps = {
+    size: 'medium',
+    variant: 'folderTree',
+    selected: false,
+    focused: 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
     });
   }
+  handleRef = el => {
+    if (el && typeof this.props.containerRef === 'function') {
+      this.props.containerRef(el.parentElement);
+    }
+    this.ref = el;
+  };
   renderItemImage() {
-    const _this$props3 = this.props,
-      thumbnail = _this$props3.thumbnail,
-      itemIcon = _this$props3.itemIcon,
-      styles = _this$props3.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",
@@ -80,35 +86,31 @@ let TreeNode = (_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;
   }
   render() {
-    const _this$props4 = this.props,
-      children = _this$props4.children,
-      styles = _this$props4.styles;
+    const {
+      children,
+      styles
+    } = this.props;
     return _jsx("div", {
       ref: this.handleRef,
       tabIndex: -1,
-      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
+      css: styles?.treeButton,
       "data-cid": "TreeNode",
       children: _jsxs("span", {
-        css: styles === null || styles === void 0 ? void 0 : styles.layout,
+        css: styles?.layout,
         children: [this.renderItemImage(), _jsx("span", {
-          css: styles === null || styles === void 0 ? void 0 : styles.node,
+          css: styles?.node,
           children: children
         })]
       })
     });
   }
-}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = allowedProps, _TreeNode.contextType = TreeBrowserContext, _TreeNode.defaultProps = {
-  size: 'medium',
-  variant: 'folderTree',
-  selected: false,
-  focused: false
-}, _TreeNode)) || _class);
+}) || _class);
 export default TreeNode;
 export { TreeNode };

package/es/TreeBrowser/v1/index.js

@@ -1,4 +1,5 @@
-var _dec, _class, _TreeBrowser;
+var _dec, _class;
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -41,61 +42,32 @@ category: components
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeBrowser = class TreeBrowser extends Component {
+let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class TreeBrowser extends Component {
+  static displayName = "TreeBrowser";
+  static componentId = 'TreeBrowser';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    size: 'medium',
+    variant: 'folderTree',
+    showRootCollection: true,
+    collectionIcon: IconFolderLine,
+    collectionIconExpanded: IconFolderLine,
+    itemIcon: IconDocumentLine,
+    getItemProps: props => props,
+    getCollectionProps: props => props,
+    defaultExpanded: [],
+    selectionType: 'none',
+    sortOrder: function () {
+      return 0;
+    },
+    animation: true
+  };
+  static Node = TreeNode;
+  static Collection = TreeCollection;
+  static Button = TreeButton;
+  ref = null;
   constructor(props) {
     super(props);
-    this.ref = null;
-    this.handleCollectionClick = (e, collection, expand = 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) => {
-      switch (event.keyCode) {
-        case keycode.codes.down:
-        case keycode.codes.j:
-          event.stopPropagation();
-          this.moveFocus(1);
-          break;
-        case keycode.codes.up:
-        case keycode.codes.k:
-          event.stopPropagation();
-          this.moveFocus(-1);
-          break;
-        case keycode.codes.home:
-        case keycode.codes.end:
-          event.stopPropagation();
-          this.homeOrEnd(event.keyCode);
-          break;
-        case keycode.codes.left:
-        case keycode.codes.right:
-          event.stopPropagation();
-          this.handleLeftOrRightArrow(event.keyCode, node);
-          break;
-        case keycode.codes.enter:
-        case keycode.codes.space:
-          event.stopPropagation();
-          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;
-      return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
-    };
     if (typeof this.props.expanded === 'undefined') {
       this.state = {
         expanded: this.props.defaultExpanded,
@@ -108,20 +80,65 @@ 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);
+    this.props.makeStyles?.();
   }
   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);
+    this.props.makeStyles?.();
   }
   get _root() {
     return this.ref;
   }
+  handleCollectionClick = (e, collection, expand = true) => {
+    e.stopPropagation();
+    const {
+      onCollectionClick
+    } = this.props;
+    if (expand) this.expandOrCollapseNode(collection);
+    onCollectionClick?.(collection.id, collection); // TODO: this should pass the event as the first arg
+    this.handleSelection(collection.id, 'collection');
+  };
+  handleItemClick = (e, item) => {
+    e.stopPropagation();
+    this.props.onItemClick?.(item);
+    this.handleSelection(item.id, 'item');
+  };
+  handleKeyDown = (event, node) => {
+    switch (event.keyCode) {
+      case keycode.codes.down:
+      case keycode.codes.j:
+        event.stopPropagation();
+        this.moveFocus(1);
+        break;
+      case keycode.codes.up:
+      case keycode.codes.k:
+        event.stopPropagation();
+        this.moveFocus(-1);
+        break;
+      case keycode.codes.home:
+      case keycode.codes.end:
+        event.stopPropagation();
+        this.homeOrEnd(event.keyCode);
+        break;
+      case keycode.codes.left:
+      case keycode.codes.right:
+        event.stopPropagation();
+        this.handleLeftOrRightArrow(event.keyCode, node);
+        break;
+      case keycode.codes.enter:
+      case keycode.codes.space:
+        event.stopPropagation();
+        this.handleActivation(event, node);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
   get collections() {
-    const _this$props5 = this.props,
-      collections = _this$props5.collections,
-      rootId = _this$props5.rootId;
+    const {
+      collections,
+      rootId
+    } = this.props;
     if (typeof rootId !== 'undefined') {
       return [collections[rootId]];
     } else {
@@ -135,8 +152,7 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     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);
+    this.props.onCollectionToggle?.(collection);
     if (typeof this.props.expanded === 'undefined') {
       this.setState((state, props) => {
         const expanded = [...this.getExpanded(state, props)];
@@ -153,7 +169,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     }
   }
   handleSelection(id, type) {
-    const selectionType = this.props.selectionType;
+    const {
+      selectionType
+    } = this.props;
     selectionType === 'single' && this.setState(state => {
       const selection = `${type}_${id}`;
       if (state.selection !== selection) {
@@ -238,6 +256,13 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       return [];
     }
   }
+  getIsFlattened = collection => {
+    const {
+      rootId,
+      showRootCollection
+    } = this.props;
+    return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
+  };
   getCollectionProps(collection) {
     return {
       id: collection.id,
@@ -271,13 +296,15 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     }, i));
   }
   render() {
-    const styles = this.props.styles;
+    const {
+      styles
+    } = this.props;
     return _jsx(TreeBrowserContext.Provider, {
       value: {
         animation: this.props.animation
       },
       children: _jsx("ul", {
-        css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
+        css: styles?.treeBrowser,
         tabIndex: 0,
         role: "tree",
         onKeyDown: this.handleKeyDown,
@@ -290,21 +317,6 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       })
     });
   }
-}, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = allowedProps, _TreeBrowser.defaultProps = {
-  size: 'medium',
-  variant: 'folderTree',
-  showRootCollection: true,
-  collectionIcon: IconFolderLine,
-  collectionIconExpanded: IconFolderLine,
-  itemIcon: IconDocumentLine,
-  getItemProps: props => props,
-  getCollectionProps: props => props,
-  defaultExpanded: [],
-  selectionType: 'none',
-  sortOrder: function () {
-    return 0;
-  },
-  animation: true
-}, _TreeBrowser.Node = TreeNode, _TreeBrowser.Collection = TreeCollection, _TreeBrowser.Button = TreeButton, _TreeBrowser)) || _class);
+}) || _class);
 export default TreeBrowser;
 export { TreeBrowser };

package/es/TreeBrowser/v1/theme.js

@@ -28,14 +28,15 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const colors = theme.colors,
-    borders = theme.borders;
+  const {
+    colors,
+    borders
+  } = theme;
   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$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
+    borderRadius: borders?.radiusMedium,
+    focusOutlineWidth: borders?.widthMedium,
+    focusOutlineColor: colors?.contrasts?.blue4570,
+    focusOutlineStyle: borders?.style
   };
   return {
     ...componentVariables

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

@@ -1,4 +1,4 @@
-var _dec, _class, _TreeButton;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -44,52 +44,42 @@ parent: TreeBrowser
 id: TreeBrowser.Button
 ---
 **/
-let TreeButton = (_dec = withStyle(generateStyles, 'TreeBrowserTreeButton'), _dec(_class = (_TreeButton = class TreeButton extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.state = {
-      isHovered: false
-    };
-    this.handleRef = el => {
-      if (el && typeof this.props.containerRef === 'function') {
-        this.props.containerRef(el.parentElement);
-      }
-      this.ref = el;
-    };
-    this.handleMouseEnter = () => {
-      if (this.props.hoverable) {
-        this.setState({
-          isHovered: true
-        });
-      }
-    };
-    this.handleMouseLeave = () => {
-      if (this.props.hoverable) {
-        this.setState({
-          isHovered: false
-        });
-      }
-    };
-  }
+let TreeButton = (_dec = withStyle(generateStyles, 'TreeBrowserTreeButton'), _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,
+    hoverable: true
+  };
+  ref = null;
+  state = {
+    isHovered: false
+  };
   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,
       hoverable: this.props.hoverable
     });
   }
   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,
       hoverable: this.props.hoverable
     });
   }
   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", {
@@ -106,8 +96,12 @@ let TreeButton = (_dec = withStyle(generateStyles, 'TreeBrowserTreeButton'), _de
     });
   }
   getIconColor() {
-    const selected = this.props.selected;
-    const isHovered = this.state.isHovered;
+    const {
+      selected
+    } = this.props;
+    const {
+      isHovered
+    } = this.state;
 
     // Priority: selected > hover > default
     if (selected) return 'onColor';
@@ -115,7 +109,9 @@ let TreeButton = (_dec = withStyle(generateStyles, 'TreeBrowserTreeButton'), _de
     return 'baseColor';
   }
   renderImage() {
-    const type = this.props.type;
+    const {
+      type
+    } = this.props;
     switch (type) {
       case 'collection':
         return this.renderCollectionIcon();
@@ -124,36 +120,38 @@ let TreeButton = (_dec = withStyle(generateStyles, 'TreeBrowserTreeButton'), _de
       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,
-      size = _this$props3.size;
+    const {
+      expanded,
+      collectionIcon,
+      collectionIconExpanded,
+      styles,
+      size
+    } = this.props;
     if (collectionIcon || collectionIconExpanded) {
       const icon = expanded ? collectionIconExpanded : collectionIcon;
       const iconSize = treeBrowserSizeToIconSize[size];
       const iconColor = this.getIconColor();
       const iconElement = renderIconWithProps(icon, iconSize, iconColor);
       return _jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        css: styles?.icon,
         children: iconElement
       });
     }
-    return void 0;
+    return undefined;
   }
   renderItemImage() {
-    const _this$props4 = this.props,
-      thumbnail = _this$props4.thumbnail,
-      itemIcon = _this$props4.itemIcon,
-      styles = _this$props4.styles,
-      size = _this$props4.size;
+    const {
+      thumbnail,
+      itemIcon,
+      styles,
+      size
+    } = 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",
@@ -166,37 +164,50 @@ let TreeButton = (_dec = withStyle(generateStyles, 'TreeBrowserTreeButton'), _de
       const iconColor = this.getIconColor();
       const iconElement = renderIconWithProps(itemIcon, iconSize, iconColor);
       return _jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        css: styles?.icon,
         children: iconElement
       });
     }
-    return void 0;
+    return undefined;
   }
+  handleRef = el => {
+    if (el && typeof this.props.containerRef === 'function') {
+      this.props.containerRef(el.parentElement);
+    }
+    this.ref = el;
+  };
+  handleMouseEnter = () => {
+    if (this.props.hoverable) {
+      this.setState({
+        isHovered: true
+      });
+    }
+  };
+  handleMouseLeave = () => {
+    if (this.props.hoverable) {
+      this.setState({
+        isHovered: false
+      });
+    }
+  };
   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",
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       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,
-  hoverable: true
-}, _TreeButton)) || _class);
+}) || _class);
 export default TreeButton;
 export { TreeButton };

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

@@ -45,10 +45,12 @@ const transform = keyframes`
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyles = (componentTheme, props, sharedTokens, state) => {
-  const size = props.size,
-    variant = props.variant,
-    selected = props.selected,
-    level = props.level;
+  const {
+    size,
+    variant,
+    selected,
+    level
+  } = props;
   const isRootButton = level && level === 1;
   const sizeMap = {
     small: {
@@ -211,7 +213,7 @@ const generateStyles = (componentTheme, props, sharedTokens, state) => {
       borderRadius: componentTheme.borderRadius,
       position: 'relative',
       zIndex: 1,
-      ...(state !== null && state !== void 0 && state.animation ? {
+      ...(state?.animation ? {
         transform: 'translate3d(-2%, 0, 0)',
         opacity: 0.01,
         transformOrigin: 'left center',
@@ -223,7 +225,7 @@ const generateStyles = (componentTheme, props, sharedTokens, state) => {
       } : {}),
       outline: '0',
       padding: '0',
-      ...(sharedTokens !== null && sharedTokens !== void 0 && sharedTokens.focusOutline ? calcFocusOutlineStyles(sharedTokens.focusOutline) : {}),
+      ...(sharedTokens?.focusOutline ? calcFocusOutlineStyles(sharedTokens.focusOutline) : {}),
       ...(variant === 'folderTree' && !isRootButton && {
         '&::before': {
           content: '""',
@@ -240,10 +242,10 @@ const generateStyles = (componentTheme, props, sharedTokens, state) => {
           ...sizeMap[size][variant].before
         },
         '&:hover::before': {
-          visibility: state !== null && state !== void 0 && state.hoverable ? 'hidden' : 'visible'
+          visibility: state?.hoverable ? 'hidden' : 'visible'
         }
       }),
-      ...((state === null || state === void 0 ? void 0 : state.hoverable) !== false && {
+      ...(state?.hoverable !== false && {
         '&:hover': {
           backgroundColor: selected ? componentTheme.selectedBackgroundColor : componentTheme.hoverBackgroundColor,
           '[class$=-treeButton__textName], [class$=-treeButton__textDescriptor], [class$=-treeButton__node]': {