@teambit/component 0.0.876 → 0.0.877

package/dist/ui/component.d.ts

@@ -3,7 +3,6 @@ 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 = {
@@ -16,7 +15,7 @@ export declare type ComponentProps = {
     host: string;
     onComponentChange?: (activeComponent?: ComponentModel) => void;
     useComponent?: UseComponentType;
-    useComponentFilters?: (componentId?: ComponentID) => Filters;
+    useComponentFilters?: () => Filters;
     path?: string;
     componentIdStr?: string | (() => string | undefined);
 };

package/dist/ui/component.js

@@ -127,9 +127,9 @@ function Component({
   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 resolvedComponentIdStr = path || idFromLocation;
   const useComponentOptions = {
-    logFilters: useComponentFilters === null || useComponentFilters === void 0 ? void 0 : useComponentFilters(componentId),
+    logFilters: useComponentFilters === null || useComponentFilters === void 0 ? void 0 : useComponentFilters(),
     customUseComponent: useComponent
   };
   const {

package/dist/ui/component.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"names":["getComponentIdStr","componentIdStr","isFunction","Component","routeSlot","containerSlot","host","onComponentChange","useComponent","path","useComponentFilters","idFromLocation","useIdFromLocation","_componentIdStr","componentId","ComponentID","fromString","undefined","resolvedComponentIdStr","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?: () => 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 || idFromLocation;\n  const useComponentOptions = {\n    logFilters: useComponentFilters?.(),\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,7 +2,6 @@
 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;
@@ -23,7 +22,7 @@ export declare type MenuProps = {
     componentIdStr?: string | (() => string | undefined);
     useComponent?: UseComponentType;
     path?: string;
-    useComponentFilters?: (componentId?: ComponentID) => Filters;
+    useComponentFilters?: () => Filters;
 };
 /**
  * top bar menu.

package/dist/ui/menu/menu.js

@@ -225,9 +225,9 @@ function ComponentMenu({
   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 resolvedComponentIdStr = path || idFromLocation;
   const useComponentOptions = {
-    logFilters: useComponentFilters === null || useComponentFilters === void 0 ? void 0 : useComponentFilters(componentId),
+    logFilters: useComponentFilters === null || useComponentFilters === void 0 ? void 0 : useComponentFilters(),
     customUseComponent: useComponent
   };
   const {
@@ -281,7 +281,7 @@ function VersionRelatedDropdowns({
   const snaps = (0, _react().useMemo)(() => {
     return (logs || []).filter(log => !log.tag).map(snap => _objectSpread(_objectSpread({}, snap), {}, {
       version: snap.hash
-    })).reverse();
+    }));
   }, [logs]);
   const tags = (0, _react().useMemo)(() => {
     var _component$tags;

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

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

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.876",
+  "version": "0.0.877",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.876"
+    "version": "0.0.877"
   },
   "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.876",
+    "@teambit/aspect-loader": "0.0.877",
     "@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.586",
-    "@teambit/express": "0.0.684",
-    "@teambit/graphql": "0.0.876",
+    "@teambit/cli": "0.0.587",
+    "@teambit/express": "0.0.685",
+    "@teambit/graphql": "0.0.877",
     "@teambit/bit-error": "0.0.400",
-    "@teambit/command-bar": "0.0.876",
+    "@teambit/command-bar": "0.0.877",
     "@teambit/component.ui.deprecation-icon": "0.0.500",
-    "@teambit/preview": "0.0.876",
-    "@teambit/pubsub": "0.0.876",
-    "@teambit/react-router": "0.0.876",
+    "@teambit/preview": "0.0.877",
+    "@teambit/pubsub": "0.0.877",
+    "@teambit/react-router": "0.0.877",
     "@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.876",
+    "@teambit/ui": "0.0.877",
     "@teambit/component-issues": "0.0.72",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.496",
     "@teambit/cli-table": "0.0.40",
-    "@teambit/component-descriptor": "0.0.154",
+    "@teambit/component-descriptor": "0.0.155",
     "@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.876",
-    "@teambit/deprecation": "0.0.876",
-    "@teambit/envs": "0.0.876",
+    "@teambit/compositions": "0.0.877",
+    "@teambit/deprecation": "0.0.877",
+    "@teambit/envs": "0.0.877",
     "@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.648",
-    "@teambit/lanes.hooks.use-lanes": "0.0.46",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.8",
+    "@teambit/component.ui.version-dropdown": "0.0.649",
+    "@teambit/lanes.hooks.use-lanes": "0.0.47",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.9",
     "@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.367",
+    "@teambit/legacy": "1.0.368",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1665459720186.js → preview-1665632384919.js}

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

package/ui/component.tsx

@@ -23,7 +23,7 @@ export type ComponentProps = {
   host: string;
   onComponentChange?: (activeComponent?: ComponentModel) => void;
   useComponent?: UseComponentType;
-  useComponentFilters?: (componentId?: ComponentID) => Filters;
+  useComponentFilters?: () => Filters;
   path?: string;
   componentIdStr?: string | (() => string | undefined);
 };
@@ -49,9 +49,9 @@ export function Component({
   const idFromLocation = useIdFromLocation();
   const _componentIdStr = getComponentIdStr(componentIdStr);
   const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;
-  const resolvedComponentIdStr = path || componentId?.toStringWithoutVersion() || idFromLocation;
+  const resolvedComponentIdStr = path || idFromLocation;
   const useComponentOptions = {
-    logFilters: useComponentFilters?.(componentId),
+    logFilters: useComponentFilters?.(),
     customUseComponent: useComponent,
   };
 

package/ui/menu/menu.tsx

@@ -44,9 +44,9 @@ export type MenuProps = {
 
   useComponent?: UseComponentType;
 
-  path?: string,
+  path?: string;
 
-  useComponentFilters?: (componentId?: ComponentID) => Filters;
+  useComponentFilters?: () => Filters;
 };
 function getComponentIdStr(componentIdStr?: string | (() => string | undefined)): string | undefined {
   if (isFunction(componentIdStr)) return componentIdStr();
@@ -70,10 +70,10 @@ export function ComponentMenu({
   const idFromLocation = useIdFromLocation();
   const _componentIdStr = getComponentIdStr(componentIdStr);
   const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;
-  const resolvedComponentIdStr = path || componentId?.toStringWithoutVersion() || idFromLocation;
+  const resolvedComponentIdStr = path || idFromLocation;
 
   const useComponentOptions = {
-    logFilters: useComponentFilters?.(componentId),
+    logFilters: useComponentFilters?.(),
     customUseComponent: useComponent,
   };
 
@@ -122,10 +122,7 @@ function VersionRelatedDropdowns({
   const isWorkspace = host === 'teambit.workspace/workspace';
 
   const snaps = useMemo(() => {
-    return (logs || [])
-      .filter((log) => !log.tag)
-      .map((snap) => ({ ...snap, version: snap.hash }))
-      .reverse();
+    return (logs || []).filter((log) => !log.tag).map((snap) => ({ ...snap, version: snap.hash }));
   }, [logs]);
 
   const tags = useMemo(() => {