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

package/lib/TreeBrowser/v2/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TreeBrowser = void 0;
+require("core-js/modules/es.array.includes.js");
 var _react = require("react");
 var _keycode = _interopRequireDefault(require("keycode"));
 var _uiIcons = require("@instructure/ui-icons");
@@ -18,7 +19,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
 var _TreeBrowserContext = _interopRequireDefault(require("./TreeBrowserContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TreeBrowser;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -47,76 +48,32 @@ var _dec, _class, _TreeBrowser;
 category: components
 ---
 **/
-let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_TreeBrowser = class TreeBrowser extends _react.Component {
+let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class TreeBrowser extends _react.Component {
+  static displayName = "TreeBrowser";
+  static componentId = 'TreeBrowser';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    size: 'medium',
+    variant: 'folderTree',
+    showRootCollection: true,
+    collectionIcon: _uiIcons.FolderClosedInstUIIcon,
+    collectionIconExpanded: _uiIcons.FolderClosedInstUIIcon,
+    itemIcon: _uiIcons.FileTextInstUIIcon,
+    getItemProps: props => props,
+    getCollectionProps: props => props,
+    defaultExpanded: [],
+    selectionType: 'none',
+    sortOrder: function () {
+      return 0;
+    },
+    animation: true
+  };
+  static Node = _TreeNode.TreeNode;
+  static Collection = _TreeCollection.TreeCollection;
+  static Button = _TreeButton.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.default.codes.down:
-        case _keycode.default.codes.j:
-          event.stopPropagation();
-          this.moveFocus(1);
-          break;
-        case _keycode.default.codes.up:
-        case _keycode.default.codes.k:
-          event.stopPropagation();
-          this.moveFocus(-1);
-          break;
-        case _keycode.default.codes.home:
-        case _keycode.default.codes.end:
-          event.stopPropagation();
-          this.homeOrEnd(event.keyCode);
-          break;
-        case _keycode.default.codes.left:
-        case _keycode.default.codes.right:
-          event.stopPropagation();
-          this.handleLeftOrRightArrow(event.keyCode, node);
-          break;
-        case _keycode.default.codes.enter:
-        case _keycode.default.codes.space:
-          event.stopPropagation();
-          this.handleActivation(event, node);
-          break;
-        default:
-          return;
-      }
-      event.preventDefault();
-    };
-    this.clearSelection = () => {
-      const onSelectionChange = this.props.onSelectionChange;
-
-      // Call the callback if provided (for controlled selection)
-      if (onSelectionChange) {
-        onSelectionChange('', 'item', void 0);
-      }
-
-      // Update internal state only if uncontrolled
-      if (typeof this.props.selection === 'undefined') {
-        this.setState({
-          selection: ''
-        });
-      }
-    };
-    this.getIsFlattened = collection => {
-      const _this$props2 = this.props,
-        rootId = _this$props2.rootId,
-        showRootCollection = _this$props2.showRootCollection;
-      return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
-    };
     const initialState = {
       selection: ''
     };
@@ -133,20 +90,65 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
     this.state = initialState;
   }
   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.default.codes.down:
+      case _keycode.default.codes.j:
+        event.stopPropagation();
+        this.moveFocus(1);
+        break;
+      case _keycode.default.codes.up:
+      case _keycode.default.codes.k:
+        event.stopPropagation();
+        this.moveFocus(-1);
+        break;
+      case _keycode.default.codes.home:
+      case _keycode.default.codes.end:
+        event.stopPropagation();
+        this.homeOrEnd(event.keyCode);
+        break;
+      case _keycode.default.codes.left:
+      case _keycode.default.codes.right:
+        event.stopPropagation();
+        this.handleLeftOrRightArrow(event.keyCode, node);
+        break;
+      case _keycode.default.codes.enter:
+      case _keycode.default.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 {
@@ -166,8 +168,7 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
     return typeof props.selection === 'undefined' ? state.selection : props.selection;
   }
   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)];
@@ -184,9 +185,10 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
     }
   }
   handleSelection(id, type) {
-    const _this$props7 = this.props,
-      selectionType = _this$props7.selectionType,
-      onSelectionChange = _this$props7.onSelectionChange;
+    const {
+      selectionType,
+      onSelectionChange
+    } = this.props;
     if (selectionType !== 'single') return;
     const selection = `${type}_${id}`;
 
@@ -208,6 +210,23 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
       });
     }
   }
+  clearSelection = () => {
+    const {
+      onSelectionChange
+    } = this.props;
+
+    // Call the callback if provided (for controlled selection)
+    if (onSelectionChange) {
+      onSelectionChange('', 'item', undefined);
+    }
+
+    // Update internal state only if uncontrolled
+    if (typeof this.props.selection === 'undefined') {
+      this.setState({
+        selection: ''
+      });
+    }
+  };
   getNavigableNodes() {
     return Array.from(this.ref.querySelectorAll('[role="treeitem"]'));
   }
@@ -281,6 +300,13 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
       return [];
     }
   }
+  getIsFlattened = collection => {
+    const {
+      rootId,
+      showRootCollection
+    } = this.props;
+    return !showRootCollection && typeof rootId !== 'undefined' && collection.id === rootId;
+  };
   getCollectionProps(collection) {
     return {
       id: collection.id,
@@ -314,14 +340,16 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
     }, i));
   }
   render() {
-    const styles = this.props.styles;
+    const {
+      styles
+    } = this.props;
     return (0, _jsxRuntime.jsx)(_TreeBrowserContext.default.Provider, {
       value: {
         animation: this.props.animation,
         clearSelection: this.clearSelection
       },
       children: (0, _jsxRuntime.jsx)("ul", {
-        css: styles === null || styles === void 0 ? void 0 : styles.treeBrowser,
+        css: styles?.treeBrowser,
         tabIndex: 0,
         role: "tree",
         onKeyDown: this.handleKeyDown,
@@ -334,20 +362,5 @@ let TreeBrowser = exports.TreeBrowser = (_dec = (0, _emotion.withStyle)(_styles.
       })
     });
   }
-}, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = _props.allowedProps, _TreeBrowser.defaultProps = {
-  size: 'medium',
-  variant: 'folderTree',
-  showRootCollection: true,
-  collectionIcon: _uiIcons.FolderClosedInstUIIcon,
-  collectionIconExpanded: _uiIcons.FolderClosedInstUIIcon,
-  itemIcon: _uiIcons.FileTextInstUIIcon,
-  getItemProps: props => props,
-  getCollectionProps: props => props,
-  defaultExpanded: [],
-  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "11.7.3-snapshot-7",
+  "version": "11.7.3-snapshot-26",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -14,23 +14,23 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
+    "@babel/runtime": "^7.29.2",
     "keycode": "^2",
-    "@instructure/emotion": "11.7.3-snapshot-7",
-    "@instructure/shared-types": "11.7.3-snapshot-7",
-    "@instructure/ui-icons": "11.7.3-snapshot-7",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-img": "11.7.3-snapshot-7",
-    "@instructure/ui-themes": "11.7.3-snapshot-7",
-    "@instructure/ui-utils": "11.7.3-snapshot-7"
+    "@instructure/emotion": "11.7.3-snapshot-26",
+    "@instructure/shared-types": "11.7.3-snapshot-26",
+    "@instructure/ui-icons": "11.7.3-snapshot-26",
+    "@instructure/ui-img": "11.7.3-snapshot-26",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-26",
+    "@instructure/ui-themes": "11.7.3-snapshot-26",
+    "@instructure/ui-utils": "11.7.3-snapshot-26"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-7",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-7",
-    "@instructure/ui-axe-check": "11.7.3-snapshot-7"
+    "@instructure/ui-axe-check": "11.7.3-snapshot-26",
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-26",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-26"
   },
   "peerDependencies": {
     "react": ">=18 <=19"