@teambit/component 0.0.818 → 0.0.821

package/dist/component-factory.d.ts

@@ -38,7 +38,7 @@ export interface ComponentFactory {
     /**
      * returns a component by ID.
      */
-    get(id: ComponentID | string, withState?: boolean, consumerComponent?: ConsumerComponent): Promise<Component | undefined>;
+    get(id: ComponentID): Promise<Component | undefined>;
     /**
      * returns many components by ids.
      */

package/dist/component-factory.js.map

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

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

@@ -76,7 +76,7 @@ export declare class ComponentUI {
     updateComponents: (components: ComponentModel[]) => void;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static slots: (((registerFn: () => string) => SlotRegistry<RouteProps>) | ((registerFn: () => string) => SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<NavPlugin>) | ((registerFn: () => string) => SlotRegistry<ConsumeMethodSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentPageSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentSearchResultSlot>))[];
+    static slots: (((registerFn: () => string) => SlotRegistry<RouteProps>) | ((registerFn: () => string) => SlotRegistry<MenuItemSlot>) | ((registerFn: () => string) => SlotRegistry<NavigationSlot>) | ((registerFn: () => string) => SlotRegistry<NavPlugin>) | ((registerFn: () => string) => SlotRegistry<ConsumeMethodSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentPageSlot>) | ((registerFn: () => string) => SlotRegistry<ComponentSearchResultSlot>))[];
     static defaultConfig: ComponentUIConfig;
     static provider([pubsub, commandBarUI, reactRouterUI]: [PubsubUI, CommandBarUI, ReactRouterUI], config: ComponentUIConfig, [routeSlot, navSlot, consumeMethodSlot, widgetSlot, menuItemSlot, pageSlot, componentSearchResultSlot]: [
         RouteSlot,

package/dist/ui/component.js

@@ -39,10 +39,10 @@ function _uiFoundationUiReactRouter() {
   return data;
 }
 
-function _lanesUi() {
-  const data = require("@teambit/lanes.ui.lanes");
+function _lanesHooks() {
+  const data = require("@teambit/lanes.hooks.use-lanes");
 
-  _lanesUi = function () {
+  _lanesHooks = function () {
     return data;
   };
 
@@ -117,8 +117,10 @@ function Component({
   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 lanesContext = (0, _lanesUi().useLanesContext)();
-  const laneComponent = fullName ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(fullName) : undefined;
+  const {
+    lanesModel
+  } = (0, _lanesHooks().useLanes)();
+  const laneComponent = fullName ? lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.resolveComponent(fullName) : undefined;
   const useComponentOptions = {
     logFilters: laneComponent && {
       log: {

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","lanesContext","useLanesContext","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 { useLanesContext } from '@teambit/lanes.ui.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 lanesContext = useLanesContext();\n  const laneComponent = fullName ? lanesContext?.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":"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"}
+{"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":"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"}

package/dist/ui/menu/menu.js

@@ -111,20 +111,20 @@ function _uiFoundationUiUseBox() {
   return data;
 }
 
-function _uiFoundationUiUseBox2() {
-  const data = require("@teambit/ui-foundation.ui.use-box.menu");
+function _lanesHooks() {
+  const data = require("@teambit/lanes.hooks.use-lanes");
 
-  _uiFoundationUiUseBox2 = function () {
+  _lanesHooks = function () {
     return data;
   };
 
   return data;
 }
 
-function _lanesUi() {
-  const data = require("@teambit/lanes.ui.lanes");
+function _uiFoundationUiUseBox2() {
+  const data = require("@teambit/ui-foundation.ui.use-box.menu");
 
-  _lanesUi = function () {
+  _uiFoundationUiUseBox2 = function () {
     return data;
   };
 
@@ -215,8 +215,10 @@ function ComponentMenu({
   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 lanesContext = (0, _lanesUi().useLanesContext)();
-  const laneComponent = fullName ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(fullName) : undefined;
+  const {
+    lanesModel
+  } = (0, _lanesHooks().useLanes)();
+  const laneComponent = fullName ? lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.resolveComponent(fullName) : undefined;
   const useComponentOptions = {
     logFilters: laneComponent && {
       log: {
@@ -263,8 +265,10 @@ function VersionRelatedDropdowns({
   host
 }) {
   const location = (0, _baseReactNavigation().useLocation)();
-  const lanesContext = (0, _lanesUi().useLanesContext)();
-  const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.viewedLane;
+  const {
+    lanesModel
+  } = (0, _lanesHooks().useLanes)();
+  const currentLane = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.viewedLane;
   const {
     logs
   } = component;
@@ -286,7 +290,7 @@ function VersionRelatedDropdowns({
     }));
   }, [logs]);
   const isNew = snaps.length === 0 && tags.length === 0;
-  const lanes = (lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.getLanesByComponentId(component.id)) || [];
+  const lanes = (lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.getLanesByComponentId(component.id)) || [];
   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","lanesContext","useLanesContext","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 { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel, useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent 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 lanesContext = useLanesContext();\n  const laneComponent = fullName ? lanesContext?.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 lanesContext = useLanesContext();\n  const currentLane = lanesContext?.viewedLane;\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || [])\n      .filter((log) => !log.tag)\n      .map((snap) => ({ ...snap, version: snap.hash }))\n      .reverse();\n  }, [logs]);\n\n  const tags = useMemo(() => {\n    const tagLookup = new Map<string, LegacyComponentLog>();\n    (logs || [])\n      .filter((log) => log.tag)\n      .forEach((tag) => {\n        tagLookup.set(tag?.tag as string, tag);\n      });\n    return compact(\n      component.tags\n        ?.toArray()\n        .reverse()\n        .map((tag) => tagLookup.get(tag.version.version))\n    ).map((tag) => ({ ...tag, version: tag.tag as string }));\n  }, [logs]);\n\n  const isNew = snaps.length === 0 && tags.length === 0;\n\n  const lanes = lanesContext?.getLanesByComponentId(component.id) || [];\n  const localVersion = isWorkspace && !isNew && !currentLane;\n\n  const currentVersion =\n    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(consumeMethods, component, currentLane);\n  return (\n    <>\n      {tags.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown\n        tags={tags}\n        snaps={snaps}\n        lanes={lanes}\n        localVersion={localVersion}\n        currentVersion={currentVersion}\n        latestVersion={component.latest}\n        currentLane={currentLane}\n        menuClassName={styles.componentVersionMenu}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  consumeMethods: ConsumeMethodSlot,\n  componentModel: ComponentModel,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel, { currentLane });\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel, currentLane]\n  );\n}\n"],"mappings":"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"}
+{"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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"}

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.lanes';
+import { LaneModel } from '@teambit/lanes.ui.models';
 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.lanes';\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';\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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.818",
+  "version": "0.0.821",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.818"
+    "version": "0.0.821"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -31,41 +31,42 @@
     "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.405",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
-    "@teambit/aspect-loader": "0.0.818",
+    "@teambit/aspect-loader": "0.0.821",
     "@teambit/legacy-bit-id": "0.0.402",
     "@teambit/toolbox.path.match-patterns": "0.0.1",
     "@teambit/toolbox.string.capitalize": "0.0.483",
-    "@teambit/cli": "0.0.546",
-    "@teambit/express": "0.0.644",
-    "@teambit/graphql": "0.0.818",
+    "@teambit/cli": "0.0.549",
+    "@teambit/express": "0.0.647",
+    "@teambit/graphql": "0.0.821",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.818",
+    "@teambit/command-bar": "0.0.821",
     "@teambit/component.ui.deprecation-icon": "0.0.494",
-    "@teambit/preview": "0.0.818",
-    "@teambit/pubsub": "0.0.818",
-    "@teambit/react-router": "0.0.818",
+    "@teambit/preview": "0.0.821",
+    "@teambit/pubsub": "0.0.821",
+    "@teambit/react-router": "0.0.821",
     "@teambit/ui-foundation.ui.is-browser": "0.0.486",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.116",
-    "@teambit/ui": "0.0.818",
+    "@teambit/ui": "0.0.821",
     "@teambit/component-issues": "0.0.60",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.488",
     "@teambit/cli-table": "0.0.34",
-    "@teambit/lanes.ui.lanes": "0.0.115",
-    "@teambit/component-descriptor": "0.0.109",
+    "@teambit/lanes.hooks.use-lanes": "0.0.2",
+    "@teambit/component-descriptor": "0.0.112",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.487",
     "@teambit/design.ui.empty-box": "0.0.354",
     "@teambit/harmony.ui.aspect-box": "0.0.486",
-    "@teambit/design.ui.pages.not-found": "0.0.356",
-    "@teambit/design.ui.pages.server-error": "0.0.356",
-    "@teambit/compositions": "0.0.818",
-    "@teambit/deprecation": "0.0.818",
-    "@teambit/envs": "0.0.818",
+    "@teambit/design.ui.pages.not-found": "0.0.357",
+    "@teambit/design.ui.pages.server-error": "0.0.357",
+    "@teambit/compositions": "0.0.821",
+    "@teambit/deprecation": "0.0.821",
+    "@teambit/envs": "0.0.821",
     "@teambit/legacy-component-log": "0.0.392",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/envs.ui.env-icon": "0.0.486",
-    "@teambit/component.ui.version-dropdown": "0.0.603",
+    "@teambit/component.ui.version-dropdown": "0.0.606",
+    "@teambit/lanes.ui.models": "0.0.2",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.116",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.488"
@@ -87,7 +88,7 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.329",
+    "@teambit/legacy": "1.0.332",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1660620618310.js → preview-1660879941721.js}

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

package/ui/component.tsx

@@ -2,7 +2,7 @@ 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 { useLanesContext } from '@teambit/lanes.ui.lanes';
+import { useLanes } from '@teambit/lanes.hooks.use-lanes';
 import styles from './component.module.scss';
 import { ComponentProvider, ComponentDescriptorProvider } from './context';
 import { useComponent as useComponentQuery, UseComponentType } from './use-component';
@@ -39,8 +39,8 @@ export function Component({
   const idFromLocation = useIdFromLocation();
   const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;
   const fullName = componentId?.fullName || idFromLocation;
-  const lanesContext = useLanesContext();
-  const laneComponent = fullName ? lanesContext?.resolveComponent(fullName) : undefined;
+  const { lanesModel } = useLanes();
+  const laneComponent = fullName ? lanesModel?.resolveComponent(fullName) : undefined;
   const useComponentOptions = {
     logFilters: laneComponent && { log: { logHead: laneComponent.version } },
     customUseComponent: useComponent,

package/ui/menu/menu.tsx

@@ -8,8 +8,9 @@ import { flatten, groupBy, compact } 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 { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';
-import { LaneModel, useLanesContext } from '@teambit/lanes.ui.lanes';
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
 import type { ComponentModel } from '../component-model';
 import { useComponent as useComponentQuery, UseComponentType } from '../use-component';
@@ -59,8 +60,8 @@ export function ComponentMenu({
   const idFromLocation = useIdFromLocation();
   const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;
   const fullName = componentId?.fullName || idFromLocation;
-  const lanesContext = useLanesContext();
-  const laneComponent = fullName ? lanesContext?.resolveComponent(fullName) : undefined;
+  const { lanesModel } = useLanes();
+  const laneComponent = fullName ? lanesModel?.resolveComponent(fullName) : undefined;
   const useComponentOptions = {
     logFilters: laneComponent && { log: { logHead: laneComponent.version } },
     customUseComponent: useComponent,
@@ -107,8 +108,8 @@ function VersionRelatedDropdowns({
   host: string;
 }) {
   const location = useLocation();
-  const lanesContext = useLanesContext();
-  const currentLane = lanesContext?.viewedLane;
+  const { lanesModel } = useLanes();
+  const currentLane = lanesModel?.viewedLane;
   const { logs } = component;
   const isWorkspace = host === 'teambit.workspace/workspace';
 
@@ -136,7 +137,7 @@ function VersionRelatedDropdowns({
 
   const isNew = snaps.length === 0 && tags.length === 0;
 
-  const lanes = lanesContext?.getLanesByComponentId(component.id) || [];
+  const lanes = lanesModel?.getLanesByComponentId(component.id) || [];
   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.lanes';
+import { LaneModel } from '@teambit/lanes.ui.models';
 import { ComponentModel } from '../../ui';
 
 export type NavPluginProps = {