@teambit/ui-foundation.ui.side-bar 0.0.490 → 0.0.495

package/__preview-1643340137110.js

@@ -0,0 +1 @@
+

package/component-tree/component-tree.tsx

@@ -1,26 +1,30 @@
 import { ComponentModel } from '@teambit/component';
 import React, { useMemo } from 'react';
-import { TreeContextProvider } from '@teambit/base-ui.graph.tree.tree-context';
+import { useLocation } from '@teambit/base-ui.routing.routing-provider';
 import { indentStyle } from '@teambit/base-ui.graph.tree.indent';
 import { inflateToTree, attachPayload } from '@teambit/base-ui.graph.tree.inflate-paths';
-import { TreeNodeContext, TreeNodeRenderer } from '@teambit/base-ui.graph.tree.recursive-tree';
-import { RootNode } from '@teambit/base-ui.graph.tree.root-node';
+import { Tree, TreeNodeRenderer } from '@teambit/design.ui.tree';
 import { PayloadType, ScopePayload } from './payload-type';
 import { DefaultTreeNodeRenderer } from './default-tree-node-renderer';
 
 type ComponentTreeProps = {
-  onSelect?: (id: string, event?: React.MouseEvent) => void;
-  selected?: string;
   components: ComponentModel[];
   TreeNode?: TreeNodeRenderer<PayloadType>;
+  isCollapsed?: boolean;
 };
 
-export function ComponentTree({
-  components,
-  onSelect,
-  selected,
-  TreeNode = DefaultTreeNodeRenderer,
-}: ComponentTreeProps) {
+export function ComponentTree({ components, isCollapsed, TreeNode = DefaultTreeNodeRenderer }: ComponentTreeProps) {
+  const { pathname } = useLocation();
+
+  const activeComponent = useMemo(() => {
+    const path = pathname?.startsWith('/') ? pathname.substring(1) : pathname;
+    const active = components.find((x) => {
+      // TODO - reuse logic from component.route.ts
+      return path && path === x.id.fullName;
+    });
+    return active?.id.toString({ ignoreVersion: true });
+  }, [components, pathname]);
+
   const rootNode = useMemo(() => {
     const tree = inflateToTree<ComponentModel, PayloadType>(components, (c) => c.id.toString({ ignoreVersion: true }));
 
@@ -33,11 +37,7 @@ export function ComponentTree({
 
   return (
     <div style={indentStyle(1)}>
-      <TreeNodeContext.Provider value={TreeNode}>
-        <TreeContextProvider onSelect={onSelect} selected={selected}>
-          <RootNode node={rootNode} depth={1} />
-        </TreeContextProvider>
-      </TreeNodeContext.Provider>
+      <Tree TreeNode={TreeNode} activePath={activeComponent} tree={rootNode} isCollapsed={isCollapsed} />
     </div>
   );
 }

package/component-tree/namespace-tree-node/namespace-tree-node.module.scss

@@ -11,6 +11,7 @@
   font-size: inherit;
   padding-right: 8px;
   font-size: var(--bit-p-xs);
+  cursor: pointer;
   &:hover {
     background: var(--bit-bg-heavy, #f6f6f6);
   }
@@ -27,6 +28,10 @@
   }
 }
 
+.highlighted {
+  color: var(--bit-accent-heavy, #5d4aec);
+}
+
 .left {
   display: flex;
   align-items: center;

package/component-tree/namespace-tree-node/namespace-tree-node.tsx

@@ -1,31 +1,54 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
-import { clickable } from '@teambit/legacy/dist/to-eject/css-components/clickable';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import AnimateHeight from 'react-animate-height';
-
 import { indentClass, indentStyle } from '@teambit/base-ui.graph.tree.indent';
-import { TreeNodeProps, TreeLayer } from '@teambit/base-ui.graph.tree.recursive-tree';
+import { useTree, TreeNodeProps, TreeLayer } from '@teambit/design.ui.tree';
 import { PayloadType } from '../payload-type';
 import { getName } from '../utils/get-name';
 import styles from './namespace-tree-node.module.scss';
 
-export function NamespaceTreeNode({ node, depth }: TreeNodeProps<PayloadType>) {
-  const [collapsed, collapse] = useState(false);
+export type NamespaceTreeNodeProps = {} & TreeNodeProps<PayloadType>;
 
-  const displayName = getName(node.id.replace(/\/$/, ''));
+export function NamespaceTreeNode({ node, depth }: NamespaceTreeNodeProps) {
+  const { isCollapsed, activePath } = useTree();
+  const isActive = activePath?.startsWith(node.id);
+
+  const initialOpen = isActive || !isCollapsed;
+  const [open, toggle] = useState<boolean | void>(initialOpen);
+
+  const firstRun = useRef(true);
+  useEffect(() => {
+    const current = firstRun.current;
+    if (current) return;
+    if (isActive === true) toggle(true);
+  }, [isActive]);
 
+  useEffect(() => {
+    if (firstRun.current) return;
+    toggle(!isCollapsed);
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    firstRun.current = false;
+  }, []);
+
+  const displayName = getName(node.id.replace(/\/$/, ''));
+  const highlighted = !open && isActive;
   return (
     <div>
       {node.id && (
-        <div className={classNames(indentClass, clickable, styles.namespace)} onClick={() => collapse(!collapsed)}>
+        <div
+          className={classNames(indentClass, styles.namespace, highlighted && styles.highlighted)}
+          onClick={() => toggle(!open)}
+        >
           <div className={styles.left}>
-            <Icon className={classNames(styles.arrow, collapsed && styles.collapsed)} of="fat-arrow-down" />
+            <Icon className={classNames(styles.arrow, !open && styles.collapsed)} of="fat-arrow-down" />
             <span className={styles.name}>{displayName}</span>
           </div>
         </div>
       )}
-      <AnimateHeight height={collapsed ? 0 : 'auto'}>
+      <AnimateHeight height={open ? 'auto' : 0}>
         <div style={indentStyle(depth + 1)} className={classNames(styles.componentTree)}>
           {node.children && <TreeLayer childNodes={node.children} depth={depth} />}
         </div>

package/component-tree/scope-tree-node/scope-tree-node.module.scss

@@ -1,12 +1,13 @@
 @import '~@teambit/base-ui.theme.colors/colors.module.scss';
 
-.namespace {
+.scope {
   position: relative;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   user-select: none;
+  cursor: pointer;
   font-weight: bold;
   font-size: inherit;
   padding-right: 8px;
@@ -27,6 +28,10 @@
   }
 }
 
+.highlighted {
+  color: var(--bit-accent-heavy, #5d4aec);
+}
+
 .left {
   display: flex;
   align-items: center;

package/component-tree/scope-tree-node/scope-tree-node.tsx

@@ -1,31 +1,59 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
-import { clickable } from '@teambit/legacy/dist/to-eject/css-components/clickable';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import AnimateHeight from 'react-animate-height';
 
-import { indentClass, indentStyle } from '@teambit/base-ui.graph.tree.indent';
-import { TreeLayer, TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
+import { indentClass, indentStyle, TreeNodeProps, TreeLayer, useTree } from '@teambit/design.ui.tree';
 import { PayloadType } from '../payload-type';
 import { getName } from '../utils/get-name';
 import styles from './scope-tree-node.module.scss';
 
-export function ScopeTreeNode({ node, depth }: TreeNodeProps<PayloadType>) {
-  const [collapsed, collapse] = useState(false);
+export type ScopeTreeNodeProps = {} & TreeNodeProps<PayloadType>;
+
+export function ScopeTreeNode({ node, depth }: ScopeTreeNodeProps) {
+  const { isCollapsed, activePath } = useTree();
+  const isActive = activePath?.startsWith(node.id);
+
+  const initialOpen = isActive || !isCollapsed;
+
+  const [open, toggle] = useState<boolean | void>(initialOpen);
+
   const displayName = getName(node.id.replace(/\/$/, ''));
 
+  const firstRun = useRef(true);
+  useEffect(() => {
+    const current = firstRun.current;
+    if (current) return;
+    if (isActive === true) toggle(true);
+  }, [isActive]);
+
+  useEffect(() => {
+    const current = firstRun.current;
+    if (current) return;
+    toggle(!isCollapsed);
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    firstRun.current = false;
+  }, []);
+
+  const highlighted = !open && isActive;
+
   return (
     <div>
       {node.id && (
-        <div className={classNames(indentClass, clickable, styles.namespace)} onClick={() => collapse(!collapsed)}>
+        <div
+          className={classNames(indentClass, styles.scope, highlighted && styles.highlighted)}
+          onClick={() => toggle(!open)}
+        >
           <div className={styles.left}>
-            <Icon className={classNames(styles.arrow, collapsed && styles.collapsed)} of="fat-arrow-down" />
+            <Icon className={classNames(styles.arrow, !open && styles.collapsed)} of="fat-arrow-down" />
             <Icon className={styles.arrow} of="collection-full" />
             <span className={styles.name}>{displayName}</span>
           </div>
         </div>
       )}
-      <AnimateHeight height={collapsed ? 0 : 'auto'}>
+      <AnimateHeight height={open ? 'auto' : 0}>
         <div style={indentStyle(depth + 1)} className={classNames(styles.componentTree)}>
           {node.children && <TreeLayer childNodes={node.children} depth={depth + 1} />}
         </div>

package/dist/component-tree/component-tree.d.ts

@@ -1,12 +1,11 @@
+/// <reference types="react" />
 import { ComponentModel } from '@teambit/component';
-import React from 'react';
-import { TreeNodeRenderer } from '@teambit/base-ui.graph.tree.recursive-tree';
+import { TreeNodeRenderer } from '@teambit/design.ui.tree';
 import { PayloadType } from './payload-type';
 declare type ComponentTreeProps = {
-    onSelect?: (id: string, event?: React.MouseEvent) => void;
-    selected?: string;
     components: ComponentModel[];
     TreeNode?: TreeNodeRenderer<PayloadType>;
+    isCollapsed?: boolean;
 };
-export declare function ComponentTree({ components, onSelect, selected, TreeNode, }: ComponentTreeProps): JSX.Element;
+export declare function ComponentTree({ components, isCollapsed, TreeNode }: ComponentTreeProps): JSX.Element;
 export {};

package/dist/component-tree/component-tree.js

@@ -21,14 +21,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentTree = void 0;
 const react_1 = __importStar(require("react"));
-const base_ui_graph_tree_tree_context_1 = require("@teambit/base-ui.graph.tree.tree-context");
+const base_ui_routing_routing_provider_1 = require("@teambit/base-ui.routing.routing-provider");
 const base_ui_graph_tree_indent_1 = require("@teambit/base-ui.graph.tree.indent");
 const base_ui_graph_tree_inflate_paths_1 = require("@teambit/base-ui.graph.tree.inflate-paths");
-const base_ui_graph_tree_recursive_tree_1 = require("@teambit/base-ui.graph.tree.recursive-tree");
-const base_ui_graph_tree_root_node_1 = require("@teambit/base-ui.graph.tree.root-node");
+const design_ui_tree_1 = require("@teambit/design.ui.tree");
 const payload_type_1 = require("./payload-type");
 const default_tree_node_renderer_1 = require("./default-tree-node-renderer");
-function ComponentTree({ components, onSelect, selected, TreeNode = default_tree_node_renderer_1.DefaultTreeNodeRenderer, }) {
+function ComponentTree({ components, isCollapsed, TreeNode = default_tree_node_renderer_1.DefaultTreeNodeRenderer }) {
+    const { pathname } = (0, base_ui_routing_routing_provider_1.useLocation)();
+    const activeComponent = (0, react_1.useMemo)(() => {
+        const path = (pathname === null || pathname === void 0 ? void 0 : pathname.startsWith('/')) ? pathname.substring(1) : pathname;
+        const active = components.find((x) => {
+            // TODO - reuse logic from component.route.ts
+            return path && path === x.id.fullName;
+        });
+        return active === null || active === void 0 ? void 0 : active.id.toString({ ignoreVersion: true });
+    }, [components, pathname]);
     const rootNode = (0, react_1.useMemo)(() => {
         const tree = (0, base_ui_graph_tree_inflate_paths_1.inflateToTree)(components, (c) => c.id.toString({ ignoreVersion: true }));
         const payloadMap = calcPayload(components);
@@ -36,9 +44,7 @@ function ComponentTree({ components, onSelect, selected, TreeNode = default_tree
         return tree;
     }, [components]);
     return (react_1.default.createElement("div", { style: (0, base_ui_graph_tree_indent_1.indentStyle)(1) },
-        react_1.default.createElement(base_ui_graph_tree_recursive_tree_1.TreeNodeContext.Provider, { value: TreeNode },
-            react_1.default.createElement(base_ui_graph_tree_tree_context_1.TreeContextProvider, { onSelect: onSelect, selected: selected },
-                react_1.default.createElement(base_ui_graph_tree_root_node_1.RootNode, { node: rootNode, depth: 1 })))));
+        react_1.default.createElement(design_ui_tree_1.Tree, { TreeNode: TreeNode, activePath: activeComponent, tree: rootNode, isCollapsed: isCollapsed })));
 }
 exports.ComponentTree = ComponentTree;
 function calcPayload(components) {

package/dist/component-tree/component-tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-tree.js","sourceRoot":"","sources":["../../component-tree/component-tree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAuC;AACvC,8FAA+E;AAC/E,kFAAiE;AACjE,gGAAyF;AACzF,kGAA+F;AAC/F,wFAAiE;AACjE,iDAA2D;AAC3D,6EAAuE;AASvE,SAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,oDAAuB,GACf;IACnB,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAG,IAAA,gDAAa,EAA8B,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEnH,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;QAE3C,IAAA,gDAAa,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,CAAC,CAAC;QACxB,8BAAC,mDAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;YACvC,8BAAC,qDAAmB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ;gBACzD,8BAAC,uCAAQ,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,GAAI,CAClB,CACG,CACvB,CACP,CAAC;AACJ,CAAC;AAzBD,sCAyBC;AAED,SAAS,WAAW,CAAC,UAA4B;IAC/C,MAAM,UAAU,GAAG,IAAI,GAAG,CAAsB,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpH,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/E,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,2BAAY,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,UAAU,CAAC;AACpB,CAAC"}
+{"version":3,"file":"component-tree.js","sourceRoot":"","sources":["../../component-tree/component-tree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAuC;AACvC,gGAAwE;AACxE,kFAAiE;AACjE,gGAAyF;AACzF,4DAAiE;AACjE,iDAA2D;AAC3D,6EAAuE;AAQvE,SAAgB,aAAa,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,GAAG,oDAAuB,EAAsB;IAC/G,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,8CAAW,GAAE,CAAC;IAEnC,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACnC,MAAM,IAAI,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,CAAC,GAAG,CAAC,EAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC1E,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YACnC,6CAA6C;YAC7C,OAAO,IAAI,IAAI,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAG,IAAA,gDAAa,EAA8B,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEnH,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;QAE3C,IAAA,gDAAa,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,CAAC,CAAC;QACxB,8BAAC,qBAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC/F,CACP,CAAC;AACJ,CAAC;AA3BD,sCA2BC;AAED,SAAS,WAAW,CAAC,UAA4B;IAC/C,MAAM,UAAU,GAAG,IAAI,GAAG,CAAsB,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpH,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/E,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,2BAAY,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/dist/component-tree/component-view/component-view.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentTreeSlot } from '@teambit/component-tree';
 import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
 import { PayloadType } from '../payload-type';

package/dist/component-tree/default-tree-node-renderer/default-tree-node-renderer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
 import { PayloadType } from '../payload-type';
 export declare function DefaultTreeNodeRenderer(props: TreeNodeProps<PayloadType>): JSX.Element;

package/dist/component-tree/namespace-tree-node/namespace-tree-node.d.ts

@@ -1,3 +1,5 @@
-import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
+/// <reference types="react" />
+import { TreeNodeProps } from '@teambit/design.ui.tree';
 import { PayloadType } from '../payload-type';
-export declare function NamespaceTreeNode({ node, depth }: TreeNodeProps<PayloadType>): JSX.Element;
+export declare type NamespaceTreeNodeProps = {} & TreeNodeProps<PayloadType>;
+export declare function NamespaceTreeNode({ node, depth }: NamespaceTreeNodeProps): JSX.Element;

package/dist/component-tree/namespace-tree-node/namespace-tree-node.js

@@ -24,24 +24,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamespaceTreeNode = void 0;
 const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
-const clickable_1 = require("@teambit/legacy/dist/to-eject/css-components/clickable");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_animate_height_1 = __importDefault(require("react-animate-height"));
 const base_ui_graph_tree_indent_1 = require("@teambit/base-ui.graph.tree.indent");
-const base_ui_graph_tree_recursive_tree_1 = require("@teambit/base-ui.graph.tree.recursive-tree");
+const design_ui_tree_1 = require("@teambit/design.ui.tree");
 const get_name_1 = require("../utils/get-name");
 const namespace_tree_node_module_scss_1 = __importDefault(require("./namespace-tree-node.module.scss"));
 function NamespaceTreeNode({ node, depth }) {
-    const [collapsed, collapse] = (0, react_1.useState)(false);
+    const { isCollapsed, activePath } = (0, design_ui_tree_1.useTree)();
+    const isActive = activePath === null || activePath === void 0 ? void 0 : activePath.startsWith(node.id);
+    const initialOpen = isActive || !isCollapsed;
+    const [open, toggle] = (0, react_1.useState)(initialOpen);
+    const firstRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        const current = firstRun.current;
+        if (current)
+            return;
+        if (isActive === true)
+            toggle(true);
+    }, [isActive]);
+    (0, react_1.useEffect)(() => {
+        if (firstRun.current)
+            return;
+        toggle(!isCollapsed);
+    }, [isCollapsed]);
+    (0, react_1.useEffect)(() => {
+        firstRun.current = false;
+    }, []);
     const displayName = (0, get_name_1.getName)(node.id.replace(/\/$/, ''));
+    const highlighted = !open && isActive;
     return (react_1.default.createElement("div", null,
-        node.id && (react_1.default.createElement("div", { className: (0, classnames_1.default)(base_ui_graph_tree_indent_1.indentClass, clickable_1.clickable, namespace_tree_node_module_scss_1.default.namespace), onClick: () => collapse(!collapsed) },
+        node.id && (react_1.default.createElement("div", { className: (0, classnames_1.default)(base_ui_graph_tree_indent_1.indentClass, namespace_tree_node_module_scss_1.default.namespace, highlighted && namespace_tree_node_module_scss_1.default.highlighted), onClick: () => toggle(!open) },
             react_1.default.createElement("div", { className: namespace_tree_node_module_scss_1.default.left },
-                react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: (0, classnames_1.default)(namespace_tree_node_module_scss_1.default.arrow, collapsed && namespace_tree_node_module_scss_1.default.collapsed), of: "fat-arrow-down" }),
+                react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: (0, classnames_1.default)(namespace_tree_node_module_scss_1.default.arrow, !open && namespace_tree_node_module_scss_1.default.collapsed), of: "fat-arrow-down" }),
                 react_1.default.createElement("span", { className: namespace_tree_node_module_scss_1.default.name }, displayName)))),
-        react_1.default.createElement(react_animate_height_1.default, { height: collapsed ? 0 : 'auto' },
-            react_1.default.createElement("div", { style: (0, base_ui_graph_tree_indent_1.indentStyle)(depth + 1), className: (0, classnames_1.default)(namespace_tree_node_module_scss_1.default.componentTree) }, node.children && react_1.default.createElement(base_ui_graph_tree_recursive_tree_1.TreeLayer, { childNodes: node.children, depth: depth })))));
+        react_1.default.createElement(react_animate_height_1.default, { height: open ? 'auto' : 0 },
+            react_1.default.createElement("div", { style: (0, base_ui_graph_tree_indent_1.indentStyle)(depth + 1), className: (0, classnames_1.default)(namespace_tree_node_module_scss_1.default.componentTree) }, node.children && react_1.default.createElement(design_ui_tree_1.TreeLayer, { childNodes: node.children, depth: depth })))));
 }
 exports.NamespaceTreeNode = NamespaceTreeNode;
 //# sourceMappingURL=namespace-tree-node.js.map

package/dist/component-tree/namespace-tree-node/namespace-tree-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"namespace-tree-node.js","sourceRoot":"","sources":["../../../component-tree/namespace-tree-node/namespace-tree-node.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gFAAyD;AACzD,sFAAmF;AACnF,4DAAoC;AACpC,+CAAwC;AACxC,gFAAiD;AAEjD,kFAA8E;AAC9E,kGAAsF;AAEtF,gDAA4C;AAC5C,wGAAuD;AAEvD,SAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,KAAK,EAA8B;IAC3E,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,IAAA,kBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IAExD,OAAO,CACL;QACG,IAAI,CAAC,EAAE,IAAI,CACV,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAW,EAAE,qBAAS,EAAE,yCAAM,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC;YACvG,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;gBACzB,8BAAC,+BAAI,IAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,SAAS,IAAI,yCAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAC,gBAAgB,GAAG;gBAChG,wCAAM,SAAS,EAAE,yCAAM,CAAC,IAAI,IAAG,WAAW,CAAQ,CAC9C,CACF,CACP;QACD,8BAAC,8BAAa,IAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;YAC3C,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,KAAK,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,aAAa,CAAC,IAC5E,IAAI,CAAC,QAAQ,IAAI,8BAAC,6CAAS,IAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACpE,CACQ,CACZ,CACP,CAAC;AACJ,CAAC;AAtBD,8CAsBC"}
+{"version":3,"file":"namespace-tree-node.js","sourceRoot":"","sources":["../../../component-tree/namespace-tree-node/namespace-tree-node.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gFAAyD;AACzD,4DAAoC;AACpC,+CAA2D;AAC3D,gFAAiD;AACjD,kFAA8E;AAC9E,4DAA4E;AAE5E,gDAA4C;AAC5C,wGAAuD;AAIvD,SAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,KAAK,EAA0B;IACvE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAA,wBAAO,GAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,QAAQ,IAAI,CAAC,WAAW,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAiB,WAAW,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO;YAAE,OAAO;QACpB,IAAI,QAAQ,KAAK,IAAI;YAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC7B,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,IAAA,kBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC;IACtC,OAAO,CACL;QACG,IAAI,CAAC,EAAE,IAAI,CACV,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAW,EAAE,yCAAM,CAAC,SAAS,EAAE,WAAW,IAAI,yCAAM,CAAC,WAAW,CAAC,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;YAE5B,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;gBACzB,8BAAC,+BAAI,IAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,yCAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAC,gBAAgB,GAAG;gBAC5F,wCAAM,SAAS,EAAE,yCAAM,CAAC,IAAI,IAAG,WAAW,CAAQ,CAC9C,CACF,CACP;QACD,8BAAC,8BAAa,IAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACtC,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,KAAK,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,yCAAM,CAAC,aAAa,CAAC,IAC5E,IAAI,CAAC,QAAQ,IAAI,8BAAC,0BAAS,IAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACpE,CACQ,CACZ,CACP,CAAC;AACJ,CAAC;AA7CD,8CA6CC"}

package/dist/component-tree/namespace-tree-node/namespace-tree-node.module.scss

@@ -11,6 +11,7 @@
   font-size: inherit;
   padding-right: 8px;
   font-size: var(--bit-p-xs);
+  cursor: pointer;
   &:hover {
     background: var(--bit-bg-heavy, #f6f6f6);
   }
@@ -27,6 +28,10 @@
   }
 }
 
+.highlighted {
+  color: var(--bit-accent-heavy, #5d4aec);
+}
+
 .left {
   display: flex;
   align-items: center;

package/dist/component-tree/scope-tree-node/scope-tree-node.d.ts

@@ -1,3 +1,5 @@
-import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
+/// <reference types="react" />
+import { TreeNodeProps } from '@teambit/design.ui.tree';
 import { PayloadType } from '../payload-type';
-export declare function ScopeTreeNode({ node, depth }: TreeNodeProps<PayloadType>): JSX.Element;
+export declare type ScopeTreeNodeProps = {} & TreeNodeProps<PayloadType>;
+export declare function ScopeTreeNode({ node, depth }: ScopeTreeNodeProps): JSX.Element;

package/dist/component-tree/scope-tree-node/scope-tree-node.js

@@ -24,25 +24,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScopeTreeNode = void 0;
 const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
-const clickable_1 = require("@teambit/legacy/dist/to-eject/css-components/clickable");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_animate_height_1 = __importDefault(require("react-animate-height"));
-const base_ui_graph_tree_indent_1 = require("@teambit/base-ui.graph.tree.indent");
-const base_ui_graph_tree_recursive_tree_1 = require("@teambit/base-ui.graph.tree.recursive-tree");
+const design_ui_tree_1 = require("@teambit/design.ui.tree");
 const get_name_1 = require("../utils/get-name");
 const scope_tree_node_module_scss_1 = __importDefault(require("./scope-tree-node.module.scss"));
 function ScopeTreeNode({ node, depth }) {
-    const [collapsed, collapse] = (0, react_1.useState)(false);
+    const { isCollapsed, activePath } = (0, design_ui_tree_1.useTree)();
+    const isActive = activePath === null || activePath === void 0 ? void 0 : activePath.startsWith(node.id);
+    const initialOpen = isActive || !isCollapsed;
+    const [open, toggle] = (0, react_1.useState)(initialOpen);
     const displayName = (0, get_name_1.getName)(node.id.replace(/\/$/, ''));
+    const firstRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        const current = firstRun.current;
+        if (current)
+            return;
+        if (isActive === true)
+            toggle(true);
+    }, [isActive]);
+    (0, react_1.useEffect)(() => {
+        const current = firstRun.current;
+        if (current)
+            return;
+        toggle(!isCollapsed);
+    }, [isCollapsed]);
+    (0, react_1.useEffect)(() => {
+        firstRun.current = false;
+    }, []);
+    const highlighted = !open && isActive;
     return (react_1.default.createElement("div", null,
-        node.id && (react_1.default.createElement("div", { className: (0, classnames_1.default)(base_ui_graph_tree_indent_1.indentClass, clickable_1.clickable, scope_tree_node_module_scss_1.default.namespace), onClick: () => collapse(!collapsed) },
+        node.id && (react_1.default.createElement("div", { className: (0, classnames_1.default)(design_ui_tree_1.indentClass, scope_tree_node_module_scss_1.default.scope, highlighted && scope_tree_node_module_scss_1.default.highlighted), onClick: () => toggle(!open) },
             react_1.default.createElement("div", { className: scope_tree_node_module_scss_1.default.left },
-                react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: (0, classnames_1.default)(scope_tree_node_module_scss_1.default.arrow, collapsed && scope_tree_node_module_scss_1.default.collapsed), of: "fat-arrow-down" }),
+                react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: (0, classnames_1.default)(scope_tree_node_module_scss_1.default.arrow, !open && scope_tree_node_module_scss_1.default.collapsed), of: "fat-arrow-down" }),
                 react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: scope_tree_node_module_scss_1.default.arrow, of: "collection-full" }),
                 react_1.default.createElement("span", { className: scope_tree_node_module_scss_1.default.name }, displayName)))),
-        react_1.default.createElement(react_animate_height_1.default, { height: collapsed ? 0 : 'auto' },
-            react_1.default.createElement("div", { style: (0, base_ui_graph_tree_indent_1.indentStyle)(depth + 1), className: (0, classnames_1.default)(scope_tree_node_module_scss_1.default.componentTree) }, node.children && react_1.default.createElement(base_ui_graph_tree_recursive_tree_1.TreeLayer, { childNodes: node.children, depth: depth + 1 })))));
+        react_1.default.createElement(react_animate_height_1.default, { height: open ? 'auto' : 0 },
+            react_1.default.createElement("div", { style: (0, design_ui_tree_1.indentStyle)(depth + 1), className: (0, classnames_1.default)(scope_tree_node_module_scss_1.default.componentTree) }, node.children && react_1.default.createElement(design_ui_tree_1.TreeLayer, { childNodes: node.children, depth: depth + 1 })))));
 }
 exports.ScopeTreeNode = ScopeTreeNode;
 //# sourceMappingURL=scope-tree-node.js.map

package/dist/component-tree/scope-tree-node/scope-tree-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"scope-tree-node.js","sourceRoot":"","sources":["../../../component-tree/scope-tree-node/scope-tree-node.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gFAAyD;AACzD,sFAAmF;AACnF,4DAAoC;AACpC,+CAAwC;AACxC,gFAAiD;AAEjD,kFAA8E;AAC9E,kGAAsF;AAEtF,gDAA4C;AAC5C,gGAAmD;AAEnD,SAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAA8B;IACvE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,IAAA,kBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IAExD,OAAO,CACL;QACG,IAAI,CAAC,EAAE,IAAI,CACV,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAW,EAAE,qBAAS,EAAE,qCAAM,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC;YACvG,uCAAK,SAAS,EAAE,qCAAM,CAAC,IAAI;gBACzB,8BAAC,+BAAI,IAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAM,CAAC,KAAK,EAAE,SAAS,IAAI,qCAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAC,gBAAgB,GAAG;gBAChG,8BAAC,+BAAI,IAAC,SAAS,EAAE,qCAAM,CAAC,KAAK,EAAE,EAAE,EAAC,iBAAiB,GAAG;gBACtD,wCAAM,SAAS,EAAE,qCAAM,CAAC,IAAI,IAAG,WAAW,CAAQ,CAC9C,CACF,CACP;QACD,8BAAC,8BAAa,IAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;YAC3C,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,KAAK,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAM,CAAC,aAAa,CAAC,IAC5E,IAAI,CAAC,QAAQ,IAAI,8BAAC,6CAAS,IAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,GAAI,CACxE,CACQ,CACZ,CACP,CAAC;AACJ,CAAC;AAtBD,sCAsBC"}
+{"version":3,"file":"scope-tree-node.js","sourceRoot":"","sources":["../../../component-tree/scope-tree-node/scope-tree-node.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gFAAyD;AACzD,4DAAoC;AACpC,+CAA2D;AAC3D,gFAAiD;AAEjD,4DAAsG;AAEtG,gDAA4C;AAC5C,gGAAmD;AAInD,SAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAsB;IAC/D,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAA,wBAAO,GAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,QAAQ,IAAI,CAAC,WAAW,CAAC;IAE7C,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAiB,WAAW,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,IAAA,kBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IAExD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO;YAAE,OAAO;QACpB,IAAI,QAAQ,KAAK,IAAI;YAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO;YAAE,OAAO;QACpB,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC;IAEtC,OAAO,CACL;QACG,IAAI,CAAC,EAAE,IAAI,CACV,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,4BAAW,EAAE,qCAAM,CAAC,KAAK,EAAE,WAAW,IAAI,qCAAM,CAAC,WAAW,CAAC,EACnF,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;YAE5B,uCAAK,SAAS,EAAE,qCAAM,CAAC,IAAI;gBACzB,8BAAC,+BAAI,IAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAM,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,qCAAM,CAAC,SAAS,CAAC,EAAE,EAAE,EAAC,gBAAgB,GAAG;gBAC5F,8BAAC,+BAAI,IAAC,SAAS,EAAE,qCAAM,CAAC,KAAK,EAAE,EAAE,EAAC,iBAAiB,GAAG;gBACtD,wCAAM,SAAS,EAAE,qCAAM,CAAC,IAAI,IAAG,WAAW,CAAQ,CAC9C,CACF,CACP;QACD,8BAAC,8BAAa,IAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACtC,uCAAK,KAAK,EAAE,IAAA,4BAAW,EAAC,KAAK,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,qCAAM,CAAC,aAAa,CAAC,IAC5E,IAAI,CAAC,QAAQ,IAAI,8BAAC,0BAAS,IAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,GAAI,CACxE,CACQ,CACZ,CACP,CAAC;AACJ,CAAC;AAlDD,sCAkDC"}

package/dist/component-tree/scope-tree-node/scope-tree-node.module.scss

@@ -1,12 +1,13 @@
 @import '~@teambit/base-ui.theme.colors/colors.module.scss';
 
-.namespace {
+.scope {
   position: relative;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   user-select: none;
+  cursor: pointer;
   font-weight: bold;
   font-size: inherit;
   padding-right: 8px;
@@ -27,6 +28,10 @@
   }
 }
 
+.highlighted {
+  color: var(--bit-accent-heavy, #5d4aec);
+}
+
 .left {
   display: flex;
   align-items: center;

package/dist/overview-link/overview-link.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function OverviewLink(): JSX.Element;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui-foundation.ui.side-bar",
-  "version": "0.0.490",
+  "version": "0.0.495",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui/side-bar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui/side-bar",
-    "version": "0.0.490"
+    "version": "0.0.495"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -14,16 +14,17 @@
     "core-js": "^3.0.0",
     "@teambit/base-ui.graph.tree.indent": "1.0.0",
     "@teambit/base-ui.graph.tree.inflate-paths": "1.0.0",
-    "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
-    "@teambit/base-ui.graph.tree.root-node": "1.0.0",
-    "@teambit/base-ui.graph.tree.tree-context": "1.0.0",
+    "@teambit/base-ui.routing.routing-provider": "1.0.0",
     "@teambit/base-ui.routing.nav-link": "1.0.0",
-    "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/documenter.ui.separator": "4.1.1",
+    "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/base-ui.theme.colors": "1.0.0",
-    "@teambit/component.ui.deprecation-icon": "0.0.490",
+    "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
+    "@teambit/base-ui.graph.tree.tree-context": "1.0.0",
+    "@teambit/design.ui.tree": "0.0.2",
+    "@teambit/component.ui.deprecation-icon": "0.0.492",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/envs.ui.env-icon": "0.0.484"
+    "@teambit/envs.ui.env-icon": "0.0.485"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -36,7 +37,6 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.193",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -64,7 +64,6 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.193",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }