@instructure/ui-tree-browser 10.25.1-snapshot-4 → 10.25.1-snapshot-6

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.
 
-## [10.25.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.25.1-snapshot-4) (2025-09-25)
+## [10.25.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.25.1-snapshot-6) (2025-09-26)
 
-**Note:** Version bump only for package @instructure/ui-tree-browser
+
+### Features
+
+* **ui-tree-browser:** add animation prop to TreeBrowser ([5906a0a](https://github.com/instructure/instructure-ui/commit/5906a0acb19564db6b54d0088a7a356b02533c13))
 
 
 

package/es/TreeBrowser/TreeBrowserContext.js

@@ -0,0 +1,39 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { createContext } from 'react';
+/**
+ * ---
+ * category: utilities/react
+ * ---
+ * React context created by the `TreeBrowser` component to hold its data which are
+ * read by its children.
+ *
+ * @module
+ */
+const TreeBrowserContext = /*#__PURE__*/createContext({
+  animation: true
+});
+export default TreeBrowserContext;
+export { TreeBrowserContext };

package/es/TreeBrowser/TreeButton/index.js

@@ -31,6 +31,7 @@ import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import TreeBrowserContext from '../TreeBrowserContext';
 
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 
@@ -53,12 +54,16 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     };
   }
   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);
+    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
+    });
   }
   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);
+    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
+    });
   }
   defaultContentRenderer(props) {
     const name = props.name,
@@ -142,7 +147,7 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       children: buttonContent
     });
   }
-}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = allowedProps, _TreeButton.propTypes = propTypes, _TreeButton.defaultProps = {
+}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = allowedProps, _TreeButton.propTypes = propTypes, _TreeButton.contextType = TreeBrowserContext, _TreeButton.defaultProps = {
   type: 'treeButton',
   size: 'medium',
   variant: 'folderTree',

package/es/TreeBrowser/TreeButton/styles.js

@@ -41,9 +41,10 @@ const transform = keyframes`
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state 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 generateStyles = (componentTheme, props, state) => {
   const size = props.size,
     variant = props.variant,
     selected = props.selected,
@@ -217,14 +218,16 @@ const generateStyles = (componentTheme, props) => {
       borderRadius: componentTheme.borderRadius,
       position: 'relative',
       zIndex: 1,
-      transform: 'translate3d(-2%, 0, 0)',
-      opacity: 0.01,
-      transformOrigin: 'left center',
-      animationName: transform,
-      animationDuration: '0.2s',
-      animationFillMode: 'forwards',
-      animationTimingFunction: 'ease-out',
-      animationDelay: '0.2s',
+      ...(state.animation ? {
+        transform: 'translate3d(-2%, 0, 0)',
+        opacity: 0.01,
+        transformOrigin: 'left center',
+        animationName: transform,
+        animationDuration: '0.2s',
+        animationFillMode: 'forwards',
+        animationTimingFunction: 'ease-out',
+        animationDelay: '0.2s'
+      } : {}),
       outline: '0',
       padding: '0',
       ...(variant === 'folderTree' && !isRootButton && {

package/es/TreeBrowser/TreeCollection/index.js

@@ -31,6 +31,7 @@ import { TreeButton } from '../TreeButton';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import TreeBrowserContext from '../TreeBrowserContext';
 import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 /**
@@ -88,12 +89,16 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
     };
   }
   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);
+    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
+    });
   }
   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);
+    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
+    });
   }
   get itemsLevel() {
     const _this$props5 = this.props,
@@ -346,7 +351,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
       })]
     });
   }
-}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = allowedProps, _TreeCollection.propTypes = propTypes, _TreeCollection.defaultProps = {
+}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = allowedProps, _TreeCollection.propTypes = propTypes, _TreeCollection.contextType = TreeBrowserContext, _TreeCollection.defaultProps = {
   collections: [],
   items: [],
   expanded: false,

package/es/TreeBrowser/TreeCollection/styles.js

@@ -39,7 +39,7 @@ const list = keyframes`
  * @return {Object} The final style object, which will be used in the component
  */
 
-const generateStyles = (componentTheme, props) => {
+const generateStyles = (componentTheme, props, state) => {
   const size = props.size,
     variant = props.variant;
   const sizeMap = {
@@ -106,12 +106,14 @@ const generateStyles = (componentTheme, props) => {
           bottom: '1.1875rem',
           insetInlineStart: '0',
           insetInlineEnd: 'auto',
-          transform: 'scaleY(0.01)',
-          transformOrigin: 'center top',
-          animationName: list,
-          animationDuration: '0.2s',
-          animationFillMode: 'forwards',
-          animationTimingFunction: 'ease-out',
+          ...(state.animation ? {
+            transform: 'scaleY(0.01)',
+            transformOrigin: 'center top',
+            animationName: list,
+            animationDuration: '0.2s',
+            animationFillMode: 'forwards',
+            animationTimingFunction: 'ease-out'
+          } : {}),
           pointerEvents: 'none',
           width: componentTheme.borderWidth,
           background: componentTheme.borderColor

package/es/TreeBrowser/TreeNode/index.js

@@ -31,6 +31,7 @@ import { withStyle } from '@instructure/emotion';
 import generateStyles from '../TreeButton/styles';
 import generateComponentTheme from '../TreeButton/theme';
 import { allowedProps, propTypes } from './props';
+import TreeBrowserContext from '../TreeBrowserContext';
 
 // Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
 
@@ -55,12 +56,16 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
     };
   }
   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);
+    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
+    });
   }
   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);
+    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
+    });
   }
   renderItemImage() {
     const _this$props3 = this.props,
@@ -102,7 +107,7 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
       })
     });
   }
-}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = allowedProps, _TreeNode.propTypes = propTypes, _TreeNode.defaultProps = {
+}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = allowedProps, _TreeNode.propTypes = propTypes, _TreeNode.contextType = TreeBrowserContext, _TreeNode.defaultProps = {
   size: 'medium',
   variant: 'folderTree',
   selected: false,

package/es/TreeBrowser/index.js

@@ -35,6 +35,7 @@ import { TreeNode } from './TreeNode';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+import TreeBrowserContext from './TreeBrowserContext';
 
 /**
 ---
@@ -273,16 +274,21 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   }
   render() {
     const styles = this.props.styles;
-    return _jsx("ul", {
-      css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
-      tabIndex: 0,
-      role: "tree",
-      onKeyDown: this.handleKeyDown,
-      ref: el => {
-        this.ref = el;
+    return _jsx(TreeBrowserContext.Provider, {
+      value: {
+        animation: this.props.animation
       },
-      "aria-label": this.props.treeLabel,
-      children: this.renderRoot()
+      children: _jsx("ul", {
+        css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
+        tabIndex: 0,
+        role: "tree",
+        onKeyDown: this.handleKeyDown,
+        ref: el => {
+          this.ref = el;
+        },
+        "aria-label": this.props.treeLabel,
+        children: this.renderRoot()
+      })
     });
   }
 }, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = allowedProps, _TreeBrowser.propTypes = propTypes, _TreeBrowser.defaultProps = {
@@ -298,7 +304,8 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
   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/props.js

@@ -54,7 +54,8 @@ const propTypes = {
   onItemClick: PropTypes.func,
   treeLabel: PropTypes.string,
   renderContent: PropTypes.func,
-  sortOrder: PropTypes.func
+  sortOrder: PropTypes.func,
+  animation: PropTypes.bool
 };
-const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder'];
+const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder', 'animation'];
 export { propTypes, allowedProps };

package/lib/TreeBrowser/TreeBrowserContext.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TreeBrowserContext = void 0;
+var _react = require("react");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * category: utilities/react
+ * ---
+ * React context created by the `TreeBrowser` component to hold its data which are
+ * read by its children.
+ *
+ * @module
+ */
+const TreeBrowserContext = exports.TreeBrowserContext = /*#__PURE__*/(0, _react.createContext)({
+  animation: true
+});
+var _default = exports.default = TreeBrowserContext;

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 _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class, _TreeButton;
 /*
@@ -57,12 +58,16 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
     };
   }
   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);
+    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
+    });
   }
   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);
+    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
+    });
   }
   defaultContentRenderer(props) {
     const name = props.name,
@@ -146,7 +151,7 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
       children: buttonContent
     });
   }
-}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = _props.allowedProps, _TreeButton.propTypes = _props.propTypes, _TreeButton.defaultProps = {
+}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = _props.allowedProps, _TreeButton.propTypes = _props.propTypes, _TreeButton.contextType = _TreeBrowserContext.default, _TreeButton.defaultProps = {
   type: 'treeButton',
   size: 'medium',
   variant: 'folderTree',

package/lib/TreeBrowser/TreeButton/styles.js

@@ -47,9 +47,10 @@ const transform = (0, _emotion.keyframes)`
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state 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 generateStyles = (componentTheme, props, state) => {
   const size = props.size,
     variant = props.variant,
     selected = props.selected,
@@ -223,14 +224,16 @@ const generateStyles = (componentTheme, props) => {
       borderRadius: componentTheme.borderRadius,
       position: 'relative',
       zIndex: 1,
-      transform: 'translate3d(-2%, 0, 0)',
-      opacity: 0.01,
-      transformOrigin: 'left center',
-      animationName: transform,
-      animationDuration: '0.2s',
-      animationFillMode: 'forwards',
-      animationTimingFunction: 'ease-out',
-      animationDelay: '0.2s',
+      ...(state.animation ? {
+        transform: 'translate3d(-2%, 0, 0)',
+        opacity: 0.01,
+        transformOrigin: 'left center',
+        animationName: transform,
+        animationDuration: '0.2s',
+        animationFillMode: 'forwards',
+        animationTimingFunction: 'ease-out',
+        animationDelay: '0.2s'
+      } : {}),
       outline: '0',
       padding: '0',
       ...(variant === 'folderTree' && !isRootButton && {

package/lib/TreeBrowser/TreeCollection/index.js

@@ -13,6 +13,7 @@ var _TreeButton = require("../TreeButton");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _react2 = require("@emotion/react");
 var _dec, _dec2, _class, _TreeCollection;
@@ -94,12 +95,16 @@ let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_s
     };
   }
   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);
+    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
+    });
   }
   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);
+    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
+    });
   }
   get itemsLevel() {
     const _this$props5 = this.props,
@@ -352,7 +357,7 @@ let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_s
       })]
     });
   }
-}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = _props.allowedProps, _TreeCollection.propTypes = _props.propTypes, _TreeCollection.defaultProps = {
+}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = _props.allowedProps, _TreeCollection.propTypes = _props.propTypes, _TreeCollection.contextType = _TreeBrowserContext.default, _TreeCollection.defaultProps = {
   collections: [],
   items: [],
   expanded: false,

package/lib/TreeBrowser/TreeCollection/styles.js

@@ -45,7 +45,7 @@ const list = (0, _emotion.keyframes)`
  * @return {Object} The final style object, which will be used in the component
  */
 
-const generateStyles = (componentTheme, props) => {
+const generateStyles = (componentTheme, props, state) => {
   const size = props.size,
     variant = props.variant;
   const sizeMap = {
@@ -112,12 +112,14 @@ const generateStyles = (componentTheme, props) => {
           bottom: '1.1875rem',
           insetInlineStart: '0',
           insetInlineEnd: 'auto',
-          transform: 'scaleY(0.01)',
-          transformOrigin: 'center top',
-          animationName: list,
-          animationDuration: '0.2s',
-          animationFillMode: 'forwards',
-          animationTimingFunction: 'ease-out',
+          ...(state.animation ? {
+            transform: 'scaleY(0.01)',
+            transformOrigin: 'center top',
+            animationName: list,
+            animationDuration: '0.2s',
+            animationFillMode: 'forwards',
+            animationTimingFunction: 'ease-out'
+          } : {}),
           pointerEvents: 'none',
           width: componentTheme.borderWidth,
           background: componentTheme.borderColor

package/lib/TreeBrowser/TreeNode/index.js

@@ -13,6 +13,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("../TreeButton/styles"));
 var _theme = _interopRequireDefault(require("../TreeButton/theme"));
 var _props = require("./props");
+var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class, _TreeNode;
 /*
@@ -59,12 +60,16 @@ let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.defaul
     };
   }
   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);
+    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
+    });
   }
   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);
+    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
+    });
   }
   renderItemImage() {
     const _this$props3 = this.props,
@@ -106,7 +111,7 @@ let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.defaul
       })
     });
   }
-}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = _props.allowedProps, _TreeNode.propTypes = _props.propTypes, _TreeNode.defaultProps = {
+}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = _props.allowedProps, _TreeNode.propTypes = _props.propTypes, _TreeNode.contextType = _TreeBrowserContext.default, _TreeNode.defaultProps = {
   size: 'medium',
   variant: 'folderTree',
   selected: false,

package/lib/TreeBrowser/index.js

@@ -19,6 +19,7 @@ var _TreeNode = require("./TreeNode");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _TreeBrowserContext = _interopRequireDefault(require("./TreeBrowserContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class, _TreeBrowser;
 /*
@@ -280,16 +281,21 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
   }
   render() {
     const styles = this.props.styles;
-    return (0, _jsxRuntime.jsx)("ul", {
-      css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
-      tabIndex: 0,
-      role: "tree",
-      onKeyDown: this.handleKeyDown,
-      ref: el => {
-        this.ref = el;
+    return (0, _jsxRuntime.jsx)(_TreeBrowserContext.default.Provider, {
+      value: {
+        animation: this.props.animation
       },
-      "aria-label": this.props.treeLabel,
-      children: this.renderRoot()
+      children: (0, _jsxRuntime.jsx)("ul", {
+        css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
+        tabIndex: 0,
+        role: "tree",
+        onKeyDown: this.handleKeyDown,
+        ref: el => {
+          this.ref = el;
+        },
+        "aria-label": this.props.treeLabel,
+        children: this.renderRoot()
+      })
     });
   }
 }, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = _props.allowedProps, _TreeBrowser.propTypes = _props.propTypes, _TreeBrowser.defaultProps = {
@@ -305,6 +311,7 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
   selectionType: 'none',
   sortOrder: function () {
     return 0;
-  }
+  },
+  animation: true
 }, _TreeBrowser.Node = _TreeNode.TreeNode, _TreeBrowser.Collection = _TreeCollection.TreeCollection, _TreeBrowser.Button = _TreeButton.TreeButton, _TreeBrowser)) || _class) || _class);
 var _default = exports.default = TreeBrowser;

package/lib/TreeBrowser/props.js

@@ -60,6 +60,7 @@ const propTypes = exports.propTypes = {
   onItemClick: _propTypes.default.func,
   treeLabel: _propTypes.default.string,
   renderContent: _propTypes.default.func,
-  sortOrder: _propTypes.default.func
+  sortOrder: _propTypes.default.func,
+  animation: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder'];
+const allowedProps = exports.allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder', 'animation'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "10.25.1-snapshot-4",
+  "version": "10.25.1-snapshot-6",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.25.1-snapshot-4",
-    "@instructure/ui-babel-preset": "10.25.1-snapshot-4",
-    "@instructure/ui-color-utils": "10.25.1-snapshot-4",
-    "@instructure/ui-themes": "10.25.1-snapshot-4",
+    "@instructure/ui-axe-check": "10.25.1-snapshot-6",
+    "@instructure/ui-babel-preset": "10.25.1-snapshot-6",
+    "@instructure/ui-color-utils": "10.25.1-snapshot-6",
+    "@instructure/ui-themes": "10.25.1-snapshot-6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^3.2.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.25.1-snapshot-4",
-    "@instructure/shared-types": "10.25.1-snapshot-4",
-    "@instructure/ui-icons": "10.25.1-snapshot-4",
-    "@instructure/ui-img": "10.25.1-snapshot-4",
-    "@instructure/ui-prop-types": "10.25.1-snapshot-4",
-    "@instructure/ui-react-utils": "10.25.1-snapshot-4",
-    "@instructure/ui-testable": "10.25.1-snapshot-4",
-    "@instructure/ui-utils": "10.25.1-snapshot-4",
+    "@instructure/emotion": "10.25.1-snapshot-6",
+    "@instructure/shared-types": "10.25.1-snapshot-6",
+    "@instructure/ui-icons": "10.25.1-snapshot-6",
+    "@instructure/ui-img": "10.25.1-snapshot-6",
+    "@instructure/ui-prop-types": "10.25.1-snapshot-6",
+    "@instructure/ui-react-utils": "10.25.1-snapshot-6",
+    "@instructure/ui-testable": "10.25.1-snapshot-6",
+    "@instructure/ui-utils": "10.25.1-snapshot-6",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },