@teambit/component 0.0.692 → 0.0.695

package/aspect.section.tsx

@@ -11,6 +11,7 @@ export class AspectSection implements Section {
   navigationLink = {
     href: '~aspect',
     children: <MenuWidgetIcon icon="configuration" tooltipContent="Configuration" />,
+    displayName: 'Configuration',
   };
   order = 50;
 }

package/dist/aspect.section.d.ts

@@ -8,6 +8,7 @@ export declare class AspectSection implements Section {
     navigationLink: {
         href: string;
         children: JSX.Element;
+        displayName: string;
     };
     order: number;
 }

package/dist/aspect.section.js

@@ -58,7 +58,8 @@ class AspectSection {
       children: /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MenuWidgetIcon, {
         icon: "configuration",
         tooltipContent: "Configuration"
-      })
+      }),
+      displayName: 'Configuration'
     });
     (0, _defineProperty2().default)(this, "order", 50);
   }

package/dist/aspect.section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["aspect.section.tsx"],"names":["AspectSection","path","children","href"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,aAAN,CAAuC;AAAA;AAAA,mDACpC;AACNC,MAAAA,IAAI,EAAE,SADA;AAENC,MAAAA,QAAQ,eAAE,+BAAC,wBAAD;AAFJ,KADoC;AAAA,4DAK3B;AACfC,MAAAA,IAAI,EAAE,SADS;AAEfD,MAAAA,QAAQ,eAAE,+BAAC,gCAAD;AAAgB,QAAA,IAAI,EAAC,eAArB;AAAqC,QAAA,cAAc,EAAC;AAApD;AAFK,KAL2B;AAAA,mDASpC,EAToC;AAAA;;AAAA","sourcesContent":["import React from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Section } from './section';\nimport { AspectPage } from './ui/aspect-page';\n\nexport class AspectSection implements Section {\n  route = {\n    path: '~aspect',\n    children: <AspectPage />,\n  };\n  navigationLink = {\n    href: '~aspect',\n    children: <MenuWidgetIcon icon=\"configuration\" tooltipContent=\"Configuration\" />,\n  };\n  order = 50;\n}\n"]}
+{"version":3,"sources":["aspect.section.tsx"],"names":["AspectSection","path","children","href","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,aAAN,CAAuC;AAAA;AAAA,mDACpC;AACNC,MAAAA,IAAI,EAAE,SADA;AAENC,MAAAA,QAAQ,eAAE,+BAAC,wBAAD;AAFJ,KADoC;AAAA,4DAK3B;AACfC,MAAAA,IAAI,EAAE,SADS;AAEfD,MAAAA,QAAQ,eAAE,+BAAC,gCAAD;AAAgB,QAAA,IAAI,EAAC,eAArB;AAAqC,QAAA,cAAc,EAAC;AAApD,QAFK;AAGfE,MAAAA,WAAW,EAAE;AAHE,KAL2B;AAAA,mDAUpC,EAVoC;AAAA;;AAAA","sourcesContent":["import React from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Section } from './section';\nimport { AspectPage } from './ui/aspect-page';\n\nexport class AspectSection implements Section {\n  route = {\n    path: '~aspect',\n    children: <AspectPage />,\n  };\n  navigationLink = {\n    href: '~aspect',\n    children: <MenuWidgetIcon icon=\"configuration\" tooltipContent=\"Configuration\" />,\n    displayName: 'Configuration',\n  };\n  order = 50;\n}\n"]}

package/dist/section/section.d.ts

@@ -3,5 +3,9 @@ import { RouteProps } from 'react-router-dom';
 export interface Section {
     route: RouteProps;
     navigationLink: NavLinkProps;
+    /**
+     * text to be used in the mobile res dropdown
+     */
+    displayName?: string;
     order?: number;
 }

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { OrderedNavigationSlot } from './nav-plugin';
-export declare function MenuNav({ navigationSlot }: {
+export declare type MenuNavProps = {
     navigationSlot: OrderedNavigationSlot;
-}): JSX.Element;
+} & React.HTMLAttributes<HTMLElement>;
+export declare function MenuNav({ navigationSlot, className }: MenuNavProps): JSX.Element;

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

@@ -22,7 +22,7 @@ function _extends2() {
 }
 
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
 
   _react = function () {
     return data;
@@ -31,6 +31,16 @@ function _react() {
   return data;
 }
 
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+
+  _classnames = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _topBarNav() {
   const data = require("../top-bar-nav");
 
@@ -51,15 +61,22 @@ function _menuModule() {
   return data;
 }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 MenuNav({
-  navigationSlot
+  navigationSlot,
+  className
 }) {
-  const plugins = navigationSlot.toArray().sort(sortFn);
+  const plugins = (0, _react().useMemo)(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
   return /*#__PURE__*/_react().default.createElement("nav", {
-    className: _menuModule().default.navigation
-  }, plugins.map(([id, menuItem]) => /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
-    key: id
-  }, menuItem.props))));
+    className: (0, _classnames().default)(_menuModule().default.navigation, _menuModule().default.desktopNav, className)
+  }, plugins.map(([id, menuItem]) => {
+    return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
+      key: id
+    }, menuItem.props));
+  }));
 }
 
 function sortFn([, {

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

@@ -1 +1 @@
-{"version":3,"sources":["menu-nav.tsx"],"names":["MenuNav","navigationSlot","plugins","toArray","sort","sortFn","styles","navigation","map","id","menuItem","props","order","first","second"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGO,SAASA,OAAT,CAAiB;AAAEC,EAAAA;AAAF,CAAjB,EAAgF;AACrF,QAAMC,OAAO,GAAGD,cAAc,CAACE,OAAf,GAAyBC,IAAzB,CAA8BC,MAA9B,CAAhB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEC,sBAAOC;AAAvB,KACGL,OAAO,CAACM,GAAR,CAAY,CAAC,CAACC,EAAD,EAAKC,QAAL,CAAD,kBACX,+BAAC,sBAAD;AAAW,IAAA,GAAG,EAAED;AAAhB,KAAwBC,QAAQ,CAACC,KAAjC,EADD,CADH,CADF;AAOD;;AAED,SAASN,MAAT,CAAgB,GAAG;AAAEO,EAAAA,KAAK,EAAEC;AAAT,CAAH,CAAhB,EAA2D,GAAG;AAAED,EAAAA,KAAK,EAAEE;AAAT,CAAH,CAA3D,EAAuG;AACrG;AACA;AACA;AAEA,SAAO,CAACD,KAAD,aAACA,KAAD,cAACA,KAAD,GAAU,CAAV,KAAgBC,MAAhB,aAAgBA,MAAhB,cAAgBA,MAAhB,GAA0B,CAA1B,CAAP;AACD,C,CAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import React from 'react';\n\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MenuNav({ navigationSlot }: { navigationSlot: OrderedNavigationSlot }) {\n  const plugins = navigationSlot.toArray().sort(sortFn);\n\n  return (\n    <nav className={styles.navigation}>\n      {plugins.map(([id, menuItem]) => (\n        <TopBarNav key={id} {...menuItem.props} />\n      ))}\n    </nav>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"]}
+{"version":3,"sources":["menu-nav.tsx"],"names":["MenuNav","navigationSlot","className","plugins","toArray","sort","sortFn","styles","navigation","desktopNav","map","id","menuItem","props","order","first","second"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAOO,SAASA,OAAT,CAAiB;AAAEC,EAAAA,cAAF;AAAkBC,EAAAA;AAAlB,CAAjB,EAA8D;AACnE,QAAMC,OAAO,GAAG,sBAAQ,MAAMF,cAAc,CAACG,OAAf,GAAyBC,IAAzB,CAA8BC,MAA9B,CAAd,EAAqD,CAACL,cAAD,CAArD,CAAhB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAE,2BAAWM,sBAAOC,UAAlB,EAA8BD,sBAAOE,UAArC,EAAiDP,SAAjD;AAAhB,KACGC,OAAO,CAACO,GAAR,CAAY,CAAC,CAACC,EAAD,EAAKC,QAAL,CAAD,KAAoB;AAC/B,wBAAO,+BAAC,sBAAD;AAAW,MAAA,GAAG,EAAED;AAAhB,OAAwBC,QAAQ,CAACC,KAAjC,EAAP;AACD,GAFA,CADH,CADF;AAOD;;AAED,SAASP,MAAT,CAAgB,GAAG;AAAEQ,EAAAA,KAAK,EAAEC;AAAT,CAAH,CAAhB,EAA2D,GAAG;AAAED,EAAAA,KAAK,EAAEE;AAAT,CAAH,CAA3D,EAAuG;AACrG;AACA;AACA;AAEA,SAAO,CAACD,KAAD,aAACA,KAAD,cAACA,KAAD,GAAU,CAAV,KAAgBC,MAAhB,aAAgBA,MAAhB,cAAgBA,MAAhB,GAA0B,CAA1B,CAAP;AACD,C,CAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  navigationSlot: OrderedNavigationSlot;\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function MenuNav({ navigationSlot, className }: MenuNavProps) {\n  const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);\n\n  return (\n    <nav className={classnames(styles.navigation, styles.desktopNav, className)}>\n      {plugins.map(([id, menuItem]) => {\n        return <TopBarNav key={id} {...menuItem.props} />;\n      })}\n    </nav>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"]}

package/dist/ui/menu/menu.js

@@ -141,6 +141,16 @@ function _menuNav() {
   return data;
 }
 
+function _mobileMenuNav() {
+  const data = require("./mobile-menu-nav");
+
+  _mobileMenuNav = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _menuModule() {
   const data = _interopRequireDefault(require("./menu.module.scss"));
 
@@ -181,6 +191,9 @@ function Menu({
     className: _menuModule().default.leftSide
   }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
     navigationSlot: navigationSlot
+  }), /*#__PURE__*/_react().default.createElement(_mobileMenuNav().MobileMenuNav, {
+    navigationSlot: navigationSlot,
+    widgetSlot: widgetSlot
   })), /*#__PURE__*/_react().default.createElement("div", {
     className: _menuModule().default.rightSide
   }, /*#__PURE__*/_react().default.createElement("div", {
@@ -204,7 +217,7 @@ function VersionRelatedDropdowns({
   const location = (0, _baseUiRouting().useLocation)();
   const isNew = component.tags.isEmpty();
   const lanesContext = (0, _lanesUi().useLanesContext)();
-  const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.currentLane;
+  const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.viewedLane;
   const {
     logs
   } = component;

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

@@ -1 +1 @@
-{"version":3,"sources":["menu.tsx"],"names":["Menu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","component","mainMenuItems","values","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","isNew","tags","isEmpty","lanesContext","currentLane","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","tagLookup","Map","forEach","set","toArray","reverse","get","lanes","getLanesByComponentId","id","localVersion","currentVersion","search","includes","methods","useConsumeMethods","length","useBox","name","latest","componentModel","method","x","Component","Title"],"mappings":"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","sourcesContent":["import { 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-ui.routing.routing-provider';\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 } from '../use-component';\nimport { MenuNav } from './menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\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\n/**\n * top bar menu.\n */\nexport function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps) {\n  const { component } = useComponent(host);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <div className={classnames(styles.topBar, className)}>\n      <div className={styles.leftSide}>\n        <MenuNav navigationSlot={navigationSlot} />\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\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 isNew = component.tags.isEmpty();\n  const lanesContext = useLanesContext();\n  const currentLane = lanesContext?.currentLane;\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 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      />\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"]}
+{"version":3,"sources":["menu.tsx"],"names":["Menu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","component","mainMenuItems","values","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","isNew","tags","isEmpty","lanesContext","currentLane","viewedLane","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","tagLookup","Map","forEach","set","toArray","reverse","get","lanes","getLanesByComponentId","id","localVersion","currentVersion","search","includes","methods","useConsumeMethods","length","useBox","name","latest","componentModel","method","x","Component","Title"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;;;;;AAsBA;AACA;AACA;AACO,SAASA,IAAT,CAAc;AAAEC,EAAAA,cAAF;AAAkBC,EAAAA,UAAlB;AAA8BC,EAAAA,SAA9B;AAAyCC,EAAAA,IAAzC;AAA+CC,EAAAA,YAA/C;AAA6DC,EAAAA;AAA7D,CAAd,EAA2G;AAChH,QAAM;AAAEC,IAAAA;AAAF,MAAgB,kCAAaH,IAAb,CAAtB;AACA,QAAMI,aAAa,GAAG,sBAAQ,MAAM,uBAAQ,uBAAQH,YAAY,CAACI,MAAb,EAAR,CAAR,EAAwC,UAAxC,CAAd,EAAmE,CAACJ,YAAD,CAAnE,CAAtB;AACA,MAAI,CAACE,SAAL,EAAgB,oBAAO,+BAAC,6BAAD,OAAP;AAChB,sBACE;AAAK,IAAA,SAAS,EAAE,2BAAWG,sBAAOC,MAAlB,EAA0BR,SAA1B;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAEO,sBAAOE;AAAvB,kBACE,+BAAC,kBAAD;AAAS,IAAA,cAAc,EAAEX;AAAzB,IADF,eAEE,+BAAC,8BAAD;AAAe,IAAA,cAAc,EAAEA,cAA/B;AAA+C,IAAA,UAAU,EAAEC;AAA3D,IAFF,CADF,eAKE;AAAK,IAAA,SAAS,EAAEQ,sBAAOG;AAAvB,kBACE;AAAK,IAAA,SAAS,EAAEH,sBAAOI;AAAvB,kBACE,+BAAC,kBAAD;AAAS,IAAA,cAAc,EAAEZ;AAAzB,IADF,CADF,eAIE,+BAAC,uBAAD;AAAyB,IAAA,SAAS,EAAEK,SAApC;AAA+C,IAAA,cAAc,EAAED,iBAA/D;AAAkF,IAAA,IAAI,EAAEF;AAAxF,IAJF,eAKE,+BAAC,8BAAD;AAAc,IAAA,SAAS,EAAEI;AAAzB,IALF,CALF,CADF;AAeD;;AAED,SAASO,uBAAT,CAAiC;AAC/BR,EAAAA,SAD+B;AAE/BS,EAAAA,cAF+B;AAG/BZ,EAAAA;AAH+B,CAAjC,EAQG;AACD,QAAMa,QAAQ,GAAG,mCAAjB;AACA,QAAMC,KAAK,GAAGX,SAAS,CAACY,IAAV,CAAeC,OAAf,EAAd;AACA,QAAMC,YAAY,GAAG,iCAArB;AACA,QAAMC,WAAW,GAAGD,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEE,UAAlC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAWjB,SAAjB;AACA,QAAMkB,WAAW,GAAGrB,IAAI,KAAK,6BAA7B;AAEA,QAAMsB,KAAK,GAAG,sBAAQ,MAAM;AAC1B,WAAO,CAACF,IAAI,IAAI,EAAT,EAAaG,MAAb,CAAqBC,GAAD,IAAS,CAACA,GAAG,CAACC,GAAlC,EAAuCC,GAAvC,CAA4CC,IAAD,oCAAgBA,IAAhB;AAAsBC,MAAAA,OAAO,EAAED,IAAI,CAACE;AAApC,MAA3C,CAAP;AACD,GAFa,EAEX,CAACT,IAAD,CAFW,CAAd;AAIA,QAAML,IAAI,GAAG,sBAAQ,MAAM;AAAA;;AACzB,UAAMe,SAAS,GAAG,IAAIC,GAAJ,EAAlB;AACA,KAACX,IAAI,IAAI,EAAT,EACGG,MADH,CACWC,GAAD,IAASA,GAAG,CAACC,GADvB,EAEGO,OAFH,CAEYP,GAAD,IAAS;AAChBK,MAAAA,SAAS,CAACG,GAAV,CAAcR,GAAd,aAAcA,GAAd,uBAAcA,GAAG,CAAEA,GAAnB,EAAkCA,GAAlC;AACD,KAJH;AAKA,WAAO,0CACLtB,SAAS,CAACY,IADL,oDACL,gBACImB,OADJ,GAEGC,OAFH,GAGGT,GAHH,CAGQD,GAAD,IAASK,SAAS,CAACM,GAAV,CAAcX,GAAG,CAACG,OAAJ,CAAYA,OAA1B,CAHhB,CADK,EAKLF,GALK,CAKAD,GAAD,oCAAeA,GAAf;AAAoBG,MAAAA,OAAO,EAAEH,GAAG,CAACA;AAAjC,MALC,CAAP;AAMD,GAbY,EAaV,CAACL,IAAD,CAbU,CAAb;AAeA,QAAMiB,KAAK,GAAG,CAAApB,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAEqB,qBAAd,CAAoCnC,SAAS,CAACoC,EAA9C,MAAqD,EAAnE;AACA,QAAMC,YAAY,GAAGnB,WAAW,IAAI,CAACP,KAAhB,IAAyB,CAACI,WAA/C;AAEA,QAAMuB,cAAc,GAClBpB,WAAW,IAAI,CAACP,KAAhB,IAAyB,CAACD,QAAQ,CAAC6B,MAAT,CAAgBC,QAAhB,CAAyB,SAAzB,CAA1B,GAAgE,WAAhE,GAA8ExC,SAAS,CAACyB,OAD1F;AAGA,QAAMgB,OAAO,GAAGC,iBAAiB,CAACjC,cAAD,EAAiBT,SAAjB,EAA4Be,WAA5B,CAAjC;AACA,sBACE,gEACGH,IAAI,CAAC+B,MAAL,GAAc,CAAd,iBACC,+BAAC,sCAAD;AACE,IAAA,QAAQ,EAAC,YADX;AAEE,IAAA,SAAS,EAAExC,sBAAOyC,MAFpB;AAGE,IAAA,IAAI,eAAE,+BAAC,6BAAD;AAAoB,MAAA,OAAO,EAAEH,OAA7B;AAAsC,MAAA,aAAa,EAAEzC,SAAS,CAACoC,EAAV,CAAaS;AAAlE;AAHR,IAFJ,eAQE,+BAAC,8BAAD;AACE,IAAA,IAAI,EAAEjC,IADR;AAEE,IAAA,KAAK,EAAEO,KAFT;AAGE,IAAA,KAAK,EAAEe,KAHT;AAIE,IAAA,YAAY,EAAEG,YAJhB;AAKE,IAAA,cAAc,EAAEC,cALlB;AAME,IAAA,aAAa,EAAEtC,SAAS,CAAC8C,MAN3B;AAOE,IAAA,WAAW,EAAE/B;AAPf,IARF,CADF;AAoBD;;AAED,SAAS2B,iBAAT,CACEjC,cADF,EAEEsC,cAFF,EAGEhC,WAHF,EAImB;AACjB,SAAO,sBACL,MACE,uBAAQN,cAAc,CAACP,MAAf,EAAR,EACGqB,GADH,CACQyB,MAAD,IAAY;AACf,WAAOA,MAAP,aAAOA,MAAP,uBAAOA,MAAM,CAAGD,cAAH,EAAmB;AAAEhC,MAAAA;AAAF,KAAnB,CAAb;AACD,GAHH,EAIGK,MAJH,CAIW6B,CAAD,IAAO,CAAC,CAACA,CAAF,IAAOA,CAAC,CAACC,SAAT,IAAsBD,CAAC,CAACE,KAJzC,CAFG,EAOL,CAAC1C,cAAD,EAAiBsC,cAAjB,EAAiChC,WAAjC,CAPK,CAAP;AASD","sourcesContent":["import { 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-ui.routing.routing-provider';\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 } 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';\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\n/**\n * top bar menu.\n */\nexport function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps) {\n  const { component } = useComponent(host);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\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\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 isNew = component.tags.isEmpty();\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 || []).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 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      />\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"]}

package/dist/ui/menu/menu.module.scss

@@ -1,3 +1,5 @@
+@import '~@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
+
 .topBar {
   display: flex;
   justify-content: space-between;
@@ -13,19 +15,36 @@
 }
 
 .navigation {
-  display: flex;
   list-style: none;
   height: 100%;
   padding-left: 28px;
-  @media screen and (max-width: 768px) {
-    padding-left: 6px;
+  @media screen and (max-width: $br-md) {
+    padding-left: 0;
   }
 
-  > li {
+  li {
     display: block;
     margin-right: 16px;
     height: 100%;
   }
+
+  // show desktop nav on larger res
+  &.desktopNav {
+    display: flex;
+    @media screen and (max-width: $br-lg) {
+      display: none;
+    }
+  }
+
+  // show mobile nav on smaller res
+  &.mobileNav {
+    align-items: center;
+    display: none;
+    @media screen and (max-width: $br-lg) {
+      display: flex;
+      margin-right: 8px;
+    }
+  }
 }
 
 .rightSide {
@@ -38,6 +57,11 @@
       margin-right: 16px;
     }
   }
+  @media screen and (max-width: $br-lg) {
+    > * {
+      margin-right: 8px;
+    }
+  }
   .widgets {
     height: 100%;
     margin-right: 20px;
@@ -51,6 +75,9 @@
         }
       }
     }
+    @media screen and (max-width: $br-lg) {
+      display: none; 
+    }
   }
   .widget {
     font-size: 17px;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OrderedNavigationSlot } from './nav-plugin';
+export declare function MobileMenuNav({ navigationSlot, widgetSlot, className, }: {
+    navigationSlot: OrderedNavigationSlot;
+    widgetSlot: OrderedNavigationSlot;
+    className?: string;
+}): JSX.Element;

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

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.array.sort.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileMenuNav = MobileMenuNav;
+
+function _objectWithoutProperties2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+  _objectWithoutProperties2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _extends2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+  _extends2 = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+
+  _react = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+
+  _reactRouterDom = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+
+  _classnames = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _designElements() {
+  const data = require("@teambit/design.elements.icon");
+
+  _designElements = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _designInputs() {
+  const data = require("@teambit/design.inputs.dropdown");
+
+  _designInputs = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _uiFoundationUiReactRouter() {
+  const data = require("@teambit/ui-foundation.ui.react-router.extend-path");
+
+  _uiFoundationUiReactRouter = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _topBarNav() {
+  const data = require("../top-bar-nav");
+
+  _topBarNav = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _menuModule() {
+  const data = _interopRequireDefault(require("./menu.module.scss"));
+
+  _menuModule = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _mobileMenuNavModule() {
+  const data = _interopRequireDefault(require("./mobile-menu-nav.module.scss"));
+
+  _mobileMenuNavModule = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 MobileMenuNav({
+  navigationSlot,
+  widgetSlot,
+  className
+}) {
+  const {
+    url
+  } = (0, _reactRouterDom().useRouteMatch)();
+  const totalSlots = (0, _react().useMemo)(() => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)], [navigationSlot, widgetSlot]);
+  return /*#__PURE__*/_react().default.createElement(_designInputs().Dropdown // @ts-ignore - mismatch between @types/react
+  , {
+    placeholder: /*#__PURE__*/_react().default.createElement(Placeholder, {
+      slots: totalSlots,
+      baseUrl: url
+    }),
+    className: (0, _classnames().default)(_menuModule().default.navigation, _menuModule().default.mobileNav, className),
+    dropClass: _mobileMenuNavModule().default.mobileMenu
+  }, /*#__PURE__*/_react().default.createElement("nav", null, /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
+    of: "x-thick",
+    className: _mobileMenuNavModule().default.close
+  }), totalSlots.map(([id, menuItem]) => {
+    return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
+      key: id
+    }, menuItem.props, {
+      className: _mobileMenuNavModule().default.mobileMenuLink,
+      activeClassName: _mobileMenuNavModule().default.active
+    }), typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName);
+  })));
+}
+
+function sortFn([, {
+  order: first
+}], [, {
+  order: second
+}]) {
+  // 0  - equal
+  // <0 - first < second
+  // >0 - first > second
+  return (first !== null && first !== void 0 ? first : 0) - (second !== null && second !== void 0 ? second : 0);
+}
+
+function Placeholder(_ref) {
+  let {
+    slots,
+    baseUrl = ''
+  } = _ref,
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["slots", "baseUrl"]);
+  return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
+    className: _mobileMenuNavModule().default.placeholder
+  }), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Switch, null, slots === null || slots === void 0 ? void 0 : slots.map(([id, menuItem]) => {
+    var _menuItem$props, _menuItem$props2, _menuItem$props3, _menuItem$props4;
+
+    const path = (0, _uiFoundationUiReactRouter().extendPath)(baseUrl, menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props = menuItem.props) === null || _menuItem$props === void 0 ? void 0 : _menuItem$props.href);
+    return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
+      key: id,
+      exact: true,
+      path: path
+    }, typeof (menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props2 = menuItem.props) === null || _menuItem$props2 === void 0 ? void 0 : _menuItem$props2.children) === 'string' ? menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props3 = menuItem.props) === null || _menuItem$props3 === void 0 ? void 0 : _menuItem$props3.children : menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props4 = menuItem.props) === null || _menuItem$props4 === void 0 ? void 0 : _menuItem$props4.displayName);
+  })), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
+    of: "fat-arrow-down"
+  }));
+}
+
+//# sourceMappingURL=mobile-menu-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["mobile-menu-nav.tsx"],"names":["MobileMenuNav","navigationSlot","widgetSlot","className","url","totalSlots","toArray","sort","sortFn","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","baseUrl","rest","placeholder","path","href"],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\nimport { Switch, Route, useRouteMatch } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport mobileStyles from './mobile-menu-nav.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MobileMenuNav({\n  navigationSlot,\n  widgetSlot,\n  className,\n}: {\n  navigationSlot: OrderedNavigationSlot;\n  widgetSlot: OrderedNavigationSlot;\n  className?: string;\n}) {\n  const { url } = useRouteMatch();\n  const totalSlots = useMemo(\n    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],\n    [navigationSlot, widgetSlot]\n  );\n\n  return (\n    <Dropdown\n      // @ts-ignore - mismatch between @types/react\n      placeholder={<Placeholder slots={totalSlots} baseUrl={url} />}\n      className={classnames(styles.navigation, styles.mobileNav, className)}\n      dropClass={mobileStyles.mobileMenu}\n    >\n      <nav>\n        <Icon of=\"x-thick\" className={mobileStyles.close} />\n        {totalSlots.map(([id, menuItem]) => {\n          return (\n            <TopBarNav\n              key={id}\n              {...menuItem.props}\n              className={mobileStyles.mobileMenuLink}\n              activeClassName={mobileStyles.active}\n            >\n              {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n            </TopBarNav>\n          );\n        })}\n      </nav>\n    </Dropdown>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\ntype PlaceholderProps = {\n  slots: [string, NavPlugin][];\n  baseUrl?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Placeholder({ slots, baseUrl = '', ...rest }: PlaceholderProps) {\n  return (\n    <div {...rest} className={mobileStyles.placeholder}>\n      <Switch>\n        {slots?.map(([id, menuItem]) => {\n          const path = extendPath(baseUrl, menuItem?.props?.href);\n          return (\n            <Route key={id} exact path={path}>\n              {typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName}\n            </Route>\n          );\n        })}\n      </Switch>\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n"]}

package/dist/ui/menu/mobile-menu-nav.module.scss

@@ -0,0 +1,70 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+@import '~@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
+
+.mobileMenuLink {
+  margin: 0;
+  transition: background-color 300ms ease-in-out;
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+  @media screen and (max-width: $br-md) {
+    height: 40px;
+    font-size: 16px;
+  }
+}
+
+.mobileMenu {
+  > nav {
+    display: flex;
+    flex-direction: column;
+  }
+  .active {
+    background-color: var(--bit-accent-bg, #eceaff);
+    color: inherit;
+    &:after {
+      background-color: unset;
+    }
+  }
+  .close {
+    display: none;
+  }
+  @media screen and (max-width: $br-md) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0;
+    z-index: $modal-z-index;
+    .close {
+      align-self: self-end;
+      padding: 8px;
+      display: flex;
+      &:hover {
+        background-color: var(--bit-bg-heavy, #f6f6f6);
+      }
+    }
+  }
+}
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 30px;
+  border-radius: 6px;
+  user-select: none;
+  cursor: pointer;
+  transition: background-color 300ms ease-in-out;
+  border: 1px solid var(--bit-border-color, #babec9);
+  [data-open='true'] & {
+    color: var(--bit-accent-color, #6c5ce7);
+  }
+  > span {
+    padding-left: 8px;
+  }
+  &:hover {
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+}

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

@@ -3,8 +3,11 @@ import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
 import { LaneModel } from '@teambit/lanes.ui.lanes';
 import { ComponentModel } from '../../ui';
+export declare type NavPluginProps = {
+    displayName?: string;
+} & NavLinkProps;
 export declare type NavPlugin = {
-    props: NavLinkProps;
+    props: NavPluginProps;
     order?: number;
 };
 export declare type OrderedNavigationSlot = SlotRegistry<NavPlugin>;

package/dist/ui/top-bar-nav/top-bar-nav.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-export declare function TopBarNav(props: NavLinkProps): JSX.Element;
+export declare type TopBarNavProps = {} & NavLinkProps;
+export declare function TopBarNav({ href, className, activeClassName, children, ...rest }: TopBarNavProps): JSX.Element;

package/dist/ui/top-bar-nav/top-bar-nav.js

@@ -19,20 +19,20 @@ function _extends2() {
   return data;
 }
 
-function _baseUiRouting() {
-  const data = require("@teambit/base-ui.routing.nav-link");
+function _objectWithoutProperties2() {
+  const data = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-  _baseUiRouting = function () {
+  _objectWithoutProperties2 = function () {
     return data;
   };
 
   return data;
 }
 
-function _uiFoundationUiReactRouter() {
-  const data = require("@teambit/ui-foundation.ui.react-router.extend-path");
+function _react() {
+  const data = _interopRequireDefault(require("react"));
 
-  _uiFoundationUiReactRouter = function () {
+  _react = function () {
     return data;
   };
 
@@ -49,20 +49,30 @@ function _classnames() {
   return data;
 }
 
-function _react() {
-  const data = _interopRequireDefault(require("react"));
+function _reactRouterDom() {
+  const data = require("react-router-dom");
 
-  _react = function () {
+  _reactRouterDom = function () {
     return data;
   };
 
   return data;
 }
 
-function _reactRouterDom() {
-  const data = require("react-router-dom");
+function _baseUiRouting() {
+  const data = require("@teambit/base-ui.routing.nav-link");
 
-  _reactRouterDom = function () {
+  _baseUiRouting = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _uiFoundationUiReactRouter() {
+  const data = require("@teambit/ui-foundation.ui.react-router.extend-path");
+
+  _uiFoundationUiReactRouter = function () {
     return data;
   };
 
@@ -79,7 +89,14 @@ function _topBarNavModule() {
   return data;
 }
 
-function TopBarNav(props) {
+function TopBarNav(_ref) {
+  let {
+    href,
+    className,
+    activeClassName,
+    children
+  } = _ref,
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children"]);
   const {
     url
   } = (0, _reactRouterDom().useRouteMatch)();
@@ -87,15 +104,12 @@ function TopBarNav(props) {
     search
   } = (0, _reactRouterDom().useLocation)(); // sticky query params
 
-  const {
-    href
-  } = props;
   const target = `${(0, _uiFoundationUiReactRouter().extendPath)(url, href)}${search}`;
-  return /*#__PURE__*/_react().default.createElement(_baseUiRouting().NavLink, (0, _extends2().default)({}, props, {
-    className: (0, _classnames().default)(props.className, _topBarNavModule().default.topBarLink),
-    activeClassName: (0, _classnames().default)(props.className, _topBarNavModule().default.active),
+  return /*#__PURE__*/_react().default.createElement(_baseUiRouting().NavLink, (0, _extends2().default)({}, rest, {
+    className: (0, _classnames().default)(className, _topBarNavModule().default.topBarLink),
+    activeClassName: (0, _classnames().default)(activeClassName, _topBarNavModule().default.active),
     href: target
-  }), /*#__PURE__*/_react().default.createElement("div", null, props.children));
+  }), /*#__PURE__*/_react().default.createElement("div", null, children));
 }
 
 //# sourceMappingURL=top-bar-nav.js.map

package/dist/ui/top-bar-nav/top-bar-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["top-bar-nav.tsx"],"names":["TopBarNav","props","url","search","href","target","className","styles","topBarLink","active","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,SAASA,SAAT,CAAmBC,KAAnB,EAAwC;AAC7C,QAAM;AAAEC,IAAAA;AAAF,MAAU,sCAAhB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAa,oCAAnB,CAF6C,CAEX;;AAClC,QAAM;AAAEC,IAAAA;AAAF,MAAWH,KAAjB;AAEA,QAAMI,MAAM,GAAI,GAAE,6CAAWH,GAAX,EAAgBE,IAAhB,CAAsB,GAAED,MAAO,EAAjD;AAEA,sBACE,+BAAC,wBAAD,+BACMF,KADN;AAEE,IAAA,SAAS,EAAE,2BAAWA,KAAK,CAACK,SAAjB,EAA4BC,2BAAOC,UAAnC,CAFb;AAGE,IAAA,eAAe,EAAE,2BAAWP,KAAK,CAACK,SAAjB,EAA4BC,2BAAOE,MAAnC,CAHnB;AAIE,IAAA,IAAI,EAAEJ;AAJR,mBAME,4CAAMJ,KAAK,CAACS,QAAZ,CANF,CADF;AAUD","sourcesContent":["import { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';\nimport classnames from 'classnames';\nimport React from 'react';\nimport { useRouteMatch, useLocation } from 'react-router-dom';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport function TopBarNav(props: NavLinkProps) {\n  const { url } = useRouteMatch();\n  const { search } = useLocation(); // sticky query params\n  const { href } = props;\n\n  const target = `${extendPath(url, href)}${search}`;\n\n  return (\n    <NavLink\n      {...props}\n      className={classnames(props.className, styles.topBarLink)}\n      activeClassName={classnames(props.className, styles.active)}\n      href={target}\n    >\n      <div>{props.children}</div>\n    </NavLink>\n  );\n}\n"]}
+{"version":3,"sources":["top-bar-nav.tsx"],"names":["TopBarNav","href","className","activeClassName","children","rest","url","search","target","styles","topBarLink","active"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIO,SAASA,SAAT,OAA4F;AAAA,MAAzE;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAR;AAAmBC,IAAAA,eAAnB;AAAoCC,IAAAA;AAApC,GAAyE;AAAA,MAAxBC,IAAwB;AACjG,QAAM;AAAEC,IAAAA;AAAF,MAAU,sCAAhB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAa,oCAAnB,CAFiG,CAE/D;;AAElC,QAAMC,MAAM,GAAI,GAAE,6CAAWF,GAAX,EAAgBL,IAAhB,CAAsB,GAAEM,MAAO,EAAjD;AAEA,sBACE,+BAAC,wBAAD,+BACMF,IADN;AAEE,IAAA,SAAS,EAAE,2BAAWH,SAAX,EAAsBO,2BAAOC,UAA7B,CAFb;AAGE,IAAA,eAAe,EAAE,2BAAWP,eAAX,EAA4BM,2BAAOE,MAAnC,CAHnB;AAIE,IAAA,IAAI,EAAEH;AAJR,mBAME,4CAAMJ,QAAN,CANF,CADF;AAUD","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useRouteMatch, useLocation } from 'react-router-dom';\nimport { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport type TopBarNavProps = {} & NavLinkProps;\n\nexport function TopBarNav({ href, className, activeClassName, children, ...rest }: TopBarNavProps) {\n  const { url } = useRouteMatch();\n  const { search } = useLocation(); // sticky query params\n\n  const target = `${extendPath(url, href)}${search}`;\n\n  return (\n    <NavLink\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </NavLink>\n  );\n}\n"]}

package/dist/ui/use-component.js

@@ -46,7 +46,7 @@ function _useComponentQuery() {
 }
 
 function useComponent(host, id) {
-  var _lanesContext$current, _lanesContext$current2;
+  var _lanesContext$viewedL, _lanesContext$viewedL2;
 
   const {
     params: {
@@ -60,9 +60,9 @@ function useComponent(host, id) {
     ignoreVersion: true
   })) || componentId;
   if (!targetId) throw new TypeError('useComponent received no component id');
-  const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.currentLane; // when on a lane, always fetch all the logs starting from the 'head' version
+  const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.viewedLane; // when on a lane, always fetch all the logs starting from the 'head' version
 
-  const logHead = lanesContext === null || lanesContext === void 0 ? void 0 : (_lanesContext$current = lanesContext.currentLane) === null || _lanesContext$current === void 0 ? void 0 : (_lanesContext$current2 = _lanesContext$current.components.find(component => component.model.id.fullName === targetId)) === null || _lanesContext$current2 === void 0 ? void 0 : _lanesContext$current2.model.id.version;
+  const logHead = lanesContext === null || lanesContext === void 0 ? void 0 : (_lanesContext$viewedL = lanesContext.viewedLane) === null || _lanesContext$viewedL === void 0 ? void 0 : (_lanesContext$viewedL2 = _lanesContext$viewedL.components.find(component => component.model.id.fullName === targetId)) === null || _lanesContext$viewedL2 === void 0 ? void 0 : _lanesContext$viewedL2.model.id.version;
   const logFilters = currentLane ? {
     log: {
       logHead

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

@@ -1 +1 @@
-{"version":3,"sources":["use-component.tsx"],"names":["useComponent","host","id","params","componentId","query","version","get","undefined","lanesContext","targetId","toString","ignoreVersion","TypeError","currentLane","logHead","components","find","component","model","fullName","logFilters","log","withVersion","includes"],"mappings":";;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAYO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAAiE;AAAA;;AACtE,QAAM;AACJC,IAAAA,MAAM,EAAE;AAAEC,MAAAA;AAAF;AADJ,MAEF,sCAFJ;AAGA,QAAMC,KAAK,GAAG,4CAAd;AACA,QAAMC,OAAO,GAAGD,KAAK,CAACE,GAAN,CAAU,SAAV,KAAwBC,SAAxC;AACA,QAAMC,YAAY,GAAG,iCAArB;AACA,QAAMC,QAAQ,GAAG,CAAAR,EAAE,SAAF,IAAAA,EAAE,WAAF,YAAAA,EAAE,CAAES,QAAJ,CAAa;AAAEC,IAAAA,aAAa,EAAE;AAAjB,GAAb,MAAyCR,WAA1D;AACA,MAAI,CAACM,QAAL,EAAe,MAAM,IAAIG,SAAJ,CAAc,uCAAd,CAAN;AACf,QAAMC,WAAW,GAAGL,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEK,WAAlC,CATsE,CAUtE;;AACA,QAAMC,OAAO,GAAGN,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEK,WAAjB,oFAAG,sBAA2BE,UAA3B,CAAsCC,IAAtC,CAA4CC,SAAD,IAAeA,SAAS,CAACC,KAAV,CAAgBjB,EAAhB,CAAmBkB,QAAnB,KAAgCV,QAA1F,CAAH,2DAAG,uBACZS,KADY,CACNjB,EADM,CACHI,OADb;AAEA,QAAMe,UAAU,GAAGP,WAAW,GAC1B;AACEQ,IAAAA,GAAG,EAAE;AACHP,MAAAA;AADG;AADP,GAD0B,GAM1BP,SANJ;AAQA,SAAO,4CAAkBe,WAAW,CAACb,QAAD,EAAWJ,OAAX,CAA7B,EAAkDL,IAAlD,EAAwDoB,UAAxD,CAAP;AACD;;AAED,SAASE,WAAT,CAAqBrB,EAArB,EAAiCI,OAAjC,EAAmD;AACjD,MAAI,CAACA,OAAL,EAAc,OAAOJ,EAAP;AACd,MAAIA,EAAE,CAACsB,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOtB,EAAP;AACtB,SAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAxB;AACD","sourcesContent":["import { useRouteMatch } from 'react-router-dom';\nimport { ComponentID } from '@teambit/component-id';\nimport { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n};\n\ntype ComponentRoute = {\n  componentId?: string;\n};\n\nexport function useComponent(host: string, id?: ComponentID): Component {\n  const {\n    params: { componentId },\n  } = useRouteMatch<ComponentRoute>();\n  const query = useQuery();\n  const version = query.get('version') || undefined;\n  const lanesContext = useLanesContext();\n  const targetId = id?.toString({ ignoreVersion: true }) || componentId;\n  if (!targetId) throw new TypeError('useComponent received no component id');\n  const currentLane = lanesContext?.currentLane;\n  // when on a lane, always fetch all the logs starting from the 'head' version\n  const logHead = lanesContext?.currentLane?.components.find((component) => component.model.id.fullName === targetId)\n    ?.model.id.version;\n  const logFilters = currentLane\n    ? {\n        log: {\n          logHead,\n        },\n      }\n    : undefined;\n\n  return useComponentQuery(withVersion(targetId, version), host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"]}
+{"version":3,"sources":["use-component.tsx"],"names":["useComponent","host","id","params","componentId","query","version","get","undefined","lanesContext","targetId","toString","ignoreVersion","TypeError","currentLane","viewedLane","logHead","components","find","component","model","fullName","logFilters","log","withVersion","includes"],"mappings":";;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAYO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAAiE;AAAA;;AACtE,QAAM;AACJC,IAAAA,MAAM,EAAE;AAAEC,MAAAA;AAAF;AADJ,MAEF,sCAFJ;AAGA,QAAMC,KAAK,GAAG,4CAAd;AACA,QAAMC,OAAO,GAAGD,KAAK,CAACE,GAAN,CAAU,SAAV,KAAwBC,SAAxC;AACA,QAAMC,YAAY,GAAG,iCAArB;AACA,QAAMC,QAAQ,GAAG,CAAAR,EAAE,SAAF,IAAAA,EAAE,WAAF,YAAAA,EAAE,CAAES,QAAJ,CAAa;AAAEC,IAAAA,aAAa,EAAE;AAAjB,GAAb,MAAyCR,WAA1D;AACA,MAAI,CAACM,QAAL,EAAe,MAAM,IAAIG,SAAJ,CAAc,uCAAd,CAAN;AACf,QAAMC,WAAW,GAAGL,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEM,UAAlC,CATsE,CAUtE;;AACA,QAAMC,OAAO,GAAGP,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEM,UAAjB,oFAAG,sBAA0BE,UAA1B,CAAqCC,IAArC,CAA2CC,SAAD,IAAeA,SAAS,CAACC,KAAV,CAAgBlB,EAAhB,CAAmBmB,QAAnB,KAAgCX,QAAzF,CAAH,2DAAG,uBACZU,KADY,CACNlB,EADM,CACHI,OADb;AAEA,QAAMgB,UAAU,GAAGR,WAAW,GAC1B;AACES,IAAAA,GAAG,EAAE;AACHP,MAAAA;AADG;AADP,GAD0B,GAM1BR,SANJ;AAQA,SAAO,4CAAkBgB,WAAW,CAACd,QAAD,EAAWJ,OAAX,CAA7B,EAAkDL,IAAlD,EAAwDqB,UAAxD,CAAP;AACD;;AAED,SAASE,WAAT,CAAqBtB,EAArB,EAAiCI,OAAjC,EAAmD;AACjD,MAAI,CAACA,OAAL,EAAc,OAAOJ,EAAP;AACd,MAAIA,EAAE,CAACuB,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOvB,EAAP;AACtB,SAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAxB;AACD","sourcesContent":["import { useRouteMatch } from 'react-router-dom';\nimport { ComponentID } from '@teambit/component-id';\nimport { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n};\n\ntype ComponentRoute = {\n  componentId?: string;\n};\n\nexport function useComponent(host: string, id?: ComponentID): Component {\n  const {\n    params: { componentId },\n  } = useRouteMatch<ComponentRoute>();\n  const query = useQuery();\n  const version = query.get('version') || undefined;\n  const lanesContext = useLanesContext();\n  const targetId = id?.toString({ ignoreVersion: true }) || componentId;\n  if (!targetId) throw new TypeError('useComponent received no component id');\n  const currentLane = lanesContext?.viewedLane;\n  // when on a lane, always fetch all the logs starting from the 'head' version\n  const logHead = lanesContext?.viewedLane?.components.find((component) => component.model.id.fullName === targetId)\n    ?.model.id.version;\n  const logFilters = currentLane\n    ? {\n        log: {\n          logHead,\n        },\n      }\n    : undefined;\n\n  return useComponentQuery(withVersion(targetId, version), host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.692",
+  "version": "0.0.695",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.692"
+    "version": "0.0.695"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -26,43 +26,47 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
+    "@teambit/base-ui.layout.breakpoints": "1.0.0",
     "@teambit/base-ui.routing.routing-provider": "1.0.0",
+    "@teambit/design.elements.icon": "1.0.5",
+    "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.402",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
-    "@teambit/aspect-loader": "0.0.692",
+    "@teambit/aspect-loader": "0.0.695",
     "@teambit/legacy-bit-id": "0.0.399",
     "@teambit/toolbox.string.capitalize": "0.0.483",
-    "@teambit/cli": "0.0.463",
-    "@teambit/config": "0.0.476",
-    "@teambit/express": "0.0.559",
-    "@teambit/graphql": "0.0.692",
+    "@teambit/cli": "0.0.464",
+    "@teambit/config": "0.0.477",
+    "@teambit/express": "0.0.560",
+    "@teambit/graphql": "0.0.695",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.692",
-    "@teambit/preview": "0.0.692",
-    "@teambit/pubsub": "0.0.692",
+    "@teambit/command-bar": "0.0.695",
+    "@teambit/preview": "0.0.695",
+    "@teambit/pubsub": "0.0.695",
     "@teambit/ui-foundation.ui.is-browser": "0.0.486",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.486",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.488",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.114",
-    "@teambit/ui": "0.0.692",
-    "@teambit/component-issues": "0.0.48",
+    "@teambit/ui": "0.0.695",
+    "@teambit/component-issues": "0.0.49",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
     "@teambit/cli-table": "0.0.33",
-    "@teambit/component-descriptor": "0.0.27",
-    "@teambit/lanes.ui.lanes": "0.0.27",
+    "@teambit/component-descriptor": "0.0.28",
+    "@teambit/lanes.ui.lanes": "0.0.29",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.486",
-    "@teambit/design.ui.pages.not-found": "0.0.354",
-    "@teambit/design.ui.pages.server-error": "0.0.354",
     "@teambit/design.ui.empty-box": "0.0.353",
     "@teambit/harmony.ui.aspect-box": "0.0.486",
-    "@teambit/compositions": "0.0.692",
-    "@teambit/deprecation": "0.0.692",
-    "@teambit/envs": "0.0.692",
+    "@teambit/design.ui.pages.not-found": "0.0.354",
+    "@teambit/design.ui.pages.server-error": "0.0.354",
+    "@teambit/compositions": "0.0.695",
+    "@teambit/deprecation": "0.0.695",
+    "@teambit/envs": "0.0.695",
     "@teambit/legacy-component-log": "0.0.392",
-    "@teambit/component.ui.version-dropdown": "0.0.512",
+    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.486",
+    "@teambit/component.ui.version-dropdown": "0.0.514",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.114",
-    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.486"
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -81,7 +85,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.241",
+    "@teambit/legacy": "1.0.242",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -109,7 +113,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.241",
+        "@teambit/legacy": "1.0.242",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1648437892896.js → preview-1648696872583.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.692/dist/component.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.692/dist/component.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.695/dist/component.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.695/dist/component.docs.mdx')]

package/section/section.tsx

@@ -4,5 +4,9 @@ import { RouteProps } from 'react-router-dom';
 export interface Section {
   route: RouteProps;
   navigationLink: NavLinkProps;
+  /**
+   * text to be used in the mobile res dropdown
+   */
+  displayName?: string;
   order?: number;
 }

package/ui/menu/menu-nav.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
-
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
 import { TopBarNav } from '../top-bar-nav';
 import styles from './menu.module.scss';
 import { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
 
-export function MenuNav({ navigationSlot }: { navigationSlot: OrderedNavigationSlot }) {
-  const plugins = navigationSlot.toArray().sort(sortFn);
+export type MenuNavProps = {
+  navigationSlot: OrderedNavigationSlot;
+} & React.HTMLAttributes<HTMLElement>;
+
+export function MenuNav({ navigationSlot, className }: MenuNavProps) {
+  const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
 
   return (
-    <nav className={styles.navigation}>
-      {plugins.map(([id, menuItem]) => (
-        <TopBarNav key={id} {...menuItem.props} />
-      ))}
+    <nav className={classnames(styles.navigation, styles.desktopNav, className)}>
+      {plugins.map(([id, menuItem]) => {
+        return <TopBarNav key={id} {...menuItem.props} />;
+      })}
     </nav>
   );
 }

package/ui/menu/menu.module.scss

@@ -1,3 +1,5 @@
+@import '~@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
+
 .topBar {
   display: flex;
   justify-content: space-between;
@@ -13,19 +15,36 @@
 }
 
 .navigation {
-  display: flex;
   list-style: none;
   height: 100%;
   padding-left: 28px;
-  @media screen and (max-width: 768px) {
-    padding-left: 6px;
+  @media screen and (max-width: $br-md) {
+    padding-left: 0;
   }
 
-  > li {
+  li {
     display: block;
     margin-right: 16px;
     height: 100%;
   }
+
+  // show desktop nav on larger res
+  &.desktopNav {
+    display: flex;
+    @media screen and (max-width: $br-lg) {
+      display: none;
+    }
+  }
+
+  // show mobile nav on smaller res
+  &.mobileNav {
+    align-items: center;
+    display: none;
+    @media screen and (max-width: $br-lg) {
+      display: flex;
+      margin-right: 8px;
+    }
+  }
 }
 
 .rightSide {
@@ -38,6 +57,11 @@
       margin-right: 16px;
     }
   }
+  @media screen and (max-width: $br-lg) {
+    > * {
+      margin-right: 8px;
+    }
+  }
   .widgets {
     height: 100%;
     margin-right: 20px;
@@ -51,6 +75,9 @@
         }
       }
     }
+    @media screen and (max-width: $br-lg) {
+      display: none; 
+    }
   }
   .widget {
     font-size: 17px;

package/ui/menu/menu.tsx

@@ -13,6 +13,7 @@ import { LegacyComponentLog } from '@teambit/legacy-component-log';
 import type { ComponentModel } from '../component-model';
 import { useComponent } from '../use-component';
 import { MenuNav } from './menu-nav';
+import { MobileMenuNav } from './mobile-menu-nav';
 import styles from './menu.module.scss';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 
@@ -46,6 +47,7 @@ export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot
     <div className={classnames(styles.topBar, className)}>
       <div className={styles.leftSide}>
         <MenuNav navigationSlot={navigationSlot} />
+        <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />
       </div>
       <div className={styles.rightSide}>
         <div className={styles.widgets}>
@@ -70,7 +72,7 @@ function VersionRelatedDropdowns({
   const location = useLocation();
   const isNew = component.tags.isEmpty();
   const lanesContext = useLanesContext();
-  const currentLane = lanesContext?.currentLane;
+  const currentLane = lanesContext?.viewedLane;
   const { logs } = component;
   const isWorkspace = host === 'teambit.workspace/workspace';
 

package/ui/menu/mobile-menu-nav.module.scss

@@ -0,0 +1,70 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+@import '~@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
+
+.mobileMenuLink {
+  margin: 0;
+  transition: background-color 300ms ease-in-out;
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+  @media screen and (max-width: $br-md) {
+    height: 40px;
+    font-size: 16px;
+  }
+}
+
+.mobileMenu {
+  > nav {
+    display: flex;
+    flex-direction: column;
+  }
+  .active {
+    background-color: var(--bit-accent-bg, #eceaff);
+    color: inherit;
+    &:after {
+      background-color: unset;
+    }
+  }
+  .close {
+    display: none;
+  }
+  @media screen and (max-width: $br-md) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0;
+    z-index: $modal-z-index;
+    .close {
+      align-self: self-end;
+      padding: 8px;
+      display: flex;
+      &:hover {
+        background-color: var(--bit-bg-heavy, #f6f6f6);
+      }
+    }
+  }
+}
+
+.placeholder {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 30px;
+  border-radius: 6px;
+  user-select: none;
+  cursor: pointer;
+  transition: background-color 300ms ease-in-out;
+  border: 1px solid var(--bit-border-color, #babec9);
+  [data-open='true'] & {
+    color: var(--bit-accent-color, #6c5ce7);
+  }
+  > span {
+    padding-left: 8px;
+  }
+  &:hover {
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+}

package/ui/menu/mobile-menu-nav.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import classnames from 'classnames';
+import { Icon } from '@teambit/design.elements.icon';
+import { Dropdown } from '@teambit/design.inputs.dropdown';
+import { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';
+import { TopBarNav } from '../top-bar-nav';
+import styles from './menu.module.scss';
+import mobileStyles from './mobile-menu-nav.module.scss';
+import { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
+
+export function MobileMenuNav({
+  navigationSlot,
+  widgetSlot,
+  className,
+}: {
+  navigationSlot: OrderedNavigationSlot;
+  widgetSlot: OrderedNavigationSlot;
+  className?: string;
+}) {
+  const { url } = useRouteMatch();
+  const totalSlots = useMemo(
+    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],
+    [navigationSlot, widgetSlot]
+  );
+
+  return (
+    <Dropdown
+      // @ts-ignore - mismatch between @types/react
+      placeholder={<Placeholder slots={totalSlots} baseUrl={url} />}
+      className={classnames(styles.navigation, styles.mobileNav, className)}
+      dropClass={mobileStyles.mobileMenu}
+    >
+      <nav>
+        <Icon of="x-thick" className={mobileStyles.close} />
+        {totalSlots.map(([id, menuItem]) => {
+          return (
+            <TopBarNav
+              key={id}
+              {...menuItem.props}
+              className={mobileStyles.mobileMenuLink}
+              activeClassName={mobileStyles.active}
+            >
+              {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}
+            </TopBarNav>
+          );
+        })}
+      </nav>
+    </Dropdown>
+  );
+}
+
+function sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {
+  // 0  - equal
+  // <0 - first < second
+  // >0 - first > second
+
+  return (first ?? 0) - (second ?? 0);
+}
+
+type PlaceholderProps = {
+  slots: [string, NavPlugin][];
+  baseUrl?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function Placeholder({ slots, baseUrl = '', ...rest }: PlaceholderProps) {
+  return (
+    <div {...rest} className={mobileStyles.placeholder}>
+      <Switch>
+        {slots?.map(([id, menuItem]) => {
+          const path = extendPath(baseUrl, menuItem?.props?.href);
+          return (
+            <Route key={id} exact path={path}>
+              {typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName}
+            </Route>
+          );
+        })}
+      </Switch>
+      <Icon of="fat-arrow-down" />
+    </div>
+  );
+}

package/ui/menu/nav-plugin.tsx

@@ -5,8 +5,12 @@ import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
 import { LaneModel } from '@teambit/lanes.ui.lanes';
 import { ComponentModel } from '../../ui';
 
+export type NavPluginProps = {
+  displayName?: string;
+} & NavLinkProps;
+
 export type NavPlugin = {
-  props: NavLinkProps;
+  props: NavPluginProps;
   order?: number;
 };
 

package/ui/top-bar-nav/top-bar-nav.tsx

@@ -1,26 +1,27 @@
-import { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-import { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';
-import classnames from 'classnames';
 import React from 'react';
+import classnames from 'classnames';
 import { useRouteMatch, useLocation } from 'react-router-dom';
+import { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';
 
 import styles from './top-bar-nav.module.scss';
 
-export function TopBarNav(props: NavLinkProps) {
+export type TopBarNavProps = {} & NavLinkProps;
+
+export function TopBarNav({ href, className, activeClassName, children, ...rest }: TopBarNavProps) {
   const { url } = useRouteMatch();
   const { search } = useLocation(); // sticky query params
-  const { href } = props;
 
   const target = `${extendPath(url, href)}${search}`;
 
   return (
     <NavLink
-      {...props}
-      className={classnames(props.className, styles.topBarLink)}
-      activeClassName={classnames(props.className, styles.active)}
+      {...rest}
+      className={classnames(className, styles.topBarLink)}
+      activeClassName={classnames(activeClassName, styles.active)}
       href={target}
     >
-      <div>{props.children}</div>
+      <div>{children}</div>
     </NavLink>
   );
 }

package/ui/use-component.tsx

@@ -26,9 +26,9 @@ export function useComponent(host: string, id?: ComponentID): Component {
   const lanesContext = useLanesContext();
   const targetId = id?.toString({ ignoreVersion: true }) || componentId;
   if (!targetId) throw new TypeError('useComponent received no component id');
-  const currentLane = lanesContext?.currentLane;
+  const currentLane = lanesContext?.viewedLane;
   // when on a lane, always fetch all the logs starting from the 'head' version
-  const logHead = lanesContext?.currentLane?.components.find((component) => component.model.id.fullName === targetId)
+  const logHead = lanesContext?.viewedLane?.components.find((component) => component.model.id.fullName === targetId)
     ?.model.id.version;
   const logFilters = currentLane
     ? {