@instructure/ui-tree-browser 10.16.1-snapshot-0 → 10.16.1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser
 

package/es/TreeBrowser/TreeButton/index.js

@@ -23,12 +23,11 @@ var _dec, _dec2, _class, _TreeButton;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { Img } from '@instructure/ui-img';
 import { callRenderProp } from '@instructure/ui-react-utils';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -41,6 +40,7 @@ parent: TreeBrowser
 id: TreeBrowser.Button
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_TreeButton = class TreeButton extends Component {
   constructor(...args) {
     super(...args);
@@ -64,16 +64,20 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     const name = props.name,
       descriptor = props.descriptor,
       styles = props.styles;
-    return jsx("span", {
-      css: styles.layout
-    }, this.renderImage(), jsx("span", {
-      css: styles.text
-    }, jsx("span", {
-      css: styles.textName
-    }, name), descriptor ? jsx("span", {
-      css: styles.textDescriptor,
-      title: descriptor
-    }, descriptor) : null));
+    return _jsxs("span", {
+      css: styles.layout,
+      children: [this.renderImage(), _jsxs("span", {
+        css: styles.text,
+        children: [_jsx("span", {
+          css: styles.textName,
+          children: name
+        }), descriptor ? _jsx("span", {
+          css: styles.textDescriptor,
+          title: descriptor,
+          children: descriptor
+        }) : null]
+      })]
+    });
   }
   renderImage() {
     const type = this.props.type;
@@ -94,9 +98,10 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       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 _jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: callRenderProp(expanded ? collectionIconExpanded : collectionIcon)
+      });
     }
     return void 0;
   }
@@ -106,18 +111,20 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       itemIcon = _this$props4.itemIcon,
       styles = _this$props4.styles;
     if (thumbnail) {
-      return jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
-      }, jsx(Img, {
-        src: thumbnail,
-        constrain: "cover",
-        alt: ""
-      }));
+      return _jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
+        children: _jsx(Img, {
+          src: thumbnail,
+          constrain: "cover",
+          alt: ""
+        })
+      });
     }
     if (itemIcon) {
-      return jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon
-      }, callRenderProp(itemIcon));
+      return _jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: callRenderProp(itemIcon)
+      });
     }
     return void 0;
   }
@@ -127,12 +134,13 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       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", {
+    return _jsx("button", {
       ref: this.handleRef,
       tabIndex: -1,
       type: "button",
-      css: styles === null || styles === void 0 ? void 0 : styles.treeButton
-    }, buttonContent);
+      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
+      children: buttonContent
+    });
   }
 }, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = allowedProps, _TreeButton.propTypes = propTypes, _TreeButton.defaultProps = {
   type: 'treeButton',

package/es/TreeBrowser/TreeCollection/index.js

@@ -23,16 +23,16 @@ var _dec, _dec2, _class, _TreeCollection;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { safeCloneElement } from '@instructure/ui-react-utils';
 import { TreeButton } from '../TreeButton';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 /**
 ---
 parent: TreeBrowser
@@ -144,17 +144,19 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       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 => {
-      return this.renderCollectionNode(collection, position++);
-    }), !compareFunc && items.map(item => {
-      return this.renderItemNode(item, position++);
-    }), compareFunc && sortedChildren.map(child => {
-      if (child.type === 'collection') {
-        return this.renderCollectionNode(child, position++);
-      } else {
-        return this.renderItemNode(child, position++);
-      }
-    }), renderAfterItems && this.renderCollectionChildren(id, renderAfterItems, position++, 'after'));
+    return _jsxs(_Fragment, {
+      children: [renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), !compareFunc && collections.map(collection => {
+        return this.renderCollectionNode(collection, position++);
+      }), !compareFunc && items.map(item => {
+        return this.renderItemNode(item, position++);
+      }), compareFunc && sortedChildren.map(child => {
+        if (child.type === 'collection') {
+          return this.renderCollectionNode(child, position++);
+        } else {
+          return this.renderItemNode(child, position++);
+        }
+      }), renderAfterItems && this.renderCollectionChildren(id, renderAfterItems, position++, 'after')]
+    });
   }
   renderCollectionChildren(collectionId, child, position, keyword) {
     const _this$props8 = this.props,
@@ -177,17 +179,16 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       focused: this.state.focused === `child_${key}`,
       level: this.itemsLevel
     });
-    return jsx("li", Object.assign({
+    return _jsx("li", {
       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,
       tabIndex: -1,
-      key: key,
       "aria-posinset": position,
       "aria-setsize": this.childCount,
-      "aria-level": this.itemsLevel
-    }, ariaSelected, {
+      "aria-level": this.itemsLevel,
+      ...ariaSelected,
       onClick: e => {
         if (typeof child.props.onClick === 'function') {
           child.props.onClick(e);
@@ -203,11 +204,13 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
           onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash);
         }
       },
-      onBlur: e => this.handleBlur(e, itemHash)
-    }), safeCloneElement(child, itemProps));
+      onBlur: e => this.handleBlur(e, itemHash),
+      children: safeCloneElement(child, itemProps)
+    }, key);
   }
   renderCollectionNode(collection, position) {
-    return jsx(TreeCollection, Object.assign({}, this.props, {
+    return _createElement(TreeCollection, {
+      ...this.props,
       key: `c${position}`,
       id: collection.id,
       name: collection.name,
@@ -224,7 +227,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       isCollectionFlattened: false // only the root needs to be flattened
       ,
       compareFunc: collection.compareFunc
-    }));
+    });
   }
   renderItemNode(item, position) {
     const _this$props9 = this.props,
@@ -251,8 +254,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       focused: this.state.focused === `item_${item.id}`,
       type: 'item'
     });
-    return jsx("li", Object.assign({
-      key: `i${position}`,
+    return _jsx("li", {
       tabIndex: -1
       /* eslint-disable-next-line jsx-a11y/role-has-required-aria-props */,
       role: "treeitem",
@@ -264,8 +266,12 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       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), jsx(TreeButton, itemProps));
+      onBlur: e => this.handleBlur(e, itemHash),
+      ...ariaSelected,
+      children: _jsx(TreeButton, {
+        ...itemProps
+      })
+    }, `i${position}`);
   }
   getCommonButtonProps() {
     return {
@@ -306,7 +312,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       'aria-selected': void 0
     };
     if (this.props.selection) ariaSelected['aria-selected'] = this.props.selection === `collection_${id}`;
-    return isCollectionFlattened ? this.renderChildren() : jsx("li", Object.assign({
+    return isCollectionFlattened ? this.renderChildren() : _jsxs("li", {
       ref: el => {
         this.ref = el;
       },
@@ -328,12 +334,17 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       onBlur: e => this.handleBlur(e, {
         id: id,
         type: 'collection'
-      })
-    }, ariaSelected), jsx(TreeButton, collectionProps), expanded && this.childCount > 0 && jsx("ul", {
-      "aria-label": name,
-      css: styles === null || styles === void 0 ? void 0 : styles.list,
-      role: "group"
-    }, this.renderChildren()));
+      }),
+      ...ariaSelected,
+      children: [_jsx(TreeButton, {
+        ...collectionProps
+      }), expanded && this.childCount > 0 && _jsx("ul", {
+        "aria-label": name,
+        css: styles === null || styles === void 0 ? void 0 : styles.list,
+        role: "group",
+        children: this.renderChildren()
+      })]
+    });
   }
 }, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = allowedProps, _TreeCollection.propTypes = propTypes, _TreeCollection.defaultProps = {
   collections: [],

package/es/TreeBrowser/TreeNode/index.js

@@ -23,12 +23,11 @@ var _dec, _dec2, _class, _TreeNode;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { Img } from '@instructure/ui-img';
 import { callRenderProp } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyles from '../TreeButton/styles';
 import generateComponentTheme from '../TreeButton/theme';
 import { allowedProps, propTypes } from './props';
@@ -43,6 +42,7 @@ id: TreeBrowser.Node
 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), _dec2 = testable(), _dec(_class = _dec2(_class = (_TreeNode = class TreeNode extends Component {
   constructor(...args) {
     super(...args);
@@ -68,18 +68,20 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
       itemIcon = _this$props3.itemIcon,
       styles = _this$props3.styles;
     if (thumbnail) {
-      return jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
-      }, jsx(Img, {
-        src: thumbnail,
-        constrain: "cover",
-        alt: ""
-      }));
+      return _jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
+        children: _jsx(Img, {
+          src: thumbnail,
+          constrain: "cover",
+          alt: ""
+        })
+      });
     }
     if (itemIcon) {
-      return jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon
-      }, callRenderProp(itemIcon));
+      return _jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: callRenderProp(itemIcon)
+      });
     }
     return void 0;
   }
@@ -87,15 +89,18 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
     const _this$props4 = this.props,
       children = _this$props4.children,
       styles = _this$props4.styles;
-    return jsx("div", {
+    return _jsx("div", {
       ref: this.handleRef,
       tabIndex: -1,
-      css: styles === null || styles === void 0 ? void 0 : styles.treeButton
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.layout
-    }, this.renderItemImage(), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.node
-    }, children)));
+      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
+      children: _jsxs("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.layout,
+        children: [this.renderItemImage(), _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.node,
+          children: children
+        })]
+      })
+    });
   }
 }, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = allowedProps, _TreeNode.propTypes = propTypes, _TreeNode.defaultProps = {
   size: 'medium',

package/es/TreeBrowser/index.js

@@ -23,14 +23,12 @@ var _dec, _dec2, _class, _TreeBrowser;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-
 import { Component } from 'react';
 import keycode from 'keycode';
 import { IconFolderLine, IconDocumentLine } from '@instructure/ui-icons';
 import { omitProps, pickProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { TreeCollection } from './TreeCollection';
 import { TreeButton } from './TreeButton';
 import { TreeNode } from './TreeNode';
@@ -43,6 +41,7 @@ import { allowedProps, propTypes } from './props';
 category: components
 ---
 **/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_TreeBrowser = class TreeBrowser extends Component {
   constructor(props) {
     super(props);
@@ -259,9 +258,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
     return expanded.findIndex(expanded => String(expanded) === String(id));
   }
   renderRoot() {
-    return this.collections.sort(this.props.sortOrder).map((collection, i) => jsx(TreeCollection, Object.assign({
-      key: i
-    }, pickProps(omitProps(this.props), TreeCollection.allowedProps), this.getCollectionProps(collection), {
+    return this.collections.sort(this.props.sortOrder).map((collection, i) => _jsx(TreeCollection, {
+      ...pickProps(omitProps(this.props), TreeCollection.allowedProps),
+      ...this.getCollectionProps(collection),
       selection: this.state.selection,
       onItemClick: this.handleItemClick,
       onCollectionClick: this.handleCollectionClick,
@@ -270,11 +269,11 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       level: 1,
       position: 1,
       renderContent: this.props.renderContent
-    })));
+    }, i));
   }
   render() {
     const styles = this.props.styles;
-    return jsx("ul", {
+    return _jsx("ul", {
       css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
       tabIndex: 0,
       role: "tree",
@@ -282,8 +281,9 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
       ref: el => {
         this.ref = el;
       },
-      "aria-label": this.props.treeLabel
-    }, this.renderRoot());
+      "aria-label": this.props.treeLabel,
+      children: this.renderRoot()
+    });
   }
 }, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = allowedProps, _TreeBrowser.propTypes = propTypes, _TreeBrowser.defaultProps = {
   size: 'medium',

package/lib/TreeBrowser/TreeButton/index.js

@@ -13,6 +13,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class, _TreeButton;
 /*
  * The MIT License (MIT)
@@ -37,7 +38,6 @@ var _dec, _dec2, _class, _TreeButton;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 /**
 ---
@@ -68,16 +68,20 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
     const name = props.name,
       descriptor = props.descriptor,
       styles = props.styles;
-    return (0, _emotion.jsx)("span", {
-      css: styles.layout
-    }, this.renderImage(), (0, _emotion.jsx)("span", {
-      css: styles.text
-    }, (0, _emotion.jsx)("span", {
-      css: styles.textName
-    }, name), descriptor ? (0, _emotion.jsx)("span", {
-      css: styles.textDescriptor,
-      title: descriptor
-    }, descriptor) : null));
+    return (0, _jsxRuntime.jsxs)("span", {
+      css: styles.layout,
+      children: [this.renderImage(), (0, _jsxRuntime.jsxs)("span", {
+        css: styles.text,
+        children: [(0, _jsxRuntime.jsx)("span", {
+          css: styles.textName,
+          children: name
+        }), descriptor ? (0, _jsxRuntime.jsx)("span", {
+          css: styles.textDescriptor,
+          title: descriptor,
+          children: descriptor
+        }) : null]
+      })]
+    });
   }
   renderImage() {
     const type = this.props.type;
@@ -98,9 +102,10 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
       collectionIconExpanded = _this$props3.collectionIconExpanded,
       styles = _this$props3.styles;
     if (collectionIcon || collectionIconExpanded) {
-      return (0, _emotion.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon
-      }, (0, _callRenderProp.callRenderProp)(expanded ? collectionIconExpanded : collectionIcon));
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: (0, _callRenderProp.callRenderProp)(expanded ? collectionIconExpanded : collectionIcon)
+      });
     }
     return void 0;
   }
@@ -110,18 +115,20 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
       itemIcon = _this$props4.itemIcon,
       styles = _this$props4.styles;
     if (thumbnail) {
-      return (0, _emotion.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail
-      }, (0, _emotion.jsx)(_Img.Img, {
-        src: thumbnail,
-        constrain: "cover",
-        alt: ""
-      }));
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.thumbnail,
+        children: (0, _jsxRuntime.jsx)(_Img.Img, {
+          src: thumbnail,
+          constrain: "cover",
+          alt: ""
+        })
+      });
     }
     if (itemIcon) {
-      return (0, _emotion.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.icon
-      }, (0, _callRenderProp.callRenderProp)(itemIcon));
+      return (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.icon,
+        children: (0, _callRenderProp.callRenderProp)(itemIcon)
+      });
     }
     return void 0;
   }
@@ -131,12 +138,13 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
       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 (0, _emotion.jsx)("button", {
+    return (0, _jsxRuntime.jsx)("button", {
       ref: this.handleRef,
       tabIndex: -1,
       type: "button",
-      css: styles === null || styles === void 0 ? void 0 : styles.treeButton
-    }, buttonContent);
+      css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
+      children: buttonContent
+    });
   }
 }, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = _props.allowedProps, _TreeButton.propTypes = _props.propTypes, _TreeButton.defaultProps = {
   type: 'treeButton',