@teambit/ui-foundation.ui.side-bar 0.0.648 → 0.0.650

package/component-tree/component-tree.tsx

@@ -1,17 +1,17 @@
-import { ComponentModel } from '@teambit/component';
+import { ComponentModel, useIdFromLocation } from '@teambit/component';
 import React, { useMemo } from 'react';
 import { useLocation } from '@teambit/base-react.navigation.link';
 import { indentStyle } from '@teambit/base-ui.graph.tree.indent';
 import { inflateToTree, attachPayload } from '@teambit/base-ui.graph.tree.inflate-paths';
-import { Tree, TreeNodeRenderer } from '@teambit/design.ui.tree';
+import { Tree, TreeNodeRenderer, TreeNode as TreeNodeType } from '@teambit/design.ui.tree';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { TreeContextProvider } from '@teambit/base-ui.graph.tree.tree-context';
 import { PayloadType, ScopePayload } from './payload-type';
 import { DefaultTreeNodeRenderer } from './default-tree-node-renderer';
 
-const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
-
 type ComponentTreeProps = {
   components: ComponentModel[];
+  transformTree?: (rootNode: TreeNodeType) => TreeNodeType;
   TreeNode?: TreeNodeRenderer<PayloadType>;
   isCollapsed?: boolean;
   assumeScopeInUrl?: boolean;
@@ -21,18 +21,17 @@ export function ComponentTree({
   components,
   isCollapsed,
   className,
-  assumeScopeInUrl = false,
+  transformTree,
+  // assumeScopeInUrl = false,
   TreeNode = DefaultTreeNodeRenderer,
 }: ComponentTreeProps) {
   const { pathname = '/' } = useLocation() || {};
-
+  // override default splat from location when viewing a lane component
+  const laneCompUrl = pathname.split(LanesModel.baseLaneComponentRoute.concat('/'))[1];
+  const idFromLocation = useIdFromLocation(laneCompUrl);
   const activeComponent = useMemo(() => {
-    const componentUrlRegex = new RegExp(componentIdUrlRegex);
-    const path = pathname?.startsWith('/') ? pathname.substring(1) : pathname;
-    const rawMatcher = path.match(componentUrlRegex)?.[0]; // returns just the part that matches the componentId section without /~compositions etc.
-    const matcher = assumeScopeInUrl ? rawMatcher?.split('/').slice(2).join('/'): rawMatcher;
     const active = components.find((x) => {
-      return matcher && matcher === x.id.fullName;
+      return idFromLocation && (idFromLocation === x.id.fullName || idFromLocation === x.id.toStringWithoutVersion());
     });
     return active?.id.toString({ ignoreVersion: true });
   }, [components, pathname]);
@@ -44,6 +43,7 @@ export function ComponentTree({
 
     attachPayload(tree, payloadMap);
 
+    if (transformTree) return transformTree(tree);
     return tree;
   }, [components]);
 

package/component-tree/component-view/component-view.module.scss

@@ -87,7 +87,16 @@
   }
 }
 
+.onMainTooltip {
+  max-width: unset !important; // override tippy's default max-width: 350px
+  font-size: var(--bit-p-xxs);
+}
+
 .envLink {
   color: white;
   text-decoration: none;
 }
+
+.mainOnly {
+  opacity: 60%;
+}

package/component-tree/component-view/component-view.tsx

@@ -10,6 +10,7 @@ import { Tooltip } from '@teambit/design.ui.tooltip';
 import { TreeContext } from '@teambit/base-ui.graph.tree.tree-context';
 import { indentClass } from '@teambit/base-ui.graph.tree.indent';
 import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
+import { useLanes } from '@teambit/lanes.hooks.use-lanes';
 import { PayloadType } from '../payload-type';
 import { getName } from '../utils/get-name';
 import styles from './component-view.module.scss';
@@ -23,7 +24,7 @@ export function ComponentView(props: ComponentViewProps<PayloadType>) {
   const component = node.payload;
 
   const { onSelect } = useContext(TreeContext);
-
+  const { lanesModel } = useLanes();
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
       onSelect && onSelect(node.id, event);
@@ -32,7 +33,6 @@ export function ComponentView(props: ComponentViewProps<PayloadType>) {
   );
 
   if (!(component instanceof ComponentModel)) return null;
-
   const envId = ComponentID.fromString(component.environment?.id as string);
 
   const envTooltip = (
@@ -50,10 +50,21 @@ export function ComponentView(props: ComponentViewProps<PayloadType>) {
     </Link>
   );
 
+  const href = lanesModel?.getLaneComponentUrlByVersion(component.id, lanesModel.viewedLane?.id);
+  const viewingMainCompOnLane =
+    !lanesModel?.viewedLane?.id.isDefault() && lanesModel?.isComponentOnMainButNotOnLane(component.id);
+  const Name = viewingMainCompOnLane ? (
+    <Tooltip className={styles.onMainTooltip} placement="right" content={'On Main'}>
+      <span>{getName(node.id)}</span>
+    </Tooltip>
+  ) : (
+    <span>{getName(node.id)}</span>
+  );
+
   return (
     <Link
-      href={`${component.id.fullName}`}
-      className={classNames(indentClass, styles.component)}
+      href={href}
+      className={classNames(indentClass, styles.component, viewingMainCompOnLane && styles.mainOnly)}
       activeClassName={styles.active}
       onClick={handleClick}
     >
@@ -61,8 +72,7 @@ export function ComponentView(props: ComponentViewProps<PayloadType>) {
         <Tooltip className={styles.componentEnvTooltip} placement="right" content={envTooltip}>
           <EnvIcon component={component} className={styles.envIcon} />
         </Tooltip>
-
-        <span>{getName(node.id)}</span>
+        {Name}
       </div>
 
       <div className={styles.right}>

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

@@ -42,6 +42,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 8px;
+    line-height: 16px;
   }
 }
 

package/component-tree/payload-type.tsx

@@ -1,5 +1,5 @@
 import { ComponentModel } from '@teambit/component';
-import { LaneModel } from '@teambit/lanes.ui.models';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 
 export class ScopePayload {
   get isScope() {

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

@@ -42,6 +42,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 8px;
+    line-height: 16px;
   }
 }
 

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

@@ -1,12 +1,13 @@
 import { ComponentModel } from '@teambit/component';
 import React from 'react';
-import { TreeNodeRenderer } from '@teambit/design.ui.tree';
+import { TreeNodeRenderer, TreeNode as TreeNodeType } from '@teambit/design.ui.tree';
 import { PayloadType } from './payload-type';
 declare type ComponentTreeProps = {
     components: ComponentModel[];
+    transformTree?: (rootNode: TreeNodeType) => TreeNodeType;
     TreeNode?: TreeNodeRenderer<PayloadType>;
     isCollapsed?: boolean;
     assumeScopeInUrl?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare function ComponentTree({ components, isCollapsed, className, assumeScopeInUrl, TreeNode, }: ComponentTreeProps): JSX.Element;
+export declare function ComponentTree({ components, isCollapsed, className, transformTree, TreeNode, }: ComponentTreeProps): JSX.Element;
 export {};

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

@@ -20,25 +20,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentTree = void 0;
+const component_1 = require("@teambit/component");
 const react_1 = __importStar(require("react"));
 const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
 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 design_ui_tree_1 = require("@teambit/design.ui.tree");
+const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
 const base_ui_graph_tree_tree_context_1 = require("@teambit/base-ui.graph.tree.tree-context");
 const payload_type_1 = require("./payload-type");
 const default_tree_node_renderer_1 = require("./default-tree-node-renderer");
-const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
-function ComponentTree({ components, isCollapsed, className, assumeScopeInUrl = false, TreeNode = default_tree_node_renderer_1.DefaultTreeNodeRenderer, }) {
+function ComponentTree({ components, isCollapsed, className, transformTree, 
+// assumeScopeInUrl = false,
+TreeNode = default_tree_node_renderer_1.DefaultTreeNodeRenderer, }) {
     const { pathname = '/' } = (0, base_react_navigation_link_1.useLocation)() || {};
+    // override default splat from location when viewing a lane component
+    const laneCompUrl = pathname.split(lanes_ui_models_lanes_model_1.LanesModel.baseLaneComponentRoute.concat('/'))[1];
+    const idFromLocation = (0, component_1.useIdFromLocation)(laneCompUrl);
     const activeComponent = (0, react_1.useMemo)(() => {
-        var _a;
-        const componentUrlRegex = new RegExp(componentIdUrlRegex);
-        const path = (pathname === null || pathname === void 0 ? void 0 : pathname.startsWith('/')) ? pathname.substring(1) : pathname;
-        const rawMatcher = (_a = path.match(componentUrlRegex)) === null || _a === void 0 ? void 0 : _a[0]; // returns just the part that matches the componentId section without /~compositions etc.
-        const matcher = assumeScopeInUrl ? rawMatcher === null || rawMatcher === void 0 ? void 0 : rawMatcher.split('/').slice(2).join('/') : rawMatcher;
         const active = components.find((x) => {
-            return matcher && matcher === x.id.fullName;
+            return idFromLocation && (idFromLocation === x.id.fullName || idFromLocation === x.id.toStringWithoutVersion());
         });
         return active === null || active === void 0 ? void 0 : active.id.toString({ ignoreVersion: true });
     }, [components, pathname]);
@@ -46,6 +47,8 @@ function ComponentTree({ components, isCollapsed, className, assumeScopeInUrl =
         const tree = (0, base_ui_graph_tree_inflate_paths_1.inflateToTree)(components, (c) => c.id.toString({ ignoreVersion: true }));
         const payloadMap = calcPayload(components);
         (0, base_ui_graph_tree_inflate_paths_1.attachPayload)(tree, payloadMap);
+        if (transformTree)
+            return transformTree(tree);
         return tree;
     }, [components]);
     return (react_1.default.createElement(base_ui_graph_tree_tree_context_1.TreeContextProvider, null,

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":"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"}
+{"version":3,"file":"component-tree.js","sourceRoot":"","sources":["../../component-tree/component-tree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAuE;AACvE,+CAAuC;AACvC,oFAAkE;AAClE,kFAAiE;AACjE,gGAAyF;AACzF,4DAA2F;AAC3F,sFAAkE;AAClE,8FAA+E;AAC/E,iDAA2D;AAC3D,6EAAuE;AAUvE,SAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa;AACb,4BAA4B;AAC5B,QAAQ,GAAG,oDAAuB,GACf;IACnB,MAAM,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAG,IAAA,wCAAW,GAAE,IAAI,EAAE,CAAC;IAC/C,qEAAqE;IACrE,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,wCAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,MAAM,cAAc,GAAG,IAAA,6BAAiB,EAAC,WAAW,CAAC,CAAC;IACtD,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACnC,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YACnC,OAAO,cAAc,IAAI,CAAC,cAAc,KAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE,CAAC,sBAAsB,EAAE,CAAC,CAAC;QAClH,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,IAAI,aAAa;YAAE,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,8BAAC,qDAAmB;QAClB,uCAAK,KAAK,EAAE,IAAA,uCAAW,EAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS;YAC9C,8BAAC,qBAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC/F,CACc,CACvB,CAAC;AACJ,CAAC;AArCD,sCAqCC;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.js

@@ -33,13 +33,15 @@ const react_1 = __importStar(require("react"));
 const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
 const base_ui_graph_tree_tree_context_1 = require("@teambit/base-ui.graph.tree.tree-context");
 const base_ui_graph_tree_indent_1 = require("@teambit/base-ui.graph.tree.indent");
+const lanes_hooks_use_lanes_1 = require("@teambit/lanes.hooks.use-lanes");
 const get_name_1 = require("../utils/get-name");
 const component_view_module_scss_1 = __importDefault(require("./component-view.module.scss"));
 function ComponentView(props) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { node } = props;
     const component = node.payload;
     const { onSelect } = (0, react_1.useContext)(base_ui_graph_tree_tree_context_1.TreeContext);
+    const { lanesModel } = (0, lanes_hooks_use_lanes_1.useLanes)();
     const handleClick = (0, react_1.useCallback)((event) => {
         onSelect && onSelect(node.id, event);
     }, [onSelect, node.id]);
@@ -52,11 +54,15 @@ function ComponentView(props) {
         } },
         react_1.default.createElement("div", { className: component_view_module_scss_1.default.componentEnvTitle }, "Environment"),
         react_1.default.createElement("div", null, (_b = component.environment) === null || _b === void 0 ? void 0 : _b.id)));
-    return (react_1.default.createElement(base_react_navigation_link_1.Link, { href: `${component.id.fullName}`, className: (0, classnames_1.default)(base_ui_graph_tree_indent_1.indentClass, component_view_module_scss_1.default.component), activeClassName: component_view_module_scss_1.default.active, onClick: handleClick },
+    const href = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.getLaneComponentUrlByVersion(component.id, (_c = lanesModel.viewedLane) === null || _c === void 0 ? void 0 : _c.id);
+    const viewingMainCompOnLane = !((_d = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.viewedLane) === null || _d === void 0 ? void 0 : _d.id.isDefault()) && (lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.isComponentOnMainButNotOnLane(component.id));
+    const Name = viewingMainCompOnLane ? (react_1.default.createElement(design_ui_tooltip_1.Tooltip, { className: component_view_module_scss_1.default.onMainTooltip, placement: "right", content: 'On Main' },
+        react_1.default.createElement("span", null, (0, get_name_1.getName)(node.id)))) : (react_1.default.createElement("span", null, (0, get_name_1.getName)(node.id)));
+    return (react_1.default.createElement(base_react_navigation_link_1.Link, { href: href, className: (0, classnames_1.default)(base_ui_graph_tree_indent_1.indentClass, component_view_module_scss_1.default.component, viewingMainCompOnLane && component_view_module_scss_1.default.mainOnly), activeClassName: component_view_module_scss_1.default.active, onClick: handleClick },
         react_1.default.createElement("div", { className: component_view_module_scss_1.default.left },
             react_1.default.createElement(design_ui_tooltip_1.Tooltip, { className: component_view_module_scss_1.default.componentEnvTooltip, placement: "right", content: envTooltip },
                 react_1.default.createElement(envs_ui_env_icon_1.EnvIcon, { component: component, className: component_view_module_scss_1.default.envIcon })),
-            react_1.default.createElement("span", null, (0, get_name_1.getName)(node.id))),
+            Name),
         react_1.default.createElement("div", { className: component_view_module_scss_1.default.right },
             react_1.default.createElement(component_ui_deprecation_icon_1.DeprecationIcon, { component: component }),
             props.treeNodeSlot &&

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

@@ -1 +1 @@
-{"version":3,"file":"component-view.js","sourceRoot":"","sources":["../../../component-tree/component-view/component-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,oFAA2D;AAC3D,gEAAoD;AACpD,0FAAyE;AACzE,4DAAoC;AACpC,kDAAiE;AACjE,8FAAwE;AACxE,+CAAuD;AACvD,kEAAqD;AACrD,8FAAuE;AACvE,kFAAiE;AAGjE,gDAA4C;AAC5C,8FAAkD;AAMlD,SAAgB,aAAa,CAAC,KAAsC;;IAClE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAE/B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,kBAAU,EAAC,6CAAW,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,KAAsD,EAAE,EAAE;QACzD,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CACpB,CAAC;IAEF,IAAI,CAAC,CAAC,SAAS,YAAY,0BAAc,CAAC;QAAE,OAAO,IAAI,CAAC;IAExD,MAAM,KAAK,GAAG,uBAAW,CAAC,UAAU,CAAC,MAAA,SAAS,CAAC,WAAW,0CAAE,EAAY,CAAC,CAAC;IAE1E,MAAM,UAAU,GAAG,CACjB,8BAAC,iCAAI,IACH,SAAS,EAAE,oCAAM,CAAC,OAAO,EACzB,IAAI,EAAE,8CAAY,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,EACzD,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,qCAAqC;YACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;QAED,uCAAK,SAAS,EAAE,oCAAM,CAAC,iBAAiB,kBAAmB;QAC3D,2CAAM,MAAA,SAAS,CAAC,WAAW,0CAAE,EAAE,CAAO,CACjC,CACR,CAAC;IAEF,OAAO,CACL,8BAAC,iCAAI,IACH,IAAI,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,EAChC,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAW,EAAE,oCAAM,CAAC,SAAS,CAAC,EACpD,eAAe,EAAE,oCAAM,CAAC,MAAM,EAC9B,OAAO,EAAE,WAAW;QAEpB,uCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI;YACzB,8BAAC,2BAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,mBAAmB,EAAE,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,UAAU;gBACnF,8BAAC,0BAAO,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,oCAAM,CAAC,OAAO,GAAI,CACpD;YAEV,4CAAO,IAAA,kBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,CAAQ,CAC3B;QAEN,uCAAK,SAAS,EAAE,oCAAM,CAAC,KAAK;YAC1B,8BAAC,+CAAe,IAAC,SAAS,EAAE,SAAS,GAAI;YAExC,KAAK,CAAC,YAAY;gBACjB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,8BAAC,QAAQ,CAAC,MAAM,IAAC,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC,CACtG,CACD,CACR,CAAC;AACJ,CAAC;AAvDD,sCAuDC"}
+{"version":3,"file":"component-view.js","sourceRoot":"","sources":["../../../component-tree/component-view/component-view.tsx"],"names":[],"mappings":"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"}

package/dist/component-tree/component-view/component-view.module.scss

@@ -87,7 +87,16 @@
   }
 }
 
+.onMainTooltip {
+  max-width: unset !important; // override tippy's default max-width: 350px
+  font-size: var(--bit-p-xxs);
+}
+
 .envLink {
   color: white;
   text-decoration: none;
 }
+
+.mainOnly {
+  opacity: 60%;
+}

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

@@ -42,6 +42,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 8px;
+    line-height: 16px;
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { ComponentModel } from '@teambit/component';
-import { LaneModel } from '@teambit/lanes.ui.models';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 export declare class ScopePayload {
     get isScope(): boolean;
 }

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

@@ -42,6 +42,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 8px;
+    line-height: 16px;
   }
 }
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui-foundation.ui.side-bar",
-  "version": "0.0.648",
+  "version": "0.0.650",
   "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.648"
+    "version": "0.0.650"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -20,11 +20,12 @@
     "@teambit/base-ui.graph.tree.recursive-tree": "1.0.0",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/design.ui.tree": "0.0.12",
-    "@teambit/lanes.ui.models": "0.0.35",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.1",
     "@teambit/component.modules.component-url": "0.0.140",
     "@teambit/component.ui.deprecation-icon": "0.0.500",
     "@teambit/design.ui.tooltip": "0.0.358",
-    "@teambit/envs.ui.env-icon": "0.0.492"
+    "@teambit/envs.ui.env-icon": "0.0.492",
+    "@teambit/lanes.hooks.use-lanes": "0.0.39"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",