@teambit/component 0.0.866 → 0.0.868

package/component.ui.runtime.tsx

@@ -27,7 +27,7 @@ import { GetComponentsOptions } from './get-component-opts';
 export type ComponentSearchResultSlot = SlotRegistry<ComponentResultPlugin[]>;
 
 export type ComponentUIConfig = {
-  commandBar: boolean
+  commandBar: boolean;
 };
 
 export type Server = {
@@ -177,13 +177,15 @@ export class ComponentUI {
         containerSlot={this.pageItemSlot}
         onComponentChange={this.handleComponentChange}
         host={host}
+        path={options.path}
         useComponent={options.useComponent}
         componentIdStr={options.componentId}
+        useComponentFilters={options.useComponentFilters}
       />
     );
   }
 
-  getMenu(host: string, opts: GetComponentsOptions = {}) {
+  getMenu(host: string, options: GetComponentsOptions = {}) {
     return (
       <ComponentMenu
         navigationSlot={this.navSlot}
@@ -191,8 +193,10 @@ export class ComponentUI {
         widgetSlot={this.widgetSlot}
         host={host}
         menuItemSlot={this.menuItemSlot}
-        useComponent={opts.useComponent}
-        componentIdStr={opts.componentId}
+        useComponent={options.useComponent}
+        path={options.path}
+        componentIdStr={options.componentId}
+        useComponentFilters={options.useComponentFilters}
       />
     );
   }
@@ -251,8 +255,8 @@ export class ComponentUI {
     Slot.withType<ComponentSearchResultSlot>(),
   ];
   static defaultConfig: ComponentUIConfig = {
-    commandBar: true
-  }
+    commandBar: true,
+  };
 
   static async provider(
     [pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI],

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

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

package/dist/component.ui.runtime.js

@@ -351,20 +351,24 @@ class ComponentUI {
       containerSlot: this.pageItemSlot,
       onComponentChange: this.handleComponentChange,
       host: host,
+      path: options.path,
       useComponent: options.useComponent,
-      componentIdStr: options.componentId
+      componentIdStr: options.componentId,
+      useComponentFilters: options.useComponentFilters
     });
   }
 
-  getMenu(host, opts = {}) {
+  getMenu(host, options = {}) {
     return /*#__PURE__*/_react().default.createElement(_menu().ComponentMenu, {
       navigationSlot: this.navSlot,
       consumeMethodSlot: this.consumeMethodSlot,
       widgetSlot: this.widgetSlot,
       host: host,
       menuItemSlot: this.menuItemSlot,
-      useComponent: opts.useComponent,
-      componentIdStr: opts.componentId
+      useComponent: options.useComponent,
+      path: options.path,
+      componentIdStr: options.componentId,
+      useComponentFilters: options.useComponentFilters
     });
   }
 

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","useComponent","componentId","getMenu","opts","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        useComponent={options.useComponent}\n        componentIdStr={options.componentId}\n      />\n    );\n  }\n\n  getMenu(host: string, opts: 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={opts.useComponent}\n        componentIdStr={opts.componentId}\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","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":";;;;;;;;;;;;;;;;;;;;;;;AAAA;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;;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;;AAEA;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;;;;;;AAkBO,MAAMA,WAAN,CAAkB;EAIvBC,WAAW;EACT;AACJ;AACA;EACYC,MAJC,EAMDC,SANC,EAQDC,OARC,EAUDC,iBAVC;EAYT;AACJ;AACA;EACYC,UAfC,EAiBDC,YAjBC,EAmBDC,YAnBC,EAqBDC,yBArBC,EAuBDC,YAvBC,EAyBTC,aAzBS,EA0BT;IAAA,KAtBQT,MAsBR,GAtBQA,MAsBR;IAAA,KApBQC,SAoBR,GApBQA,SAoBR;IAAA,KAlBQC,OAkBR,GAlBQA,OAkBR;IAAA,KAhBQC,iBAgBR,GAhBQA,iBAgBR;IAAA,KAXQC,UAWR,GAXQA,UAWR;IAAA,KATQC,YASR,GATQA,YASR;IAAA,KAPQC,YAOR,GAPQA,YAOR;IAAA,KALQC,yBAKR,GALQA,yBAKR;IAAA,KAHQC,YAGR,GAHQA,YAGR;IAAA,mDA7BoB,IA6BpB;IAAA;IAAA;IAAA,mDAUkB,MAAM;MAAA;;MACxB,MAAME,WAAW,4BAAG,KAAKC,eAAR,0DAAG,sBAAsBD,WAA1C;;MACA,IAAIA,WAAJ,EAAiB;QAAA;;QACf,MAAME,OAAO,6BAAG,KAAKD,eAAR,2DAAG,uBAAsBE,EAAtB,CAAyBD,OAAzC;QACA,MAAME,aAAa,GAAGF,OAAO,GAAI,IAAGA,OAAQ,EAAf,GAAmB,EAAhD;QACA,IAAAG,0BAAA,EAAM,GAAEL,WAAY,GAAEI,aAAc,EAApC;MACD;IACF,CAjBC;IAAA,qDAsBoC,CACpC;MACED,EAAE,EAAE,qBADN;MAC6B;MAC3BG,MAAM,EAAE,MAAM;QAAA;;QACZ,IAAAD,0BAAA,EAAK,gCAAKJ,eAAL,kFAAsBE,EAAtB,CAAyBI,QAAzB,OAAuC,EAA5C;MACD,CAJH;MAKEC,WAAW,EAAE,mBALf;MAMEC,UAAU,EAAE;IANd,CADoC,EASpC;MACEN,EAAE,EAAE,qBADN;MAC6B;MAC3BG,MAAM,EAAE,KAAKI,SAFf;MAGEF,WAAW,EAAE,6BAHf;MAIEC,UAAU,EAAE;IAJd,CAToC,CAtBpC;IAAA,mDAuC8B,CAC9B;MACEE,QAAQ,EAAE,SADZ;MAEEC,KAAK,EAAE,kBAFT;MAGEC,OAAO,EAAE,OAHX;MAIEC,OAAO,EAAE;QAAA;;QAAA,6BAAM,KAAKhB,YAAX,uDAAM,mBAAmBiB,GAAnB,CAAuB,kBAAvB,CAAN;MAAA;IAJX,CAD8B,EAO9B;MACEJ,QAAQ,EAAE,SADZ;MAEEC,KAAK,EAAE,uBAFT;MAGEC,OAAO,EAAE,OAHX;MAIEC,OAAO,EAAE;QAAA;;QAAA,8BAAM,KAAKhB,YAAX,wDAAM,oBAAmBiB,GAAnB,CAAuB,gBAAvB,CAAN;MAAA;IAJX,CAP8B,EAa9B;MACEJ,QAAQ,EAAE,UADZ;MAEEC,KAAK,EAAE,mBAFT;MAGEC,OAAO,EAAE,GAHX;MAIEC,OAAO,EAAE;QAAA;;QAAA,8BAAM,KAAKhB,YAAX,wDAAM,oBAAmBiB,GAAnB,CAAuB,qBAAvB,CAAN;MAAA;IAJX,CAb8B,EAmB9B;MACEJ,QAAQ,EAAE,UADZ;MAEEC,KAAK,EAAE,6BAFT;MAGEC,OAAO,EAAE,GAHX;MAIEC,OAAO,EAAE;QAAA;;QAAA,8BAAM,KAAKhB,YAAX,wDAAM,oBAAmBiB,GAAnB,CAAuB,qBAAvB,CAAN;MAAA;IAJX,CAnB8B,CAvC9B;IAAA,mDAkEiC,CAACC,IAAD,EAAOC,OAAP,KAAmB;MACpD,MAAMf,OAAO,GAAGc,IAAI,CAACd,OAAL,KAAiBc,IAAI,CAACE,MAAtB,GAA+B,EAA/B,GAAqC,IAAGF,IAAI,CAACd,OAAQ,EAArE;MACA,OAAO;QACLiB,KAAK,eAAE;UAAK,KAAK,EAAE;YAAEC,KAAK,EAAE;UAAT,CAAZ;UAA+B,GAAG,EAAC;QAAnC,EADF;QAELC,SAAS,eACP,+BAAC,8BAAD;UACE,WAAW,EAAG,GAAEL,IAAI,CAACb,EAAL,CAAQI,QAAR,CAAiB;YAAEe,aAAa,EAAE;UAAjB,CAAjB,CAA0C,GAAEpB,OAAQ,EADtE;UAEE,WAAW,EAAG,GAAEc,IAAI,CAAChB,WAAY,GAAEE,OAAQ,EAF7C;UAGE,aAAa,EAAEc,IAAI,CAACb,EAAL,CAAQoB,IAHzB;UAIE,iBAAiB,EAAE,EAACN,OAAD,aAACA,OAAD,eAACA,OAAO,CAAEO,WAAV;QAJrB,EAHG;QAULC,KAAK,EAAE;MAVF,CAAP;IAYD,CAhFC;IAAA,+DAiGuBxB,eAAD,IAAsC;MAC5D,KAAKA,eAAL,GAAuBA,eAAvB;IACD,CAnGC;IAAA,0DAwJkByB,SAAD,IAA2B;MAC5C,KAAK/B,YAAL,CAAkBgC,QAAlB,CAA2BD,SAA3B;IACD,CA1JC;IAAA,0DA4JiB,CAAC,GAAGE,KAAJ,KAAsC;MACvD,KAAKhC,YAAL,CAAkB+B,QAAlB,CAA2BC,KAA3B;IACD,CA9JC;IAAA,oEAiK2B,CAAC,GAAGA,KAAJ,KAAuC;MAClE,KAAK/B,yBAAL,CAA+B8B,QAA/B,CAAwCC,KAAxC;MACA,MAAMC,YAAY,GAAG,IAAAC,iBAAA,EAAQ,KAAKjC,yBAAL,CAA+BkC,MAA/B,EAAR,CAArB;MAEA,KAAKC,iBAAL,CAAuBC,aAAvB,CAAqCJ,YAArC;IACD,CAtKC;IAAA,0DAwKkBK,UAAD,IAAkC;MACnD,KAAKF,iBAAL,CAAuBG,MAAvB,CAA8BD,UAAU,IAAI,EAA5C;IACD,CA1KC;IACA,KAAKF,iBAAL,GAAyB,KAAII,sCAAJ,EAAsB;MAAEC,QAAQ,EAAEtC,aAAa,CAACuC;IAA1B,CAAtB,CAAzB;IACA,IAAIC,2BAAJ,EAAe,KAAKC,cAAL;EAChB;EAED;AACF;AACA;;;EA2EEA,cAAc,GAAG;IACf,KAAKlD,MAAL,CAAYmD,GAAZ,CAAgBC,kBAAA,CAAcvC,EAA9B,EAAmCwC,EAAD,IAA2B;MAC3D,IAAIA,EAAE,CAACC,IAAH,KAAYC,mCAAA,CAAyBC,IAAzC,EAA+C;QAC7C,MAAMC,KAAK,GAAG,IAAIC,UAAJ,CAAe,WAAf,EAA4B;UACxCC,IAAI,EAAEC,MADkC;UAExCC,OAAO,EAAE,IAF+B;UAGxCC,UAAU,EAAE;QAH4B,CAA5B,CAAd;QAMA,MAAMC,IAAI,GAAGC,QAAQ,CAACD,IAAtB;QACAA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEE,aAAN,CAAoBR,KAApB;MACD;IACF,CAXD;EAYD;;EAMDS,cAAc,CAACC,IAAD,EAAexC,OAA6B,GAAG,EAA/C,EAAmD;IAC/D,oBACE,+BAAC,uBAAD;MACE,SAAS,EAAE,KAAK1B,SADlB;MAEE,aAAa,EAAE,KAAKK,YAFtB;MAGE,iBAAiB,EAAE,KAAK8D,qBAH1B;MAIE,IAAI,EAAED,IAJR;MAKE,IAAI,EAAExC,OAAO,CAAC0C,IALhB;MAME,YAAY,EAAE1C,OAAO,CAAC2C,YANxB;MAOE,cAAc,EAAE3C,OAAO,CAAC4C,WAP1B;MAQE,mBAAmB,EAAE5C,OAAO,CAAC6C;IAR/B,EADF;EAYD;;EAEDC,OAAO,CAACN,IAAD,EAAexC,OAA6B,GAAG,EAA/C,EAAmD;IACxD,oBACE,+BAAC,qBAAD;MACE,cAAc,EAAE,KAAKzB,OADvB;MAEE,iBAAiB,EAAE,KAAKC,iBAF1B;MAGE,UAAU,EAAE,KAAKC,UAHnB;MAIE,IAAI,EAAE+D,IAJR;MAKE,YAAY,EAAE,KAAK9D,YALrB;MAME,YAAY,EAAEsB,OAAO,CAAC2C,YANxB;MAOE,IAAI,EAAE3C,OAAO,CAAC0C,IAPhB;MAQE,cAAc,EAAE1C,OAAO,CAAC4C,WAR1B;MASE,mBAAmB,EAAE5C,OAAO,CAAC6C;IAT/B,EADF;EAaD;;EAEDE,aAAa,CAACC,MAAD,EAAoC;IAC/C,KAAK1E,SAAL,CAAeoC,QAAf,CAAwBsC,MAAxB;IACA,OAAO,IAAP;EACD;;EAEDC,kBAAkB,CAACC,GAAD,EAAiB1C,KAAjB,EAAiC;IACjD,KAAKjC,OAAL,CAAamC,QAAb,CAAsB;MACpByC,KAAK,EAAED,GADa;MAEpB1C;IAFoB,CAAtB;EAID;;EAED4C,qBAAqB,CAAC,GAAGC,cAAJ,EAAqC;IACxD,KAAK7E,iBAAL,CAAuBkC,QAAvB,CAAgC2C,cAAhC;EACD;;EAEDC,cAAc,CAACC,MAAD,EAAoB/C,KAApB,EAAoC;IAChD,KAAK/B,UAAL,CAAgBiC,QAAhB,CAAyB;MAAEyC,KAAK,EAAEI,MAAT;MAAiB/C;IAAjB,CAAzB;EACD;;EAuCoB,aAARgD,QAAQ,CACnB,CAACnF,MAAD,EAASQ,YAAT,EAAuB4E,aAAvB,CADmB,EAEnBC,MAFmB,EAGnB,CAACpF,SAAD,EAAYC,OAAZ,EAAqBC,iBAArB,EAAwCC,UAAxC,EAAoDC,YAApD,EAAkEiF,QAAlE,EAA4E/E,yBAA5E,CAHmB,EAYnB;IACA;IACA;IACA,MAAMgF,WAAW,GAAG,IAAIzF,WAAJ,CAClBE,MADkB,EAElBC,SAFkB,EAGlBC,OAHkB,EAIlBC,iBAJkB,EAKlBC,UALkB,EAMlBC,YANkB,EAOlBiF,QAPkB,EAQlB/E,yBARkB,EASlBC,YATkB,EAUlB4E,aAVkB,CAApB;IAYA,MAAMI,aAAa,GAAG,KAAIC,uBAAJ,GAAtB,CAfA,CAgBA;;IACAF,WAAW,CAACG,0BAAZ,CAAuC;MAAEC,GAAG,EAAE,aAAP;MAAsBC,GAAG,EAAEC;IAA3B,CAAvC;;IAEA,IAAIN,WAAW,CAAC/E,YAAZ,IAA4B6E,MAAM,CAACS,UAAvC,EAAmD;MACjDP,WAAW,CAAC/E,YAAZ,CAAyBuF,UAAzB,CAAoC,GAAGR,WAAW,CAACS,WAAnD;MACAxF,YAAY,CAACyF,WAAb,CAAyBV,WAAW,CAAC7C,iBAArC;IACD;;IAED6C,WAAW,CAACW,gBAAZ,CAA6BX,WAAW,CAACnD,SAAzC;IACAmD,WAAW,CAACb,aAAZ,CAA0Bc,aAAa,CAACW,KAAxC;IACAZ,WAAW,CAACN,cAAZ,CAA2BO,aAAa,CAACY,cAAzC,EAAyDZ,aAAa,CAACrD,KAAvE;IACAoD,WAAW,CAACR,qBAAZ,CAAkCQ,WAAW,CAACc,SAA9C;IACA,OAAOd,WAAP;EACD;;AApQsB;;;gCAAZzF,W,kBA0MW,CAACwG,iBAAD,EAAeC,qBAAf,EAAiCC,sBAAjC,C;gCA1MX1G,W,aA4MM2G,e;gCA5MN3G,W,WA8MI,CACb4G,eAAA,CAAKC,QAAL,EADa,EAEbD,eAAA,CAAKC,QAAL,EAFa,EAGbD,eAAA,CAAKC,QAAL,EAHa,EAIbD,eAAA,CAAKC,QAAL,EAJa,EAKbD,eAAA,CAAKC,QAAL,EALa,EAMbD,eAAA,CAAKC,QAAL,EANa,EAObD,eAAA,CAAKC,QAAL,EAPa,C;gCA9MJ7G,W,mBAuN+B;EACxCgG,UAAU,EAAE;AAD4B,C;eAgD7BhG,W;;;AAEf8G,4BAAA,CAAgBC,UAAhB,CAA2B/G,WAA3B"}

package/dist/get-component-opts.d.ts

@@ -1,5 +1,8 @@
 import type { UseComponentType } from './ui/use-component';
+import { Filters } from './ui/use-component-query';
 export declare type GetComponentsOptions = {
     useComponent?: UseComponentType;
-    componentId?: string;
+    componentId?: string | (() => string | undefined);
+    useComponentFilters?: () => Filters;
+    path?: string;
 };

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';\n\nexport type GetComponentsOptions = {\n  useComponent?: UseComponentType;\n  componentId?: 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};\n"],"mappings":""}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import { ComponentAspect } from './component.aspect';
+export type { GetComponentsOptions } from './get-component-opts';
+export type { UseComponentType } from './ui/use-component';
 export { useComponentHost } from './host';
 export { Component, InvalidComponent } from './component';
 export { ComponentID } from '@teambit/component-id';
@@ -28,6 +30,6 @@ export { ComponentModel, ComponentModelProps } from './ui/component-model';
 export { TopBarNav } from './ui/top-bar-nav';
 export type { ShowFragment, ShowRow, ShowJSONRow } from './show';
 export { default as Config } from './config';
-export { useComponent } from './ui';
+export { useComponent, useIdFromLocation } from './ui';
 export { ComponentAspect };
 export default ComponentAspect;

package/dist/index.js

@@ -204,6 +204,12 @@ Object.defineProperty(exports, "useComponentHost", {
     return _host().useComponentHost;
   }
 });
+Object.defineProperty(exports, "useIdFromLocation", {
+  enumerable: true,
+  get: function () {
+    return _ui().useIdFromLocation;
+  }
+});
 
 function _component() {
   const data = require("./component.aspect");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentAspect"],"sources":["index.ts"],"sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport { useComponentHost } from './host';\nexport { Component, InvalidComponent } from './component';\nexport { ComponentID } from '@teambit/component-id';\nexport { default as ComponentFS } from './component-fs';\nexport type { default as ComponentConfig } from './config';\nexport type { ComponentFactory, 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 } from './ui';\n\n// export { AspectList } from './aspect-list';\n// export { AspectEntry } from './aspect-entry';\nexport { ComponentAspect };\nexport default ComponentAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;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;eAEeA,4B"}
+{"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;eAEeA,4B"}

package/dist/ui/component.d.ts

@@ -3,6 +3,8 @@ import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
 import { UseComponentType } from './use-component';
 import { ComponentModel } from './component-model';
+import { ComponentID } from '..';
+import { Filters } from './use-component-query';
 export declare type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;
 export declare type ComponentPageElement = {
     type: 'before' | 'after';
@@ -14,9 +16,11 @@ export declare type ComponentProps = {
     host: string;
     onComponentChange?: (activeComponent?: ComponentModel) => void;
     useComponent?: UseComponentType;
-    componentIdStr?: string;
+    useComponentFilters?: (componentId?: ComponentID) => Filters;
+    path?: string;
+    componentIdStr?: string | (() => string | undefined);
 };
 /**
  * main UI component of the Component extension.
  */
-export declare function Component({ routeSlot, containerSlot, host, onComponentChange, componentIdStr, useComponent, }: ComponentProps): JSX.Element;
+export declare function Component({ routeSlot, containerSlot, host, onComponentChange, componentIdStr, useComponent, path, useComponentFilters, }: ComponentProps): JSX.Element;

package/dist/ui/component.js

@@ -39,10 +39,10 @@ function _uiFoundationUiReactRouter() {
   return data;
 }
 
-function _lanesHooks() {
-  const data = require("@teambit/lanes.hooks.use-lanes");
+function _lodash2() {
+  const data = require("lodash");
 
-  _lanesHooks = function () {
+  _lodash2 = function () {
     return data;
   };
 
@@ -103,37 +103,40 @@ 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 getComponentIdStr(componentIdStr) {
+  if ((0, _lodash2().isFunction)(componentIdStr)) return componentIdStr();
+  return componentIdStr;
+}
 /**
  * main UI component of the Component extension.
  */
+
+
 function Component({
   routeSlot,
   containerSlot,
   host,
   onComponentChange,
   componentIdStr,
-  useComponent
+  useComponent,
+  path,
+  useComponentFilters
 }) {
   const idFromLocation = (0, _useComponentFromLocation().useIdFromLocation)();
-  const componentId = componentIdStr ? _().ComponentID.fromString(componentIdStr) : undefined;
-  const fullName = (componentId === null || componentId === void 0 ? void 0 : componentId.fullName) || idFromLocation;
-  const {
-    lanesModel
-  } = (0, _lanesHooks().useLanes)();
-  const laneComponent = fullName ? lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.resolveComponent(fullName) : undefined;
+
+  const _componentIdStr = getComponentIdStr(componentIdStr);
+
+  const componentId = _componentIdStr ? _().ComponentID.fromString(_componentIdStr) : undefined;
+  const resolvedComponentIdStr = path || (componentId === null || componentId === void 0 ? void 0 : componentId.toStringWithoutVersion()) || idFromLocation;
   const useComponentOptions = {
-    logFilters: laneComponent && {
-      log: {
-        logHead: laneComponent.version
-      }
-    },
+    logFilters: useComponentFilters === null || useComponentFilters === void 0 ? void 0 : useComponentFilters(componentId),
     customUseComponent: useComponent
   };
   const {
     component,
     componentDescriptor,
     error
-  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || (componentId === null || componentId === void 0 ? void 0 : componentId.toString()) || idFromLocation, useComponentOptions); // trigger onComponentChange when component changes
+  } = (0, _useComponent().useComponent)(host, (componentId === null || componentId === void 0 ? void 0 : componentId.toString()) || idFromLocation, useComponentOptions); // trigger onComponentChange when component changes
 
   (0, _react().useEffect)(() => onComponentChange === null || onComponentChange === void 0 ? void 0 : onComponentChange(component), [component]); // cleanup when unmounting component
 
@@ -150,7 +153,7 @@ function Component({
   }, before, /*#__PURE__*/_react().default.createElement("div", {
     className: _componentModule().default.container
   }, routeSlot && /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
-    parentPath: `${fullName}/*`,
+    parentPath: `${resolvedComponentIdStr}/*`,
     slot: routeSlot
   })), after));
 }

package/dist/ui/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["Component","routeSlot","containerSlot","host","onComponentChange","componentIdStr","useComponent","idFromLocation","useIdFromLocation","componentId","ComponentID","fromString","undefined","fullName","lanesModel","useLanes","laneComponent","resolveComponent","useComponentOptions","logFilters","log","logHead","version","customUseComponent","component","componentDescriptor","error","useComponentQuery","id","toString","useEffect","pageItems","useMemo","flatten","values","before","filter","x","type","map","content","after","renderError","styles","container"],"sources":["component.tsx"],"sourcesContent":["import React, { useEffect, ReactNode, useMemo } from 'react';\nimport flatten from 'lodash.flatten';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SlotRegistry } from '@teambit/harmony';\nimport { useLanes } from '@teambit/lanes.hooks.use-lanes';\nimport styles from './component.module.scss';\nimport { ComponentProvider, ComponentDescriptorProvider } from './context';\nimport { useComponent as useComponentQuery, UseComponentType } from './use-component';\nimport { ComponentModel } from './component-model';\nimport { useIdFromLocation } from './use-component-from-location';\nimport { ComponentID } from '..';\n\nexport type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;\nexport type ComponentPageElement = {\n  type: 'before' | 'after';\n  content: ReactNode;\n};\n\nexport type ComponentProps = {\n  containerSlot?: ComponentPageSlot;\n  routeSlot: RouteSlot;\n  host: string;\n  onComponentChange?: (activeComponent?: ComponentModel) => void;\n  useComponent?: UseComponentType;\n  componentIdStr?: string;\n};\n\n/**\n * main UI component of the Component extension.\n */\nexport function Component({\n  routeSlot,\n  containerSlot,\n  host,\n  onComponentChange,\n  componentIdStr,\n  useComponent,\n}: ComponentProps) {\n  const idFromLocation = useIdFromLocation();\n  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;\n  const fullName = componentId?.fullName || idFromLocation;\n  const { lanesModel } = useLanes();\n  const laneComponent = fullName ? lanesModel?.resolveComponent(fullName) : undefined;\n  const useComponentOptions = {\n    logFilters: laneComponent && { log: { logHead: laneComponent.version } },\n    customUseComponent: useComponent,\n  };\n\n  const { component, componentDescriptor, error } = useComponentQuery(\n    host,\n    laneComponent?.id.toString() || componentId?.toString() || idFromLocation,\n    useComponentOptions\n  );\n  // trigger onComponentChange when component changes\n  useEffect(() => onComponentChange?.(component), [component]);\n  // cleanup when unmounting component\n  useEffect(() => () => onComponentChange?.(undefined), []);\n\n  const pageItems = useMemo(() => flatten(containerSlot?.values()), [containerSlot]);\n  const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);\n  const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);\n\n  if (error) return error.renderError();\n  if (!component) return <div></div>;\n\n  return (\n    <ComponentDescriptorProvider componentDescriptor={componentDescriptor}>\n      <ComponentProvider component={component}>\n        {before}\n        <div className={styles.container}>\n          {routeSlot && <SlotRouter parentPath={`${fullName}/*`} slot={routeSlot} />}\n        </div>\n        {after}\n      </ComponentProvider>\n    </ComponentDescriptorProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAiBA;AACA;AACA;AACO,SAASA,SAAT,CAAmB;EACxBC,SADwB;EAExBC,aAFwB;EAGxBC,IAHwB;EAIxBC,iBAJwB;EAKxBC,cALwB;EAMxBC;AANwB,CAAnB,EAOY;EACjB,MAAMC,cAAc,GAAG,IAAAC,6CAAA,GAAvB;EACA,MAAMC,WAAW,GAAGJ,cAAc,GAAGK,eAAA,CAAYC,UAAZ,CAAuBN,cAAvB,CAAH,GAA4CO,SAA9E;EACA,MAAMC,QAAQ,GAAG,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,QAAb,KAAyBN,cAA1C;EACA,MAAM;IAAEO;EAAF,IAAiB,IAAAC,sBAAA,GAAvB;EACA,MAAMC,aAAa,GAAGH,QAAQ,GAAGC,UAAH,aAAGA,UAAH,uBAAGA,UAAU,CAAEG,gBAAZ,CAA6BJ,QAA7B,CAAH,GAA4CD,SAA1E;EACA,MAAMM,mBAAmB,GAAG;IAC1BC,UAAU,EAAEH,aAAa,IAAI;MAAEI,GAAG,EAAE;QAAEC,OAAO,EAAEL,aAAa,CAACM;MAAzB;IAAP,CADH;IAE1BC,kBAAkB,EAAEjB;EAFM,CAA5B;EAKA,MAAM;IAAEkB,SAAF;IAAaC,mBAAb;IAAkCC;EAAlC,IAA4C,IAAAC,4BAAA,EAChDxB,IADgD,EAEhD,CAAAa,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEY,EAAf,CAAkBC,QAAlB,QAAgCpB,WAAhC,aAAgCA,WAAhC,uBAAgCA,WAAW,CAAEoB,QAAb,EAAhC,KAA2DtB,cAFX,EAGhDW,mBAHgD,CAAlD,CAXiB,CAgBjB;;EACA,IAAAY,kBAAA,EAAU,MAAM1B,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGoB,SAAH,CAAjC,EAAgD,CAACA,SAAD,CAAhD,EAjBiB,CAkBjB;;EACA,IAAAM,kBAAA,EAAU,MAAM,MAAM1B,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGQ,SAAH,CAAvC,EAAsD,EAAtD;EAEA,MAAMmB,SAAS,GAAG,IAAAC,gBAAA,EAAQ,MAAM,IAAAC,iBAAA,EAAQ/B,aAAR,aAAQA,aAAR,uBAAQA,aAAa,CAAEgC,MAAf,EAAR,CAAd,EAAgD,CAAChC,aAAD,CAAhD,CAAlB;EACA,MAAMiC,MAAM,GAAG,IAAAH,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,QAAnC,EAA6CC,GAA7C,CAAkDF,CAAD,IAAOA,CAAC,CAACG,OAA1D,CAAd,EAAkF,CAACT,SAAD,CAAlF,CAAf;EACA,MAAMU,KAAK,GAAG,IAAAT,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,OAAnC,EAA4CC,GAA5C,CAAiDF,CAAD,IAAOA,CAAC,CAACG,OAAzD,CAAd,EAAiF,CAACT,SAAD,CAAjF,CAAd;EAEA,IAAIL,KAAJ,EAAW,OAAOA,KAAK,CAACgB,WAAN,EAAP;EACX,IAAI,CAAClB,SAAL,EAAgB,oBAAO,2CAAP;EAEhB,oBACE,+BAAC,sCAAD;IAA6B,mBAAmB,EAAEC;EAAlD,gBACE,+BAAC,4BAAD;IAAmB,SAAS,EAAED;EAA9B,GACGW,MADH,eAEE;IAAK,SAAS,EAAEQ,0BAAA,CAAOC;EAAvB,GACG3C,SAAS,iBAAI,+BAAC,uCAAD;IAAY,UAAU,EAAG,GAAEY,QAAS,IAApC;IAAyC,IAAI,EAAEZ;EAA/C,EADhB,CAFF,EAKGwC,KALH,CADF,CADF;AAWD"}
+{"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","Component","routeSlot","containerSlot","host","onComponentChange","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","toStringWithoutVersion","useComponentOptions","logFilters","customUseComponent","component","componentDescriptor","error","useComponentQuery","toString","useEffect","pageItems","useMemo","flatten","values","before","filter","x","type","map","content","after","renderError","styles","container"],"sources":["component.tsx"],"sourcesContent":["import React, { useEffect, ReactNode, useMemo } from 'react';\nimport flatten from 'lodash.flatten';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SlotRegistry } from '@teambit/harmony';\nimport { isFunction } from 'lodash';\nimport styles from './component.module.scss';\nimport { ComponentProvider, ComponentDescriptorProvider } from './context';\nimport { useComponent as useComponentQuery, UseComponentType } from './use-component';\nimport { ComponentModel } from './component-model';\nimport { useIdFromLocation } from './use-component-from-location';\nimport { ComponentID } from '..';\nimport { Filters } from './use-component-query';\n\nexport type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;\nexport type ComponentPageElement = {\n  type: 'before' | 'after';\n  content: ReactNode;\n};\n\nexport type ComponentProps = {\n  containerSlot?: ComponentPageSlot;\n  routeSlot: RouteSlot;\n  host: string;\n  onComponentChange?: (activeComponent?: ComponentModel) => void;\n  useComponent?: UseComponentType;\n  useComponentFilters?: (componentId?: ComponentID) => Filters;\n  path?: string;\n  componentIdStr?: string | (() => string | undefined);\n};\n\nfunction getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {\n  if (isFunction(componentIdStr)) return componentIdStr();\n  return componentIdStr;\n}\n\n/**\n * main UI component of the Component extension.\n */\nexport function Component({\n  routeSlot,\n  containerSlot,\n  host,\n  onComponentChange,\n  componentIdStr,\n  useComponent,\n  path,\n  useComponentFilters,\n}: ComponentProps) {\n  const idFromLocation = useIdFromLocation();\n  const _componentIdStr = getComponentIdStr(componentIdStr);\n  const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;\n  const resolvedComponentIdStr = path || componentId?.toStringWithoutVersion() || idFromLocation;\n  const useComponentOptions = {\n    logFilters: useComponentFilters?.(componentId),\n    customUseComponent: useComponent,\n  };\n\n  const { component, componentDescriptor, error } = useComponentQuery(\n    host,\n    componentId?.toString() || idFromLocation,\n    useComponentOptions\n  );\n  // trigger onComponentChange when component changes\n  useEffect(() => onComponentChange?.(component), [component]);\n  // cleanup when unmounting component\n  useEffect(() => () => onComponentChange?.(undefined), []);\n\n  const pageItems = useMemo(() => flatten(containerSlot?.values()), [containerSlot]);\n  const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);\n  const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);\n\n  if (error) return error.renderError();\n  if (!component) return <div></div>;\n\n  return (\n    <ComponentDescriptorProvider componentDescriptor={componentDescriptor}>\n      <ComponentProvider component={component}>\n        {before}\n        <div className={styles.container}>\n          {routeSlot && <SlotRouter parentPath={`${resolvedComponentIdStr}/*`} slot={routeSlot} />}\n        </div>\n        {after}\n      </ComponentProvider>\n    </ComponentDescriptorProvider>\n  );\n}\n"],"mappings":"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"}

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

@@ -2,6 +2,8 @@
 import { MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
 import { UseComponentType } from '../use-component';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
+import { ComponentID } from '../..';
+import { Filters } from '../use-component-query';
 export declare type MenuProps = {
     className?: string;
     /**
@@ -18,10 +20,12 @@ export declare type MenuProps = {
      */
     menuItemSlot: MenuItemSlot;
     consumeMethodSlot: ConsumeMethodSlot;
-    componentIdStr?: string;
+    componentIdStr?: string | (() => string | undefined);
     useComponent?: UseComponentType;
+    path?: string;
+    useComponentFilters?: (componentId?: ComponentID) => Filters;
 };
 /**
  * top bar menu.
  */
-export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, componentIdStr, useComponent, }: MenuProps): JSX.Element;
+export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, componentIdStr, useComponent, path, useComponentFilters, }: MenuProps): JSX.Element;

package/dist/ui/menu/menu.js

@@ -199,9 +199,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 getComponentIdStr(componentIdStr) {
+  if ((0, _lodash().isFunction)(componentIdStr)) return componentIdStr();
+  return componentIdStr;
+}
 /**
  * top bar menu.
  */
+
+
 function ComponentMenu({
   navigationSlot,
   widgetSlot,
@@ -210,30 +216,27 @@ function ComponentMenu({
   menuItemSlot,
   consumeMethodSlot,
   componentIdStr,
-  useComponent
+  useComponent,
+  path,
+  useComponentFilters
 }) {
   const idFromLocation = (0, _useComponentFromLocation().useIdFromLocation)();
-  const componentId = componentIdStr ? _().ComponentID.fromString(componentIdStr) : undefined;
-  const fullName = (componentId === null || componentId === void 0 ? void 0 : componentId.fullName) || idFromLocation;
-  const {
-    lanesModel
-  } = (0, _lanesHooks().useLanes)();
-  const laneComponent = fullName ? lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.resolveComponent(fullName) : undefined;
+
+  const _componentIdStr = getComponentIdStr(componentIdStr);
+
+  const componentId = _componentIdStr ? _().ComponentID.fromString(_componentIdStr) : undefined;
+  const resolvedComponentIdStr = path || (componentId === null || componentId === void 0 ? void 0 : componentId.toStringWithoutVersion()) || idFromLocation;
   const useComponentOptions = {
-    logFilters: laneComponent && {
-      log: {
-        logHead: laneComponent.version
-      }
-    },
+    logFilters: useComponentFilters === null || useComponentFilters === void 0 ? void 0 : useComponentFilters(componentId),
     customUseComponent: useComponent
   };
   const {
     component
-  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || (componentId === null || componentId === void 0 ? void 0 : componentId.toStringWithoutVersion()) || fullName, useComponentOptions);
+  } = (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);
   return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Routes, null, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
-    path: `${fullName}/*`,
+    path: `${resolvedComponentIdStr}/*`,
     element: /*#__PURE__*/_react().default.createElement("div", {
       className: (0, _classnames().default)(_menuModule().default.topBar, className)
     }, /*#__PURE__*/_react().default.createElement("div", {
@@ -264,11 +267,13 @@ function VersionRelatedDropdowns({
   consumeMethods,
   host
 }) {
+  var _lanesModel$viewedLan, _lanesModel$viewedLan2, _lanesModel$getLanesB;
+
   const location = (0, _baseReactNavigation().useLocation)();
   const {
     lanesModel
   } = (0, _lanesHooks().useLanes)();
-  const currentLane = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.viewedLane;
+  const currentLane = lanesModel !== null && lanesModel !== void 0 && (_lanesModel$viewedLan = lanesModel.viewedLane) !== null && _lanesModel$viewedLan !== void 0 && _lanesModel$viewedLan.id && !(lanesModel !== null && lanesModel !== void 0 && (_lanesModel$viewedLan2 = lanesModel.viewedLane) !== null && _lanesModel$viewedLan2 !== void 0 && _lanesModel$viewedLan2.id.isDefault()) ? lanesModel.viewedLane : undefined;
   const {
     logs
   } = component;
@@ -290,7 +295,7 @@ function VersionRelatedDropdowns({
     }));
   }, [logs]);
   const isNew = snaps.length === 0 && tags.length === 0;
-  const lanes = (lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.getLanesByComponentId(component.id)) || [];
+  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);

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

@@ -1 +1 @@
-{"version":3,"names":["ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","componentIdStr","useComponent","idFromLocation","useIdFromLocation","componentId","ComponentID","fromString","undefined","fullName","lanesModel","useLanes","laneComponent","resolveComponent","useComponentOptions","logFilters","log","logHead","version","customUseComponent","component","useComponentQuery","id","toString","toStringWithoutVersion","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","currentLane","viewedLane","logs","isWorkspace","snaps","filter","tag","map","snap","hash","reverse","tags","tagLookup","Map","forEach","set","compact","toArray","get","isNew","length","lanes","getLanesByComponentId","localVersion","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","componentModel","method","x","Component","Title"],"sources":["menu.tsx"],"sourcesContent":["import { Routes, Route } from 'react-router-dom';\nimport { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { flatten, groupBy, compact } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { useLanes } from '@teambit/lanes.hooks.use-lanes';\nimport { LaneModel } from '@teambit/lanes.ui.models';\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 { MenuNav } from './menu-nav';\nimport { MobileMenuNav } from './mobile-menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\nimport { ComponentID } from '../..';\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;\n\n  useComponent?: UseComponentType;\n};\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}: MenuProps) {\n  const idFromLocation = useIdFromLocation();\n  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;\n  const fullName = componentId?.fullName || idFromLocation;\n  const { lanesModel } = useLanes();\n  const laneComponent = fullName ? lanesModel?.resolveComponent(fullName) : undefined;\n  const useComponentOptions = {\n    logFilters: laneComponent && { log: { logHead: laneComponent.version } },\n    customUseComponent: useComponent,\n  };\n\n  const { component } = useComponentQuery(\n    host,\n    laneComponent?.id.toString() || componentId?.toStringWithoutVersion() || fullName,\n    useComponentOptions\n  );\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <Routes>\n      <Route\n        path={`${fullName}/*`}\n        element={\n          <div className={classnames(styles.topBar, className)}>\n            <div className={styles.leftSide}>\n              <MenuNav navigationSlot={navigationSlot} />\n              <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n            </div>\n            <div className={styles.rightSide}>\n              <div className={styles.widgets}>\n                <MenuNav navigationSlot={widgetSlot} />\n              </div>\n              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n              <MainDropdown menuItems={mainMenuItems} />\n            </div>\n          </div>\n        }\n      />\n    </Routes>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n  host,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n  host: string;\n}) {\n  const location = useLocation();\n  const { lanesModel } = useLanes();\n  const currentLane = lanesModel?.viewedLane;\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || [])\n      .filter((log) => !log.tag)\n      .map((snap) => ({ ...snap, version: snap.hash }))\n      .reverse();\n  }, [logs]);\n\n  const tags = useMemo(() => {\n    const tagLookup = new Map<string, LegacyComponentLog>();\n    (logs || [])\n      .filter((log) => log.tag)\n      .forEach((tag) => {\n        tagLookup.set(tag?.tag as string, tag);\n      });\n    return compact(\n      component.tags\n        ?.toArray()\n        .reverse()\n        .map((tag) => tagLookup.get(tag.version.version))\n    ).map((tag) => ({ ...tag, version: tag.tag as string }));\n  }, [logs]);\n\n  const isNew = snaps.length === 0 && tags.length === 0;\n\n  const lanes = lanesModel?.getLanesByComponentId(component.id) || [];\n  const localVersion = isWorkspace && !isNew && !currentLane;\n\n  const currentVersion =\n    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(consumeMethods, component, currentLane);\n  return (\n    <>\n      {tags.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown\n        tags={tags}\n        snaps={snaps}\n        lanes={lanes}\n        localVersion={localVersion}\n        currentVersion={currentVersion}\n        latestVersion={component.latest}\n        currentLane={currentLane}\n        menuClassName={styles.componentVersionMenu}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  consumeMethods: ConsumeMethodSlot,\n  componentModel: ComponentModel,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel, { currentLane });\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel, currentLane]\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","toStringWithoutVersion","useComponentOptions","logFilters","customUseComponent","component","useComponentQuery","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","lanesModel","useLanes","currentLane","viewedLane","id","isDefault","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","reverse","tags","tagLookup","Map","forEach","set","compact","toArray","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 { MenuNav } from './menu-nav';\nimport { MobileMenuNav } from './mobile-menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\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?: (componentId?: ComponentID) => 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 || componentId?.toStringWithoutVersion() || idFromLocation;\n\n  const useComponentOptions = {\n    logFilters: useComponentFilters?.(componentId),\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              <MenuNav navigationSlot={navigationSlot} />\n              <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n            </div>\n            <div className={styles.rightSide}>\n              <div className={styles.widgets}>\n                <MenuNav navigationSlot={widgetSlot} />\n              </div>\n              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n              <MainDropdown menuItems={mainMenuItems} />\n            </div>\n          </div>\n        }\n      />\n    </Routes>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n  host,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n  host: string;\n}) {\n  const location = useLocation();\n  const { 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 || [])\n      .filter((log) => !log.tag)\n      .map((snap) => ({ ...snap, version: snap.hash }))\n      .reverse();\n  }, [logs]);\n\n  const tags = useMemo(() => {\n    const tagLookup = new Map<string, LegacyComponentLog>();\n    (logs || [])\n      .filter((log) => log.tag)\n      .forEach((tag) => {\n        tagLookup.set(tag?.tag as string, tag);\n      });\n    return compact(\n      component.tags\n        ?.toArray()\n        .reverse()\n        .map((tag) => tagLookup.get(tag.version.version))\n    ).map((tag) => ({ ...tag, version: tag.tag as string }));\n  }, [logs]);\n\n  const isNew = snaps.length === 0 && tags.length === 0;\n\n  const lanes = 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={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown\n        tags={tags}\n        snaps={snaps}\n        lanes={lanes}\n        localVersion={localVersion}\n        currentVersion={currentVersion}\n        latestVersion={component.latest}\n        currentLane={currentLane}\n        menuClassName={styles.componentVersionMenu}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  consumeMethods: ConsumeMethodSlot,\n  componentModel: ComponentModel,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel, { currentLane });\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel, currentLane]\n  );\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { SlotRegistry } from '@teambit/harmony';
 import type { LinkProps } from '@teambit/base-react.navigation.link';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
-import { LaneModel } from '@teambit/lanes.ui.models';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 import { ComponentModel } from '../../ui';
 export declare type NavPluginProps = {
     displayName?: string;

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["nav-plugin.tsx"],"sourcesContent":["import { SlotRegistry } from '@teambit/harmony';\nimport type { LinkProps } from '@teambit/base-react.navigation.link';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel } from '@teambit/lanes.ui.models';\nimport { ComponentModel } from '../../ui';\n\nexport type NavPluginProps = {\n  displayName?: string;\n} & LinkProps;\n\nexport type NavPlugin = {\n  props: NavPluginProps;\n  order?: number;\n};\n\nexport type OrderedNavigationSlot = SlotRegistry<NavPlugin>;\nexport type ConsumePluginOptions = {\n  currentLane?: LaneModel;\n};\n\nexport type ConsumePlugin = (\n  componentModel: ComponentModel,\n  options?: ConsumePluginOptions\n) => ConsumeMethod | undefined;\n\nexport type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["nav-plugin.tsx"],"sourcesContent":["import { SlotRegistry } from '@teambit/harmony';\nimport type { LinkProps } from '@teambit/base-react.navigation.link';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { ComponentModel } from '../../ui';\n\nexport type NavPluginProps = {\n  displayName?: string;\n} & LinkProps;\n\nexport type NavPlugin = {\n  props: NavPluginProps;\n  order?: number;\n};\n\nexport type OrderedNavigationSlot = SlotRegistry<NavPlugin>;\nexport type ConsumePluginOptions = {\n  currentLane?: LaneModel;\n};\n\nexport type ConsumePlugin = (\n  componentModel: ComponentModel,\n  options?: ConsumePluginOptions\n) => ConsumeMethod | undefined;\n\nexport type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;\n"],"mappings":""}

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

@@ -1 +1 @@
-export declare function useIdFromLocation(): string | undefined;
+export declare function useIdFromLocation(url?: string): string | undefined;

package/dist/ui/use-component-from-location.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.array.iterator.js");
+
 require("core-js/modules/es.regexp.exec.js");
 
 Object.defineProperty(exports, "__esModule", {
@@ -20,12 +22,23 @@ function _reactRouterDom() {
 /** component url is comprised of letters, numbers, "_", "-", "/" but should not include trailing "/", and should not include "~" */
 const componentRegex = /^[\w/-]*[\w-]/;
 
-function useIdFromLocation() {
+function useIdFromLocation(url) {
   const params = (0, _reactRouterDom().useParams)();
-  const splat = params['*'];
+  const splat = url || params['*'];
   if (!splat) return undefined;
-  const match = componentRegex.exec(splat);
-  return match === null || match === void 0 ? void 0 : match[0];
+  const [maybeOrgWithScope, ...maybeFullName] = splat.split('/');
+  const hasScope = maybeOrgWithScope.split('.').length > 1;
+  const fullNameFromUrl = hasScope ? maybeFullName.join('/') : splat;
+  let scope;
+
+  if (hasScope) {
+    scope = maybeOrgWithScope;
+  }
+
+  const match = componentRegex.exec(fullNameFromUrl);
+  if (!(match !== null && match !== void 0 && match[0])) return undefined;
+  if (scope) return `${scope}/${match[0]}`;
+  return match[0];
 }
 
 //# sourceMappingURL=use-component-from-location.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["componentRegex","useIdFromLocation","params","useParams","splat","undefined","match","exec"],"sources":["use-component-from-location.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\n\n/** component url is comprised of letters, numbers, \"_\", \"-\", \"/\" but should not include trailing \"/\", and should not include \"~\" */\nconst componentRegex = /^[\\w/-]*[\\w-]/;\nexport function useIdFromLocation() {\n  const params = useParams();\n  const splat = params['*'];\n  if (!splat) return undefined;\n\n  const match = componentRegex.exec(splat);\n  return match?.[0];\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;AACA,MAAMA,cAAc,GAAG,eAAvB;;AACO,SAASC,iBAAT,GAA6B;EAClC,MAAMC,MAAM,GAAG,IAAAC,2BAAA,GAAf;EACA,MAAMC,KAAK,GAAGF,MAAM,CAAC,GAAD,CAApB;EACA,IAAI,CAACE,KAAL,EAAY,OAAOC,SAAP;EAEZ,MAAMC,KAAK,GAAGN,cAAc,CAACO,IAAf,CAAoBH,KAApB,CAAd;EACA,OAAOE,KAAP,aAAOA,KAAP,uBAAOA,KAAK,CAAG,CAAH,CAAZ;AACD"}
+{"version":3,"names":["componentRegex","useIdFromLocation","url","params","useParams","splat","undefined","maybeOrgWithScope","maybeFullName","split","hasScope","length","fullNameFromUrl","join","scope","match","exec"],"sources":["use-component-from-location.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\n\n/** component url is comprised of letters, numbers, \"_\", \"-\", \"/\" but should not include trailing \"/\", and should not include \"~\" */\nconst componentRegex = /^[\\w/-]*[\\w-]/;\n\nexport function useIdFromLocation(url?: string): string | undefined {\n  const params = useParams();\n  const splat = url || params['*'];\n  if (!splat) return undefined;\n\n  const [maybeOrgWithScope, ...maybeFullName] = splat.split('/');\n  const hasScope = maybeOrgWithScope.split('.').length > 1;\n  const fullNameFromUrl = hasScope ? maybeFullName.join('/') : splat;\n  let scope: string | undefined;\n  if (hasScope) {\n    scope = maybeOrgWithScope;\n  }\n  const match = componentRegex.exec(fullNameFromUrl);\n  if (!match?.[0]) return undefined;\n  if (scope) return `${scope}/${match[0]}`;\n  return match[0];\n}\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;AACA,MAAMA,cAAc,GAAG,eAAvB;;AAEO,SAASC,iBAAT,CAA2BC,GAA3B,EAA6D;EAClE,MAAMC,MAAM,GAAG,IAAAC,2BAAA,GAAf;EACA,MAAMC,KAAK,GAAGH,GAAG,IAAIC,MAAM,CAAC,GAAD,CAA3B;EACA,IAAI,CAACE,KAAL,EAAY,OAAOC,SAAP;EAEZ,MAAM,CAACC,iBAAD,EAAoB,GAAGC,aAAvB,IAAwCH,KAAK,CAACI,KAAN,CAAY,GAAZ,CAA9C;EACA,MAAMC,QAAQ,GAAGH,iBAAiB,CAACE,KAAlB,CAAwB,GAAxB,EAA6BE,MAA7B,GAAsC,CAAvD;EACA,MAAMC,eAAe,GAAGF,QAAQ,GAAGF,aAAa,CAACK,IAAd,CAAmB,GAAnB,CAAH,GAA6BR,KAA7D;EACA,IAAIS,KAAJ;;EACA,IAAIJ,QAAJ,EAAc;IACZI,KAAK,GAAGP,iBAAR;EACD;;EACD,MAAMQ,KAAK,GAAGf,cAAc,CAACgB,IAAf,CAAoBJ,eAApB,CAAd;EACA,IAAI,EAACG,KAAD,aAACA,KAAD,eAACA,KAAK,CAAG,CAAH,CAAN,CAAJ,EAAiB,OAAOT,SAAP;EACjB,IAAIQ,KAAJ,EAAW,OAAQ,GAAEA,KAAM,IAAGC,KAAK,CAAC,CAAD,CAAI,EAA5B;EACX,OAAOA,KAAK,CAAC,CAAD,CAAZ;AACD"}

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

@@ -28,15 +28,6 @@ export declare function useComponentQuery(componentId: string, host: string, fil
     previousData?: any;
     networkStatus: import("@apollo/client").NetworkStatus;
     called: boolean;
-    variables: {
-        logType?: string | undefined;
-        logOffset?: number | undefined;
-        logLimit?: number | undefined;
-        logHead?: string | undefined;
-        logSort?: string | undefined;
-        id: string;
-        extensionId: string;
-    } | undefined;
     startPolling: (pollInterval: number) => void;
     stopPolling: () => void;
     updateQuery: <TVars = {
@@ -66,6 +57,15 @@ export declare function useComponentQuery(componentId: string, host: string, fil
         id: string;
         extensionId: string;
     }, any>> | undefined, newNetworkStatus?: import("@apollo/client").NetworkStatus | undefined) => Promise<import("@apollo/client").ApolloQueryResult<any>>;
+    variables: {
+        logType?: string | undefined;
+        logOffset?: number | undefined;
+        logLimit?: number | undefined;
+        logHead?: string | undefined;
+        logSort?: string | undefined;
+        id: string;
+        extensionId: string;
+    } | undefined;
     fetchMore: <TFetchData = any, TFetchVars = {
         logType?: string | undefined;
         logOffset?: number | undefined;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.866",
+  "version": "0.0.868",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.866"
+    "version": "0.0.868"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -31,42 +31,42 @@
     "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.417",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.494",
-    "@teambit/aspect-loader": "0.0.866",
+    "@teambit/aspect-loader": "0.0.868",
     "@teambit/legacy-bit-id": "0.0.414",
     "@teambit/toolbox.path.match-patterns": "0.0.7",
     "@teambit/toolbox.string.capitalize": "0.0.489",
-    "@teambit/cli": "0.0.577",
-    "@teambit/express": "0.0.675",
-    "@teambit/graphql": "0.0.866",
+    "@teambit/cli": "0.0.579",
+    "@teambit/express": "0.0.677",
+    "@teambit/graphql": "0.0.868",
     "@teambit/bit-error": "0.0.400",
-    "@teambit/command-bar": "0.0.866",
+    "@teambit/command-bar": "0.0.868",
     "@teambit/component.ui.deprecation-icon": "0.0.500",
-    "@teambit/preview": "0.0.866",
-    "@teambit/pubsub": "0.0.866",
-    "@teambit/react-router": "0.0.866",
+    "@teambit/preview": "0.0.868",
+    "@teambit/pubsub": "0.0.868",
+    "@teambit/react-router": "0.0.868",
     "@teambit/ui-foundation.ui.is-browser": "0.0.492",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.493",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.496",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.122",
-    "@teambit/ui": "0.0.866",
+    "@teambit/ui": "0.0.868",
     "@teambit/component-issues": "0.0.72",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.496",
     "@teambit/cli-table": "0.0.40",
-    "@teambit/lanes.hooks.use-lanes": "0.0.37",
-    "@teambit/component-descriptor": "0.0.145",
+    "@teambit/component-descriptor": "0.0.147",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.493",
     "@teambit/design.ui.empty-box": "0.0.360",
     "@teambit/harmony.ui.aspect-box": "0.0.492",
     "@teambit/design.ui.pages.not-found": "0.0.363",
     "@teambit/design.ui.pages.server-error": "0.0.363",
-    "@teambit/compositions": "0.0.866",
-    "@teambit/deprecation": "0.0.866",
-    "@teambit/envs": "0.0.866",
+    "@teambit/compositions": "0.0.868",
+    "@teambit/deprecation": "0.0.868",
+    "@teambit/envs": "0.0.868",
     "@teambit/legacy-component-log": "0.0.398",
     "@teambit/design.ui.styles.ellipsis": "0.0.353",
     "@teambit/envs.ui.env-icon": "0.0.492",
-    "@teambit/component.ui.version-dropdown": "0.0.639",
-    "@teambit/lanes.ui.models": "0.0.35",
+    "@teambit/component.ui.version-dropdown": "0.0.641",
+    "@teambit/lanes.hooks.use-lanes": "0.0.39",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.1",
     "@teambit/ui-foundation.ui.full-loader": "0.0.492",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.122",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494"
@@ -88,7 +88,7 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.6.0",
-    "@teambit/legacy": "1.0.358",
+    "@teambit/legacy": "1.0.360",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1664710331381.js → preview-1664735485436.js}

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

package/ui/component.tsx

@@ -2,13 +2,14 @@ import React, { useEffect, ReactNode, useMemo } from 'react';
 import flatten from 'lodash.flatten';
 import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
-import { useLanes } from '@teambit/lanes.hooks.use-lanes';
+import { isFunction } from 'lodash';
 import styles from './component.module.scss';
 import { ComponentProvider, ComponentDescriptorProvider } from './context';
 import { useComponent as useComponentQuery, UseComponentType } from './use-component';
 import { ComponentModel } from './component-model';
 import { useIdFromLocation } from './use-component-from-location';
 import { ComponentID } from '..';
+import { Filters } from './use-component-query';
 
 export type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;
 export type ComponentPageElement = {
@@ -22,9 +23,16 @@ export type ComponentProps = {
   host: string;
   onComponentChange?: (activeComponent?: ComponentModel) => void;
   useComponent?: UseComponentType;
-  componentIdStr?: string;
+  useComponentFilters?: (componentId?: ComponentID) => Filters;
+  path?: string;
+  componentIdStr?: string | (() => string | undefined);
 };
 
+function getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {
+  if (isFunction(componentIdStr)) return componentIdStr();
+  return componentIdStr;
+}
+
 /**
  * main UI component of the Component extension.
  */
@@ -35,20 +43,21 @@ export function Component({
   onComponentChange,
   componentIdStr,
   useComponent,
+  path,
+  useComponentFilters,
 }: ComponentProps) {
   const idFromLocation = useIdFromLocation();
-  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;
-  const fullName = componentId?.fullName || idFromLocation;
-  const { lanesModel } = useLanes();
-  const laneComponent = fullName ? lanesModel?.resolveComponent(fullName) : undefined;
+  const _componentIdStr = getComponentIdStr(componentIdStr);
+  const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;
+  const resolvedComponentIdStr = path || componentId?.toStringWithoutVersion() || idFromLocation;
   const useComponentOptions = {
-    logFilters: laneComponent && { log: { logHead: laneComponent.version } },
+    logFilters: useComponentFilters?.(componentId),
     customUseComponent: useComponent,
   };
 
   const { component, componentDescriptor, error } = useComponentQuery(
     host,
-    laneComponent?.id.toString() || componentId?.toString() || idFromLocation,
+    componentId?.toString() || idFromLocation,
     useComponentOptions
   );
   // trigger onComponentChange when component changes
@@ -68,7 +77,7 @@ export function Component({
       <ComponentProvider component={component}>
         {before}
         <div className={styles.container}>
-          {routeSlot && <SlotRouter parentPath={`${fullName}/*`} slot={routeSlot} />}
+          {routeSlot && <SlotRouter parentPath={`${resolvedComponentIdStr}/*`} slot={routeSlot} />}
         </div>
         {after}
       </ComponentProvider>

package/ui/menu/menu.tsx

@@ -4,12 +4,12 @@ import { VersionDropdown } from '@teambit/component.ui.version-dropdown';
 import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
 import { useLocation } from '@teambit/base-react.navigation.link';
-import { flatten, groupBy, compact } from 'lodash';
+import { flatten, groupBy, compact, isFunction } from 'lodash';
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
 import { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';
 import { useLanes } from '@teambit/lanes.hooks.use-lanes';
-import { LaneModel } from '@teambit/lanes.ui.models';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 import { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
 import type { ComponentModel } from '../component-model';
@@ -20,6 +20,7 @@ import styles from './menu.module.scss';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 import { useIdFromLocation } from '../use-component-from-location';
 import { ComponentID } from '../..';
+import { Filters } from '../use-component-query';
 
 export type MenuProps = {
   className?: string;
@@ -39,11 +40,18 @@ export type MenuProps = {
 
   consumeMethodSlot: ConsumeMethodSlot;
 
-  componentIdStr?: string;
+  componentIdStr?: string | (() => string | undefined);
 
   useComponent?: UseComponentType;
-};
 
+  path?: string,
+
+  useComponentFilters?: (componentId?: ComponentID) => Filters;
+};
+function getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {
+  if (isFunction(componentIdStr)) return componentIdStr();
+  return componentIdStr;
+}
 /**
  * top bar menu.
  */
@@ -56,28 +64,26 @@ export function ComponentMenu({
   consumeMethodSlot,
   componentIdStr,
   useComponent,
+  path,
+  useComponentFilters,
 }: MenuProps) {
   const idFromLocation = useIdFromLocation();
-  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;
-  const fullName = componentId?.fullName || idFromLocation;
-  const { lanesModel } = useLanes();
-  const laneComponent = fullName ? lanesModel?.resolveComponent(fullName) : undefined;
+  const _componentIdStr = getComponentIdStr(componentIdStr);
+  const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;
+  const resolvedComponentIdStr = path || componentId?.toStringWithoutVersion() || idFromLocation;
+
   const useComponentOptions = {
-    logFilters: laneComponent && { log: { logHead: laneComponent.version } },
+    logFilters: useComponentFilters?.(componentId),
     customUseComponent: useComponent,
   };
 
-  const { component } = useComponentQuery(
-    host,
-    laneComponent?.id.toString() || componentId?.toStringWithoutVersion() || fullName,
-    useComponentOptions
-  );
+  const { component } = useComponentQuery(host, componentId?.toString() || idFromLocation, useComponentOptions);
   const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
   if (!component) return <FullLoader />;
   return (
     <Routes>
       <Route
-        path={`${fullName}/*`}
+        path={`${resolvedComponentIdStr}/*`}
         element={
           <div className={classnames(styles.topBar, className)}>
             <div className={styles.leftSide}>
@@ -109,7 +115,9 @@ function VersionRelatedDropdowns({
 }) {
   const location = useLocation();
   const { lanesModel } = useLanes();
-  const currentLane = lanesModel?.viewedLane;
+  const currentLane =
+    lanesModel?.viewedLane?.id && !lanesModel?.viewedLane?.id.isDefault() ? lanesModel.viewedLane : undefined;
+
   const { logs } = component;
   const isWorkspace = host === 'teambit.workspace/workspace';
 
@@ -137,7 +145,7 @@ function VersionRelatedDropdowns({
 
   const isNew = snaps.length === 0 && tags.length === 0;
 
-  const lanes = lanesModel?.getLanesByComponentId(component.id) || [];
+  const lanes = lanesModel?.getLanesByComponentId(component.id)?.filter((lane) => !lane.id.isDefault()) || [];
   const localVersion = isWorkspace && !isNew && !currentLane;
 
   const currentVersion =

package/ui/menu/nav-plugin.tsx

@@ -1,7 +1,7 @@
 import { SlotRegistry } from '@teambit/harmony';
 import type { LinkProps } from '@teambit/base-react.navigation.link';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
-import { LaneModel } from '@teambit/lanes.ui.models';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 import { ComponentModel } from '../../ui';
 
 export type NavPluginProps = {

package/ui/use-component-from-location.tsx

@@ -2,11 +2,21 @@ import { useParams } from 'react-router-dom';
 
 /** component url is comprised of letters, numbers, "_", "-", "/" but should not include trailing "/", and should not include "~" */
 const componentRegex = /^[\w/-]*[\w-]/;
-export function useIdFromLocation() {
+
+export function useIdFromLocation(url?: string): string | undefined {
   const params = useParams();
-  const splat = params['*'];
+  const splat = url || params['*'];
   if (!splat) return undefined;
 
-  const match = componentRegex.exec(splat);
-  return match?.[0];
+  const [maybeOrgWithScope, ...maybeFullName] = splat.split('/');
+  const hasScope = maybeOrgWithScope.split('.').length > 1;
+  const fullNameFromUrl = hasScope ? maybeFullName.join('/') : splat;
+  let scope: string | undefined;
+  if (hasScope) {
+    scope = maybeOrgWithScope;
+  }
+  const match = componentRegex.exec(fullNameFromUrl);
+  if (!match?.[0]) return undefined;
+  if (scope) return `${scope}/${match[0]}`;
+  return match[0];
 }