@teambit/component 0.0.752 → 0.0.753

package/component.ui.runtime.tsx

@@ -188,8 +188,8 @@ export class ComponentUI {
     );
   }
 
-  registerRoute(route: RouteProps) {
-    this.routeSlot.register(route);
+  registerRoute(routes: RouteProps[] | RouteProps) {
+    this.routeSlot.register(routes);
     return this;
   }
 
@@ -270,10 +270,8 @@ export class ComponentUI {
       reactRouterUI
     );
     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);

package/dist/aspect.compare.section.js

@@ -0,0 +1,3 @@
+"use strict";
+
+//# sourceMappingURL=aspect.compare.section.js.map

package/dist/aspect.compare.section.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["aspect.compare.section.tsx"],"sourcesContent":[""],"mappings":""}

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

@@ -61,7 +61,7 @@ export declare class ComponentUI {
     handleComponentChange: (activeComponent?: ComponentModel | undefined) => void;
     getComponentUI(host: string): JSX.Element;
     getMenu(host: string): JSX.Element;
-    registerRoute(route: RouteProps): this;
+    registerRoute(routes: RouteProps[] | RouteProps): this;
     registerNavigation(nav: LinkProps, order?: number): void;
     registerConsumeMethod(...consumeMethods: ConsumePlugin[]): void;
     registerWidget(widget: LinkProps, order?: number): void;

package/dist/component.ui.runtime.js

@@ -364,8 +364,8 @@ class ComponentUI {
     });
   }
 
-  registerRoute(route) {
-    this.routeSlot.register(route);
+  registerRoute(routes) {
+    this.routeSlot.register(routes);
     return this;
   }
 

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

@@ -1 +1 @@
-{"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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"}
+{"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","routes","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","reactRouterUI","config","pageSlot","componentUI","aspectSection","AspectSection","registerSearchResultWidget","key","end","DeprecationIcon","addCommand","keyBindings","addSearcher","registerMenuItem","route","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(routes: RouteProps[] | RouteProps) {\n    this.routeSlot.register(routes);\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    // @ts-ignore\n    componentUI.registerSearchResultWidget({ key: 'deprecation', end: DeprecationIcon });\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/index.d.ts

@@ -19,11 +19,14 @@ export type { ComponentUI } from './component.ui.runtime';
 export { Section } from './section';
 export { ComponentContext, ComponentDescriptorContext, useComponentDescriptor } from './ui/context/component-context';
 export type { ComponentProviderProps, ComponentDescriptorProviderProps } from './ui/context';
+export { ComponentProvider, ComponentDescriptorProvider } from './ui/context';
 export { componentFields, componentIdFields, componentOverviewFields } from './ui';
 export { ConsumePlugin } from './ui/menu';
 export { RegisteredComponentRoute, ComponentUrlParams } from './component.route';
 export { ComponentModel, ComponentModelProps } from './ui/component-model';
+export { TopBarNav, TopBarNavProps } from './ui/top-bar-nav';
 export type { ShowFragment, ShowRow } from './show';
 export { default as Config } from './config';
+export { useComponent } from './ui';
 export { ComponentAspect };
 export default ComponentAspect;

package/dist/index.js

@@ -41,6 +41,12 @@ Object.defineProperty(exports, "ComponentDescriptorContext", {
     return _componentContext().ComponentDescriptorContext;
   }
 });
+Object.defineProperty(exports, "ComponentDescriptorProvider", {
+  enumerable: true,
+  get: function () {
+    return _context().ComponentDescriptorProvider;
+  }
+});
 Object.defineProperty(exports, "ComponentFS", {
   enumerable: true,
   get: function () {
@@ -71,6 +77,12 @@ Object.defineProperty(exports, "ComponentModelProps", {
     return _componentModel().ComponentModelProps;
   }
 });
+Object.defineProperty(exports, "ComponentProvider", {
+  enumerable: true,
+  get: function () {
+    return _context().ComponentProvider;
+  }
+});
 Object.defineProperty(exports, "ComponentUrlParams", {
   enumerable: true,
   get: function () {
@@ -149,6 +161,18 @@ Object.defineProperty(exports, "TagProps", {
     return _tag().TagProps;
   }
 });
+Object.defineProperty(exports, "TopBarNav", {
+  enumerable: true,
+  get: function () {
+    return _topBarNav().TopBarNav;
+  }
+});
+Object.defineProperty(exports, "TopBarNavProps", {
+  enumerable: true,
+  get: function () {
+    return _topBarNav().TopBarNavProps;
+  }
+});
 Object.defineProperty(exports, "componentFields", {
   enumerable: true,
   get: function () {
@@ -168,6 +192,12 @@ Object.defineProperty(exports, "componentOverviewFields", {
   }
 });
 exports.default = void 0;
+Object.defineProperty(exports, "useComponent", {
+  enumerable: true,
+  get: function () {
+    return _ui().useComponent;
+  }
+});
 Object.defineProperty(exports, "useComponentDescriptor", {
   enumerable: true,
   get: function () {
@@ -311,6 +341,16 @@ function _componentContext() {
   return data;
 }
 
+function _context() {
+  const data = require("./ui/context");
+
+  _context = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _ui() {
   const data = require("./ui");
 
@@ -351,6 +391,16 @@ function _componentModel() {
   return data;
 }
 
+function _topBarNav() {
+  const data = require("./ui/top-bar-nav");
+
+  _topBarNav = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _config() {
   const data = _interopRequireDefault(require("./config"));
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentAspect"],"sources":["index.ts"],"sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport { useComponentHost } from './host';\nexport { Component, InvalidComponent } from './component';\nexport { ComponentID } from '@teambit/component-id';\nexport { default as ComponentFS } from './component-fs';\nexport type { default as ComponentConfig } from './config';\nexport type { ComponentFactory } from './component-factory';\nexport type { AspectList } from './aspect-list';\nexport { AspectEntry, AspectData, ResolveComponentIdFunc } from './aspect-entry';\n// TODO: check why it's not working when using the index in snap dir like this:\n// export { Snap, Author } from './snap';\nexport { Snap, SnapProps } from './snap/snap';\nexport type { Author } from './snap/author';\n// TODO: check why it's not working when using the index in tag dir like this:\n// export { Tag } from './tag';\nexport { Tag, TagProps } from './tag/tag';\nexport { State } from './state';\nexport type { Hash } from './hash';\nexport { TagMap } from './tag-map';\nexport { ComponentMap } from './component-map';\nexport type { ComponentMain } from './component.main.runtime';\nexport type { ComponentUI } from './component.ui.runtime';\nexport { Section } from './section';\nexport { ComponentContext, ComponentDescriptorContext, useComponentDescriptor } from './ui/context/component-context';\nexport type { ComponentProviderProps, ComponentDescriptorProviderProps } from './ui/context';\nexport { componentFields, componentIdFields, componentOverviewFields } from './ui';\nexport { ConsumePlugin } from './ui/menu';\nexport { RegisteredComponentRoute, ComponentUrlParams } from './component.route';\nexport { ComponentModel, ComponentModelProps } from './ui/component-model';\nexport type { ShowFragment, ShowRow } from './show';\nexport { default as Config } from './config';\n// export { AspectList } from './aspect-list';\n// export { AspectEntry } from './aspect-entry';\nexport { ComponentAspect };\nexport default ComponentAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;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;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;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;;AArBA;AACA;AAGA;AACA;AAiBA;AACA;eAEeA,4B"}
+{"version":3,"names":["ComponentAspect"],"sources":["index.ts"],"sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport { useComponentHost } from './host';\nexport { Component, InvalidComponent } from './component';\nexport { ComponentID } from '@teambit/component-id';\nexport { default as ComponentFS } from './component-fs';\nexport type { default as ComponentConfig } from './config';\nexport type { ComponentFactory } from './component-factory';\nexport type { AspectList } from './aspect-list';\nexport { AspectEntry, AspectData, ResolveComponentIdFunc } from './aspect-entry';\n// TODO: check why it's not working when using the index in snap dir like this:\n// export { Snap, Author } from './snap';\nexport { Snap, SnapProps } from './snap/snap';\nexport type { Author } from './snap/author';\n// TODO: check why it's not working when using the index in tag dir like this:\n// export { Tag } from './tag';\nexport { Tag, TagProps } from './tag/tag';\nexport { State } from './state';\nexport type { Hash } from './hash';\nexport { TagMap } from './tag-map';\nexport { ComponentMap } from './component-map';\nexport type { ComponentMain } from './component.main.runtime';\nexport type { ComponentUI } from './component.ui.runtime';\nexport { Section } from './section';\nexport { ComponentContext, ComponentDescriptorContext, useComponentDescriptor } from './ui/context/component-context';\nexport type { ComponentProviderProps, ComponentDescriptorProviderProps } from './ui/context';\nexport { ComponentProvider, ComponentDescriptorProvider } from './ui/context';\nexport { componentFields, componentIdFields, componentOverviewFields } from './ui';\nexport { ConsumePlugin } from './ui/menu';\nexport { RegisteredComponentRoute, ComponentUrlParams } from './component.route';\nexport { ComponentModel, ComponentModelProps } from './ui/component-model';\nexport { TopBarNav, TopBarNavProps } from './ui/top-bar-nav';\nexport type { ShowFragment, ShowRow } from './show';\nexport { default as Config } from './config';\nexport { useComponent } from './ui';\n\n// export { AspectList } from './aspect-list';\n// export { AspectEntry } from './aspect-entry';\nexport { ComponentAspect };\nexport default ComponentAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;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;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;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;;AAvBA;AACA;AAGA;AACA;AAqBA;AACA;eAEeA,4B"}

package/dist/show/extensions.fragment.js

@@ -17,7 +17,7 @@ class ExtensionsFragment {
 
   async renderRow(component) {
     return {
-      title: 'extensions',
+      title: 'aspects',
       content: this.renderList(component)
     };
   }

package/dist/show/extensions.fragment.js.map

@@ -1 +1 @@
-{"version":3,"names":["ExtensionsFragment","renderList","component","aspects","state","entries","map","entry","id","toString","join","renderRow","title","content","json","serialize"],"sources":["extensions.fragment.ts"],"sourcesContent":["import { ShowFragment } from './show-fragment';\nimport { Component } from '../component';\n\nexport class ExtensionsFragment implements ShowFragment {\n  private renderList(component: Component) {\n    const aspects = component.state.aspects.entries.map((entry) => entry.id.toString());\n    return aspects.join('\\n');\n  }\n\n  async renderRow(component: Component) {\n    return {\n      title: 'extensions',\n      content: this.renderList(component),\n    };\n  }\n\n  async json(component: Component) {\n    return {\n      title: 'configuration',\n      json: component.state.aspects.serialize() as any,\n    };\n  }\n}\n"],"mappings":";;;;;;;;;;;AAGO,MAAMA,kBAAN,CAAiD;EAC9CC,UAAU,CAACC,SAAD,EAAuB;IACvC,MAAMC,OAAO,GAAGD,SAAS,CAACE,KAAV,CAAgBD,OAAhB,CAAwBE,OAAxB,CAAgCC,GAAhC,CAAqCC,KAAD,IAAWA,KAAK,CAACC,EAAN,CAASC,QAAT,EAA/C,CAAhB;IACA,OAAON,OAAO,CAACO,IAAR,CAAa,IAAb,CAAP;EACD;;EAEc,MAATC,SAAS,CAACT,SAAD,EAAuB;IACpC,OAAO;MACLU,KAAK,EAAE,YADF;MAELC,OAAO,EAAE,KAAKZ,UAAL,CAAgBC,SAAhB;IAFJ,CAAP;EAID;;EAES,MAAJY,IAAI,CAACZ,SAAD,EAAuB;IAC/B,OAAO;MACLU,KAAK,EAAE,eADF;MAELE,IAAI,EAAEZ,SAAS,CAACE,KAAV,CAAgBD,OAAhB,CAAwBY,SAAxB;IAFD,CAAP;EAID;;AAlBqD"}
+{"version":3,"names":["ExtensionsFragment","renderList","component","aspects","state","entries","map","entry","id","toString","join","renderRow","title","content","json","serialize"],"sources":["extensions.fragment.ts"],"sourcesContent":["import { ShowFragment } from './show-fragment';\nimport { Component } from '../component';\n\nexport class ExtensionsFragment implements ShowFragment {\n  private renderList(component: Component) {\n    const aspects = component.state.aspects.entries.map((entry) => entry.id.toString());\n    return aspects.join('\\n');\n  }\n\n  async renderRow(component: Component) {\n    return {\n      title: 'aspects',\n      content: this.renderList(component),\n    };\n  }\n\n  async json(component: Component) {\n    return {\n      title: 'configuration',\n      json: component.state.aspects.serialize() as any,\n    };\n  }\n}\n"],"mappings":";;;;;;;;;;;AAGO,MAAMA,kBAAN,CAAiD;EAC9CC,UAAU,CAACC,SAAD,EAAuB;IACvC,MAAMC,OAAO,GAAGD,SAAS,CAACE,KAAV,CAAgBD,OAAhB,CAAwBE,OAAxB,CAAgCC,GAAhC,CAAqCC,KAAD,IAAWA,KAAK,CAACC,EAAN,CAASC,QAAT,EAA/C,CAAhB;IACA,OAAON,OAAO,CAACO,IAAR,CAAa,IAAb,CAAP;EACD;;EAEc,MAATC,SAAS,CAACT,SAAD,EAAuB;IACpC,OAAO;MACLU,KAAK,EAAE,SADF;MAELC,OAAO,EAAE,KAAKZ,UAAL,CAAgBC,SAAhB;IAFJ,CAAP;EAID;;EAES,MAAJY,IAAI,CAACZ,SAAD,EAAuB;IAC/B,OAAO;MACLU,KAAK,EAAE,eADF;MAELE,IAAI,EAAEZ,SAAS,CAACE,KAAV,CAAgBD,OAAhB,CAAwBY,SAAxB;IAFD,CAAP;EAID;;AAlBqD"}

package/dist/ui/index.d.ts

@@ -2,4 +2,6 @@ export { Component } from './component';
 export { ComponentModel, ComponentModelProps } from './component-model';
 export { ComponentContext, ComponentProvider } from './context';
 export { useComponent } from './use-component';
+export { TopBarNav, TopBarNavProps } from './top-bar-nav';
 export { componentIdFields, componentOverviewFields, componentFields } from './use-component-query';
+export { useIdFromLocation } from './use-component-from-location';

package/dist/ui/index.js

@@ -33,6 +33,18 @@ Object.defineProperty(exports, "ComponentProvider", {
     return _context().ComponentProvider;
   }
 });
+Object.defineProperty(exports, "TopBarNav", {
+  enumerable: true,
+  get: function () {
+    return _topBarNav().TopBarNav;
+  }
+});
+Object.defineProperty(exports, "TopBarNavProps", {
+  enumerable: true,
+  get: function () {
+    return _topBarNav().TopBarNavProps;
+  }
+});
 Object.defineProperty(exports, "componentFields", {
   enumerable: true,
   get: function () {
@@ -57,6 +69,12 @@ Object.defineProperty(exports, "useComponent", {
     return _useComponent().useComponent;
   }
 });
+Object.defineProperty(exports, "useIdFromLocation", {
+  enumerable: true,
+  get: function () {
+    return _useComponentFromLocation().useIdFromLocation;
+  }
+});
 
 function _component() {
   const data = require("./component");
@@ -98,6 +116,16 @@ function _useComponent() {
   return data;
 }
 
+function _topBarNav() {
+  const data = require("./top-bar-nav");
+
+  _topBarNav = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _useComponentQuery() {
   const data = require("./use-component-query");
 
@@ -108,4 +136,14 @@ function _useComponentQuery() {
   return data;
 }
 
+function _useComponentFromLocation() {
+  const data = require("./use-component-from-location");
+
+  _useComponentFromLocation = function () {
+    return data;
+  };
+
+  return data;
+}
+
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { Component } from './component';\nexport { ComponentModel, ComponentModelProps } from './component-model';\nexport { ComponentContext, ComponentProvider } from './context';\nexport { useComponent } from './use-component';\nexport { componentIdFields, componentOverviewFields, componentFields } from './use-component-query';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { Component } from './component';\nexport { ComponentModel, ComponentModelProps } from './component-model';\nexport { ComponentContext, ComponentProvider } from './context';\nexport { useComponent } from './use-component';\nexport { TopBarNav, TopBarNavProps } from './top-bar-nav';\nexport { componentIdFields, componentOverviewFields, componentFields } from './use-component-query';\nexport { useIdFromLocation } from './use-component-from-location';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}

package/dist/ui/menu/menu.js

@@ -248,7 +248,6 @@ function VersionRelatedDropdowns({
   host
 }) {
   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;
   const {
@@ -271,6 +270,7 @@ function VersionRelatedDropdowns({
       version: tag.tag
     }));
   }, [logs]);
+  const isNew = snaps.length === 0 && tags.length === 0;
   const lanes = (lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.getLanesByComponentId(component.id)) || [];
   const localVersion = isWorkspace && !isNew && !currentLane;
   const currentVersion = isWorkspace && !isNew && !(location !== null && location !== void 0 && location.search.includes('version')) ? 'workspace' : component.version;
@@ -289,7 +289,8 @@ function VersionRelatedDropdowns({
     localVersion: localVersion,
     currentVersion: currentVersion,
     latestVersion: component.latest,
-    currentLane: currentLane
+    currentLane: currentLane,
+    menuClassName: _menuModule().default.componentVersionMenu
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"names":["ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","componentId","useIdFromLocation","lanesContext","useLanesContext","laneComponent","resolveComponent","undefined","useComponentOptions","logFilters","log","logHead","version","component","useComponent","id","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","isNew","tags","isEmpty","currentLane","viewedLane","logs","isWorkspace","snaps","filter","tag","map","snap","hash","reverse","tagLookup","Map","forEach","set","compact","toArray","get","lanes","getLanesByComponentId","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 lanesContext = useLanesContext();\n  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;\n  const useComponentOptions = laneComponent && {\n    logFilters: { log: { logHead: laneComponent.version } },\n  };\n\n  const { component } = useComponent(host, laneComponent?.id.toString() || componentId, useComponentOptions);\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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"}
+{"version":3,"names":["ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","componentId","useIdFromLocation","lanesContext","useLanesContext","laneComponent","resolveComponent","undefined","useComponentOptions","logFilters","log","logHead","version","component","useComponent","id","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","currentLane","viewedLane","logs","isWorkspace","snaps","filter","tag","map","snap","hash","reverse","tags","tagLookup","Map","forEach","set","compact","toArray","get","isNew","length","lanes","getLanesByComponentId","localVersion","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","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 lanesContext = useLanesContext();\n  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;\n  const useComponentOptions = laneComponent && {\n    logFilters: { log: { logHead: laneComponent.version } },\n  };\n\n  const { component } = useComponent(host, laneComponent?.id.toString() || componentId, useComponentOptions);\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 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 isNew = snaps.length === 0 && tags.length === 0;\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        menuClassName={styles.componentVersionMenu}\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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"}

package/dist/ui/menu/menu.module.scss

@@ -87,3 +87,7 @@
 .useBox {
   --bit-drawer-margin: 14px;
 }
+
+.componentVersionMenu {
+  width: 350px;
+}

package/dist/ui/use-component-query.d.ts

@@ -15,7 +15,68 @@ export declare type Filters = {
 };
 /** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
 export declare function useComponentQuery(componentId: string, host: string, filters?: Filters): {
+    client: import("@apollo/client").ApolloClient<any>;
+    previousData?: any;
+    networkStatus: import("@apollo/client").NetworkStatus;
+    called: true;
+    startPolling: (pollInterval: number) => void;
+    stopPolling: () => void;
+    updateQuery: <TVars = {
+        logType?: string | undefined;
+        logOffset?: number | undefined;
+        logLimit?: number | undefined;
+        logHead?: string | undefined;
+        logSort?: string | undefined;
+        id: string;
+        extensionId: string;
+    }>(mapFn: (previousQueryResult: any, options: Pick<import("@apollo/client").WatchQueryOptions<TVars, any>, "variables">) => any) => void;
+    refetch: (variables?: Partial<{
+        logType?: string | undefined;
+        logOffset?: number | undefined;
+        logLimit?: number | undefined;
+        logHead?: string | undefined;
+        logSort?: string | undefined;
+        id: string;
+        extensionId: string;
+    }> | undefined) => Promise<import("@apollo/client").ApolloQueryResult<any>>;
+    variables: {
+        logType?: string | undefined;
+        logOffset?: number | undefined;
+        logLimit?: number | undefined;
+        logHead?: string | undefined;
+        logSort?: string | undefined;
+        id: string;
+        extensionId: string;
+    } | undefined;
+    fetchMore: (<K extends "id" | "extensionId" | "logType" | "logOffset" | "logLimit" | "logHead" | "logSort">(fetchMoreOptions: import("@apollo/client").FetchMoreQueryOptions<{
+        logType?: string | undefined;
+        logOffset?: number | undefined;
+        logLimit?: number | undefined;
+        logHead?: string | undefined;
+        logSort?: string | undefined;
+        id: string;
+        extensionId: string;
+    }, K, any> & import("@apollo/client").FetchMoreOptions<any, {
+        logType?: string | undefined;
+        logOffset?: number | undefined;
+        logLimit?: number | undefined;
+        logHead?: string | undefined;
+        logSort?: string | undefined;
+        id: string;
+        extensionId: string;
+    }>) => Promise<import("@apollo/client").ApolloQueryResult<any>>) & (<TData2, TVariables2, K_1 extends keyof TVariables2>(fetchMoreOptions: {
+        query?: import("@apollo/client").DocumentNode | import("@graphql-typed-document-node/core").TypedDocumentNode<any, {
+            logType?: string | undefined;
+            logOffset?: number | undefined;
+            logLimit?: number | undefined;
+            logHead?: string | undefined;
+            logSort?: string | undefined;
+            id: string;
+            extensionId: string;
+        }> | undefined;
+    } & import("@apollo/client").FetchMoreQueryOptions<TVariables2, K_1, any> & import("@apollo/client").FetchMoreOptions<TData2, TVariables2>) => Promise<import("@apollo/client").ApolloQueryResult<TData2>>);
     componentDescriptor: ComponentDescriptor | undefined;
     component: ComponentModel | undefined;
     error: ComponentError | undefined;
+    loading: boolean;
 };

package/dist/ui/use-component-query.js

@@ -18,6 +18,16 @@ function _defineProperty2() {
   return data;
 }
 
+function _objectWithoutProperties2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+  _objectWithoutProperties2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _react() {
   const data = require("react");
 
@@ -231,17 +241,21 @@ function useComponentQuery(componentId, host, filters) {
 
   const idRef = (0, _react().useRef)(componentId);
   idRef.current = componentId;
-  const {
-    data,
-    error,
-    loading,
-    subscribeToMore
-  } = (0, _uiFoundationUiHooks().useDataQuery)(GET_COMPONENT, {
+
+  const _useDataQuery = (0, _uiFoundationUiHooks().useDataQuery)(GET_COMPONENT, {
     variables: _objectSpread({
       id: componentId,
       extensionId: host
     }, (filters === null || filters === void 0 ? void 0 : filters.log) || {})
-  });
+  }),
+        {
+    data,
+    error,
+    loading,
+    subscribeToMore
+  } = _useDataQuery,
+        rest = (0, _objectWithoutProperties2().default)(_useDataQuery, ["data", "error", "loading", "subscribeToMore"]);
+
   (0, _react().useEffect)(() => {
     // @TODO @Kutner fix subscription for scope
     if (host !== 'teambit.workspace/workspace') {
@@ -332,7 +346,7 @@ function useComponentQuery(componentId, host, filters) {
 
     const id = rawComponent && _componentId().ComponentID.fromObject(rawComponent.id);
 
-    return {
+    return _objectSpread({
       componentDescriptor: id ? _componentDescriptor().ComponentDescriptor.fromObject({
         id: id.toString(),
         aspectList
@@ -341,8 +355,9 @@ function useComponentQuery(componentId, host, filters) {
         host
       })) : undefined,
       // eslint-disable-next-line
-      error: error ? new (_componentError().ComponentError)(500, error.message) : !rawComponent && !loading ? new (_componentError().ComponentError)(404) : undefined
-    };
+      error: error ? new (_componentError().ComponentError)(500, error.message) : !rawComponent && !loading ? new (_componentError().ComponentError)(404) : undefined,
+      loading
+    }, rest);
   }, [rawComponent, host, error]);
 }
 

package/dist/ui/use-component-query.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentIdFields","gql","componentOverviewFields","componentFields","GET_COMPONENT","SUB_SUBSCRIPTION_ADDED","SUB_COMPONENT_CHANGED","SUB_COMPONENT_REMOVED","useComponentQuery","componentId","host","filters","idRef","useRef","current","data","error","loading","subscribeToMore","useDataQuery","variables","id","extensionId","log","useEffect","unsubAddition","document","updateQuery","prev","subscriptionData","prevComponent","getHost","get","addedComponent","componentAdded","component","name","unsubChanges","updatedComponent","componentChanged","isUpdated","ComponentID","isEqualObj","unsubRemoval","removedIds","componentRemoved","componentIds","length","isRemoved","some","removedId","rawComponent","useMemo","aspectList","entries","aspects","fromObject","componentDescriptor","ComponentDescriptor","toString","undefined","ComponentModel","from","ComponentError","message"],"sources":["use-component-query.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\n\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\n\nexport const componentIdFields = gql`\n  fragment componentIdFields on ComponentID {\n    name\n    version\n    scope\n  }\n`;\n\nexport const componentOverviewFields = gql`\n  fragment componentOverviewFields on Component {\n    id {\n      ...componentIdFields\n    }\n    aspects(include: [\"teambit.preview/preview\", \"teambit.pipelines/builder\", \"teambit.envs/envs\"]) {\n      # 'id' property in gql refers to a *global* identifier and used for caching.\n      # this makes aspect data cache under the same key, even when they are under different components.\n      # renaming the property fixes that.\n      aspectId: id\n      aspectData: data\n    }\n    elementsUrl\n    description\n    deprecation {\n      isDeprecate\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    preview {\n      includesEnvTemplate\n      legacyHeader\n    }\n    compositions {\n      identifier\n      displayName\n    }\n  }\n  ${componentIdFields}\n`;\n\nexport const componentFields = gql`\n  fragment componentFields on Component {\n    id {\n      ...componentIdFields\n    }\n    ...componentOverviewFields\n    packageName\n    latest\n    compositions {\n      identifier\n      displayName\n    }\n    tags {\n      version\n    }\n    logs(type: $logType, offset: $logOffset, limit: $logLimit, head: $logHead, sort: $logSort) {\n      id\n      message\n      username\n      email\n      date\n      hash\n      tag\n    }\n  }\n  ${componentIdFields}\n  ${componentOverviewFields}\n`;\n\nconst GET_COMPONENT = gql`\n  query Component(\n    $id: String!\n    $extensionId: String!\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_SUBSCRIPTION_ADDED = gql`\n  subscription OnComponentAdded($logType: String, $logOffset: Int, $logLimit: Int, $logHead: String, $logSort: String) {\n    componentAdded {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_CHANGED = gql`\n  subscription OnComponentChanged(\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    componentChanged {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_REMOVED = gql`\n  subscription OnComponentRemoved {\n    componentRemoved {\n      componentIds {\n        ...componentIdFields\n      }\n    }\n  }\n  ${componentIdFields}\n`;\nexport type Filters = {\n  log?: { logType?: string; logOffset?: number; logLimit?: number; logHead?: string; logSort?: string };\n};\n/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */\nexport function useComponentQuery(componentId: string, host: string, filters?: Filters) {\n  const idRef = useRef(componentId);\n  idRef.current = componentId;\n  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {\n    variables: { id: componentId, extensionId: host, ...(filters?.log || {}) },\n  });\n\n  useEffect(() => {\n    // @TODO @Kutner fix subscription for scope\n    if (host !== 'teambit.workspace/workspace') {\n      return () => {};\n    }\n\n    const unsubAddition = subscribeToMore({\n      document: SUB_SUBSCRIPTION_ADDED,\n      updateQuery: (prev, { subscriptionData }) => {\n        const prevComponent = prev?.getHost?.get;\n        const addedComponent = subscriptionData?.data?.componentAdded?.component;\n\n        if (!addedComponent || prevComponent) return prev;\n\n        if (idRef.current === addedComponent.id.name) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: addedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubChanges = subscribeToMore({\n      document: SUB_COMPONENT_CHANGED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const updatedComponent = subscriptionData?.data?.componentChanged?.component;\n\n        const isUpdated = updatedComponent && ComponentID.isEqualObj(prevComponent?.id, updatedComponent?.id);\n\n        if (isUpdated) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: updatedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubRemoval = subscribeToMore({\n      document: SUB_COMPONENT_REMOVED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const removedIds: ComponentIdObj[] | undefined = subscriptionData?.data?.componentRemoved?.componentIds;\n        if (!prevComponent || !removedIds?.length) return prev;\n\n        const isRemoved = removedIds.some((removedId) => ComponentID.isEqualObj(removedId, prevComponent.id));\n\n        if (isRemoved) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: null,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    return () => {\n      unsubChanges();\n      unsubAddition();\n      unsubRemoval();\n    };\n  }, []);\n\n  const rawComponent = data?.getHost?.get;\n  return useMemo(() => {\n    const aspectList = {\n      entries: rawComponent?.aspects,\n    };\n    const id = rawComponent && ComponentID.fromObject(rawComponent.id);\n    return {\n      componentDescriptor: id ? ComponentDescriptor.fromObject({ id: id.toString(), aspectList }) : undefined,\n      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,\n      // eslint-disable-next-line\n      error: error\n        ? new ComponentError(500, error.message)\n        : !rawComponent && !loading\n        ? new ComponentError(404)\n        : undefined,\n    };\n  }, [rawComponent, host, error]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;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;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAEO,MAAMA,iBAAiB,GAAG,IAAAC,aAAA,CAAI;AACrC;AACA;AACA;AACA;AACA;AACA,CANO;;AAQA,MAAMC,uBAAuB,GAAG,IAAAD,aAAA,CAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CAtCO;;AAwCA,MAAMG,eAAe,GAAG,IAAAF,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,IAAIE,uBAAwB;AAC5B,CA3BO;;AA6BP,MAAME,aAAa,GAAG,IAAAH,aAAA,CAAI;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAlBA;AAoBA,MAAME,sBAAsB,GAAG,IAAAJ,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CATA;AAWA,MAAMG,qBAAqB,GAAG,IAAAL,aAAA,CAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;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"}
+{"version":3,"names":["componentIdFields","gql","componentOverviewFields","componentFields","GET_COMPONENT","SUB_SUBSCRIPTION_ADDED","SUB_COMPONENT_CHANGED","SUB_COMPONENT_REMOVED","useComponentQuery","componentId","host","filters","idRef","useRef","current","useDataQuery","variables","id","extensionId","log","data","error","loading","subscribeToMore","rest","useEffect","unsubAddition","document","updateQuery","prev","subscriptionData","prevComponent","getHost","get","addedComponent","componentAdded","component","name","unsubChanges","updatedComponent","componentChanged","isUpdated","ComponentID","isEqualObj","unsubRemoval","removedIds","componentRemoved","componentIds","length","isRemoved","some","removedId","rawComponent","useMemo","aspectList","entries","aspects","fromObject","componentDescriptor","ComponentDescriptor","toString","undefined","ComponentModel","from","ComponentError","message"],"sources":["use-component-query.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\n\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\n\nexport const componentIdFields = gql`\n  fragment componentIdFields on ComponentID {\n    name\n    version\n    scope\n  }\n`;\n\nexport const componentOverviewFields = gql`\n  fragment componentOverviewFields on Component {\n    id {\n      ...componentIdFields\n    }\n    aspects(include: [\"teambit.preview/preview\", \"teambit.pipelines/builder\", \"teambit.envs/envs\"]) {\n      # 'id' property in gql refers to a *global* identifier and used for caching.\n      # this makes aspect data cache under the same key, even when they are under different components.\n      # renaming the property fixes that.\n      aspectId: id\n      aspectData: data\n    }\n    elementsUrl\n    description\n    deprecation {\n      isDeprecate\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    preview {\n      includesEnvTemplate\n      legacyHeader\n    }\n    compositions {\n      identifier\n      displayName\n    }\n  }\n  ${componentIdFields}\n`;\n\nexport const componentFields = gql`\n  fragment componentFields on Component {\n    id {\n      ...componentIdFields\n    }\n    ...componentOverviewFields\n    packageName\n    latest\n    compositions {\n      identifier\n      displayName\n    }\n    tags {\n      version\n    }\n    logs(type: $logType, offset: $logOffset, limit: $logLimit, head: $logHead, sort: $logSort) {\n      id\n      message\n      username\n      email\n      date\n      hash\n      tag\n    }\n  }\n  ${componentIdFields}\n  ${componentOverviewFields}\n`;\n\nconst GET_COMPONENT = gql`\n  query Component(\n    $id: String!\n    $extensionId: String!\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_SUBSCRIPTION_ADDED = gql`\n  subscription OnComponentAdded($logType: String, $logOffset: Int, $logLimit: Int, $logHead: String, $logSort: String) {\n    componentAdded {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_CHANGED = gql`\n  subscription OnComponentChanged(\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    componentChanged {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_REMOVED = gql`\n  subscription OnComponentRemoved {\n    componentRemoved {\n      componentIds {\n        ...componentIdFields\n      }\n    }\n  }\n  ${componentIdFields}\n`;\nexport type Filters = {\n  log?: { logType?: string; logOffset?: number; logLimit?: number; logHead?: string; logSort?: string };\n};\n/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */\nexport function useComponentQuery(componentId: string, host: string, filters?: Filters) {\n  const idRef = useRef(componentId);\n  idRef.current = componentId;\n  const { data, error, loading, subscribeToMore, ...rest } = useDataQuery(GET_COMPONENT, {\n    variables: { id: componentId, extensionId: host, ...(filters?.log || {}) },\n  });\n\n  useEffect(() => {\n    // @TODO @Kutner fix subscription for scope\n    if (host !== 'teambit.workspace/workspace') {\n      return () => {};\n    }\n\n    const unsubAddition = subscribeToMore({\n      document: SUB_SUBSCRIPTION_ADDED,\n      updateQuery: (prev, { subscriptionData }) => {\n        const prevComponent = prev?.getHost?.get;\n        const addedComponent = subscriptionData?.data?.componentAdded?.component;\n\n        if (!addedComponent || prevComponent) return prev;\n\n        if (idRef.current === addedComponent.id.name) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: addedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubChanges = subscribeToMore({\n      document: SUB_COMPONENT_CHANGED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const updatedComponent = subscriptionData?.data?.componentChanged?.component;\n\n        const isUpdated = updatedComponent && ComponentID.isEqualObj(prevComponent?.id, updatedComponent?.id);\n\n        if (isUpdated) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: updatedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubRemoval = subscribeToMore({\n      document: SUB_COMPONENT_REMOVED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const removedIds: ComponentIdObj[] | undefined = subscriptionData?.data?.componentRemoved?.componentIds;\n        if (!prevComponent || !removedIds?.length) return prev;\n\n        const isRemoved = removedIds.some((removedId) => ComponentID.isEqualObj(removedId, prevComponent.id));\n\n        if (isRemoved) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: null,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    return () => {\n      unsubChanges();\n      unsubAddition();\n      unsubRemoval();\n    };\n  }, []);\n\n  const rawComponent = data?.getHost?.get;\n  return useMemo(() => {\n    const aspectList = {\n      entries: rawComponent?.aspects,\n    };\n    const id = rawComponent && ComponentID.fromObject(rawComponent.id);\n    return {\n      componentDescriptor: id ? ComponentDescriptor.fromObject({ id: id.toString(), aspectList }) : undefined,\n      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,\n      // eslint-disable-next-line\n      error: error\n        ? new ComponentError(500, error.message)\n        : !rawComponent && !loading\n        ? new ComponentError(404)\n        : undefined,\n      loading,\n      ...rest,\n    };\n  }, [rawComponent, host, error]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;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;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAEO,MAAMA,iBAAiB,GAAG,IAAAC,aAAA,CAAI;AACrC;AACA;AACA;AACA;AACA;AACA,CANO;;AAQA,MAAMC,uBAAuB,GAAG,IAAAD,aAAA,CAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CAtCO;;AAwCA,MAAMG,eAAe,GAAG,IAAAF,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,IAAIE,uBAAwB;AAC5B,CA3BO;;AA6BP,MAAME,aAAa,GAAG,IAAAH,aAAA,CAAI;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAlBA;AAoBA,MAAME,sBAAsB,GAAG,IAAAJ,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CATA;AAWA,MAAMG,qBAAqB,GAAG,IAAAL,aAAA,CAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IA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"}

package/dist/ui/use-component.d.ts

@@ -6,6 +6,7 @@ export declare type Component = {
     component?: ComponentModel;
     error?: ComponentError;
     componentDescriptor?: ComponentDescriptor;
+    loading?: boolean;
 };
 export declare type UseComponentOptions = {
     version?: string;

package/dist/ui/use-component.js.map

@@ -1 +1 @@
-{"version":3,"names":["useComponent","host","id","options","query","useQuery","version","logFilters","componentVersion","get","undefined","TypeError","componentIdStr","withVersion","useComponentQuery","includes"],"sources":["use-component.tsx"],"sourcesContent":["import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { Filters, useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n};\nexport type UseComponentOptions = {\n  version?: string;\n  logFilters?: Filters\n};\n\nexport function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {\n  const query = useQuery();\n  const { version, logFilters } = options || {};\n  const componentVersion = (version || query.get('version')) ?? undefined;\n  \n  if (!id) throw new TypeError('useComponent received no component id');\n\n  const componentIdStr = withVersion(id, componentVersion);\n\n  return useComponentQuery(componentIdStr, host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAYO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAAiDC,OAAjD,EAA2F;EAAA;;EAChG,MAAMC,KAAK,GAAG,IAAAC,qCAAA,GAAd;EACA,MAAM;IAAEC,OAAF;IAAWC;EAAX,IAA0BJ,OAAO,IAAI,EAA3C;EACA,MAAMK,gBAAgB,WAAIF,OAAO,IAAIF,KAAK,CAACK,GAAN,CAAU,SAAV,CAAf,uCAAwCC,SAA9D;EAEA,IAAI,CAACR,EAAL,EAAS,MAAM,IAAIS,SAAJ,CAAc,uCAAd,CAAN;EAET,MAAMC,cAAc,GAAGC,WAAW,CAACX,EAAD,EAAKM,gBAAL,CAAlC;EAEA,OAAO,IAAAM,sCAAA,EAAkBF,cAAlB,EAAkCX,IAAlC,EAAwCM,UAAxC,CAAP;AACD;;AAED,SAASM,WAAT,CAAqBX,EAArB,EAAiCI,OAAjC,EAAmD;EACjD,IAAI,CAACA,OAAL,EAAc,OAAOJ,EAAP;EACd,IAAIA,EAAE,CAACa,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOb,EAAP;EACtB,OAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAxB;AACD"}
+{"version":3,"names":["useComponent","host","id","options","query","useQuery","version","logFilters","componentVersion","get","undefined","TypeError","componentIdStr","withVersion","useComponentQuery","includes"],"sources":["use-component.tsx"],"sourcesContent":["import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { Filters, useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n  loading?: boolean;\n};\nexport type UseComponentOptions = {\n  version?: string;\n  logFilters?: Filters;\n};\n\nexport function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {\n  const query = useQuery();\n  const { version, logFilters } = options || {};\n  const componentVersion = (version || query.get('version')) ?? undefined;\n\n  if (!id) throw new TypeError('useComponent received no component id');\n\n  const componentIdStr = withVersion(id, componentVersion);\n\n  return useComponentQuery(componentIdStr, host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAaO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAAiDC,OAAjD,EAA2F;EAAA;;EAChG,MAAMC,KAAK,GAAG,IAAAC,qCAAA,GAAd;EACA,MAAM;IAAEC,OAAF;IAAWC;EAAX,IAA0BJ,OAAO,IAAI,EAA3C;EACA,MAAMK,gBAAgB,WAAIF,OAAO,IAAIF,KAAK,CAACK,GAAN,CAAU,SAAV,CAAf,uCAAwCC,SAA9D;EAEA,IAAI,CAACR,EAAL,EAAS,MAAM,IAAIS,SAAJ,CAAc,uCAAd,CAAN;EAET,MAAMC,cAAc,GAAGC,WAAW,CAACX,EAAD,EAAKM,gBAAL,CAAlC;EAEA,OAAO,IAAAM,sCAAA,EAAkBF,cAAlB,EAAkCX,IAAlC,EAAwCM,UAAxC,CAAP;AACD;;AAED,SAASM,WAAT,CAAqBX,EAArB,EAAiCI,OAAjC,EAAmD;EACjD,IAAI,CAACA,OAAL,EAAc,OAAOJ,EAAP;EACd,IAAIA,EAAE,CAACa,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOb,EAAP;EACtB,OAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAxB;AACD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.752",
+  "version": "0.0.753",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.752"
+    "version": "0.0.753"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -31,42 +31,42 @@
     "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.402",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
-    "@teambit/aspect-loader": "0.0.752",
+    "@teambit/aspect-loader": "0.0.753",
     "@teambit/legacy-bit-id": "0.0.399",
     "@teambit/toolbox.path.match-patterns": "0.0.1",
     "@teambit/toolbox.string.capitalize": "0.0.483",
-    "@teambit/cli": "0.0.496",
-    "@teambit/config": "0.0.509",
-    "@teambit/express": "0.0.594",
-    "@teambit/graphql": "0.0.752",
+    "@teambit/cli": "0.0.497",
+    "@teambit/config": "0.0.510",
+    "@teambit/express": "0.0.595",
+    "@teambit/graphql": "0.0.753",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.752",
+    "@teambit/command-bar": "0.0.753",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
-    "@teambit/preview": "0.0.752",
-    "@teambit/pubsub": "0.0.752",
-    "@teambit/react-router": "0.0.752",
+    "@teambit/preview": "0.0.753",
+    "@teambit/pubsub": "0.0.753",
+    "@teambit/react-router": "0.0.753",
     "@teambit/ui-foundation.ui.is-browser": "0.0.486",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.115",
-    "@teambit/ui": "0.0.752",
+    "@teambit/ui": "0.0.753",
     "@teambit/component-issues": "0.0.53",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
     "@teambit/cli-table": "0.0.34",
-    "@teambit/lanes.ui.lanes": "0.0.63",
-    "@teambit/component-descriptor": "0.0.58",
+    "@teambit/lanes.ui.lanes": "0.0.64",
+    "@teambit/component-descriptor": "0.0.59",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.487",
     "@teambit/design.ui.empty-box": "0.0.353",
     "@teambit/harmony.ui.aspect-box": "0.0.486",
     "@teambit/design.ui.pages.not-found": "0.0.355",
     "@teambit/design.ui.pages.server-error": "0.0.355",
-    "@teambit/compositions": "0.0.752",
-    "@teambit/deprecation": "0.0.752",
-    "@teambit/envs": "0.0.752",
+    "@teambit/compositions": "0.0.753",
+    "@teambit/deprecation": "0.0.753",
+    "@teambit/envs": "0.0.753",
     "@teambit/legacy-component-log": "0.0.392",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/envs.ui.env-icon": "0.0.486",
-    "@teambit/component.ui.version-dropdown": "0.0.549",
+    "@teambit/component.ui.version-dropdown": "0.0.550",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.115",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487"
@@ -88,7 +88,7 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.276",
+    "@teambit/legacy": "1.0.277",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -116,7 +116,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.276",
+        "@teambit/legacy": "1.0.277",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1654399579544.js → preview-1654572446572.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.752/dist/component.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.752/dist/component.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.753/dist/component.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.753/dist/component.docs.mdx')]

package/show/extensions.fragment.ts

@@ -9,7 +9,7 @@ export class ExtensionsFragment implements ShowFragment {
 
   async renderRow(component: Component) {
     return {
-      title: 'extensions',
+      title: 'aspects',
       content: this.renderList(component),
     };
   }

package/ui/index.ts

@@ -2,4 +2,6 @@ export { Component } from './component';
 export { ComponentModel, ComponentModelProps } from './component-model';
 export { ComponentContext, ComponentProvider } from './context';
 export { useComponent } from './use-component';
+export { TopBarNav, TopBarNavProps } from './top-bar-nav';
 export { componentIdFields, componentOverviewFields, componentFields } from './use-component-query';
+export { useIdFromLocation } from './use-component-from-location';

package/ui/menu/menu.module.scss

@@ -87,3 +87,7 @@
 .useBox {
   --bit-drawer-margin: 14px;
 }
+
+.componentVersionMenu {
+  width: 350px;
+}

package/ui/menu/menu.tsx

@@ -93,7 +93,6 @@ function VersionRelatedDropdowns({
   host: string;
 }) {
   const location = useLocation();
-  const isNew = component.tags.isEmpty();
   const lanesContext = useLanesContext();
   const currentLane = lanesContext?.viewedLane;
   const { logs } = component;
@@ -121,6 +120,8 @@ function VersionRelatedDropdowns({
     ).map((tag) => ({ ...tag, version: tag.tag as string }));
   }, [logs]);
 
+  const isNew = snaps.length === 0 && tags.length === 0;
+
   const lanes = lanesContext?.getLanesByComponentId(component.id) || [];
   const localVersion = isWorkspace && !isNew && !currentLane;
 
@@ -145,6 +146,7 @@ function VersionRelatedDropdowns({
         currentVersion={currentVersion}
         latestVersion={component.latest}
         currentLane={currentLane}
+        menuClassName={styles.componentVersionMenu}
       />
     </>
   );

package/ui/use-component-query.ts

@@ -149,7 +149,7 @@ export type Filters = {
 export function useComponentQuery(componentId: string, host: string, filters?: Filters) {
   const idRef = useRef(componentId);
   idRef.current = componentId;
-  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {
+  const { data, error, loading, subscribeToMore, ...rest } = useDataQuery(GET_COMPONENT, {
     variables: { id: componentId, extensionId: host, ...(filters?.log || {}) },
   });
 
@@ -252,6 +252,8 @@ export function useComponentQuery(componentId: string, host: string, filters?: F
         : !rawComponent && !loading
         ? new ComponentError(404)
         : undefined,
+      loading,
+      ...rest,
     };
   }, [rawComponent, host, error]);
 }

package/ui/use-component.tsx

@@ -8,17 +8,18 @@ export type Component = {
   component?: ComponentModel;
   error?: ComponentError;
   componentDescriptor?: ComponentDescriptor;
+  loading?: boolean;
 };
 export type UseComponentOptions = {
   version?: string;
-  logFilters?: Filters
+  logFilters?: Filters;
 };
 
 export function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {
   const query = useQuery();
   const { version, logFilters } = options || {};
   const componentVersion = (version || query.get('version')) ?? undefined;
-  
+
   if (!id) throw new TypeError('useComponent received no component id');
 
   const componentIdStr = withVersion(id, componentVersion);