@teambit/component 0.0.1019 → 0.0.1021

package/component.ui.runtime.tsx

@@ -204,6 +204,7 @@ export class ComponentUI {
         path={options.path}
         componentIdStr={options.componentId}
         useComponentFilters={options.useComponentFilters}
+        RightNode={options.RightNode}
       />
     );
   }

package/dist/component-factory.d.ts

@@ -86,7 +86,7 @@ export interface ComponentFactory {
      * load aspects.
      * returns the loaded aspect ids including the loaded versions.
      */
-    loadAspects: (ids: string[], throwOnError?: boolean, neededFor?: string) => Promise<string[]>;
+    loadAspects: (ids: string[], throwOnError?: boolean, neededFor?: string, opts?: any) => Promise<string[]>;
     /**
      * Resolve dirs for aspects
      */

package/dist/component-factory.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["component-factory.ts"],"sourcesContent":["import { Graph } from '@teambit/graph.cleargraph';\nimport { BitId } from '@teambit/legacy-bit-id';\nimport ConsumerComponent from '@teambit/legacy/dist/consumer/component';\nimport { CompIdGraph } from '@teambit/graph';\nimport type { ComponentLog } from '@teambit/legacy/dist/scope/models/model-component';\nimport type { AspectDefinition } from '@teambit/aspect-loader';\nimport { ComponentID } from '@teambit/component-id';\nimport { Component, InvalidComponent } from './component';\nimport { State } from './state';\nimport { Snap } from './snap';\n\nexport type ResolveAspectsOptions = FilterAspectsOptions & {\n  throwOnError?: boolean\n  useScopeAspectsCapsule?: boolean\n};\n\nexport type LoadAspectsOptions = {\n  [key: string]: any\n}\n\nexport type FilterAspectsOptions = {\n  /**\n   * Do not return results for the core aspects\n   */\n  excludeCore?: boolean;\n  /**\n   * Only return results for the provided list of ids\n   */\n  requestedOnly?: boolean;\n  /**\n   * Only return results for aspects that have a path to the specified runtime name\n   */\n  filterByRuntime?: boolean;\n};\n\nexport interface ComponentFactory {\n  /**\n   * name of the component host.\n   */\n  name: string;\n\n  /**\n   * path to the component host.\n   */\n  path: string;\n\n  isLegacy: boolean;\n\n  /**\n   * resolve a `string` component ID to an instance of a ComponentID.\n   */\n  resolveComponentId(id: string | ComponentID | BitId): Promise<ComponentID>;\n\n  /**\n   * resolve multiple `string` component ID to an instance of a ComponentID.\n   */\n  resolveMultipleComponentIds(ids: (string | ComponentID | BitId)[]): Promise<ComponentID[]>;\n\n  /**\n   * returns a component by ID.\n   */\n  get(id: ComponentID): Promise<Component | undefined>;\n\n  /**\n   * returns many components by ids.\n   */\n  getMany(ids: ComponentID[]): Promise<Component[]>;\n\n  /**\n   * returns many components by their legacy representation.\n   */\n  getManyByLegacy(components: ConsumerComponent[]): Promise<Component[]>;\n\n  /**\n   * get a component from a remote without importing it\n   */\n  getRemoteComponent?: (id: ComponentID) => Promise<Component>;\n\n  /**\n   * important - prefer using `getGraphIds()` if you don't need the component objects.\n   * this method has a performance penalty. it must import all flattened-dependencies objects from the remotes.\n   */\n  getGraph(ids?: ComponentID[], shouldThrowOnMissingDep?: boolean): Promise<Graph<Component, string>>;\n\n  /**\n   * get graph of the given component-ids and all their dependencies (recursively/flattened).\n   * the nodes are ComponentIds and is much faster than `this.getGraph()`.\n   */\n  getGraphIds(ids?: ComponentID[], shouldThrowOnMissingDep?: boolean): Promise<CompIdGraph>;\n\n  getLogs(id: ComponentID, shortHash?: boolean, startsFrom?: string): Promise<ComponentLog[]>;\n\n  /**\n   * returns a specific state of a component by hash or semver.\n   */\n  getState(id: ComponentID, snapId: string): Promise<State>;\n\n  /**\n   * returns a specific snap of a component by hash.\n   */\n  getSnap(id: ComponentID, snapId: string): Promise<Snap>;\n\n  /**\n   * load aspects.\n   * returns the loaded aspect ids including the loaded versions.\n   */\n  loadAspects: (ids: string[], throwOnError?: boolean, neededFor?: string) => Promise<string[]>;\n\n  /**\n   * Resolve dirs for aspects\n   */\n  resolveAspects: (\n    runtimeName?: string,\n    componentIds?: ComponentID[],\n    opts?: ResolveAspectsOptions\n  ) => Promise<AspectDefinition[]>;\n\n  /**\n   * list all components in the host.\n   */\n  list(filter?: { offset: number; limit: number }): Promise<Component[]>;\n\n  /**\n   * list invalid components, such as components with missing files on the fs.\n   */\n  listInvalid(): Promise<InvalidComponent[]>;\n\n  listIds(): Promise<ComponentID[]>;\n\n  /**\n   * get component-ids matching the given pattern. a pattern can have multiple patterns separated by a comma.\n   * it uses multimatch (https://www.npmjs.com/package/multimatch) package for the matching algorithm, which supports\n   * (among others) negate character \"!\" to exclude ids. See the package page for more supported characters.\n   */\n  idsByPattern(pattern: string, throwForNoMatch?: boolean): Promise<ComponentID[]>;\n\n  hasId(componentId: ComponentID): Promise<boolean>;\n\n  /**\n   * Check if the host has the id, if no, search for the id in inner host (for example, workspace will search in the scope)\n   * @param componentId\n   */\n  hasIdNested(componentId: ComponentID, includeCache?: boolean): Promise<boolean>;\n\n  /**\n   * whether a component is not the same as its head.\n   * for a new component, it'll return \"true\" as it has no head yet.\n   * this is relevant for component from the workspace, where it can be locally changed. on the scope it's always false\n   */\n  isModified(component: Component): Promise<boolean>;\n\n  /**\n   * write the component to the filesystem when applicable (no-op for scope).\n   * to change the component-path, specify the \"rootPath\", which should be a relative path inside the workspace.\n   */\n  write(component: Component, rootPath?: string): Promise<void>;\n\n  /**\n   * determine whether host should be the prior one in case multiple hosts persist.\n   */\n  priority?: boolean;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["component-factory.ts"],"sourcesContent":["import { Graph } from '@teambit/graph.cleargraph';\nimport { BitId } from '@teambit/legacy-bit-id';\nimport ConsumerComponent from '@teambit/legacy/dist/consumer/component';\nimport { CompIdGraph } from '@teambit/graph';\nimport type { ComponentLog } from '@teambit/legacy/dist/scope/models/model-component';\nimport type { AspectDefinition } from '@teambit/aspect-loader';\nimport { ComponentID } from '@teambit/component-id';\nimport { Component, InvalidComponent } from './component';\nimport { State } from './state';\nimport { Snap } from './snap';\n\nexport type ResolveAspectsOptions = FilterAspectsOptions & {\n  throwOnError?: boolean\n  useScopeAspectsCapsule?: boolean\n};\n\nexport type LoadAspectsOptions = {\n  [key: string]: any\n}\n\nexport type FilterAspectsOptions = {\n  /**\n   * Do not return results for the core aspects\n   */\n  excludeCore?: boolean;\n  /**\n   * Only return results for the provided list of ids\n   */\n  requestedOnly?: boolean;\n  /**\n   * Only return results for aspects that have a path to the specified runtime name\n   */\n  filterByRuntime?: boolean;\n};\n\nexport interface ComponentFactory {\n  /**\n   * name of the component host.\n   */\n  name: string;\n\n  /**\n   * path to the component host.\n   */\n  path: string;\n\n  isLegacy: boolean;\n\n  /**\n   * resolve a `string` component ID to an instance of a ComponentID.\n   */\n  resolveComponentId(id: string | ComponentID | BitId): Promise<ComponentID>;\n\n  /**\n   * resolve multiple `string` component ID to an instance of a ComponentID.\n   */\n  resolveMultipleComponentIds(ids: (string | ComponentID | BitId)[]): Promise<ComponentID[]>;\n\n  /**\n   * returns a component by ID.\n   */\n  get(id: ComponentID): Promise<Component | undefined>;\n\n  /**\n   * returns many components by ids.\n   */\n  getMany(ids: ComponentID[]): Promise<Component[]>;\n\n  /**\n   * returns many components by their legacy representation.\n   */\n  getManyByLegacy(components: ConsumerComponent[]): Promise<Component[]>;\n\n  /**\n   * get a component from a remote without importing it\n   */\n  getRemoteComponent?: (id: ComponentID) => Promise<Component>;\n\n  /**\n   * important - prefer using `getGraphIds()` if you don't need the component objects.\n   * this method has a performance penalty. it must import all flattened-dependencies objects from the remotes.\n   */\n  getGraph(ids?: ComponentID[], shouldThrowOnMissingDep?: boolean): Promise<Graph<Component, string>>;\n\n  /**\n   * get graph of the given component-ids and all their dependencies (recursively/flattened).\n   * the nodes are ComponentIds and is much faster than `this.getGraph()`.\n   */\n  getGraphIds(ids?: ComponentID[], shouldThrowOnMissingDep?: boolean): Promise<CompIdGraph>;\n\n  getLogs(id: ComponentID, shortHash?: boolean, startsFrom?: string): Promise<ComponentLog[]>;\n\n  /**\n   * returns a specific state of a component by hash or semver.\n   */\n  getState(id: ComponentID, snapId: string): Promise<State>;\n\n  /**\n   * returns a specific snap of a component by hash.\n   */\n  getSnap(id: ComponentID, snapId: string): Promise<Snap>;\n\n  /**\n   * load aspects.\n   * returns the loaded aspect ids including the loaded versions.\n   */\n  loadAspects: (ids: string[], throwOnError?: boolean, neededFor?: string, opts?: any) => Promise<string[]>;\n\n  /**\n   * Resolve dirs for aspects\n   */\n  resolveAspects: (\n    runtimeName?: string,\n    componentIds?: ComponentID[],\n    opts?: ResolveAspectsOptions\n  ) => Promise<AspectDefinition[]>;\n\n  /**\n   * list all components in the host.\n   */\n  list(filter?: { offset: number; limit: number }): Promise<Component[]>;\n\n  /**\n   * list invalid components, such as components with missing files on the fs.\n   */\n  listInvalid(): Promise<InvalidComponent[]>;\n\n  listIds(): Promise<ComponentID[]>;\n\n  /**\n   * get component-ids matching the given pattern. a pattern can have multiple patterns separated by a comma.\n   * it uses multimatch (https://www.npmjs.com/package/multimatch) package for the matching algorithm, which supports\n   * (among others) negate character \"!\" to exclude ids. See the package page for more supported characters.\n   */\n  idsByPattern(pattern: string, throwForNoMatch?: boolean): Promise<ComponentID[]>;\n\n  hasId(componentId: ComponentID): Promise<boolean>;\n\n  /**\n   * Check if the host has the id, if no, search for the id in inner host (for example, workspace will search in the scope)\n   * @param componentId\n   */\n  hasIdNested(componentId: ComponentID, includeCache?: boolean): Promise<boolean>;\n\n  /**\n   * whether a component is not the same as its head.\n   * for a new component, it'll return \"true\" as it has no head yet.\n   * this is relevant for component from the workspace, where it can be locally changed. on the scope it's always false\n   */\n  isModified(component: Component): Promise<boolean>;\n\n  /**\n   * write the component to the filesystem when applicable (no-op for scope).\n   * to change the component-path, specify the \"rootPath\", which should be a relative path inside the workspace.\n   */\n  write(component: Component, rootPath?: string): Promise<void>;\n\n  /**\n   * determine whether host should be the prior one in case multiple hosts persist.\n   */\n  priority?: boolean;\n}\n"],"mappings":""}

package/dist/component.ui.runtime.js

@@ -317,7 +317,8 @@ class ComponentUI {
       useComponent: options.useComponent,
       path: options.path,
       componentIdStr: options.componentId,
-      useComponentFilters: options.useComponentFilters
+      useComponentFilters: options.useComponentFilters,
+      RightNode: options.RightNode
     });
   }
   listMenuItems() {

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","formatToInstallableVersion","copy","action","toString","displayName","keybinding","copyNpmId","category","title","keyChar","handler","run","comp","options","latest","packageVersion","Title","width","Component","ignoreVersion","name","currentLane","order","menuItems","register","items","totalPlugins","flatten","values","componentSearcher","updatePlugins","components","update","ComponentSearcher","navigate","navigateTo","isBrowser","registerPubSub","snapToSemver","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';\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 { snapToSemver } from '@teambit/component-package-version';\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  formatToInstallableVersion(version: string) {\n    return snapToSemver(version);\n  }\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${this.formatToInstallableVersion(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    const packageVersion = comp.version === comp.latest ? '' : `@${this.formatToInstallableVersion(comp.version)}`;\n\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}${packageVersion}`}\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":";;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;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;AAGA;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;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAA8G;AAAA;AAkBvG,MAAMA,WAAW,CAAC;EAIvBC,WAAW;EACT;AACJ;AACA;EACYC,MAAgB,EAEhBC,SAAoB,EAEpBC,OAA8B,EAE7BC,iBAAoC;EAE7C;AACJ;AACA;EACYC,UAAiC,EAEjCC,YAA0B,EAE1BC,YAA+B,EAE/BC,yBAAoD,EAEpDC,YAA0B,EAElCC,aAA4B,EAC5B;IAAA,KAtBQT,MAAgB,GAAhBA,MAAgB;IAAA,KAEhBC,SAAoB,GAApBA,SAAoB;IAAA,KAEpBC,OAA8B,GAA9BA,OAA8B;IAAA,KAE7BC,iBAAoC,GAApCA,iBAAoC;IAAA,KAKrCC,UAAiC,GAAjCA,UAAiC;IAAA,KAEjCC,YAA0B,GAA1BA,YAA0B;IAAA,KAE1BC,YAA+B,GAA/BA,YAA+B;IAAA,KAE/BC,yBAAoD,GAApDA,yBAAoD;IAAA,KAEpDC,YAA0B,GAA1BA,YAA0B;IAAA,mDA1Bd,IAAG;IAAA;IAAA;IAAA,mDA2CL,MAAM;MAAA;MACxB,MAAME,WAAW,4BAAG,IAAI,CAACC,eAAe,0DAApB,sBAAsBD,WAAW;MACrD,IAAIA,WAAW,EAAE;QAAA;QACf,MAAME,OAAO,6BAAG,IAAI,CAACD,eAAe,2DAApB,uBAAsBE,EAAE,CAACD,OAAO;QAChD,MAAME,aAAa,GAAGF,OAAO,GAAI,IAAG,IAAI,CAACG,0BAA0B,CAACH,OAAO,CAAE,EAAC,GAAG,EAAE;QACnF,IAAAI,0BAAI,EAAE,GAAEN,WAAY,GAAEI,aAAc,EAAC,CAAC;MACxC;IACF,CAAC;IAAA,qDAKqC,CACpC;MACED,EAAE,EAAE,qBAAqB;MAAE;MAC3BI,MAAM,EAAE,MAAM;QAAA;QACZ,IAAAD,0BAAI,EAAC,+BAAI,CAACL,eAAe,2DAApB,uBAAsBE,EAAE,CAACK,QAAQ,EAAE,KAAI,EAAE,CAAC;MACjD,CAAC;MACDC,WAAW,EAAE,mBAAmB;MAChCC,UAAU,EAAE;IACd,CAAC,EACD;MACEP,EAAE,EAAE,qBAAqB;MAAE;MAC3BI,MAAM,EAAE,IAAI,CAACI,SAAS;MACtBF,WAAW,EAAE,6BAA6B;MAC1CC,UAAU,EAAE;IACd,CAAC,CACF;IAAA,mDAE+B,CAC9B;MACEE,QAAQ,EAAE,SAAS;MACnBC,KAAK,EAAE,kBAAkB;MACzBC,OAAO,EAAE,OAAO;MAChBC,OAAO,EAAE;QAAA;QAAA,6BAAM,IAAI,CAACjB,YAAY,uDAAjB,mBAAmBkB,GAAG,CAAC,kBAAkB,CAAC;MAAA;IAC3D,CAAC,EACD;MACEJ,QAAQ,EAAE,SAAS;MACnBC,KAAK,EAAE,uBAAuB;MAC9BC,OAAO,EAAE,OAAO;MAChBC,OAAO,EAAE;QAAA;QAAA,8BAAM,IAAI,CAACjB,YAAY,wDAAjB,oBAAmBkB,GAAG,CAAC,gBAAgB,CAAC;MAAA;IACzD,CAAC,EACD;MACEJ,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE,mBAAmB;MAC1BC,OAAO,EAAE,GAAG;MACZC,OAAO,EAAE;QAAA;QAAA,8BAAM,IAAI,CAACjB,YAAY,wDAAjB,oBAAmBkB,GAAG,CAAC,qBAAqB,CAAC;MAAA;IAC9D,CAAC,EACD;MACEJ,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAE,6BAA6B;MACpCC,OAAO,EAAE,GAAG;MACZC,OAAO,EAAE;QAAA;QAAA,8BAAM,IAAI,CAACjB,YAAY,wDAAjB,oBAAmBkB,GAAG,CAAC,qBAAqB,CAAC;MAAA;IAC9D,CAAC,CACF;IAAA,mDAEkC,CAACC,IAAI,EAAEC,OAAO,KAAK;MACpD,MAAMhB,OAAO,GAAGe,IAAI,CAACf,OAAO,KAAKe,IAAI,CAACE,MAAM,GAAG,EAAE,GAAI,IAAGF,IAAI,CAACf,OAAQ,EAAC;MACtE,MAAMkB,cAAc,GAAGH,IAAI,CAACf,OAAO,KAAKe,IAAI,CAACE,MAAM,GAAG,EAAE,GAAI,IAAG,IAAI,CAACd,0BAA0B,CAACY,IAAI,CAACf,OAAO,CAAE,EAAC;MAE9G,OAAO;QACLmB,KAAK,eAAE;UAAK,KAAK,EAAE;YAAEC,KAAK,EAAE;UAAO,CAAE;UAAC,GAAG,EAAC;QAAiD,EAAG;QAC9FC,SAAS,eACP,+BAAC,8BAAM;UACL,WAAW,EAAG,GAAEN,IAAI,CAACd,EAAE,CAACK,QAAQ,CAAC;YAAEgB,aAAa,EAAE;UAAK,CAAC,CAAE,GAAEtB,OAAQ,EAAE;UACtE,WAAW,EAAG,GAAEe,IAAI,CAACjB,WAAY,GAAEoB,cAAe,EAAE;UACpD,aAAa,EAAEH,IAAI,CAACd,EAAE,CAACsB,IAAK;UAC5B,iBAAiB,EAAE,EAACP,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEQ,WAAW;QAAC,EAE5C;QACDC,KAAK,EAAE;MACT,CAAC;IACH,CAAC;IAAA,+DAiBwB1B,eAAgC,IAAK;MAC5D,IAAI,CAACA,eAAe,GAAGA,eAAe;IACxC,CAAC;IAAA,0DA2DmB2B,SAAqB,IAAK;MAC5C,IAAI,CAACjC,YAAY,CAACkC,QAAQ,CAACD,SAAS,CAAC;IACvC,CAAC;IAAA,0DAEkB,CAAC,GAAGE,KAA6B,KAAK;MACvD,IAAI,CAAClC,YAAY,CAACiC,QAAQ,CAACC,KAAK,CAAC;IACnC,CAAC;IAAA,oEAG4B,CAAC,GAAGA,KAA8B,KAAK;MAClE,IAAI,CAACjC,yBAAyB,CAACgC,QAAQ,CAACC,KAAK,CAAC;MAC9C,MAAMC,YAAY,GAAG,IAAAC,iBAAO,EAAC,IAAI,CAACnC,yBAAyB,CAACoC,MAAM,EAAE,CAAC;MAErE,IAAI,CAACC,iBAAiB,CAACC,aAAa,CAACJ,YAAY,CAAC;IACpD,CAAC;IAAA,0DAEmBK,UAA4B,IAAK;MACnD,IAAI,CAACF,iBAAiB,CAACG,MAAM,CAACD,UAAU,IAAI,EAAE,CAAC;IACjD,CAAC;IArLC,IAAI,CAACF,iBAAiB,GAAG,KAAII,sCAAiB,EAAC;MAAEC,QAAQ,EAAExC,aAAa,CAACyC;IAAW,CAAC,CAAC;IACtF,IAAIC,2BAAS,EAAE,IAAI,CAACC,cAAc,EAAE;EACtC;;EAEA;AACF;AACA;;EAGErC,0BAA0B,CAACH,OAAe,EAAE;IAC1C,OAAO,IAAAyC,uCAAY,EAACzC,OAAO,CAAC;EAC9B;EA4EAwC,cAAc,GAAG;IACf,IAAI,CAACpD,MAAM,CAACsD,GAAG,CAACC,kBAAa,CAAC1C,EAAE,EAAG2C,EAAqB,IAAK;MAC3D,IAAIA,EAAE,CAACC,IAAI,KAAKC,mCAAwB,CAACC,IAAI,EAAE;QAC7C,MAAMC,KAAK,GAAG,IAAIC,UAAU,CAAC,WAAW,EAAE;UACxCC,IAAI,EAAEC,MAAM;UACZC,OAAO,EAAE,IAAI;UACbC,UAAU,EAAE;QACd,CAAC,CAAC;QAEF,MAAMC,IAAI,GAAGC,QAAQ,CAACD,IAAI;QAC1BA,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,aAAa,CAACR,KAAK,CAAC;MAC5B;IACF,CAAC,CAAC;EACJ;EAMAS,cAAc,CAACC,IAAY,EAAE1C,OAA6B,GAAG,CAAC,CAAC,EAAE;IAC/D,oBACE,+BAAC,uBAAS;MACR,SAAS,EAAE,IAAI,CAAC3B,SAAU;MAC1B,aAAa,EAAE,IAAI,CAACK,YAAa;MACjC,iBAAiB,EAAE,IAAI,CAACiE,qBAAsB;MAC9C,IAAI,EAAED,IAAK;MACX,IAAI,EAAE1C,OAAO,CAAC4C,IAAK;MACnB,YAAY,EAAE5C,OAAO,CAAC6C,YAAa;MACnC,cAAc,EAAE7C,OAAO,CAAC8C,WAAY;MACpC,mBAAmB,EAAE9C,OAAO,CAAC+C;IAAoB,EACjD;EAEN;EAEAC,OAAO,CAACN,IAAY,EAAE1C,OAA6B,GAAG,CAAC,CAAC,EAAE;IACxD,oBACE,+BAAC,qBAAa;MACZ,aAAa,EAAEA,OAAO,CAACiD,aAAc;MACrC,cAAc,EAAE,IAAI,CAAC3E,OAAQ;MAC7B,iBAAiB,EAAE,IAAI,CAACC,iBAAkB;MAC1C,UAAU,EAAE,IAAI,CAACC,UAAW;MAC5B,IAAI,EAAEkE,IAAK;MACX,YAAY,EAAE,IAAI,CAACjE,YAAa;MAChC,YAAY,EAAEuB,OAAO,CAAC6C,YAAa;MACnC,IAAI,EAAE7C,OAAO,CAAC4C,IAAK;MACnB,cAAc,EAAE5C,OAAO,CAAC8C,WAAY;MACpC,mBAAmB,EAAE9C,OAAO,CAAC+C;IAAoB,EACjD;EAEN;EAEAG,aAAa,GAAG;IACd,MAAMC,aAAa,GAAG,IAAAC,kBAAO,EAAC,IAAAtC,iBAAO,EAAC,IAAI,CAACrC,YAAY,CAACsC,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC;IAC9E,OAAOoC,aAAa;EACtB;EAEAE,aAAa,CAACC,MAAiC,EAAE;IAC/C,IAAI,CAACjF,SAAS,CAACsC,QAAQ,CAAC2C,MAAM,CAAC;IAC/B,OAAO,IAAI;EACb;EAEAC,kBAAkB,CAACC,GAAc,EAAE/C,KAAc,EAAE;IACjD,IAAI,CAACnC,OAAO,CAACqC,QAAQ,CAAC;MACpB8C,KAAK,EAAED,GAAG;MACV/C;IACF,CAAC,CAAC;EACJ;EAEAiD,qBAAqB,CAAC,GAAGC,cAA+B,EAAE;IACxD,IAAI,CAACpF,iBAAiB,CAACoC,QAAQ,CAACgD,cAAc,CAAC;EACjD;EAEAC,cAAc,CAACC,MAAiB,EAAEpD,KAAc,EAAE;IAChD,IAAI,CAACjC,UAAU,CAACmC,QAAQ,CAAC;MAAE8C,KAAK,EAAEI,MAAM;MAAEpD;IAAM,CAAC,CAAC;EACpD;EAuCA,aAAaqD,QAAQ,CACnB,CAAC1F,MAAM,EAAEQ,YAAY,EAAEmF,aAAa,CAA0C,EAC9EC,MAAyB,EACzB,CAAC3F,SAAS,EAAEC,OAAO,EAAEC,iBAAiB,EAAEC,UAAU,EAAEC,YAAY,EAAEwF,QAAQ,EAAEtF,yBAAyB,CAQpG,EACD;IACA;IACA;IACA,MAAMuF,WAAW,GAAG,IAAIhG,WAAW,CACjCE,MAAM,EACNC,SAAS,EACTC,OAAO,EACPC,iBAAiB,EACjBC,UAAU,EACVC,YAAY,EACZwF,QAAQ,EACRtF,yBAAyB,EACzBC,YAAY,EACZmF,aAAa,CACd;IACD,MAAMI,aAAa,GAAG,KAAIC,uBAAa,GAAE;IACzC;IACAF,WAAW,CAACG,0BAA0B,CAAC;MAAEC,GAAG,EAAE,aAAa;MAAEC,GAAG,EAAEC;IAAgB,CAAC,CAAC;IAEpF,IAAIN,WAAW,CAACtF,YAAY,IAAIoF,MAAM,CAACS,UAAU,EAAE;MACjDP,WAAW,CAACtF,YAAY,CAAC8F,UAAU,CAAC,GAAGR,WAAW,CAACS,WAAW,CAAC;MAC/D/F,YAAY,CAACgG,WAAW,CAACV,WAAW,CAAClD,iBAAiB,CAAC;IACzD;IAEAkD,WAAW,CAACW,gBAAgB,CAACX,WAAW,CAACxD,SAAS,CAAC;IACnDwD,WAAW,CAACb,aAAa,CAACc,aAAa,CAACW,KAAK,CAAC;IAC9CZ,WAAW,CAACN,cAAc,CAACO,aAAa,CAACY,cAAc,EAAEZ,aAAa,CAAC1D,KAAK,CAAC;IAC7EyD,WAAW,CAACR,qBAAqB,CAACQ,WAAW,CAACc,SAAS,CAAC;IACxD,OAAOd,WAAW;EACpB;AACF;AAAC;AAAA,gCAjRYhG,WAAW,kBAsNA,CAAC+G,iBAAY,EAAEC,qBAAgB,EAAEC,sBAAiB,CAAC;AAAA,gCAtN9DjH,WAAW,aAwNLkH,eAAS;AAAA,gCAxNflH,WAAW,WA0NP,CACbmH,eAAI,CAACC,QAAQ,EAAc,EAC3BD,eAAI,CAACC,QAAQ,EAAa,EAC1BD,eAAI,CAACC,QAAQ,EAAkB,EAC/BD,eAAI,CAACC,QAAQ,EAAqB,EAClCD,eAAI,CAACC,QAAQ,EAAgB,EAC7BD,eAAI,CAACC,QAAQ,EAAqB,EAClCD,eAAI,CAACC,QAAQ,EAA6B,CAC3C;AAAA,gCAlOUpH,WAAW,mBAmOoB;EACxCuG,UAAU,EAAE;AACd,CAAC;AAAA,eA8CYvG,WAAW;AAAA;AAE1BqH,4BAAe,CAACC,UAAU,CAACtH,WAAW,CAAC"}
+{"version":3,"names":["ComponentUI","constructor","pubsub","routeSlot","navSlot","consumeMethodSlot","widgetSlot","menuItemSlot","pageItemSlot","componentSearchResultSlot","commandBarUI","reactRouterUi","packageName","activeComponent","version","id","versionString","formatToInstallableVersion","copy","action","toString","displayName","keybinding","copyNpmId","category","title","keyChar","handler","run","comp","options","latest","packageVersion","Title","width","Component","ignoreVersion","name","currentLane","order","menuItems","register","items","totalPlugins","flatten","values","componentSearcher","updatePlugins","components","update","ComponentSearcher","navigate","navigateTo","isBrowser","registerPubSub","snapToSemver","sub","PreviewAspect","be","type","ClickInsideAnIframeEvent","TYPE","event","MouseEvent","view","window","bubbles","cancelable","body","document","dispatchEvent","getComponentUI","host","handleComponentChange","path","useComponent","componentId","useComponentFilters","getMenu","skipRightSide","RightNode","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';\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 { snapToSemver } from '@teambit/component-package-version';\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  formatToInstallableVersion(version: string) {\n    return snapToSemver(version);\n  }\n\n  private copyNpmId = () => {\n    const packageName = this.activeComponent?.packageName;\n    if (packageName) {\n      const version = this.activeComponent?.id.version;\n      const versionString = version ? `@${this.formatToInstallableVersion(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    const packageVersion = comp.version === comp.latest ? '' : `@${this.formatToInstallableVersion(comp.version)}`;\n\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}${packageVersion}`}\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        RightNode={options.RightNode}\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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { UseComponentType } from './ui/use-component';
 import { Filters } from './ui/use-component-query';
 export declare type GetComponentsOptions = {
@@ -6,4 +7,5 @@ export declare type GetComponentsOptions = {
     useComponentFilters?: () => Filters;
     path?: string;
     skipRightSide?: boolean;
+    RightNode?: React.ReactNode;
 };

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  skipRightSide?: boolean;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["get-component-opts.ts"],"sourcesContent":["import React from 'react';\nimport 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  RightNode?: React.ReactNode;\n};\n"],"mappings":""}

package/dist/{preview-1679062502420.js → preview-1679542267429.js}

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

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
+import React from 'react';
 import type { ComponentModel } from '../component-model';
 import { UseComponentType } from '../use-component';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
@@ -10,6 +10,10 @@ export declare type MenuProps = {
      * skip the right side.
      */
     skipRightSide?: boolean;
+    /**
+     * custom render the right side
+     */
+    RightNode?: React.ReactNode;
     /**
      * slot for top bar menu nav items
      */
@@ -18,6 +22,9 @@ export declare type MenuProps = {
      * right side menu item slot
      */
     widgetSlot: OrderedNavigationSlot;
+    /**
+     * workspace or scope
+     */
     host: string;
     /**
      * main dropdown item slot
@@ -32,7 +39,7 @@ export declare type MenuProps = {
 /**
  * top bar menu.
  */
-export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, componentIdStr, skipRightSide, useComponent, path, useComponentFilters, }: MenuProps): JSX.Element;
+export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, componentIdStr, skipRightSide, RightNode, useComponent, path, useComponentFilters, }: MenuProps): JSX.Element;
 export declare function VersionRelatedDropdowns({ component, consumeMethods, className, host, }: {
     component: ComponentModel;
     consumeMethods?: ConsumeMethodSlot;

package/dist/ui/menu/menu.js

@@ -147,6 +147,7 @@ function ComponentMenu({
   consumeMethodSlot,
   componentIdStr,
   skipRightSide,
+  RightNode,
   useComponent,
   path,
   useComponentFilters
@@ -164,6 +165,16 @@ function ComponentMenu({
   } = (0, _useComponent().useComponent)(host, (componentId === null || componentId === void 0 ? void 0 : componentId.toString()) || idFromLocation, useComponentOptions);
   const mainMenuItems = (0, _react().useMemo)(() => (0, _lodash().groupBy)((0, _lodash().flatten)(menuItemSlot.values()), 'category'), [menuItemSlot]);
   if (!component) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().FullLoader, null);
+  const RightSide = /*#__PURE__*/_react().default.createElement("div", {
+    className: _menuModule().default.rightSide
+  }, RightNode || /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
+    component: component,
+    consumeMethods: consumeMethodSlot,
+    host: host
+  }), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MainDropdown, {
+    className: _menuModule().default.hideOnMobile,
+    menuItems: mainMenuItems
+  })));
   return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Routes, null, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
     path: `${resolvedComponentIdStr}/*`,
     element: /*#__PURE__*/_react().default.createElement("div", {
@@ -175,14 +186,7 @@ function ComponentMenu({
       widgetSlot: widgetSlot
     })), !skipRightSide && /*#__PURE__*/_react().default.createElement("div", {
       className: _menuModule().default.rightSide
-    }, /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
-      component: component,
-      consumeMethods: consumeMethodSlot,
-      host: host
-    }), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MainDropdown, {
-      className: _menuModule().default.hideOnMobile,
-      menuItems: mainMenuItems
-    })))
+    }, RightSide))
   }));
 }
 function VersionRelatedDropdowns({

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

@@ -1 +1 @@
-{"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","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","isViewingCurrentLane","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","componentModel","currentLane","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 viewedLane =\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 && (!viewedLane || lanesModel?.isViewingCurrentLane());\n\n  const currentVersion =\n    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(component, consumeMethods, viewedLane);\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={viewedLane}\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":";;;;;;;;;;;;;;;;;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;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;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAoC;AAAA;AAAA;AAAA;AAmCpC,SAASA,iBAAiB,CAACC,cAAoD,EAAsB;EACnG,IAAI,IAAAC,oBAAU,EAACD,cAAc,CAAC,EAAE,OAAOA,cAAc,EAAE;EACvD,OAAOA,cAAc;AACvB;AACA;AACA;AACA;AACO,SAASE,aAAa,CAAC;EAC5BC,cAAc;EACdC,UAAU;EACVC,SAAS;EACTC,IAAI;EACJC,YAAY;EACZC,iBAAiB;EACjBR,cAAc;EACdS,aAAa;EACbC,YAAY;EACZC,IAAI;EACJC;AACS,CAAC,EAAE;EACZ,MAAMC,cAAc,GAAG,IAAAC,6CAAiB,GAAE;EAC1C,MAAMC,eAAe,GAAGhB,iBAAiB,CAACC,cAAc,CAAC;EACzD,MAAMgB,WAAW,GAAGD,eAAe,GAAGE,eAAW,CAACC,UAAU,CAACH,eAAe,CAAC,GAAGI,SAAS;EACzF,MAAMC,sBAAsB,GAAGT,IAAI,IAAIE,cAAc;EAErD,MAAMQ,mBAAmB,GAAG;IAC1BC,UAAU,EAAEV,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,EAAI;IACnCW,kBAAkB,EAAEb;EACtB,CAAC;EAED,MAAM;IAAEc;EAAU,CAAC,GAAG,IAAAC,4BAAiB,EAACnB,IAAI,EAAE,CAAAU,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEU,QAAQ,EAAE,KAAIb,cAAc,EAAEQ,mBAAmB,CAAC;EAC7G,MAAMM,aAAa,GAAG,IAAAC,gBAAO,EAAC,MAAM,IAAAC,iBAAO,EAAC,IAAAC,iBAAO,EAACvB,YAAY,CAACwB,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,EAAE,CAACxB,YAAY,CAAC,CAAC;EACxG,IAAI,CAACiB,SAAS,EAAE,oBAAO,+BAAC,6BAAU,OAAG;EACrC,oBACE,+BAAC,wBAAM,qBACL,+BAAC,uBAAK;IACJ,IAAI,EAAG,GAAEJ,sBAAuB,IAAI;IACpC,OAAO,eACL;MAAK,SAAS,EAAE,IAAAY,qBAAU,EAACC,qBAAM,CAACC,MAAM,EAAE7B,SAAS;IAAE,gBACnD;MAAK,SAAS,EAAE4B,qBAAM,CAACE;IAAS,gBAC9B,+BAAC,6BAAkB;MAAC,cAAc,EAAEhC,cAAe;MAAC,UAAU,EAAEC;IAAW,EAAG,CAC1E,EACL,CAACK,aAAa,iBACb;MAAK,SAAS,EAAEwB,qBAAM,CAACG;IAAU,gBAC/B,+BAAC,uBAAuB;MAAC,SAAS,EAAEZ,SAAU;MAAC,cAAc,EAAEhB,iBAAkB;MAAC,IAAI,EAAEF;IAAK,EAAG,eAChG,+BAAC,8BAAY;MAAC,SAAS,EAAE2B,qBAAM,CAACI,YAAa;MAAC,SAAS,EAAEV;IAAc,EAAG,CAE7E;EAEJ,EACD,CACK;AAEb;AAEO,SAASW,uBAAuB,CAAC;EACtCd,SAAS;EACTe,cAAc;EACdlC,SAAS;EACTC;AAMF,CAAC,EAAE;EAAA;EACD,MAAMkC,QAAQ,GAAG,IAAAC,kCAAW,GAAE;EAC9B,MAAM;IAAEC;EAAW,CAAC,GAAG,IAAAC,sBAAQ,GAAE;EACjC,MAAMC,UAAU,GACdF,UAAU,aAAVA,UAAU,wCAAVA,UAAU,CAAEE,UAAU,kDAAtB,sBAAwBC,EAAE,IAAI,EAACH,UAAU,aAAVA,UAAU,yCAAVA,UAAU,CAAEE,UAAU,mDAAtB,uBAAwBC,EAAE,CAACC,SAAS,EAAE,IAAGJ,UAAU,CAACE,UAAU,GAAGzB,SAAS;EAE3G,MAAM;IAAE4B;EAAK,CAAC,GAAGvB,SAAS;EAC1B,MAAMwB,WAAW,GAAG1C,IAAI,KAAK,6BAA6B;EAE1D,MAAM2C,KAAK,GAAG,IAAArB,gBAAO,EAAC,MAAM;IAC1B,OAAO,CAACmB,IAAI,IAAI,EAAE,EAAEG,MAAM,CAAEC,GAAG,IAAK,CAACA,GAAG,CAACC,GAAG,CAAC,CAACC,GAAG,CAAEC,IAAI,oCAAWA,IAAI;MAAEC,OAAO,EAAED,IAAI,CAACE;IAAI,EAAG,CAAC;EAChG,CAAC,EAAE,CAACT,IAAI,CAAC,CAAC;EAEV,MAAMU,IAAI,GAAG,IAAA7B,gBAAO,EAAC,MAAM;IAAA;IACzB,MAAM8B,SAAS,GAAG,IAAIC,GAAG,EAA8B;IACvD,CAACZ,IAAI,IAAI,EAAE,EACRG,MAAM,CAAEC,GAAG,IAAKA,GAAG,CAACC,GAAG,CAAC,CACxBQ,OAAO,CAAER,GAAG,IAAK;MAChBM,SAAS,CAACG,GAAG,CAACT,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEA,GAAG,EAAYA,GAAG,CAAC;IACxC,CAAC,CAAC;IACJ,OAAO,IAAAU,iBAAO,qBACZtC,SAAS,CAACiC,IAAI,oDAAd,gBACIM,OAAO,EAAE,CACVC,OAAO,EAAE,CACTX,GAAG,CAAED,GAAG,IAAKM,SAAS,CAACO,GAAG,CAACb,GAAG,CAACG,OAAO,CAACA,OAAO,CAAC,CAAC,CACpD,CAACF,GAAG,CAAED,GAAG,oCAAWA,GAAG;MAAEG,OAAO,EAAEH,GAAG,CAACA;IAAa,EAAG,CAAC;EAC1D,CAAC,EAAE,CAACL,IAAI,CAAC,CAAC;EAEV,MAAMmB,KAAK,GAAGjB,KAAK,CAACkB,MAAM,KAAK,CAAC,IAAIV,IAAI,CAACU,MAAM,KAAK,CAAC;EAErD,MAAMC,KAAK,GAAG,CAAA1B,UAAU,aAAVA,UAAU,gDAAVA,UAAU,CAAE2B,qBAAqB,CAAC7C,SAAS,CAACqB,EAAE,CAAC,0DAA/C,sBAAiDK,MAAM,CAAEoB,IAAI,IAAK,CAACA,IAAI,CAACzB,EAAE,CAACC,SAAS,EAAE,CAAC,KAAI,EAAE;EAC3G,MAAMyB,YAAY,GAAGvB,WAAW,IAAI,CAACkB,KAAK,KAAK,CAACtB,UAAU,KAAIF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAE8B,oBAAoB,EAAE,EAAC;EAEjG,MAAMC,cAAc,GAClBzB,WAAW,IAAI,CAACkB,KAAK,IAAI,EAAC1B,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEkC,MAAM,CAACC,QAAQ,CAAC,SAAS,CAAC,IAAG,WAAW,GAAGnD,SAAS,CAAC+B,OAAO;EAElG,MAAMqB,OAAO,GAAGC,iBAAiB,CAACrD,SAAS,EAAEe,cAAc,EAAEK,UAAU,CAAC;EACxE,oBACE,gEACGL,cAAc,IAAIkB,IAAI,CAACU,MAAM,GAAG,CAAC,iBAChC,+BAAC,sCAAc;IACb,QAAQ,EAAC,YAAY;IACrB,SAAS,EAAE,IAAAnC,qBAAU,EAACC,qBAAM,CAAC6C,MAAM,EAAE7C,qBAAM,CAACI,YAAY,CAAE;IAC1D,IAAI,eAAE,+BAAC,6BAAkB;MAAC,OAAO,EAAEuC,OAAQ;MAAC,aAAa,EAAEpD,SAAS,CAACqB,EAAE,CAACkC;IAAK;EAAI,EAEpF,eACD,+BAAC,8BAAe;IACd,IAAI,EAAEtB,IAAK;IACX,KAAK,EAAER,KAAM;IACb,KAAK,EAAEmB,KAAM;IACb,YAAY,EAAEG,YAAa;IAC3B,cAAc,EAAEE,cAAe;IAC/B,aAAa,EAAEjD,SAAS,CAACwD,MAAO;IAChC,WAAW,EAAEpC,UAAW;IACxB,SAAS,EAAEvC,SAAU;IACrB,aAAa,EAAE4B,qBAAM,CAACgD;EAAqB,EAC3C,CACD;AAEP;AAEA,SAASJ,iBAAiB,CACxBK,cAA+B,EAC/B3C,cAAkC,EAClC4C,WAAuB,EACN;EACjB;EACA,OAAO,IAAAvD,gBAAO,EACZ,MACE,IAAAE,iBAAO,EAACS,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAER,MAAM,EAAE,CAAC,CAC9BsB,GAAG,CAAE+B,MAAM,IAAK;IACf,IAAI,CAACF,cAAc,EAAE,OAAO/D,SAAS;IACrC,OAAOiE,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAGF,cAAc,EAAE;MAAEC;IAAY,CAAC,CAAC;EAClD,CAAC,CAAC,CACDjC,MAAM,CAAEmC,CAAC,IAAK,CAAC,CAACA,CAAC,IAAIA,CAAC,CAACC,SAAS,IAAID,CAAC,CAACE,KAAK,CAAoB,EACpE,CAAChD,cAAc,EAAE2C,cAAc,EAAEC,WAAW,CAAC,CAC9C;AACH"}
+{"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","skipRightSide","RightNode","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","useComponentOptions","logFilters","customUseComponent","component","useComponentQuery","toString","mainMenuItems","useMemo","groupBy","flatten","values","RightSide","styles","rightSide","hideOnMobile","classnames","topBar","leftSide","VersionRelatedDropdowns","consumeMethods","location","useLocation","lanesModel","useLanes","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","isViewingCurrentLane","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","componentModel","currentLane","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   * skip the right side.\n   */\n  skipRightSide?: boolean;\n  /**\n   * custom render the right side\n   */\n  RightNode?: React.ReactNode;\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  /**\n   * workspace or scope\n   */\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  RightNode,\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\n  if (!component) return <FullLoader />;\n\n  const RightSide = (\n    <div className={styles.rightSide}>\n      {RightNode || (\n        <>\n          <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n          <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />\n        </>\n      )}\n    </div>\n  );\n\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 && <div className={styles.rightSide}>{RightSide}</div>}\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 viewedLane =\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 && (!viewedLane || lanesModel?.isViewingCurrentLane());\n\n  const currentVersion =\n    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(component, consumeMethods, viewedLane);\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={viewedLane}\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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.1019",
+  "version": "0.0.1021",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.1019"
+    "version": "0.0.1021"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -24,53 +24,53 @@
     "@teambit/graph.cleargraph": "0.0.1",
     "@teambit/harmony": "0.4.6",
     "@teambit/base-react.navigation.link": "2.0.27",
-    "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/documenter.ui.separator": "4.1.1",
     "@teambit/explorer.ui.command-bar": "2.0.3",
     "@teambit/design.navigation.responsive-navbar": "0.0.5",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
+    "@teambit/documenter.ui.heading": "4.1.1",
+    "@teambit/documenter.ui.separator": "4.1.1",
     "@teambit/component-id": "0.0.427",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.497",
-    "@teambit/aspect-loader": "0.0.1019",
-    "@teambit/graph": "0.0.1019",
+    "@teambit/aspect-loader": "0.0.1021",
+    "@teambit/graph": "0.0.1021",
     "@teambit/legacy-bit-id": "0.0.423",
     "@teambit/toolbox.path.match-patterns": "0.0.9",
     "@teambit/toolbox.string.capitalize": "0.0.490",
-    "@teambit/cli": "0.0.683",
-    "@teambit/express": "0.0.781",
-    "@teambit/graphql": "0.0.1019",
+    "@teambit/cli": "0.0.684",
+    "@teambit/express": "0.0.782",
+    "@teambit/graphql": "0.0.1021",
     "@teambit/bit-error": "0.0.402",
-    "@teambit/command-bar": "0.0.1019",
+    "@teambit/command-bar": "0.0.1021",
     "@teambit/component-package-version": "0.0.422",
     "@teambit/component.ui.deprecation-icon": "0.0.504",
-    "@teambit/preview": "0.0.1019",
-    "@teambit/pubsub": "0.0.1019",
-    "@teambit/react-router": "0.0.1019",
+    "@teambit/preview": "0.0.1021",
+    "@teambit/pubsub": "0.0.1021",
+    "@teambit/react-router": "0.0.1021",
     "@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.133",
-    "@teambit/ui": "0.0.1019",
+    "@teambit/ui": "0.0.1021",
     "@teambit/component-issues": "0.0.88",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
     "@teambit/cli-table": "0.0.41",
-    "@teambit/component-descriptor": "0.0.252",
+    "@teambit/component-descriptor": "0.0.253",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.496",
-    "@teambit/design.ui.empty-box": "0.0.364",
-    "@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.1021",
+    "@teambit/deprecation": "0.0.1021",
+    "@teambit/envs": "0.0.1021",
+    "@teambit/legacy-component-log": "0.0.399",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
     "@teambit/envs.ui.env-icon": "0.0.495",
-    "@teambit/compositions": "0.0.1019",
-    "@teambit/deprecation": "0.0.1019",
-    "@teambit/envs": "0.0.1019",
-    "@teambit/legacy-component-log": "0.0.399",
-    "@teambit/component.ui.version-dropdown": "0.0.749",
-    "@teambit/lanes.hooks.use-lanes": "0.0.146",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.108",
+    "@teambit/component.ui.version-dropdown": "0.0.750",
+    "@teambit/lanes.hooks.use-lanes": "0.0.147",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.109",
     "@teambit/ui-foundation.ui.full-loader": "0.0.495",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.132"
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.132",
+    "@teambit/design.ui.empty-box": "0.0.364",
+    "@teambit/harmony.ui.aspect-box": "0.0.497"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -89,7 +89,7 @@
   "peerDependencies": {
     "@apollo/client": "^3.6.0",
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.462",
+    "@teambit/legacy": "1.0.464",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

package/ui/menu/menu.tsx

@@ -23,12 +23,14 @@ import { Filters } from '../use-component-query';
 
 export type MenuProps = {
   className?: string;
-
   /**
    * skip the right side.
    */
   skipRightSide?: boolean;
-
+  /**
+   * custom render the right side
+   */
+  RightNode?: React.ReactNode;
   /**
    * slot for top bar menu nav items
    */
@@ -37,6 +39,9 @@ export type MenuProps = {
    * right side menu item slot
    */
   widgetSlot: OrderedNavigationSlot;
+  /**
+   * workspace or scope
+   */
   host: string;
   /**
    * main dropdown item slot
@@ -69,6 +74,7 @@ export function ComponentMenu({
   consumeMethodSlot,
   componentIdStr,
   skipRightSide,
+  RightNode,
   useComponent,
   path,
   useComponentFilters,
@@ -85,7 +91,20 @@ export function ComponentMenu({
 
   const { component } = useComponentQuery(host, componentId?.toString() || idFromLocation, useComponentOptions);
   const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
+
   if (!component) return <FullLoader />;
+
+  const RightSide = (
+    <div className={styles.rightSide}>
+      {RightNode || (
+        <>
+          <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
+          <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />
+        </>
+      )}
+    </div>
+  );
+
   return (
     <Routes>
       <Route
@@ -95,12 +114,7 @@ export function ComponentMenu({
             <div className={styles.leftSide}>
               <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>
-            )}
+            {!skipRightSide && <div className={styles.rightSide}>{RightSide}</div>}
           </div>
         }
       />