@teambit/component 0.0.951 → 0.0.953

package/component.ui.runtime.tsx

@@ -11,11 +11,11 @@ import PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';
 import PubsubAspect, { BitBaseEvent, PubsubUI } from '@teambit/pubsub';
 import ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';
 import { UIRuntime } from '@teambit/ui';
+import { groupBy } from 'lodash';
 import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
 import { MenuItem, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
 import { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { Import } from '@teambit/ui-foundation.ui.use-box.menu';
-
 import { AspectSection } from './aspect.section';
 import { ComponentAspect } from './component.aspect';
 import { ComponentModel } from './ui';
@@ -53,7 +53,7 @@ export class ComponentUI {
 
     private navSlot: OrderedNavigationSlot,
 
-    private consumeMethodSlot: ConsumeMethodSlot,
+    readonly consumeMethodSlot: ConsumeMethodSlot,
 
     /**
      * slot for registering a new widget to the menu.
@@ -188,6 +188,7 @@ export class ComponentUI {
   getMenu(host: string, options: GetComponentsOptions = {}) {
     return (
       <ComponentMenu
+        skipRightSide={options.skipRightSide}
         navigationSlot={this.navSlot}
         consumeMethodSlot={this.consumeMethodSlot}
         widgetSlot={this.widgetSlot}
@@ -201,6 +202,11 @@ export class ComponentUI {
     );
   }
 
+  listMenuItems() {
+    const mainMenuItems = groupBy(flatten(this.menuItemSlot.values()), 'category');
+    return mainMenuItems;
+  }
+
   registerRoute(routes: RouteProps[] | RouteProps) {
     this.routeSlot.register(routes);
     return this;

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

@@ -30,7 +30,7 @@ export declare class ComponentUI {
     private pubsub;
     private routeSlot;
     private navSlot;
-    private consumeMethodSlot;
+    readonly consumeMethodSlot: ConsumeMethodSlot;
     /**
      * slot for registering a new widget to the menu.
      */
@@ -65,6 +65,7 @@ export declare class ComponentUI {
     handleComponentChange: (activeComponent?: ComponentModel) => void;
     getComponentUI(host: string, options?: GetComponentsOptions): JSX.Element;
     getMenu(host: string, options?: GetComponentsOptions): JSX.Element;
+    listMenuItems(): import("lodash").Dictionary<MenuItem[]>;
     registerRoute(routes: RouteProps[] | RouteProps): this;
     registerNavigation(nav: LinkProps, order?: number): void;
     registerConsumeMethod(...consumeMethods: ConsumePlugin[]): void;

package/dist/component.ui.runtime.js

@@ -84,6 +84,13 @@ function _ui() {
   };
   return data;
 }
+function _lodash2() {
+  const data = require("lodash");
+  _lodash2 = function () {
+    return data;
+  };
+  return data;
+}
 function _uiFoundationUi() {
   const data = require("@teambit/ui-foundation.ui.is-browser");
   _uiFoundationUi = function () {
@@ -290,6 +297,7 @@ class ComponentUI {
   }
   getMenu(host, options = {}) {
     return /*#__PURE__*/_react().default.createElement(_menu().ComponentMenu, {
+      skipRightSide: options.skipRightSide,
       navigationSlot: this.navSlot,
       consumeMethodSlot: this.consumeMethodSlot,
       widgetSlot: this.widgetSlot,
@@ -301,6 +309,10 @@ class ComponentUI {
       useComponentFilters: options.useComponentFilters
     });
   }
+  listMenuItems() {
+    const mainMenuItems = (0, _lodash2().groupBy)((0, _lodash().default)(this.menuItemSlot.values()), 'category');
+    return mainMenuItems;
+  }
   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","path","useComponent","componentId","useComponentFilters","getMenu","registerRoute","routes","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","reactRouterUI","config","pageSlot","componentUI","aspectSection","AspectSection","registerSearchResultWidget","key","end","DeprecationIcon","commandBar","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';\nimport { GetComponentsOptions } from './get-component-opts';\n\nexport type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;\n\nexport type ComponentUIConfig = {\n  commandBar: boolean;\n};\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, options: GetComponentsOptions = {}) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n        path={options.path}\n        useComponent={options.useComponent}\n        componentIdStr={options.componentId}\n        useComponentFilters={options.useComponentFilters}\n      />\n    );\n  }\n\n  getMenu(host: string, options: GetComponentsOptions = {}) {\n    return (\n      <ComponentMenu\n        navigationSlot={this.navSlot}\n        consumeMethodSlot={this.consumeMethodSlot}\n        widgetSlot={this.widgetSlot}\n        host={host}\n        menuItemSlot={this.menuItemSlot}\n        useComponent={options.useComponent}\n        path={options.path}\n        componentIdStr={options.componentId}\n        useComponentFilters={options.useComponentFilters}\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  static defaultConfig: ComponentUIConfig = {\n    commandBar: true,\n  };\n\n  static async provider(\n    [pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI],\n    config: ComponentUIConfig,\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\n    if (componentUI.commandBarUI && config.commandBar) {\n      componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n      commandBarUI.addSearcher(componentUI.componentSearcher);\n    }\n\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","path","useComponent","componentId","useComponentFilters","getMenu","skipRightSide","listMenuItems","mainMenuItems","groupBy","registerRoute","routes","registerNavigation","nav","props","registerConsumeMethod","consumeMethods","registerWidget","widget","provider","reactRouterUI","config","pageSlot","componentUI","aspectSection","AspectSection","registerSearchResultWidget","key","end","DeprecationIcon","commandBar","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 { groupBy } from 'lodash';\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';\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';\nimport { GetComponentsOptions } from './get-component-opts';\n\nexport type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;\n\nexport type ComponentUIConfig = {\n  commandBar: boolean;\n};\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    readonly 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, options: GetComponentsOptions = {}) {\n    return (\n      <Component\n        routeSlot={this.routeSlot}\n        containerSlot={this.pageItemSlot}\n        onComponentChange={this.handleComponentChange}\n        host={host}\n        path={options.path}\n        useComponent={options.useComponent}\n        componentIdStr={options.componentId}\n        useComponentFilters={options.useComponentFilters}\n      />\n    );\n  }\n\n  getMenu(host: string, options: GetComponentsOptions = {}) {\n    return (\n      <ComponentMenu\n        skipRightSide={options.skipRightSide}\n        navigationSlot={this.navSlot}\n        consumeMethodSlot={this.consumeMethodSlot}\n        widgetSlot={this.widgetSlot}\n        host={host}\n        menuItemSlot={this.menuItemSlot}\n        useComponent={options.useComponent}\n        path={options.path}\n        componentIdStr={options.componentId}\n        useComponentFilters={options.useComponentFilters}\n      />\n    );\n  }\n\n  listMenuItems() {\n    const mainMenuItems = groupBy(flatten(this.menuItemSlot.values()), 'category');\n    return mainMenuItems;\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  static defaultConfig: ComponentUIConfig = {\n    commandBar: true,\n  };\n\n  static async provider(\n    [pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI],\n    config: ComponentUIConfig,\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\n    if (componentUI.commandBarUI && config.commandBar) {\n      componentUI.commandBarUI.addCommand(...componentUI.keyBindings);\n      commandBarUI.addSearcher(componentUI.componentSearcher);\n    }\n\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/get-component-opts.d.ts

@@ -5,4 +5,5 @@ export declare type GetComponentsOptions = {
     componentId?: string | (() => string | undefined);
     useComponentFilters?: () => Filters;
     path?: string;
+    skipRightSide?: boolean;
 };

package/dist/get-component-opts.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["get-component-opts.ts"],"sourcesContent":["import type { UseComponentType } from './ui/use-component';\nimport { Filters } from './ui/use-component-query';\n\nexport type GetComponentsOptions = {\n  useComponent?: UseComponentType;\n  componentId?: string | (() => string | undefined);\n  useComponentFilters?: () => Filters;\n  path?: string;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["get-component-opts.ts"],"sourcesContent":["import type { UseComponentType } from './ui/use-component';\nimport { Filters } from './ui/use-component-query';\n\nexport type GetComponentsOptions = {\n  useComponent?: UseComponentType;\n  componentId?: string | (() => string | undefined);\n  useComponentFilters?: () => Filters;\n  path?: string;\n  skipRightSide?: boolean;\n};\n"],"mappings":""}

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export { ComponentContext, ComponentDescriptorContext, useComponentDescriptor }
 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 { NavPlugin, ConsumePlugin, CollapsibleMenuNav, MenuNavProps, ComponentMenu, VersionRelatedDropdowns } from './ui/menu';
 export { RegisteredComponentRoute, ComponentUrlParams } from './component.route';
 export { ComponentModel, ComponentModelProps } from './ui/component-model';
 export { TopBarNav } from './ui/top-bar-nav';

package/dist/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "AspectEntry", {
     return _aspectEntry().AspectEntry;
   }
 });
+Object.defineProperty(exports, "CollapsibleMenuNav", {
+  enumerable: true,
+  get: function () {
+    return _menu().CollapsibleMenuNav;
+  }
+});
 Object.defineProperty(exports, "Component", {
   enumerable: true,
   get: function () {
@@ -64,6 +70,12 @@ Object.defineProperty(exports, "ComponentMap", {
     return _componentMap().ComponentMap;
   }
 });
+Object.defineProperty(exports, "ComponentMenu", {
+  enumerable: true,
+  get: function () {
+    return _menu().ComponentMenu;
+  }
+});
 Object.defineProperty(exports, "ComponentModel", {
   enumerable: true,
   get: function () {
@@ -106,6 +118,18 @@ Object.defineProperty(exports, "InvalidComponent", {
     return _component2().InvalidComponent;
   }
 });
+Object.defineProperty(exports, "MenuNavProps", {
+  enumerable: true,
+  get: function () {
+    return _menu().MenuNavProps;
+  }
+});
+Object.defineProperty(exports, "NavPlugin", {
+  enumerable: true,
+  get: function () {
+    return _menu().NavPlugin;
+  }
+});
 Object.defineProperty(exports, "RegisteredComponentRoute", {
   enumerable: true,
   get: function () {
@@ -166,6 +190,12 @@ Object.defineProperty(exports, "TopBarNav", {
     return _topBarNav().TopBarNav;
   }
 });
+Object.defineProperty(exports, "VersionRelatedDropdowns", {
+  enumerable: true,
+  get: function () {
+    return _menu().VersionRelatedDropdowns;
+  }
+});
 Object.defineProperty(exports, "componentFields", {
   enumerable: true,
   get: function () {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentAspect"],"sources":["index.ts"],"sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport type { GetComponentsOptions } from './get-component-opts';\nexport type { UseComponentType } from './ui/use-component';\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, ResolveAspectsOptions } 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 type { IComponent } from './component-interface';\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 } from './ui/top-bar-nav';\nexport type { ShowFragment, ShowRow, ShowJSONRow } from './show';\nexport { default as Config } from './config';\nexport { useComponent, useIdFromLocation } 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;AAIA;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;AAEA;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;AAxBA;AACA;AAGA;AACA;AAsBA;AACA;AAAA,eAEeA,4BAAe;AAAA"}
+{"version":3,"names":["ComponentAspect"],"sources":["index.ts"],"sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport type { GetComponentsOptions } from './get-component-opts';\nexport type { UseComponentType } from './ui/use-component';\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, ResolveAspectsOptions } 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 type { IComponent } from './component-interface';\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 { NavPlugin, ConsumePlugin, CollapsibleMenuNav, MenuNavProps, ComponentMenu, VersionRelatedDropdowns } from './ui/menu';\nexport { RegisteredComponentRoute, ComponentUrlParams } from './component.route';\nexport { ComponentModel, ComponentModelProps } from './ui/component-model';\nexport { TopBarNav } from './ui/top-bar-nav';\nexport type { ShowFragment, ShowRow, ShowJSONRow } from './show';\nexport { default as Config } from './config';\nexport { useComponent, useIdFromLocation } 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;AAIA;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;AAEA;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;AAxBA;AACA;AAGA;AACA;AAsBA;AACA;AAAA,eAEeA,4BAAe;AAAA"}

package/dist/{preview-1672802758290.js → preview-1672975590429.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.951/dist/component.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.951/dist/component.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.953/dist/component.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.953/dist/component.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

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

@@ -30,6 +30,7 @@ export declare type ComponentModelProps = {
 export declare type ComponentPreview = {
     includesEnvTemplate?: boolean;
     isScaling?: boolean;
+    skipIncludes?: boolean;
     legacyHeader?: boolean;
 };
 export declare type ComponentServer = {

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

@@ -1 +1 @@
-{"version":3,"names":["ComponentModel","constructor","id","displayName","packageName","server","compositions","tags","buildStatus","issuesCount","elementsUrl","status","deprecation","environment","description","labels","host","size","latest","preview","logs","version","from","env","ComponentID","fromObject","Composition","fromArray","TagMap","map","tag","Tag","componentsProps","rawComponent","empty","name","scope","url"],"sources":["component-model.ts"],"sourcesContent":["import { Composition, CompositionProps } from '@teambit/compositions';\nimport { DeprecationInfo } from '@teambit/deprecation';\nimport { Descriptor } from '@teambit/envs';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport { ComponentPreviewSize } from '@teambit/preview';\nimport { Tag } from '../../tag';\nimport { TagMap } from '../../tag-map';\nimport { TagProps } from '../../tag/tag';\n// import { Snap } from '../../snap';\n\n// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW\n// HOOK FROM YOUR ASPECT!!!\n// TODO: remove all properties from here to their rightful place in their aspects.\nexport type ComponentModelProps = {\n  id: ComponentIdObj;\n  description: string;\n  buildStatus?: string;\n  server?: ComponentServer;\n  displayName: string;\n  packageName: string; // pkg aspect\n  elementsUrl?: string; // pkg aspect\n  compositions?: CompositionProps[];\n  tags?: TagProps[];\n  issuesCount?: number; // component/issues aspect\n  status?: any; // workspace aspect.\n  deprecation?: DeprecationInfo; // deprecation aspect\n  env?: Descriptor; // env aspect.\n  labels?: string[];\n  host?: string;\n  latest?: string;\n  preview?: ComponentPreview;\n  logs?: LegacyComponentLog[];\n  size?: ComponentPreviewSize;\n};\n\nexport type ComponentPreview = {\n  includesEnvTemplate?: boolean;\n  isScaling?: boolean;\n  legacyHeader?: boolean;\n};\n\nexport type ComponentServer = {\n  env: string;\n  url: string;\n};\n\nexport class ComponentModel {\n  constructor(\n    /**\n     * id of the component\n     */\n    readonly id: ComponentID,\n\n    /**\n     * display name of the component.\n     */\n    readonly displayName: string,\n\n    /**\n     * package name of the component.\n     */\n    readonly packageName: string,\n\n    /**\n     * the component server.\n     */\n    readonly server: ComponentServer | undefined,\n\n    /**\n     * array of compositions\n     */\n    readonly compositions: Composition[],\n\n    /**\n     * tags of the component.\n     */\n    readonly tags: TagMap,\n\n    /**\n     * component build status\n     */\n    readonly buildStatus?: string,\n\n    /**\n     * issues of component.\n     */\n    readonly issuesCount?: number,\n    /**\n     * elements url\n     */\n    readonly elementsUrl?: string,\n    /**\n     * status of component.\n     */\n    readonly status?: any,\n\n    /**\n     * deprecation info of the component.\n     */\n    readonly deprecation?: DeprecationInfo,\n\n    /**\n     * env descriptor.\n     */\n    readonly environment?: Descriptor,\n\n    /**\n     * description of the component.\n     */\n\n    readonly description = '',\n\n    readonly labels: string[] = [],\n\n    /**\n     * host of the component\n     */\n    readonly host?: string,\n\n    /**\n     *\n     * size preview\n     */\n    readonly size?: ComponentPreviewSize,\n\n    /**\n     * latest version of component\n     */\n    readonly latest?: string,\n\n    readonly preview?: ComponentPreview,\n\n    readonly logs?: LegacyComponentLog[]\n  ) {}\n\n  get version() {\n    if (!this.id.version) return 'new';\n    return this.id.version;\n  }\n\n  /**\n   * create an instance of a component from a plain object.\n   */\n  static from({\n    id,\n    server,\n    displayName,\n    compositions = [],\n    packageName,\n    elementsUrl,\n    tags = [],\n    deprecation,\n    buildStatus,\n    env,\n    status,\n    issuesCount,\n    description,\n    labels,\n    host,\n    latest,\n    preview,\n    size,\n    logs,\n  }: ComponentModelProps) {\n    return new ComponentModel(\n      ComponentID.fromObject(id),\n      displayName,\n      packageName,\n      server,\n      Composition.fromArray(compositions),\n      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),\n      buildStatus,\n      issuesCount,\n      elementsUrl,\n      status,\n      deprecation,\n      env,\n      description,\n      labels,\n      host,\n      size,\n      latest,\n      preview,\n      logs\n    );\n  }\n\n  static fromArray(componentsProps: ComponentModelProps[]) {\n    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));\n  }\n\n  static empty() {\n    return new ComponentModel(\n      ComponentID.fromObject({ name: 'root', scope: 'temp' }),\n      '',\n      '',\n      { env: '', url: '' },\n      [],\n      TagMap.empty()\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["ComponentModel","constructor","id","displayName","packageName","server","compositions","tags","buildStatus","issuesCount","elementsUrl","status","deprecation","environment","description","labels","host","size","latest","preview","logs","version","from","env","ComponentID","fromObject","Composition","fromArray","TagMap","map","tag","Tag","componentsProps","rawComponent","empty","name","scope","url"],"sources":["component-model.ts"],"sourcesContent":["import { Composition, CompositionProps } from '@teambit/compositions';\nimport { DeprecationInfo } from '@teambit/deprecation';\nimport { Descriptor } from '@teambit/envs';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport { ComponentPreviewSize } from '@teambit/preview';\nimport { Tag } from '../../tag';\nimport { TagMap } from '../../tag-map';\nimport { TagProps } from '../../tag/tag';\n// import { Snap } from '../../snap';\n\n// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW\n// HOOK FROM YOUR ASPECT!!!\n// TODO: remove all properties from here to their rightful place in their aspects.\nexport type ComponentModelProps = {\n  id: ComponentIdObj;\n  description: string;\n  buildStatus?: string;\n  server?: ComponentServer;\n  displayName: string;\n  packageName: string; // pkg aspect\n  elementsUrl?: string; // pkg aspect\n  compositions?: CompositionProps[];\n  tags?: TagProps[];\n  issuesCount?: number; // component/issues aspect\n  status?: any; // workspace aspect.\n  deprecation?: DeprecationInfo; // deprecation aspect\n  env?: Descriptor; // env aspect.\n  labels?: string[];\n  host?: string;\n  latest?: string;\n  preview?: ComponentPreview;\n  logs?: LegacyComponentLog[];\n  size?: ComponentPreviewSize;\n};\n\nexport type ComponentPreview = {\n  includesEnvTemplate?: boolean;\n  isScaling?: boolean;\n  skipIncludes?: boolean;\n  legacyHeader?: boolean;\n};\n\nexport type ComponentServer = {\n  env: string;\n  url: string;\n};\n\nexport class ComponentModel {\n  constructor(\n    /**\n     * id of the component\n     */\n    readonly id: ComponentID,\n\n    /**\n     * display name of the component.\n     */\n    readonly displayName: string,\n\n    /**\n     * package name of the component.\n     */\n    readonly packageName: string,\n\n    /**\n     * the component server.\n     */\n    readonly server: ComponentServer | undefined,\n\n    /**\n     * array of compositions\n     */\n    readonly compositions: Composition[],\n\n    /**\n     * tags of the component.\n     */\n    readonly tags: TagMap,\n\n    /**\n     * component build status\n     */\n    readonly buildStatus?: string,\n\n    /**\n     * issues of component.\n     */\n    readonly issuesCount?: number,\n    /**\n     * elements url\n     */\n    readonly elementsUrl?: string,\n    /**\n     * status of component.\n     */\n    readonly status?: any,\n\n    /**\n     * deprecation info of the component.\n     */\n    readonly deprecation?: DeprecationInfo,\n\n    /**\n     * env descriptor.\n     */\n    readonly environment?: Descriptor,\n\n    /**\n     * description of the component.\n     */\n\n    readonly description = '',\n\n    readonly labels: string[] = [],\n\n    /**\n     * host of the component\n     */\n    readonly host?: string,\n\n    /**\n     *\n     * size preview\n     */\n    readonly size?: ComponentPreviewSize,\n\n    /**\n     * latest version of component\n     */\n    readonly latest?: string,\n\n    readonly preview?: ComponentPreview,\n\n    readonly logs?: LegacyComponentLog[]\n  ) {}\n\n  get version() {\n    if (!this.id.version) return 'new';\n    return this.id.version;\n  }\n\n  /**\n   * create an instance of a component from a plain object.\n   */\n  static from({\n    id,\n    server,\n    displayName,\n    compositions = [],\n    packageName,\n    elementsUrl,\n    tags = [],\n    deprecation,\n    buildStatus,\n    env,\n    status,\n    issuesCount,\n    description,\n    labels,\n    host,\n    latest,\n    preview,\n    size,\n    logs,\n  }: ComponentModelProps) {\n    return new ComponentModel(\n      ComponentID.fromObject(id),\n      displayName,\n      packageName,\n      server,\n      Composition.fromArray(compositions),\n      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),\n      buildStatus,\n      issuesCount,\n      elementsUrl,\n      status,\n      deprecation,\n      env,\n      description,\n      labels,\n      host,\n      size,\n      latest,\n      preview,\n      logs\n    );\n  }\n\n  static fromArray(componentsProps: ComponentModelProps[]) {\n    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));\n  }\n\n  static empty() {\n    return new ComponentModel(\n      ComponentID.fromObject({ name: 'root', scope: 'temp' }),\n      '',\n      '',\n      { env: '', url: '' },\n      [],\n      TagMap.empty()\n    );\n  }\n}\n"],"mappings":";;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAyCO,MAAMA,cAAc,CAAC;EAC1BC,WAAW;EACT;AACJ;AACA;EACaC,EAAe;EAExB;AACJ;AACA;EACaC,WAAmB;EAE5B;AACJ;AACA;EACaC,WAAmB;EAE5B;AACJ;AACA;EACaC,MAAmC;EAE5C;AACJ;AACA;EACaC,YAA2B;EAEpC;AACJ;AACA;EACaC,IAAY;EAErB;AACJ;AACA;EACaC,WAAoB;EAE7B;AACJ;AACA;EACaC,WAAoB;EAC7B;AACJ;AACA;EACaC,WAAoB;EAC7B;AACJ;AACA;EACaC,MAAY;EAErB;AACJ;AACA;EACaC,WAA6B;EAEtC;AACJ;AACA;EACaC,WAAwB;EAEjC;AACJ;AACA;;EAEaC,WAAW,GAAG,EAAE,EAEhBC,MAAgB,GAAG,EAAE;EAE9B;AACJ;AACA;EACaC,IAAa;EAEtB;AACJ;AACA;AACA;EACaC,IAA2B;EAEpC;AACJ;AACA;EACaC,MAAe,EAEfC,OAA0B,EAE1BC,IAA2B,EACpC;IAAA,KAlFSlB,EAAe,GAAfA,EAAe;IAAA,KAKfC,WAAmB,GAAnBA,WAAmB;IAAA,KAKnBC,WAAmB,GAAnBA,WAAmB;IAAA,KAKnBC,MAAmC,GAAnCA,MAAmC;IAAA,KAKnCC,YAA2B,GAA3BA,YAA2B;IAAA,KAK3BC,IAAY,GAAZA,IAAY;IAAA,KAKZC,WAAoB,GAApBA,WAAoB;IAAA,KAKpBC,WAAoB,GAApBA,WAAoB;IAAA,KAIpBC,WAAoB,GAApBA,WAAoB;IAAA,KAIpBC,MAAY,GAAZA,MAAY;IAAA,KAKZC,WAA6B,GAA7BA,WAA6B;IAAA,KAK7BC,WAAwB,GAAxBA,WAAwB;IAAA,KAMxBC,WAAW,GAAXA,WAAW;IAAA,KAEXC,MAAgB,GAAhBA,MAAgB;IAAA,KAKhBC,IAAa,GAAbA,IAAa;IAAA,KAMbC,IAA2B,GAA3BA,IAA2B;IAAA,KAK3BC,MAAe,GAAfA,MAAe;IAAA,KAEfC,OAA0B,GAA1BA,OAA0B;IAAA,KAE1BC,IAA2B,GAA3BA,IAA2B;EACnC;EAEH,IAAIC,OAAO,GAAG;IACZ,IAAI,CAAC,IAAI,CAACnB,EAAE,CAACmB,OAAO,EAAE,OAAO,KAAK;IAClC,OAAO,IAAI,CAACnB,EAAE,CAACmB,OAAO;EACxB;;EAEA;AACF;AACA;EACE,OAAOC,IAAI,CAAC;IACVpB,EAAE;IACFG,MAAM;IACNF,WAAW;IACXG,YAAY,GAAG,EAAE;IACjBF,WAAW;IACXM,WAAW;IACXH,IAAI,GAAG,EAAE;IACTK,WAAW;IACXJ,WAAW;IACXe,GAAG;IACHZ,MAAM;IACNF,WAAW;IACXK,WAAW;IACXC,MAAM;IACNC,IAAI;IACJE,MAAM;IACNC,OAAO;IACPF,IAAI;IACJG;EACmB,CAAC,EAAE;IACtB,OAAO,IAAIpB,cAAc,CACvBwB,0BAAW,CAACC,UAAU,CAACvB,EAAE,CAAC,EAC1BC,WAAW,EACXC,WAAW,EACXC,MAAM,EACNqB,2BAAW,CAACC,SAAS,CAACrB,YAAY,CAAC,EACnCsB,gBAAM,CAACD,SAAS,CAACpB,IAAI,CAACsB,GAAG,CAAEC,GAAG,IAAKC,UAAG,CAACN,UAAU,CAACK,GAAG,CAAC,CAAC,CAAC,EACxDtB,WAAW,EACXC,WAAW,EACXC,WAAW,EACXC,MAAM,EACNC,WAAW,EACXW,GAAG,EACHT,WAAW,EACXC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,IAAI,CACL;EACH;EAEA,OAAOO,SAAS,CAACK,eAAsC,EAAE;IACvD,OAAOA,eAAe,CAACH,GAAG,CAAEI,YAAY,IAAKjC,cAAc,CAACsB,IAAI,CAACW,YAAY,CAAC,CAAC;EACjF;EAEA,OAAOC,KAAK,GAAG;IACb,OAAO,IAAIlC,cAAc,CACvBwB,0BAAW,CAACC,UAAU,CAAC;MAAEU,IAAI,EAAE,MAAM;MAAEC,KAAK,EAAE;IAAO,CAAC,CAAC,EACvD,EAAE,EACF,EAAE,EACF;MAAEb,GAAG,EAAE,EAAE;MAAEc,GAAG,EAAE;IAAG,CAAC,EACpB,EAAE,EACFT,gBAAM,CAACM,KAAK,EAAE,CACf;EACH;AACF;AAAC"}

package/dist/ui/index.d.ts

@@ -1,4 +1,6 @@
+export { CollapsibleMenuNav, MenuNavProps } from './menu';
 export { Component } from './component';
+export { ConsumeMethodSlot, ComponentMenu, VersionRelatedDropdowns } from './menu';
 export { ComponentModel, ComponentModelProps } from './component-model';
 export { ComponentContext, ComponentProvider } from './context';
 export { useComponent } from './use-component';

package/dist/ui/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CollapsibleMenuNav", {
+  enumerable: true,
+  get: function () {
+    return _menu().CollapsibleMenuNav;
+  }
+});
 Object.defineProperty(exports, "Component", {
   enumerable: true,
   get: function () {
@@ -15,6 +21,12 @@ Object.defineProperty(exports, "ComponentContext", {
     return _context().ComponentContext;
   }
 });
+Object.defineProperty(exports, "ComponentMenu", {
+  enumerable: true,
+  get: function () {
+    return _menu().ComponentMenu;
+  }
+});
 Object.defineProperty(exports, "ComponentModel", {
   enumerable: true,
   get: function () {
@@ -33,12 +45,30 @@ Object.defineProperty(exports, "ComponentProvider", {
     return _context().ComponentProvider;
   }
 });
+Object.defineProperty(exports, "ConsumeMethodSlot", {
+  enumerable: true,
+  get: function () {
+    return _menu().ConsumeMethodSlot;
+  }
+});
+Object.defineProperty(exports, "MenuNavProps", {
+  enumerable: true,
+  get: function () {
+    return _menu().MenuNavProps;
+  }
+});
 Object.defineProperty(exports, "TopBarNav", {
   enumerable: true,
   get: function () {
     return _topBarNav().TopBarNav;
   }
 });
+Object.defineProperty(exports, "VersionRelatedDropdowns", {
+  enumerable: true,
+  get: function () {
+    return _menu().VersionRelatedDropdowns;
+  }
+});
 Object.defineProperty(exports, "componentFields", {
   enumerable: true,
   get: function () {
@@ -69,6 +99,13 @@ Object.defineProperty(exports, "useIdFromLocation", {
     return _useComponentFromLocation().useIdFromLocation;
   }
 });
+function _menu() {
+  const data = require("./menu");
+  _menu = function () {
+    return data;
+  };
+  return data;
+}
 function _component() {
   const data = require("./component");
   _component = function () {

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 { TopBarNav } 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"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { CollapsibleMenuNav, MenuNavProps } from './menu';\nexport { Component } from './component';\nexport { ConsumeMethodSlot, ComponentMenu, VersionRelatedDropdowns } from './menu';\nexport { ComponentModel, ComponentModelProps } from './component-model';\nexport { ComponentContext, ComponentProvider } from './context';\nexport { useComponent } from './use-component';\nexport { TopBarNav } 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;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"}

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

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

package/dist/ui/menu/index.js

@@ -3,12 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CollapsibleMenuNav", {
+  enumerable: true,
+  get: function () {
+    return _menuNav().CollapsibleMenuNav;
+  }
+});
 Object.defineProperty(exports, "ComponentMenu", {
   enumerable: true,
   get: function () {
     return _menu().ComponentMenu;
   }
 });
+Object.defineProperty(exports, "MenuNavProps", {
+  enumerable: true,
+  get: function () {
+    return _menuNav().MenuNavProps;
+  }
+});
+Object.defineProperty(exports, "VersionRelatedDropdowns", {
+  enumerable: true,
+  get: function () {
+    return _menu().VersionRelatedDropdowns;
+  }
+});
+function _menuNav() {
+  const data = require("./menu-nav");
+  _menuNav = function () {
+    return data;
+  };
+  return data;
+}
 function _menu() {
   const data = require("./menu");
   _menu = function () {

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { CollapsibleMenuNav, MenuNavProps } from './menu-nav';\nexport { ComponentMenu, VersionRelatedDropdowns } from './menu';\nexport type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA"}

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

@@ -1,7 +1,17 @@
 import React from 'react';
-import { OrderedNavigationSlot } from './nav-plugin';
+import { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
 export declare type MenuNavProps = {
-    navigationSlot: OrderedNavigationSlot;
-    widgetSlot: OrderedNavigationSlot;
+    /**
+     * @deprecated
+     * use @property navPlugins
+     */
+    navigationSlot?: OrderedNavigationSlot;
+    /**
+     * @deprecated
+     * use @property widgetPlugins
+     */
+    widgetSlot?: OrderedNavigationSlot;
+    navPlugins?: [string, NavPlugin][];
+    widgetPlugins?: [string, NavPlugin][];
 } & React.HTMLAttributes<HTMLElement>;
-export declare function CollapsableMenuNav({ navigationSlot, widgetSlot, className }: MenuNavProps): JSX.Element;
+export declare function CollapsibleMenuNav({ navigationSlot, widgetSlot, navPlugins, widgetPlugins, className, }: MenuNavProps): JSX.Element;

package/dist/ui/menu/menu-nav.js

@@ -6,7 +6,7 @@ require("core-js/modules/es.array.sort.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CollapsableMenuNav = CollapsableMenuNav;
+exports.CollapsibleMenuNav = CollapsibleMenuNav;
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
   _defineProperty2 = function () {
@@ -60,20 +60,27 @@ 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function CollapsableMenuNav({
+function CollapsibleMenuNav({
   navigationSlot,
   widgetSlot,
+  navPlugins = [],
+  widgetPlugins = [],
   className
 }) {
-  const plugins = (0, _react().useMemo)(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
-  const widgets = (0, _react().useMemo)(() => widgetSlot.toArray().sort(sortFn), [widgetSlot]);
-  const links = [...plugins, ...widgets].map(([id, menuItem]) => {
-    var _plugins$, _widgets$;
+  const plugins = (0, _react().useMemo)(() => {
+    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot === null || navigationSlot === void 0 ? void 0 : navigationSlot.toArray();
+    return (_navPlugins || []).sort(sortFn);
+  }, [navigationSlot, navPlugins]);
+  const widgets = (0, _react().useMemo)(() => {
+    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot === null || widgetSlot === void 0 ? void 0 : widgetSlot.toArray();
+    return (_widgetPlugins || []).sort(sortFn);
+  }, [widgetSlot, widgetPlugins]);
+  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {
     // these styles keep plugins to the left and widgets to the right.
-    const lastPluginStyle = menuItem.props.href === ((_plugins$ = plugins[-1]) === null || _plugins$ === void 0 ? void 0 : _plugins$[1].props.href) ? {
+    const lastPluginStyle = plugins.length - 1 === index ? {
       marginRight: 'auto'
     } : {};
-    const firstWidgetStyle = menuItem.props.href === ((_widgets$ = widgets[0]) === null || _widgets$ === void 0 ? void 0 : _widgets$[1].props.href) ? {
+    const firstWidgetStyle = plugins.length === index ? {
       marginLeft: 'auto'
     } : {};
     return {
@@ -82,7 +89,7 @@ function CollapsableMenuNav({
       }) {
         const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;
         return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
-          className: (0, _classnames().default)(_menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder),
+          className: (0, _classnames().default)(menuItem.props.className, _menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder),
           key: id
         }, menuItem.props), widgetDisplayText || menuItem.props.children);
       },

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

@@ -1 +1 @@
-{"version":3,"names":["CollapsableMenuNav","navigationSlot","widgetSlot","className","plugins","useMemo","toArray","sort","sortFn","widgets","links","map","id","menuItem","lastPluginStyle","props","href","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","displayName","classnames","styles","topBarNav","noBorder","children","style","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  navigationSlot: OrderedNavigationSlot;\n  widgetSlot: OrderedNavigationSlot;\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsableMenuNav({ navigationSlot, widgetSlot, className }: MenuNavProps) {\n  const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);\n  const widgets = useMemo(() => widgetSlot.toArray().sort(sortFn), [widgetSlot]);\n\n  const links = [...plugins, ...widgets].map(([id, menuItem]) => {\n\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = menuItem.props.href === plugins[-1]?.[1].props.href ? { marginRight: 'auto' } : {};\n    const firstWidgetStyle = menuItem.props.href === widgets[0]?.[1].props.href ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: function TopBarNavComponent({ isInMenu }: TabProps) {\n        const widgetDisplayText = (menuItem.props.displayName && isInMenu) && menuItem.props.displayName;\n        return (\n          <TopBarNav className={classnames(styles.topBarNav, isInMenu && styles.noBorder)} key={id} {...menuItem.props}>\n            {widgetDisplayText || menuItem.props.children}\n          </TopBarNav>\n        );\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n    };\n  });\n  return (\n    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, className)}\n      style={{ width: '100%', height: '100%' }}\n      priority=\"none\"\n      tabs={links}\n    />\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;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;AAAwC;AAAA;AAAA;AAAA;AAQjC,SAASA,kBAAkB,CAAC;EAAEC,cAAc;EAAEC,UAAU;EAAEC;AAAwB,CAAC,EAAE;EAC1F,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC,MAAMJ,cAAc,CAACK,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACP,cAAc,CAAC,CAAC;EACtF,MAAMQ,OAAO,GAAG,IAAAJ,gBAAO,EAAC,MAAMH,UAAU,CAACI,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACN,UAAU,CAAC,CAAC;EAE9E,MAAMQ,KAAK,GAAG,CAAC,GAAGN,OAAO,EAAE,GAAGK,OAAO,CAAC,CAACE,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,QAAQ,CAAC,KAAK;IAAA;IAE7D;IACA,MAAMC,eAAe,GAAGD,QAAQ,CAACE,KAAK,CAACC,IAAI,mBAAKZ,OAAO,CAAC,CAAC,CAAC,CAAC,8CAAX,UAAc,CAAC,CAAC,CAACW,KAAK,CAACC,IAAI,IAAG;MAAEC,WAAW,EAAE;IAAO,CAAC,GAAG,CAAC,CAAC;IAC1G,MAAMC,gBAAgB,GAAGL,QAAQ,CAACE,KAAK,CAACC,IAAI,mBAAKP,OAAO,CAAC,CAAC,CAAC,8CAAV,UAAa,CAAC,CAAC,CAACM,KAAK,CAACC,IAAI,IAAG;MAAEG,UAAU,EAAE;IAAO,CAAC,GAAG,CAAC,CAAC;IAEzG,OAAO;MACLC,SAAS,EAAE,SAASC,kBAAkB,CAAC;QAAEC;MAAmB,CAAC,EAAE;QAC7D,MAAMC,iBAAiB,GAAIV,QAAQ,CAACE,KAAK,CAACS,WAAW,IAAIF,QAAQ,IAAKT,QAAQ,CAACE,KAAK,CAACS,WAAW;QAChG,oBACE,+BAAC,sBAAS;UAAC,SAAS,EAAE,IAAAC,qBAAU,EAACC,qBAAM,CAACC,SAAS,EAAEL,QAAQ,IAAII,qBAAM,CAACE,QAAQ,CAAE;UAAC,GAAG,EAAEhB;QAAG,GAAKC,QAAQ,CAACE,KAAK,GACzGQ,iBAAiB,IAAIV,QAAQ,CAACE,KAAK,CAACc,QAAQ,CACnC;MAEhB,CAAC;MACDC,KAAK,kCAAOZ,gBAAgB,GAAKJ,eAAe;IAClD,CAAC;EACH,CAAC,CAAC;EACF,oBACE,+BAAC,oCAAgB;IACf,YAAY,EAAE,IAAAW,qBAAU,EAACC,qBAAM,CAACK,GAAG,EAAE5B,SAAS,CAAE;IAChD,KAAK,EAAE;MAAE6B,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE;IAAO,CAAE;IACzC,QAAQ,EAAC,MAAM;IACf,IAAI,EAAEvB;EAAM,EACZ;AAEN;AAEA,SAASF,MAAM,CAAC,GAAG;EAAE0B,KAAK,EAAEC;AAAM,CAAC,CAAsB,EAAE,GAAG;EAAED,KAAK,EAAEE;AAAO,CAAC,CAAsB,EAAE;EACrG;EACA;EACA;;EAEA,OAAO,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,KAAKC,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":["CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","className","plugins","useMemo","_navPlugins","length","toArray","sort","sortFn","widgets","_widgetPlugins","links","map","id","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","props","displayName","classnames","styles","topBarNav","noBorder","children","style","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  /**\n   * @deprecated\n   * use @property navPlugins\n   */\n  navigationSlot?: OrderedNavigationSlot;\n  /**\n   * @deprecated\n   * use @property widgetPlugins\n   */\n  widgetSlot?: OrderedNavigationSlot;\n  navPlugins?: [string, NavPlugin][];\n  widgetPlugins?: [string, NavPlugin][];\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n}: MenuNavProps) {\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    return (_navPlugins || []).sort(sortFn);\n  }, [navigationSlot, navPlugins]);\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    return (_widgetPlugins || []).sort(sortFn);\n  }, [widgetSlot, widgetPlugins]);\n\n  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};\n\n    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: function TopBarNavComponent({ isInMenu }: TabProps) {\n        const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;\n        return (\n          <TopBarNav\n            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}\n            key={id}\n            {...menuItem.props}\n          >\n            {widgetDisplayText || menuItem.props.children}\n          </TopBarNav>\n        );\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n    };\n  });\n  return (\n    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, className)}\n      style={{ width: '100%', height: '100%' }}\n      priority=\"none\"\n      tabs={links}\n    />\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"],"mappings":"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"}

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

@@ -1,10 +1,15 @@
 /// <reference types="react" />
 import { MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
+import type { ComponentModel } from '../component-model';
 import { UseComponentType } from '../use-component';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 import { Filters } from '../use-component-query';
 export declare type MenuProps = {
     className?: string;
+    /**
+     * skip the right side.
+     */
+    skipRightSide?: boolean;
     /**
      * slot for top bar menu nav items
      */
@@ -27,4 +32,10 @@ export declare type MenuProps = {
 /**
  * top bar menu.
  */
-export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, componentIdStr, useComponent, path, useComponentFilters, }: MenuProps): JSX.Element;
+export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, componentIdStr, skipRightSide, useComponent, path, useComponentFilters, }: MenuProps): JSX.Element;
+export declare function VersionRelatedDropdowns({ component, consumeMethods, className, host, }: {
+    component: ComponentModel;
+    consumeMethods?: ConsumeMethodSlot;
+    className?: string;
+    host: string;
+}): JSX.Element;

package/dist/ui/menu/menu.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ComponentMenu = ComponentMenu;
+exports.VersionRelatedDropdowns = VersionRelatedDropdowns;
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
   _defineProperty2 = function () {
@@ -145,6 +146,7 @@ function ComponentMenu({
   menuItemSlot,
   consumeMethodSlot,
   componentIdStr,
+  skipRightSide,
   useComponent,
   path,
   useComponentFilters
@@ -168,10 +170,10 @@ function ComponentMenu({
       className: (0, _classnames().default)(_menuModule().default.topBar, className)
     }, /*#__PURE__*/_react().default.createElement("div", {
       className: _menuModule().default.leftSide
-    }, /*#__PURE__*/_react().default.createElement(_menuNav().CollapsableMenuNav, {
+    }, /*#__PURE__*/_react().default.createElement(_menuNav().CollapsibleMenuNav, {
       navigationSlot: navigationSlot,
       widgetSlot: widgetSlot
-    })), /*#__PURE__*/_react().default.createElement("div", {
+    })), !skipRightSide && /*#__PURE__*/_react().default.createElement("div", {
       className: _menuModule().default.rightSide
     }, /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
       component: component,
@@ -186,6 +188,7 @@ function ComponentMenu({
 function VersionRelatedDropdowns({
   component,
   consumeMethods,
+  className,
   host
 }) {
   var _lanesModel$viewedLan, _lanesModel$viewedLan2, _lanesModel$getLanesB;
@@ -217,8 +220,8 @@ function VersionRelatedDropdowns({
   const lanes = (lanesModel === null || lanesModel === void 0 ? void 0 : (_lanesModel$getLanesB = lanesModel.getLanesByComponentId(component.id)) === null || _lanesModel$getLanesB === void 0 ? void 0 : _lanesModel$getLanesB.filter(lane => !lane.id.isDefault())) || [];
   const localVersion = isWorkspace && !isNew && !currentLane;
   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, {
+  const methods = useConsumeMethods(component, consumeMethods, currentLane);
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, consumeMethods && tags.length > 0 && /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox().UseBoxDropdown, {
     position: "bottom-end",
     className: (0, _classnames().default)(_menuModule().default.useBox, _menuModule().default.hideOnMobile),
     Menu: /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox2().Menu, {
@@ -233,11 +236,14 @@ function VersionRelatedDropdowns({
     currentVersion: currentVersion,
     latestVersion: component.latest,
     currentLane: currentLane,
+    className: className,
     menuClassName: _menuModule().default.componentVersionMenu
   }));
 }
-function useConsumeMethods(consumeMethods, componentModel, currentLane) {
-  return (0, _react().useMemo)(() => (0, _lodash().flatten)(consumeMethods.values()).map(method => {
+function useConsumeMethods(componentModel, consumeMethods, currentLane) {
+  // if (!consumeMethods || !componentModel) return [];
+  return (0, _react().useMemo)(() => (0, _lodash().flatten)(consumeMethods === null || consumeMethods === void 0 ? void 0 : consumeMethods.values()).map(method => {
+    if (!componentModel) return undefined;
     return method === null || method === void 0 ? void 0 : method(componentModel, {
       currentLane
     });

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

@@ -1 +1 @@
-{"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","useComponentOptions","logFilters","customUseComponent","component","useComponentQuery","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","hideOnMobile","VersionRelatedDropdowns","consumeMethods","location","useLocation","lanesModel","useLanes","currentLane","viewedLane","id","isDefault","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","tags","tagLookup","Map","forEach","set","compact","toArray","reverse","get","isNew","length","lanes","getLanesByComponentId","lane","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, isFunction } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { useLanes } from '@teambit/lanes.hooks.use-lanes';\nimport { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent as useComponentQuery, UseComponentType } from '../use-component';\nimport { CollapsableMenuNav } from './menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\nimport { ComponentID } from '../..';\nimport { Filters } from '../use-component-query';\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  componentIdStr?: string | (() => string | undefined);\n\n  useComponent?: UseComponentType;\n\n  path?: string;\n\n  useComponentFilters?: () => Filters;\n};\nfunction getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {\n  if (isFunction(componentIdStr)) return componentIdStr();\n  return componentIdStr;\n}\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n  navigationSlot,\n  widgetSlot,\n  className,\n  host,\n  menuItemSlot,\n  consumeMethodSlot,\n  componentIdStr,\n  useComponent,\n  path,\n  useComponentFilters,\n}: MenuProps) {\n  const idFromLocation = useIdFromLocation();\n  const _componentIdStr = getComponentIdStr(componentIdStr);\n  const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;\n  const resolvedComponentIdStr = path || idFromLocation;\n\n  const useComponentOptions = {\n    logFilters: useComponentFilters?.(),\n    customUseComponent: useComponent,\n  };\n\n  const { component } = useComponentQuery(host, componentId?.toString() || idFromLocation, useComponentOptions);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <Routes>\n      <Route\n        path={`${resolvedComponentIdStr}/*`}\n        element={\n          <div className={classnames(styles.topBar, className)}>\n            <div className={styles.leftSide}>\n              <CollapsableMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n            </div>\n            <div className={styles.rightSide}>\n              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n              <MainDropdown className={styles.hideOnMobile} 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 { lanesModel } = useLanes();\n  const currentLane =\n    lanesModel?.viewedLane?.id && !lanesModel?.viewedLane?.id.isDefault() ? lanesModel.viewedLane : undefined;\n\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || []).filter((log) => !log.tag).map((snap) => ({ ...snap, version: snap.hash }));\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 = lanesModel?.getLanesByComponentId(component.id)?.filter((lane) => !lane.id.isDefault()) || [];\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={classnames(styles.useBox, styles.hideOnMobile)}\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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"}
+{"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","skipRightSide","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","useComponentOptions","logFilters","customUseComponent","component","useComponentQuery","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","hideOnMobile","VersionRelatedDropdowns","consumeMethods","location","useLocation","lanesModel","useLanes","currentLane","viewedLane","id","isDefault","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","tags","tagLookup","Map","forEach","set","compact","toArray","reverse","get","isNew","length","lanes","getLanesByComponentId","lane","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, isFunction } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { useLanes } from '@teambit/lanes.hooks.use-lanes';\nimport { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent as useComponentQuery, UseComponentType } from '../use-component';\nimport { CollapsibleMenuNav } from './menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\nimport { ComponentID } from '../..';\nimport { Filters } from '../use-component-query';\n\nexport type MenuProps = {\n  className?: string;\n\n  /**\n   * skip the right side.\n   */\n  skipRightSide?: boolean;\n\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  componentIdStr?: string | (() => string | undefined);\n\n  useComponent?: UseComponentType;\n\n  path?: string;\n\n  useComponentFilters?: () => Filters;\n};\nfunction getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {\n  if (isFunction(componentIdStr)) return componentIdStr();\n  return componentIdStr;\n}\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n  navigationSlot,\n  widgetSlot,\n  className,\n  host,\n  menuItemSlot,\n  consumeMethodSlot,\n  componentIdStr,\n  skipRightSide,\n  useComponent,\n  path,\n  useComponentFilters,\n}: MenuProps) {\n  const idFromLocation = useIdFromLocation();\n  const _componentIdStr = getComponentIdStr(componentIdStr);\n  const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;\n  const resolvedComponentIdStr = path || idFromLocation;\n\n  const useComponentOptions = {\n    logFilters: useComponentFilters?.(),\n    customUseComponent: useComponent,\n  };\n\n  const { component } = useComponentQuery(host, componentId?.toString() || idFromLocation, useComponentOptions);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <Routes>\n      <Route\n        path={`${resolvedComponentIdStr}/*`}\n        element={\n          <div className={classnames(styles.topBar, className)}>\n            <div className={styles.leftSide}>\n              <CollapsibleMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n            </div>\n            {!skipRightSide && (\n              <div className={styles.rightSide}>\n                <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n                <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />\n              </div>\n            )}\n          </div>\n        }\n      />\n    </Routes>\n  );\n}\n\nexport function VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n  className,\n  host,\n}: {\n  component: ComponentModel;\n  consumeMethods?: ConsumeMethodSlot;\n  className?: string,\n  host: string;\n}) {\n  const location = useLocation();\n  const { lanesModel } = useLanes();\n  const currentLane =\n    lanesModel?.viewedLane?.id && !lanesModel?.viewedLane?.id.isDefault() ? lanesModel.viewedLane : undefined;\n\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || []).filter((log) => !log.tag).map((snap) => ({ ...snap, version: snap.hash }));\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 = lanesModel?.getLanesByComponentId(component.id)?.filter((lane) => !lane.id.isDefault()) || [];\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(component, consumeMethods, currentLane);\n  return (\n    <>\n      {consumeMethods && tags.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={classnames(styles.useBox, styles.hideOnMobile)}\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        className={className}\n        menuClassName={styles.componentVersionMenu}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  componentModel?: ComponentModel,\n  consumeMethods?: ConsumeMethodSlot,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  // if (!consumeMethods || !componentModel) return [];\n  return useMemo(\n    () =>\n      flatten(consumeMethods?.values())\n        .map((method) => {\n          if (!componentModel) return undefined;\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/use-component-query.js

@@ -115,6 +115,7 @@ const componentOverviewFields = (0, _client().gql)`
       includesEnvTemplate
       legacyHeader
       isScaling
+      skipIncludes
     }
     compositions {
       identifier

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","skip","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","map","aspectObject","aspectId","aspectData","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.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      id\n      data\n    }\n    elementsUrl\n    description\n    deprecation {\n      isDeprecate\n      newId\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    size {\n      compressedTotal\n    }\n    preview {\n      includesEnvTemplate\n      legacyHeader\n      isScaling\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, skip?: boolean) {\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    skip,\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.map((aspectObject) => {\n        return {\n          ...aspectObject,\n          aspectId: aspectObject.id,\n          aspectData: aspectObject.data,\n        };\n      }),\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;AAAmD;AAAA;AAE5C,MAAMA,iBAAiB,GAAG,IAAAC,aAAG,CAAC;AACrC;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,uBAAuB,GAAG,IAAAD,aAAG,CAAC;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;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CAAC;AAAC;AAEK,MAAMG,eAAe,GAAG,IAAAF,aAAG,CAAC;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,CAAC;AAAC;AAEF,MAAME,aAAa,GAAG,IAAAH,aAAG,CAAC;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAAC;AAED,MAAME,sBAAsB,GAAG,IAAAJ,aAAG,CAAC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAAC;AAED,MAAMG,qBAAqB,GAAG,IAAAL,aAAG,CAAC;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA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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","skip","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","map","aspectObject","aspectId","aspectData","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.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      id\n      data\n    }\n    elementsUrl\n    description\n    deprecation {\n      isDeprecate\n      newId\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    size {\n      compressedTotal\n    }\n    preview {\n      includesEnvTemplate\n      legacyHeader\n      isScaling\n      skipIncludes\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, skip?: boolean) {\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    skip,\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.map((aspectObject) => {\n        return {\n          ...aspectObject,\n          aspectId: aspectObject.id,\n          aspectData: aspectObject.data,\n        };\n      }),\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;AAAmD;AAAA;AAE5C,MAAMA,iBAAiB,GAAG,IAAAC,aAAG,CAAC;AACrC;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,uBAAuB,GAAG,IAAAD,aAAG,CAAC;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;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CAAC;AAAC;AAEK,MAAMG,eAAe,GAAG,IAAAF,aAAG,CAAC;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,CAAC;AAAC;AAEF,MAAME,aAAa,GAAG,IAAAH,aAAG,CAAC;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAAC;AAED,MAAME,sBAAsB,GAAG,IAAAJ,aAAG,CAAC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAAC;AAED,MAAMG,qBAAqB,GAAG,IAAAL,aAAG,CAAC;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.951",
+  "version": "0.0.953",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.951"
+    "version": "0.0.953"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -31,45 +31,45 @@
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
     "@teambit/component-id": "0.0.425",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.497",
-    "@teambit/aspect-loader": "0.0.951",
-    "@teambit/graph": "0.0.951",
+    "@teambit/aspect-loader": "0.0.953",
+    "@teambit/graph": "0.0.953",
     "@teambit/legacy-bit-id": "0.0.421",
     "@teambit/toolbox.path.match-patterns": "0.0.9",
     "@teambit/toolbox.string.capitalize": "0.0.490",
-    "@teambit/cli": "0.0.637",
-    "@teambit/express": "0.0.735",
-    "@teambit/graphql": "0.0.951",
+    "@teambit/cli": "0.0.638",
+    "@teambit/express": "0.0.736",
+    "@teambit/graphql": "0.0.953",
     "@teambit/bit-error": "0.0.402",
-    "@teambit/command-bar": "0.0.951",
+    "@teambit/command-bar": "0.0.953",
     "@teambit/component.ui.deprecation-icon": "0.0.503",
-    "@teambit/preview": "0.0.951",
-    "@teambit/pubsub": "0.0.951",
-    "@teambit/react-router": "0.0.951",
+    "@teambit/preview": "0.0.953",
+    "@teambit/pubsub": "0.0.953",
+    "@teambit/react-router": "0.0.953",
     "@teambit/ui-foundation.ui.is-browser": "0.0.495",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.497",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.501",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.130",
-    "@teambit/ui": "0.0.951",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.131",
+    "@teambit/ui": "0.0.953",
     "@teambit/component-issues": "0.0.84",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
     "@teambit/cli-table": "0.0.41",
-    "@teambit/component-descriptor": "0.0.207",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
+    "@teambit/component-descriptor": "0.0.208",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.496",
     "@teambit/design.ui.empty-box": "0.0.363",
     "@teambit/harmony.ui.aspect-box": "0.0.497",
     "@teambit/design.ui.pages.not-found": "0.0.366",
     "@teambit/design.ui.pages.server-error": "0.0.366",
-    "@teambit/compositions": "0.0.951",
-    "@teambit/deprecation": "0.0.951",
-    "@teambit/envs": "0.0.951",
-    "@teambit/legacy-component-log": "0.0.399",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
     "@teambit/envs.ui.env-icon": "0.0.495",
-    "@teambit/component.ui.version-dropdown": "0.0.703",
-    "@teambit/lanes.hooks.use-lanes": "0.0.101",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.63",
+    "@teambit/compositions": "0.0.953",
+    "@teambit/deprecation": "0.0.953",
+    "@teambit/envs": "0.0.953",
+    "@teambit/legacy-component-log": "0.0.399",
+    "@teambit/component.ui.version-dropdown": "0.0.704",
+    "@teambit/lanes.hooks.use-lanes": "0.0.102",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.64",
     "@teambit/ui-foundation.ui.full-loader": "0.0.495",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.130"
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.131"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -88,7 +88,7 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.6.0",
-    "@teambit/legacy": "1.0.418",
+    "@teambit/legacy": "1.0.419",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

package/ui/component-model/component-model.ts

@@ -37,6 +37,7 @@ export type ComponentModelProps = {
 export type ComponentPreview = {
   includesEnvTemplate?: boolean;
   isScaling?: boolean;
+  skipIncludes?: boolean;
   legacyHeader?: boolean;
 };
 

package/ui/index.ts

@@ -1,4 +1,6 @@
+export { CollapsibleMenuNav, MenuNavProps } from './menu';
 export { Component } from './component';
+export { ConsumeMethodSlot, ComponentMenu, VersionRelatedDropdowns } from './menu';
 export { ComponentModel, ComponentModelProps } from './component-model';
 export { ComponentContext, ComponentProvider } from './context';
 export { useComponent } from './use-component';

package/ui/menu/index.ts

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

package/ui/menu/menu-nav.tsx

@@ -7,25 +7,51 @@ import styles from './menu.module.scss';
 import { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
 
 export type MenuNavProps = {
-  navigationSlot: OrderedNavigationSlot;
-  widgetSlot: OrderedNavigationSlot;
+  /**
+   * @deprecated
+   * use @property navPlugins
+   */
+  navigationSlot?: OrderedNavigationSlot;
+  /**
+   * @deprecated
+   * use @property widgetPlugins
+   */
+  widgetSlot?: OrderedNavigationSlot;
+  navPlugins?: [string, NavPlugin][];
+  widgetPlugins?: [string, NavPlugin][];
 } & React.HTMLAttributes<HTMLElement>;
 
-export function CollapsableMenuNav({ navigationSlot, widgetSlot, className }: MenuNavProps) {
-  const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
-  const widgets = useMemo(() => widgetSlot.toArray().sort(sortFn), [widgetSlot]);
-
-  const links = [...plugins, ...widgets].map(([id, menuItem]) => {
+export function CollapsibleMenuNav({
+  navigationSlot,
+  widgetSlot,
+  navPlugins = [],
+  widgetPlugins = [],
+  className,
+}: MenuNavProps) {
+  const plugins = useMemo(() => {
+    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();
+    return (_navPlugins || []).sort(sortFn);
+  }, [navigationSlot, navPlugins]);
+  const widgets = useMemo(() => {
+    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();
+    return (_widgetPlugins || []).sort(sortFn);
+  }, [widgetSlot, widgetPlugins]);
 
+  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {
     // these styles keep plugins to the left and widgets to the right.
-    const lastPluginStyle = menuItem.props.href === plugins[-1]?.[1].props.href ? { marginRight: 'auto' } : {};
-    const firstWidgetStyle = menuItem.props.href === widgets[0]?.[1].props.href ? { marginLeft: 'auto' } : {};
+    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};
+
+    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};
 
     return {
       component: function TopBarNavComponent({ isInMenu }: TabProps) {
-        const widgetDisplayText = (menuItem.props.displayName && isInMenu) && menuItem.props.displayName;
+        const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;
         return (
-          <TopBarNav className={classnames(styles.topBarNav, isInMenu && styles.noBorder)} key={id} {...menuItem.props}>
+          <TopBarNav
+            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}
+            key={id}
+            {...menuItem.props}
+          >
             {widgetDisplayText || menuItem.props.children}
           </TopBarNav>
         );

package/ui/menu/menu.tsx

@@ -14,7 +14,7 @@ import { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.me
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
 import type { ComponentModel } from '../component-model';
 import { useComponent as useComponentQuery, UseComponentType } from '../use-component';
-import { CollapsableMenuNav } from './menu-nav';
+import { CollapsibleMenuNav } from './menu-nav';
 import styles from './menu.module.scss';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 import { useIdFromLocation } from '../use-component-from-location';
@@ -23,6 +23,12 @@ import { Filters } from '../use-component-query';
 
 export type MenuProps = {
   className?: string;
+
+  /**
+   * skip the right side.
+   */
+  skipRightSide?: boolean;
+
   /**
    * slot for top bar menu nav items
    */
@@ -62,6 +68,7 @@ export function ComponentMenu({
   menuItemSlot,
   consumeMethodSlot,
   componentIdStr,
+  skipRightSide,
   useComponent,
   path,
   useComponentFilters,
@@ -86,12 +93,14 @@ export function ComponentMenu({
         element={
           <div className={classnames(styles.topBar, className)}>
             <div className={styles.leftSide}>
-              <CollapsableMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />
-            </div>
-            <div className={styles.rightSide}>
-              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
-              <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />
+              <CollapsibleMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />
             </div>
+            {!skipRightSide && (
+              <div className={styles.rightSide}>
+                <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
+                <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />
+              </div>
+            )}
           </div>
         }
       />
@@ -99,13 +108,15 @@ export function ComponentMenu({
   );
 }
 
-function VersionRelatedDropdowns({
+export function VersionRelatedDropdowns({
   component,
   consumeMethods,
+  className,
   host,
 }: {
   component: ComponentModel;
-  consumeMethods: ConsumeMethodSlot;
+  consumeMethods?: ConsumeMethodSlot;
+  className?: string,
   host: string;
 }) {
   const location = useLocation();
@@ -143,10 +154,10 @@ function VersionRelatedDropdowns({
   const currentVersion =
     isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;
 
-  const methods = useConsumeMethods(consumeMethods, component, currentLane);
+  const methods = useConsumeMethods(component, consumeMethods, currentLane);
   return (
     <>
-      {tags.length > 0 && (
+      {consumeMethods && tags.length > 0 && (
         <UseBoxDropdown
           position="bottom-end"
           className={classnames(styles.useBox, styles.hideOnMobile)}
@@ -161,6 +172,7 @@ function VersionRelatedDropdowns({
         currentVersion={currentVersion}
         latestVersion={component.latest}
         currentLane={currentLane}
+        className={className}
         menuClassName={styles.componentVersionMenu}
       />
     </>
@@ -168,14 +180,16 @@ function VersionRelatedDropdowns({
 }
 
 function useConsumeMethods(
-  consumeMethods: ConsumeMethodSlot,
-  componentModel: ComponentModel,
+  componentModel?: ComponentModel,
+  consumeMethods?: ConsumeMethodSlot,
   currentLane?: LaneModel
 ): ConsumeMethod[] {
+  // if (!consumeMethods || !componentModel) return [];
   return useMemo(
     () =>
-      flatten(consumeMethods.values())
+      flatten(consumeMethods?.values())
         .map((method) => {
+          if (!componentModel) return undefined;
           return method?.(componentModel, { currentLane });
         })
         .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],

package/ui/use-component-query.ts

@@ -51,6 +51,7 @@ export const componentOverviewFields = gql`
       includesEnvTemplate
       legacyHeader
       isScaling
+      skipIncludes
     }
     compositions {
       identifier

package/dist/aspect.compare.section.js

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

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

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