@teambit/component 0.0.743 → 0.0.744

package/aspect.section.tsx

@@ -6,7 +6,7 @@ import { AspectPage } from './ui/aspect-page';
 export class AspectSection implements Section {
   route = {
     path: '~aspect',
-    children: <AspectPage />,
+    element: <AspectPage />,
   };
   navigationLink = {
     href: '~aspect',

package/component.ui.runtime.tsx

@@ -3,7 +3,7 @@ import flatten from 'lodash.flatten';
 import copy from 'copy-to-clipboard';
 import type { RouteProps } from 'react-router-dom';
 
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { LinkProps } from '@teambit/base-react.navigation.link';
 import CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';
 import { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';
 import { Slot, SlotRegistry } from '@teambit/harmony';
@@ -21,7 +21,7 @@ import { ComponentAspect } from './component.aspect';
 import { ComponentModel } from './ui';
 import { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';
 import { ComponentResultPlugin, ComponentSearcher } from './ui/component-searcher';
-import { ConsumeMethodSlot, ConsumePlugin, Menu, NavPlugin, OrderedNavigationSlot } from './ui/menu';
+import { ConsumeMethodSlot, ConsumePlugin, ComponentMenu, NavPlugin, OrderedNavigationSlot } from './ui/menu';
 
 export type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;
 
@@ -34,10 +34,8 @@ export type ComponentMeta = {
   id: string;
 };
 
-export const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
-
 export class ComponentUI {
-  readonly routePath = `/:componentId(${componentIdUrlRegex})`;
+  readonly routePath = `/*`;
   private componentSearcher: ComponentSearcher;
 
   constructor(
@@ -180,7 +178,7 @@ export class ComponentUI {
 
   getMenu(host: string) {
     return (
-      <Menu
+      <ComponentMenu
         navigationSlot={this.navSlot}
         consumeMethodSlot={this.consumeMethodSlot}
         widgetSlot={this.widgetSlot}
@@ -195,7 +193,7 @@ export class ComponentUI {
     return this;
   }
 
-  registerNavigation(nav: NavLinkProps, order?: number) {
+  registerNavigation(nav: LinkProps, order?: number) {
     this.navSlot.register({
       props: nav,
       order,
@@ -206,7 +204,7 @@ export class ComponentUI {
     this.consumeMethodSlot.register(consumeMethods);
   }
 
-  registerWidget(widget: NavLinkProps, order?: number) {
+  registerWidget(widget: LinkProps, order?: number) {
     this.widgetSlot.register({ props: widget, order });
   }
 
@@ -271,15 +269,16 @@ export class ComponentUI {
       commandBarUI,
       reactRouterUI
     );
-    const section = new AspectSection();
+    const aspectSection = new AspectSection();
 
+    // @ts-ignore
     componentUI.registerSearchResultWidget({ key: 'deprecation', end: DeprecationIcon });
 
     componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
     commandBarUI.addSearcher(componentUI.componentSearcher);
     componentUI.registerMenuItem(componentUI.menuItems);
-    componentUI.registerRoute(section.route);
-    componentUI.registerWidget(section.navigationLink, section.order);
+    componentUI.registerRoute(aspectSection.route);
+    componentUI.registerWidget(aspectSection.navigationLink, aspectSection.order);
     componentUI.registerConsumeMethod(componentUI.bitMethod);
     return componentUI;
   }

package/dist/aspect.section.d.ts

@@ -3,7 +3,7 @@ import { Section } from './section';
 export declare class AspectSection implements Section {
     route: {
         path: string;
-        children: JSX.Element;
+        element: JSX.Element;
     };
     navigationLink: {
         href: string;

package/dist/aspect.section.js

@@ -51,7 +51,7 @@ class AspectSection {
   constructor() {
     (0, _defineProperty2().default)(this, "route", {
       path: '~aspect',
-      children: /*#__PURE__*/_react().default.createElement(_aspectPage().AspectPage, null)
+      element: /*#__PURE__*/_react().default.createElement(_aspectPage().AspectPage, null)
     });
     (0, _defineProperty2().default)(this, "navigationLink", {
       href: '~aspect',

package/dist/aspect.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["AspectSection","path","children","href","displayName"],"sources":["aspect.section.tsx"],"sourcesContent":["import React from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Section } from './section';\nimport { AspectPage } from './ui/aspect-page';\n\nexport class AspectSection implements Section {\n  route = {\n    path: '~aspect',\n    children: <AspectPage />,\n  };\n  navigationLink = {\n    href: '~aspect',\n    children: <MenuWidgetIcon icon=\"configuration\" tooltipContent=\"Configuration\" />,\n    displayName: 'Configuration',\n  };\n  order = 50;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,aAAN,CAAuC;EAAA;IAAA,+CACpC;MACNC,IAAI,EAAE,SADA;MAENC,QAAQ,eAAE,+BAAC,wBAAD;IAFJ,CADoC;IAAA,wDAK3B;MACfC,IAAI,EAAE,SADS;MAEfD,QAAQ,eAAE,+BAAC,gCAAD;QAAgB,IAAI,EAAC,eAArB;QAAqC,cAAc,EAAC;MAApD,EAFK;MAGfE,WAAW,EAAE;IAHE,CAL2B;IAAA,+CAUpC,EAVoC;EAAA;;AAAA"}
+{"version":3,"names":["AspectSection","path","element","href","children","displayName"],"sources":["aspect.section.tsx"],"sourcesContent":["import React from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Section } from './section';\nimport { AspectPage } from './ui/aspect-page';\n\nexport class AspectSection implements Section {\n  route = {\n    path: '~aspect',\n    element: <AspectPage />,\n  };\n  navigationLink = {\n    href: '~aspect',\n    children: <MenuWidgetIcon icon=\"configuration\" tooltipContent=\"Configuration\" />,\n    displayName: 'Configuration',\n  };\n  order = 50;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,aAAN,CAAuC;EAAA;IAAA,+CACpC;MACNC,IAAI,EAAE,SADA;MAENC,OAAO,eAAE,+BAAC,wBAAD;IAFH,CADoC;IAAA,wDAK3B;MACfC,IAAI,EAAE,SADS;MAEfC,QAAQ,eAAE,+BAAC,gCAAD;QAAgB,IAAI,EAAC,eAArB;QAAqC,cAAc,EAAC;MAApD,EAFK;MAGfC,WAAW,EAAE;IAHE,CAL2B;IAAA,+CAUpC,EAVoC;EAAA;;AAAA"}

package/dist/component.ui.runtime.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { RouteProps } from 'react-router-dom';
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { LinkProps } from '@teambit/base-react.navigation.link';
 import { CommandBarUI } from '@teambit/command-bar';
 import { SlotRegistry } from '@teambit/harmony';
 import { PubsubUI } from '@teambit/pubsub';
@@ -19,7 +19,6 @@ export declare type Server = {
 export declare type ComponentMeta = {
     id: string;
 };
-export declare const componentIdUrlRegex = "[\\w\\/-]*[\\w-]";
 export declare class ComponentUI {
     /**
      * Pubsub aspects
@@ -36,7 +35,7 @@ export declare class ComponentUI {
     private pageItemSlot;
     private componentSearchResultSlot;
     private commandBarUI;
-    readonly routePath: string;
+    readonly routePath = "/*";
     private componentSearcher;
     constructor(
     /**
@@ -63,9 +62,9 @@ export declare class ComponentUI {
     getComponentUI(host: string): JSX.Element;
     getMenu(host: string): JSX.Element;
     registerRoute(route: RouteProps): this;
-    registerNavigation(nav: NavLinkProps, order?: number): void;
+    registerNavigation(nav: LinkProps, order?: number): void;
     registerConsumeMethod(...consumeMethods: ConsumePlugin[]): void;
-    registerWidget(widget: NavLinkProps, order?: number): void;
+    registerWidget(widget: LinkProps, order?: number): void;
     registerMenuItem: (menuItems: MenuItem[]) => void;
     registerPageItem: (...items: ComponentPageElement[]) => void;
     /** register widgets to the components listed in the command bar */
@@ -73,9 +72,7 @@ export declare class ComponentUI {
     updateComponents: (components: ComponentModel[]) => void;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static slots: (((registerFn: () => string) => SlotRegistry<RouteProps<string, {
-        [x: string]: string | undefined;
-    }>>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => SlotRegistry<NavPlugin>) | ((registerFn: () => string) => SlotRegistry<ConsumeMethodSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentPageSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentSearchResultSlot>))[];
+    static slots: (((registerFn: () => string) => SlotRegistry<RouteProps>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => SlotRegistry<NavPlugin>) | ((registerFn: () => string) => SlotRegistry<ConsumeMethodSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentPageSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentSearchResultSlot>))[];
     static provider([pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI], config: any, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]: [
         RouteSlot,
         OrderedNavigationSlot,

package/dist/component.ui.runtime.js

@@ -9,7 +9,7 @@ require("core-js/modules/es.promise.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.componentIdUrlRegex = exports.ComponentUI = void 0;
+exports.default = exports.ComponentUI = void 0;
 
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -195,9 +195,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
-exports.componentIdUrlRegex = componentIdUrlRegex;
-
 class ComponentUI {
   constructor(
   /**
@@ -217,7 +214,7 @@ class ComponentUI {
     this.pageItemSlot = pageItemSlot;
     this.componentSearchResultSlot = componentSearchResultSlot;
     this.commandBarUI = commandBarUI;
-    (0, _defineProperty2().default)(this, "routePath", `/:componentId(${componentIdUrlRegex})`);
+    (0, _defineProperty2().default)(this, "routePath", `/*`);
     (0, _defineProperty2().default)(this, "componentSearcher", void 0);
     (0, _defineProperty2().default)(this, "activeComponent", void 0);
     (0, _defineProperty2().default)(this, "copyNpmId", () => {
@@ -358,7 +355,7 @@ class ComponentUI {
   }
 
   getMenu(host) {
-    return /*#__PURE__*/_react().default.createElement(_menu().Menu, {
+    return /*#__PURE__*/_react().default.createElement(_menu().ComponentMenu, {
       navigationSlot: this.navSlot,
       consumeMethodSlot: this.consumeMethodSlot,
       widgetSlot: this.widgetSlot,
@@ -394,7 +391,8 @@ class ComponentUI {
     // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)
     // TODO: add contextual hook for ComponentHost @uri/@oded
     const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot, commandBarUI, reactRouterUI);
-    const section = new (_aspect().AspectSection)();
+    const aspectSection = new (_aspect().AspectSection)(); // @ts-ignore
+
     componentUI.registerSearchResultWidget({
       key: 'deprecation',
       end: _componentUi().DeprecationIcon
@@ -402,8 +400,8 @@ class ComponentUI {
     componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
     commandBarUI.addSearcher(componentUI.componentSearcher);
     componentUI.registerMenuItem(componentUI.menuItems);
-    componentUI.registerRoute(section.route);
-    componentUI.registerWidget(section.navigationLink, section.order);
+    componentUI.registerRoute(aspectSection.route);
+    componentUI.registerWidget(aspectSection.navigationLink, aspectSection.order);
     componentUI.registerConsumeMethod(componentUI.bitMethod);
     return componentUI;
   }

package/dist/component.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentIdUrlRegex","ComponentUI","constructor","pubsub","routeSlot","navSlot","consumeMethodSlot","widgetSlot","menuItemSlot","pageItemSlot","componentSearchResultSlot","commandBarUI","reactRouterUi","packageName","activeComponent","version","id","versionString","copy","action","toString","displayName","keybinding","copyNpmId","category","title","keyChar","handler","run","comp","options","latest","Title","width","Component","ignoreVersion","name","currentLane","order","menuItems","register","items","totalPlugins","flatten","values","componentSearcher","updatePlugins","components","update","ComponentSearcher","navigate","navigateTo","isBrowser","registerPubSub","sub","PreviewAspect","be","type","ClickInsideAnIframeEvent","TYPE","event","MouseEvent","view","window","bubbles","cancelable","body","document","dispatchEvent","getComponentUI","host","handleComponentChange","getMenu","registerRoute","route","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","reactRouterUI","config","pageSlot","componentUI","section","AspectSection","registerSearchResultWidget","key","end","DeprecationIcon","addCommand","keyBindings","addSearcher","registerMenuItem","navigationLink","bitMethod","PubsubAspect","CommandBarAspect","ReactRouterAspect","UIRuntime","Slot","withType","ComponentAspect","addRuntime"],"sources":["component.ui.runtime.tsx"],"sourcesContent":["import React from 'react';\nimport flatten from 'lodash.flatten';\nimport copy from 'copy-to-clipboard';\nimport type { RouteProps } from 'react-router-dom';\n\nimport { NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';\nimport { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';\nimport PubsubAspect, { BitBaseEvent, PubsubUI } from '@teambit/pubsub';\nimport ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';\nimport { UIRuntime } from '@teambit/ui';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport { MenuItem, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Import } from '@teambit/ui-foundation.ui.use-box.menu';\n\nimport { AspectSection } from './aspect.section';\nimport { ComponentAspect } from './component.aspect';\nimport { ComponentModel } from './ui';\nimport { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';\nimport { ComponentResultPlugin, ComponentSearcher } from './ui/component-searcher';\nimport { ConsumeMethodSlot, ConsumePlugin, Menu, NavPlugin, OrderedNavigationSlot } from './ui/menu';\n\nexport type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;\n\nexport type Server = {\n  env: string;\n  url: string;\n};\n\nexport type ComponentMeta = {\n  id: string;\n};\n\nexport const componentIdUrlRegex = '[\\\\w\\\\/-]*[\\\\w-]';\n\nexport class ComponentUI {\n  readonly routePath = `/:componentId(${componentIdUrlRegex})`;\n  private componentSearcher: ComponentSearcher;\n\n  constructor(\n    /**\n     * Pubsub aspects\n     */\n    private pubsub: PubsubUI,\n\n    private routeSlot: RouteSlot,\n\n    private navSlot: OrderedNavigationSlot,\n\n    private consumeMethodSlot: ConsumeMethodSlot,\n\n    /**\n     * slot for registering a new widget to the menu.\n     */\n    private widgetSlot: OrderedNavigationSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private pageItemSlot: ComponentPageSlot,\n\n    private componentSearchResultSlot: ComponentSearchResultSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    reactRouterUi: ReactRouterUI\n  ) {\n    this.componentSearcher = new ComponentSearcher({ navigate: reactRouterUi.navigateTo });\n    if (isBrowser) this.registerPubSub();\n  }\n\n  /**\n   * the current visible component\n   */\n  private activeComponent?: ComponentModel;\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${version}` : '';\n      copy(`${packageName}${versionString}`);\n    }\n  };\n\n  /**\n   * key bindings used by component aspect\n   */\n  private keyBindings: CommandEntry[] = [\n    {\n      id: 'component.copyBitId', // TODO - extract to a component!\n      action: () => {\n        copy(this.activeComponent?.id.toString() || '');\n      },\n      displayName: 'Copy component ID',\n      keybinding: '.',\n    },\n    {\n      id: 'component.copyNpmId', // TODO - extract to a component!\n      action: this.copyNpmId,\n      displayName: 'Copy component package name',\n      keybinding: ',',\n    },\n  ];\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component ID',\n      keyChar: '.',\n      handler: () => this.commandBarUI?.run('component.copyBitId'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component package name',\n      keyChar: ',',\n      handler: () => this.commandBarUI?.run('component.copyNpmId'),\n    },\n  ];\n\n  private bitMethod: ConsumePlugin = (comp, options) => {\n    const version = comp.version === comp.latest ? '' : `@${comp.version}`;\n    return {\n      Title: <img style={{ width: '20px' }} src=\"https://static.bit.dev/brands/bit-logo-text.svg\" />,\n      Component: (\n        <Import\n          componentId={`${comp.id.toString({ ignoreVersion: true })}${version}`}\n          packageName={`${comp.packageName}${version}`}\n          componentName={comp.id.name}\n          showInstallMethod={!options?.currentLane}\n        />\n      ),\n      order: 0,\n    };\n  };\n\n  registerPubSub() {\n    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {\n      if (be.type === ClickInsideAnIframeEvent.TYPE) {\n        const event = new MouseEvent('mousedown', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        });\n\n        const body = document.body;\n        body?.dispatchEvent(event);\n      }\n    });\n  }\n\n  handleComponentChange = (activeComponent?: ComponentModel) => {\n    this.activeComponent = activeComponent;\n  };\n\n  getComponentUI(host: string) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n      />\n    );\n  }\n\n  getMenu(host: string) {\n    return (\n      <Menu\n        navigationSlot={this.navSlot}\n        consumeMethodSlot={this.consumeMethodSlot}\n        widgetSlot={this.widgetSlot}\n        host={host}\n        menuItemSlot={this.menuItemSlot}\n      />\n    );\n  }\n\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerNavigation(nav: NavLinkProps, order?: number) {\n    this.navSlot.register({\n      props: nav,\n      order,\n    });\n  }\n\n  registerConsumeMethod(...consumeMethods: ConsumePlugin[]) {\n    this.consumeMethodSlot.register(consumeMethods);\n  }\n\n  registerWidget(widget: NavLinkProps, order?: number) {\n    this.widgetSlot.register({ props: widget, order });\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerPageItem = (...items: ComponentPageElement[]) => {\n    this.pageItemSlot.register(items);\n  };\n\n  /** register widgets to the components listed in the command bar */\n  registerSearchResultWidget = (...items: ComponentResultPlugin[]) => {\n    this.componentSearchResultSlot.register(items);\n    const totalPlugins = flatten(this.componentSearchResultSlot.values());\n\n    this.componentSearcher.updatePlugins(totalPlugins);\n  };\n\n  updateComponents = (components: ComponentModel[]) => {\n    this.componentSearcher.update(components);\n  };\n\n  static dependencies = [PubsubAspect, CommandBarAspect, ReactRouterAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<NavPlugin>(),\n    Slot.withType<NavigationSlot>(),\n    Slot.withType<ConsumeMethodSlot>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<ComponentPageSlot>(),\n    Slot.withType<ComponentSearchResultSlot>(),\n  ];\n\n  static async provider(\n    [pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI],\n    config,\n    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]: [\n      RouteSlot,\n      OrderedNavigationSlot,\n      ConsumeMethodSlot,\n      OrderedNavigationSlot,\n      MenuItemSlot,\n      ComponentPageSlot,\n      ComponentSearchResultSlot\n    ]\n  ) {\n    // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)\n    // TODO: add contextual hook for ComponentHost @uri/@oded\n    const componentUI = new ComponentUI(\n      pubsub,\n      routeSlot,\n      navSlot,\n      consumeMethodSlot,\n      widgetSlot,\n      menuItemSlot,\n      pageSlot,\n      componentSearchResultSlot,\n      commandBarUI,\n      reactRouterUI\n    );\n    const section = new AspectSection();\n\n    componentUI.registerSearchResultWidget({ key: 'deprecation', end: DeprecationIcon });\n\n    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n    commandBarUI.addSearcher(componentUI.componentSearcher);\n    componentUI.registerMenuItem(componentUI.menuItems);\n    componentUI.registerRoute(section.route);\n    componentUI.registerWidget(section.navigationLink, section.order);\n    componentUI.registerConsumeMethod(componentUI.bitMethod);\n    return componentUI;\n  }\n}\n\nexport default ComponentUI;\n\nComponentAspect.addRuntime(ComponentUI);\n"],"mappings":"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"}
+{"version":3,"names":["ComponentUI","constructor","pubsub","routeSlot","navSlot","consumeMethodSlot","widgetSlot","menuItemSlot","pageItemSlot","componentSearchResultSlot","commandBarUI","reactRouterUi","packageName","activeComponent","version","id","versionString","copy","action","toString","displayName","keybinding","copyNpmId","category","title","keyChar","handler","run","comp","options","latest","Title","width","Component","ignoreVersion","name","currentLane","order","menuItems","register","items","totalPlugins","flatten","values","componentSearcher","updatePlugins","components","update","ComponentSearcher","navigate","navigateTo","isBrowser","registerPubSub","sub","PreviewAspect","be","type","ClickInsideAnIframeEvent","TYPE","event","MouseEvent","view","window","bubbles","cancelable","body","document","dispatchEvent","getComponentUI","host","handleComponentChange","getMenu","registerRoute","route","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","reactRouterUI","config","pageSlot","componentUI","aspectSection","AspectSection","registerSearchResultWidget","key","end","DeprecationIcon","addCommand","keyBindings","addSearcher","registerMenuItem","navigationLink","bitMethod","PubsubAspect","CommandBarAspect","ReactRouterAspect","UIRuntime","Slot","withType","ComponentAspect","addRuntime"],"sources":["component.ui.runtime.tsx"],"sourcesContent":["import React from 'react';\nimport flatten from 'lodash.flatten';\nimport copy from 'copy-to-clipboard';\nimport type { RouteProps } from 'react-router-dom';\n\nimport type { LinkProps } from '@teambit/base-react.navigation.link';\nimport CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';\nimport { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';\nimport PubsubAspect, { BitBaseEvent, PubsubUI } from '@teambit/pubsub';\nimport ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';\nimport { UIRuntime } from '@teambit/ui';\nimport { isBrowser } from '@teambit/ui-foundation.ui.is-browser';\nimport { MenuItem, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Import } from '@teambit/ui-foundation.ui.use-box.menu';\n\nimport { AspectSection } from './aspect.section';\nimport { ComponentAspect } from './component.aspect';\nimport { ComponentModel } from './ui';\nimport { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';\nimport { ComponentResultPlugin, ComponentSearcher } from './ui/component-searcher';\nimport { ConsumeMethodSlot, ConsumePlugin, ComponentMenu, NavPlugin, OrderedNavigationSlot } from './ui/menu';\n\nexport type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;\n\nexport type Server = {\n  env: string;\n  url: string;\n};\n\nexport type ComponentMeta = {\n  id: string;\n};\n\nexport class ComponentUI {\n  readonly routePath = `/*`;\n  private componentSearcher: ComponentSearcher;\n\n  constructor(\n    /**\n     * Pubsub aspects\n     */\n    private pubsub: PubsubUI,\n\n    private routeSlot: RouteSlot,\n\n    private navSlot: OrderedNavigationSlot,\n\n    private consumeMethodSlot: ConsumeMethodSlot,\n\n    /**\n     * slot for registering a new widget to the menu.\n     */\n    private widgetSlot: OrderedNavigationSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private pageItemSlot: ComponentPageSlot,\n\n    private componentSearchResultSlot: ComponentSearchResultSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    reactRouterUi: ReactRouterUI\n  ) {\n    this.componentSearcher = new ComponentSearcher({ navigate: reactRouterUi.navigateTo });\n    if (isBrowser) this.registerPubSub();\n  }\n\n  /**\n   * the current visible component\n   */\n  private activeComponent?: ComponentModel;\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${version}` : '';\n      copy(`${packageName}${versionString}`);\n    }\n  };\n\n  /**\n   * key bindings used by component aspect\n   */\n  private keyBindings: CommandEntry[] = [\n    {\n      id: 'component.copyBitId', // TODO - extract to a component!\n      action: () => {\n        copy(this.activeComponent?.id.toString() || '');\n      },\n      displayName: 'Copy component ID',\n      keybinding: '.',\n    },\n    {\n      id: 'component.copyNpmId', // TODO - extract to a component!\n      action: this.copyNpmId,\n      displayName: 'Copy component package name',\n      keybinding: ',',\n    },\n  ];\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component ID',\n      keyChar: '.',\n      handler: () => this.commandBarUI?.run('component.copyBitId'),\n    },\n    {\n      category: 'workflow',\n      title: 'Copy component package name',\n      keyChar: ',',\n      handler: () => this.commandBarUI?.run('component.copyNpmId'),\n    },\n  ];\n\n  private bitMethod: ConsumePlugin = (comp, options) => {\n    const version = comp.version === comp.latest ? '' : `@${comp.version}`;\n    return {\n      Title: <img style={{ width: '20px' }} src=\"https://static.bit.dev/brands/bit-logo-text.svg\" />,\n      Component: (\n        <Import\n          componentId={`${comp.id.toString({ ignoreVersion: true })}${version}`}\n          packageName={`${comp.packageName}${version}`}\n          componentName={comp.id.name}\n          showInstallMethod={!options?.currentLane}\n        />\n      ),\n      order: 0,\n    };\n  };\n\n  registerPubSub() {\n    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {\n      if (be.type === ClickInsideAnIframeEvent.TYPE) {\n        const event = new MouseEvent('mousedown', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        });\n\n        const body = document.body;\n        body?.dispatchEvent(event);\n      }\n    });\n  }\n\n  handleComponentChange = (activeComponent?: ComponentModel) => {\n    this.activeComponent = activeComponent;\n  };\n\n  getComponentUI(host: string) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n      />\n    );\n  }\n\n  getMenu(host: string) {\n    return (\n      <ComponentMenu\n        navigationSlot={this.navSlot}\n        consumeMethodSlot={this.consumeMethodSlot}\n        widgetSlot={this.widgetSlot}\n        host={host}\n        menuItemSlot={this.menuItemSlot}\n      />\n    );\n  }\n\n  registerRoute(route: RouteProps) {\n    this.routeSlot.register(route);\n    return this;\n  }\n\n  registerNavigation(nav: LinkProps, order?: number) {\n    this.navSlot.register({\n      props: nav,\n      order,\n    });\n  }\n\n  registerConsumeMethod(...consumeMethods: ConsumePlugin[]) {\n    this.consumeMethodSlot.register(consumeMethods);\n  }\n\n  registerWidget(widget: LinkProps, order?: number) {\n    this.widgetSlot.register({ props: widget, order });\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerPageItem = (...items: ComponentPageElement[]) => {\n    this.pageItemSlot.register(items);\n  };\n\n  /** register widgets to the components listed in the command bar */\n  registerSearchResultWidget = (...items: ComponentResultPlugin[]) => {\n    this.componentSearchResultSlot.register(items);\n    const totalPlugins = flatten(this.componentSearchResultSlot.values());\n\n    this.componentSearcher.updatePlugins(totalPlugins);\n  };\n\n  updateComponents = (components: ComponentModel[]) => {\n    this.componentSearcher.update(components);\n  };\n\n  static dependencies = [PubsubAspect, CommandBarAspect, ReactRouterAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<NavPlugin>(),\n    Slot.withType<NavigationSlot>(),\n    Slot.withType<ConsumeMethodSlot>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<ComponentPageSlot>(),\n    Slot.withType<ComponentSearchResultSlot>(),\n  ];\n\n  static async provider(\n    [pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI],\n    config,\n    [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]: [\n      RouteSlot,\n      OrderedNavigationSlot,\n      ConsumeMethodSlot,\n      OrderedNavigationSlot,\n      MenuItemSlot,\n      ComponentPageSlot,\n      ComponentSearchResultSlot\n    ]\n  ) {\n    // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)\n    // TODO: add contextual hook for ComponentHost @uri/@oded\n    const componentUI = new ComponentUI(\n      pubsub,\n      routeSlot,\n      navSlot,\n      consumeMethodSlot,\n      widgetSlot,\n      menuItemSlot,\n      pageSlot,\n      componentSearchResultSlot,\n      commandBarUI,\n      reactRouterUI\n    );\n    const aspectSection = new AspectSection();\n\n    // @ts-ignore\n    componentUI.registerSearchResultWidget({ key: 'deprecation', end: DeprecationIcon });\n\n    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n    commandBarUI.addSearcher(componentUI.componentSearcher);\n    componentUI.registerMenuItem(componentUI.menuItems);\n    componentUI.registerRoute(aspectSection.route);\n    componentUI.registerWidget(aspectSection.navigationLink, aspectSection.order);\n    componentUI.registerConsumeMethod(componentUI.bitMethod);\n    return componentUI;\n  }\n}\n\nexport default ComponentUI;\n\nComponentAspect.addRuntime(ComponentUI);\n"],"mappings":"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"}

package/dist/section/section.d.ts

@@ -1,8 +1,8 @@
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { LinkProps } from '@teambit/base-react.navigation.link';
 import { RouteProps } from 'react-router-dom';
 export interface Section {
     route: RouteProps;
-    navigationLink: NavLinkProps;
+    navigationLink: LinkProps;
     /**
      * text to be used in the mobile res dropdown
      */

package/dist/section/section.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["section.tsx"],"sourcesContent":["import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport { RouteProps } from 'react-router-dom';\n\nexport interface Section {\n  route: RouteProps;\n  navigationLink: NavLinkProps;\n  /**\n   * text to be used in the mobile res dropdown\n   */\n  displayName?: string;\n  order?: number;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["section.tsx"],"sourcesContent":["import type { LinkProps } from '@teambit/base-react.navigation.link';\nimport { RouteProps } from 'react-router-dom';\n\nexport interface Section {\n  route: RouteProps;\n  navigationLink: LinkProps;\n  /**\n   * text to be used in the mobile res dropdown\n   */\n  displayName?: string;\n  order?: number;\n}\n"],"mappings":""}

package/dist/ui/component.js

@@ -69,6 +69,16 @@ function _useComponent() {
   return data;
 }
 
+function _useComponentFromLocation() {
+  const data = require("./use-component-from-location");
+
+  _useComponentFromLocation = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -82,11 +92,12 @@ function Component({
   host,
   onComponentChange
 }) {
+  const componentId = (0, _useComponentFromLocation().useIdFromLocation)();
   const {
     component,
     componentDescriptor,
     error
-  } = (0, _useComponent().useComponent)(host); // trigger onComponentChange when component changes
+  } = (0, _useComponent().useComponent)(host, componentId); // trigger onComponentChange when component changes
 
   (0, _react().useEffect)(() => onComponentChange === null || onComponentChange === void 0 ? void 0 : onComponentChange(component), [component]); // cleanup when unmounting component
 
@@ -102,7 +113,8 @@ function Component({
     component: component
   }, before, /*#__PURE__*/_react().default.createElement("div", {
     className: _componentModule().default.container
-  }, routeSlot && /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotSubRouter, {
+  }, routeSlot && /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
+    parentPath: `${componentId}/*`,
     slot: routeSlot
   })), after));
 }

package/dist/ui/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["Component","routeSlot","containerSlot","host","onComponentChange","component","componentDescriptor","error","useComponent","useEffect","undefined","pageItems","useMemo","flatten","values","before","filter","x","type","map","content","after","renderError","styles","container"],"sources":["component.tsx"],"sourcesContent":["import React, { useEffect, ReactNode, useMemo } from 'react';\nimport flatten from 'lodash.flatten';\nimport { RouteSlot, SlotSubRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SlotRegistry } from '@teambit/harmony';\n\nimport styles from './component.module.scss';\nimport { ComponentProvider, ComponentDescriptorProvider } from './context';\nimport { useComponent } from './use-component';\nimport { ComponentModel } from './component-model';\n\nexport type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;\nexport type ComponentPageElement = {\n  type: 'before' | 'after';\n  content: ReactNode;\n};\n\nexport type ComponentProps = {\n  containerSlot?: ComponentPageSlot;\n  routeSlot: RouteSlot;\n  host: string;\n  onComponentChange?: (activeComponent?: ComponentModel) => void;\n};\n\n/**\n * main UI component of the Component extension.\n */\nexport function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {\n  const { component, componentDescriptor, error } = useComponent(host);\n  // trigger onComponentChange when component changes\n  useEffect(() => onComponentChange?.(component), [component]);\n  // cleanup when unmounting component\n  useEffect(() => () => onComponentChange?.(undefined), []);\n\n  const pageItems = useMemo(() => flatten(containerSlot?.values()), [containerSlot]);\n  const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);\n  const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);\n\n  if (error) return error.renderError();\n  if (!component) return <div></div>;\n\n  return (\n    <ComponentDescriptorProvider componentDescriptor={componentDescriptor}>\n      <ComponentProvider component={component}>\n        {before}\n        <div className={styles.container}>{routeSlot && <SlotSubRouter slot={routeSlot} />}</div>\n        {after}\n      </ComponentProvider>\n    </ComponentDescriptorProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAgBA;AACA;AACA;AACO,SAASA,SAAT,CAAmB;EAAEC,SAAF;EAAaC,aAAb;EAA4BC,IAA5B;EAAkCC;AAAlC,CAAnB,EAA0F;EAC/F,MAAM;IAAEC,SAAF;IAAaC,mBAAb;IAAkCC;EAAlC,IAA4C,IAAAC,4BAAA,EAAaL,IAAb,CAAlD,CAD+F,CAE/F;;EACA,IAAAM,kBAAA,EAAU,MAAML,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGC,SAAH,CAAjC,EAAgD,CAACA,SAAD,CAAhD,EAH+F,CAI/F;;EACA,IAAAI,kBAAA,EAAU,MAAM,MAAML,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGM,SAAH,CAAvC,EAAsD,EAAtD;EAEA,MAAMC,SAAS,GAAG,IAAAC,gBAAA,EAAQ,MAAM,IAAAC,iBAAA,EAAQX,aAAR,aAAQA,aAAR,uBAAQA,aAAa,CAAEY,MAAf,EAAR,CAAd,EAAgD,CAACZ,aAAD,CAAhD,CAAlB;EACA,MAAMa,MAAM,GAAG,IAAAH,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,QAAnC,EAA6CC,GAA7C,CAAkDF,CAAD,IAAOA,CAAC,CAACG,OAA1D,CAAd,EAAkF,CAACT,SAAD,CAAlF,CAAf;EACA,MAAMU,KAAK,GAAG,IAAAT,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,OAAnC,EAA4CC,GAA5C,CAAiDF,CAAD,IAAOA,CAAC,CAACG,OAAzD,CAAd,EAAiF,CAACT,SAAD,CAAjF,CAAd;EAEA,IAAIJ,KAAJ,EAAW,OAAOA,KAAK,CAACe,WAAN,EAAP;EACX,IAAI,CAACjB,SAAL,EAAgB,oBAAO,2CAAP;EAEhB,oBACE,+BAAC,sCAAD;IAA6B,mBAAmB,EAAEC;EAAlD,gBACE,+BAAC,4BAAD;IAAmB,SAAS,EAAED;EAA9B,GACGU,MADH,eAEE;IAAK,SAAS,EAAEQ,0BAAA,CAAOC;EAAvB,GAAmCvB,SAAS,iBAAI,+BAAC,0CAAD;IAAe,IAAI,EAAEA;EAArB,EAAhD,CAFF,EAGGoB,KAHH,CADF,CADF;AASD"}
+{"version":3,"names":["Component","routeSlot","containerSlot","host","onComponentChange","componentId","useIdFromLocation","component","componentDescriptor","error","useComponent","useEffect","undefined","pageItems","useMemo","flatten","values","before","filter","x","type","map","content","after","renderError","styles","container"],"sources":["component.tsx"],"sourcesContent":["import React, { useEffect, ReactNode, useMemo } from 'react';\nimport flatten from 'lodash.flatten';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SlotRegistry } from '@teambit/harmony';\n\nimport styles from './component.module.scss';\nimport { ComponentProvider, ComponentDescriptorProvider } from './context';\nimport { useComponent } from './use-component';\nimport { ComponentModel } from './component-model';\nimport { useIdFromLocation } from './use-component-from-location';\n\nexport type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;\nexport type ComponentPageElement = {\n  type: 'before' | 'after';\n  content: ReactNode;\n};\n\nexport type ComponentProps = {\n  containerSlot?: ComponentPageSlot;\n  routeSlot: RouteSlot;\n  host: string;\n  onComponentChange?: (activeComponent?: ComponentModel) => void;\n};\n\n/**\n * main UI component of the Component extension.\n */\nexport function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {\n  const componentId = useIdFromLocation();\n  const { component, componentDescriptor, error } = useComponent(host, componentId);\n  // trigger onComponentChange when component changes\n  useEffect(() => onComponentChange?.(component), [component]);\n  // cleanup when unmounting component\n  useEffect(() => () => onComponentChange?.(undefined), []);\n\n  const pageItems = useMemo(() => flatten(containerSlot?.values()), [containerSlot]);\n  const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);\n  const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);\n\n  if (error) return error.renderError();\n  if (!component) return <div></div>;\n\n  return (\n    <ComponentDescriptorProvider componentDescriptor={componentDescriptor}>\n      <ComponentProvider component={component}>\n        {before}\n        <div className={styles.container}>\n          {routeSlot && <SlotRouter parentPath={`${componentId}/*`} slot={routeSlot} />}\n        </div>\n        {after}\n      </ComponentProvider>\n    </ComponentDescriptorProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAeA;AACA;AACA;AACO,SAASA,SAAT,CAAmB;EAAEC,SAAF;EAAaC,aAAb;EAA4BC,IAA5B;EAAkCC;AAAlC,CAAnB,EAA0F;EAC/F,MAAMC,WAAW,GAAG,IAAAC,6CAAA,GAApB;EACA,MAAM;IAAEC,SAAF;IAAaC,mBAAb;IAAkCC;EAAlC,IAA4C,IAAAC,4BAAA,EAAaP,IAAb,EAAmBE,WAAnB,CAAlD,CAF+F,CAG/F;;EACA,IAAAM,kBAAA,EAAU,MAAMP,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGG,SAAH,CAAjC,EAAgD,CAACA,SAAD,CAAhD,EAJ+F,CAK/F;;EACA,IAAAI,kBAAA,EAAU,MAAM,MAAMP,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGQ,SAAH,CAAvC,EAAsD,EAAtD;EAEA,MAAMC,SAAS,GAAG,IAAAC,gBAAA,EAAQ,MAAM,IAAAC,iBAAA,EAAQb,aAAR,aAAQA,aAAR,uBAAQA,aAAa,CAAEc,MAAf,EAAR,CAAd,EAAgD,CAACd,aAAD,CAAhD,CAAlB;EACA,MAAMe,MAAM,GAAG,IAAAH,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,QAAnC,EAA6CC,GAA7C,CAAkDF,CAAD,IAAOA,CAAC,CAACG,OAA1D,CAAd,EAAkF,CAACT,SAAD,CAAlF,CAAf;EACA,MAAMU,KAAK,GAAG,IAAAT,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,OAAnC,EAA4CC,GAA5C,CAAiDF,CAAD,IAAOA,CAAC,CAACG,OAAzD,CAAd,EAAiF,CAACT,SAAD,CAAjF,CAAd;EAEA,IAAIJ,KAAJ,EAAW,OAAOA,KAAK,CAACe,WAAN,EAAP;EACX,IAAI,CAACjB,SAAL,EAAgB,oBAAO,2CAAP;EAEhB,oBACE,+BAAC,sCAAD;IAA6B,mBAAmB,EAAEC;EAAlD,gBACE,+BAAC,4BAAD;IAAmB,SAAS,EAAED;EAA9B,GACGU,MADH,eAEE;IAAK,SAAS,EAAEQ,0BAAA,CAAOC;EAAvB,GACGzB,SAAS,iBAAI,+BAAC,uCAAD;IAAY,UAAU,EAAG,GAAEI,WAAY,IAAvC;IAA4C,IAAI,EAAEJ;EAAlD,EADhB,CAFF,EAKGsB,KALH,CADF,CADF;AAWD"}

package/dist/ui/menu/index.d.ts

@@ -1,2 +1,2 @@
-export { Menu } from './menu';
+export { ComponentMenu } from './menu';
 export type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';

package/dist/ui/menu/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Menu", {
+Object.defineProperty(exports, "ComponentMenu", {
   enumerable: true,
   get: function () {
-    return _menu().Menu;
+    return _menu().ComponentMenu;
   }
 });
 

package/dist/ui/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { Menu } from './menu';\nexport type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ComponentMenu } from './menu';\nexport type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}

package/dist/ui/menu/menu.d.ts

@@ -21,4 +21,4 @@ export declare type MenuProps = {
 /**
  * top bar menu.
  */
-export declare function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps): JSX.Element;
+export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, }: MenuProps): JSX.Element;

package/dist/ui/menu/menu.js

@@ -9,7 +9,7 @@ require("core-js/modules/es.regexp.exec.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Menu = Menu;
+exports.ComponentMenu = ComponentMenu;
 
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -21,6 +21,16 @@ function _defineProperty2() {
   return data;
 }
 
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+
+  _reactRouterDom = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _uiFoundationUi() {
   const data = require("@teambit/ui-foundation.ui.main-dropdown");
 
@@ -51,10 +61,10 @@ function _uiFoundationUi2() {
   return data;
 }
 
-function _baseUiRouting() {
-  const data = require("@teambit/base-ui.routing.routing-provider");
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
 
-  _baseUiRouting = function () {
+  _baseReactNavigation = function () {
     return data;
   };
 
@@ -161,6 +171,16 @@ function _menuModule() {
   return data;
 }
 
+function _useComponentFromLocation() {
+  const data = require("../use-component-from-location");
+
+  _useComponentFromLocation = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -172,7 +192,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /**
  * top bar menu.
  */
-function Menu({
+function ComponentMenu({
   navigationSlot,
   widgetSlot,
   className,
@@ -180,33 +200,37 @@ function Menu({
   menuItemSlot,
   consumeMethodSlot
 }) {
+  const componentId = (0, _useComponentFromLocation().useIdFromLocation)();
   const {
     component
-  } = (0, _useComponent().useComponent)(host);
+  } = (0, _useComponent().useComponent)(host, componentId);
   const mainMenuItems = (0, _react().useMemo)(() => (0, _lodash().groupBy)((0, _lodash().flatten)(menuItemSlot.values()), 'category'), [menuItemSlot]);
   if (!component) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().FullLoader, null);
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: (0, _classnames().default)(_menuModule().default.topBar, className)
-  }, /*#__PURE__*/_react().default.createElement("div", {
-    className: _menuModule().default.leftSide
-  }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
-    navigationSlot: navigationSlot
-  }), /*#__PURE__*/_react().default.createElement(_mobileMenuNav().MobileMenuNav, {
-    navigationSlot: navigationSlot,
-    widgetSlot: widgetSlot
-  })), /*#__PURE__*/_react().default.createElement("div", {
-    className: _menuModule().default.rightSide
-  }, /*#__PURE__*/_react().default.createElement("div", {
-    className: _menuModule().default.widgets
-  }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
-    navigationSlot: widgetSlot
-  })), /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
-    component: component,
-    consumeMethods: consumeMethodSlot,
-    host: host
-  }), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MainDropdown, {
-    menuItems: mainMenuItems
-  })));
+  return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Routes, null, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
+    path: `${componentId}/*`,
+    element: /*#__PURE__*/_react().default.createElement("div", {
+      className: (0, _classnames().default)(_menuModule().default.topBar, className)
+    }, /*#__PURE__*/_react().default.createElement("div", {
+      className: _menuModule().default.leftSide
+    }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
+      navigationSlot: navigationSlot
+    }), /*#__PURE__*/_react().default.createElement(_mobileMenuNav().MobileMenuNav, {
+      navigationSlot: navigationSlot,
+      widgetSlot: widgetSlot
+    })), /*#__PURE__*/_react().default.createElement("div", {
+      className: _menuModule().default.rightSide
+    }, /*#__PURE__*/_react().default.createElement("div", {
+      className: _menuModule().default.widgets
+    }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
+      navigationSlot: widgetSlot
+    })), /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
+      component: component,
+      consumeMethods: consumeMethodSlot,
+      host: host
+    }), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MainDropdown, {
+      menuItems: mainMenuItems
+    })))
+  }));
 }
 
 function VersionRelatedDropdowns({
@@ -214,7 +238,7 @@ function VersionRelatedDropdowns({
   consumeMethods,
   host
 }) {
-  const location = (0, _baseUiRouting().useLocation)();
+  const location = (0, _baseReactNavigation().useLocation)();
   const isNew = component.tags.isEmpty();
   const lanesContext = (0, _lanesUi().useLanesContext)();
   const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.viewedLane;
@@ -240,7 +264,7 @@ function VersionRelatedDropdowns({
   }, [logs]);
   const lanes = (lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.getLanesByComponentId(component.id)) || [];
   const localVersion = isWorkspace && !isNew && !currentLane;
-  const currentVersion = isWorkspace && !isNew && !location.search.includes('version') ? 'workspace' : component.version;
+  const currentVersion = isWorkspace && !isNew && !(location !== null && location !== void 0 && location.search.includes('version')) ? 'workspace' : component.version;
   const methods = useConsumeMethods(consumeMethods, component, currentLane);
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, tags.length > 0 && /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox().UseBoxDropdown, {
     position: "bottom-end",

package/dist/ui/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["Menu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","component","useComponent","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","isNew","tags","isEmpty","lanesContext","useLanesContext","currentLane","viewedLane","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","reverse","tagLookup","Map","forEach","set","compact","toArray","get","lanes","getLanesByComponentId","id","localVersion","currentVersion","search","includes","methods","useConsumeMethods","length","useBox","name","latest","componentModel","method","x","Component","Title"],"sources":["menu.tsx"],"sourcesContent":["import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-ui.routing.routing-provider';\nimport { flatten, groupBy, compact } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel, useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './menu-nav';\nimport { MobileMenuNav } from './mobile-menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\n\nexport type MenuProps = {\n  className?: string;\n  /**\n   * slot for top bar menu nav items\n   */\n  navigationSlot: OrderedNavigationSlot;\n  /**\n   * right side menu item slot\n   */\n  widgetSlot: OrderedNavigationSlot;\n  host: string;\n  /**\n   * main dropdown item slot\n   */\n  menuItemSlot: MenuItemSlot;\n\n  consumeMethodSlot: ConsumeMethodSlot;\n};\n\n/**\n * top bar menu.\n */\nexport function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps) {\n  const { component } = useComponent(host);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <div className={classnames(styles.topBar, className)}>\n      <div className={styles.leftSide}>\n        <MenuNav navigationSlot={navigationSlot} />\n        <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n      </div>\n      <div className={styles.rightSide}>\n        <div className={styles.widgets}>\n          <MenuNav navigationSlot={widgetSlot} />\n        </div>\n        <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n        <MainDropdown menuItems={mainMenuItems} />\n      </div>\n    </div>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n  host,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n  host: string;\n}) {\n  const location = useLocation();\n  const isNew = component.tags.isEmpty();\n  const lanesContext = useLanesContext();\n  const currentLane = lanesContext?.viewedLane;\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || [])\n      .filter((log) => !log.tag)\n      .map((snap) => ({ ...snap, version: snap.hash }))\n      .reverse();\n  }, [logs]);\n\n  const tags = useMemo(() => {\n    const tagLookup = new Map<string, LegacyComponentLog>();\n    (logs || [])\n      .filter((log) => log.tag)\n      .forEach((tag) => {\n        tagLookup.set(tag?.tag as string, tag);\n      });\n    return compact(\n      component.tags\n        ?.toArray()\n        .reverse()\n        .map((tag) => tagLookup.get(tag.version.version))\n    ).map((tag) => ({ ...tag, version: tag.tag as string }));\n  }, [logs]);\n\n  const lanes = lanesContext?.getLanesByComponentId(component.id) || [];\n  const localVersion = isWorkspace && !isNew && !currentLane;\n\n  const currentVersion =\n    isWorkspace && !isNew && !location.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(consumeMethods, component, currentLane);\n  return (\n    <>\n      {tags.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown\n        tags={tags}\n        snaps={snaps}\n        lanes={lanes}\n        localVersion={localVersion}\n        currentVersion={currentVersion}\n        latestVersion={component.latest}\n        currentLane={currentLane}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  consumeMethods: ConsumeMethodSlot,\n  componentModel: ComponentModel,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel, { currentLane });\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel, currentLane]\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","componentId","useIdFromLocation","component","useComponent","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","isNew","tags","isEmpty","lanesContext","useLanesContext","currentLane","viewedLane","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","reverse","tagLookup","Map","forEach","set","compact","toArray","get","lanes","getLanesByComponentId","id","localVersion","currentVersion","search","includes","methods","useConsumeMethods","length","useBox","name","latest","componentModel","method","x","Component","Title"],"sources":["menu.tsx"],"sourcesContent":["import { Routes, Route } from 'react-router-dom';\nimport { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { flatten, groupBy, compact } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel, useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './menu-nav';\nimport { MobileMenuNav } from './mobile-menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\n\nexport type MenuProps = {\n  className?: string;\n  /**\n   * slot for top bar menu nav items\n   */\n  navigationSlot: OrderedNavigationSlot;\n  /**\n   * right side menu item slot\n   */\n  widgetSlot: OrderedNavigationSlot;\n  host: string;\n  /**\n   * main dropdown item slot\n   */\n  menuItemSlot: MenuItemSlot;\n\n  consumeMethodSlot: ConsumeMethodSlot;\n};\n\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n  navigationSlot,\n  widgetSlot,\n  className,\n  host,\n  menuItemSlot,\n  consumeMethodSlot,\n}: MenuProps) {\n  const componentId = useIdFromLocation();\n  const { component } = useComponent(host, componentId);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <Routes>\n      <Route\n        path={`${componentId}/*`}\n        element={\n          <div className={classnames(styles.topBar, className)}>\n            <div className={styles.leftSide}>\n              <MenuNav navigationSlot={navigationSlot} />\n              <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n            </div>\n            <div className={styles.rightSide}>\n              <div className={styles.widgets}>\n                <MenuNav navigationSlot={widgetSlot} />\n              </div>\n              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n              <MainDropdown menuItems={mainMenuItems} />\n            </div>\n          </div>\n        }\n      />\n    </Routes>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n  host,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n  host: string;\n}) {\n  const location = useLocation();\n  const isNew = component.tags.isEmpty();\n  const lanesContext = useLanesContext();\n  const currentLane = lanesContext?.viewedLane;\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || [])\n      .filter((log) => !log.tag)\n      .map((snap) => ({ ...snap, version: snap.hash }))\n      .reverse();\n  }, [logs]);\n\n  const tags = useMemo(() => {\n    const tagLookup = new Map<string, LegacyComponentLog>();\n    (logs || [])\n      .filter((log) => log.tag)\n      .forEach((tag) => {\n        tagLookup.set(tag?.tag as string, tag);\n      });\n    return compact(\n      component.tags\n        ?.toArray()\n        .reverse()\n        .map((tag) => tagLookup.get(tag.version.version))\n    ).map((tag) => ({ ...tag, version: tag.tag as string }));\n  }, [logs]);\n\n  const lanes = lanesContext?.getLanesByComponentId(component.id) || [];\n  const localVersion = isWorkspace && !isNew && !currentLane;\n\n  const currentVersion =\n    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(consumeMethods, component, currentLane);\n  return (\n    <>\n      {tags.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown\n        tags={tags}\n        snaps={snaps}\n        lanes={lanes}\n        localVersion={localVersion}\n        currentVersion={currentVersion}\n        latestVersion={component.latest}\n        currentLane={currentLane}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  consumeMethods: ConsumeMethodSlot,\n  componentModel: ComponentModel,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel, { currentLane });\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel, currentLane]\n  );\n}\n"],"mappings":"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"}