@teambit/component 0.0.958 → 0.0.960

package/component-map/component-map.ts

@@ -53,6 +53,23 @@ export class ComponentMap<T> {
     return new ComponentMap(new Map(tuples));
   }
 
+  /**
+   * map entries and return a new component map.
+   */
+  async asyncMap<NewType>(
+    predicate: (value: T, component: Component) => Promise<NewType>
+  ): Promise<ComponentMap<NewType>> {
+    const tuplesP = this.toArray().map(async ([component, value]) => {
+      const newValue = await predicate(value, component);
+      return [component.id.toString(), [component, newValue]];
+    });
+
+    const tuples = await Promise.all(tuplesP);
+
+    // @ts-ignore TODO: fix this type
+    return new ComponentMap(new Map(tuples));
+  }
+
   /**
    * similar to Array.forEach, but here you get both, the value and the component.
    */

package/dist/component-map/component-map.d.ts

@@ -27,6 +27,10 @@ export declare class ComponentMap<T> {
      * map entries and return a new component map.
      */
     map<NewType>(predicate: (value: T, component: Component) => NewType): ComponentMap<NewType>;
+    /**
+     * map entries and return a new component map.
+     */
+    asyncMap<NewType>(predicate: (value: T, component: Component) => Promise<NewType>): Promise<ComponentMap<NewType>>;
     /**
      * similar to Array.forEach, but here you get both, the value and the component.
      */

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

@@ -1,6 +1,7 @@
 "use strict";
 
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.promise.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -57,6 +58,20 @@ class ComponentMap {
     return new ComponentMap(new Map(tuples));
   }
 
+  /**
+   * map entries and return a new component map.
+   */
+  async asyncMap(predicate) {
+    const tuplesP = this.toArray().map(async ([component, value]) => {
+      const newValue = await predicate(value, component);
+      return [component.id.toString(), [component, newValue]];
+    });
+    const tuples = await Promise.all(tuplesP);
+
+    // @ts-ignore TODO: fix this type
+    return new ComponentMap(new Map(tuples));
+  }
+
   /**
    * similar to Array.forEach, but here you get both, the value and the component.
    */

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

@@ -1 +1 @@
-{"version":3,"names":["ComponentMap","constructor","hashMap","byComponent","component","get","id","toString","components","toArray","map","getValueByComponentId","componentId","tuple","Array","from","values","predicate","tuples","value","newValue","Map","forEach","flattenValue","reduce","acc","concat","filter","asMap","keys","create","rawMap","newMap","data","as"],"sources":["component-map.ts"],"sourcesContent":["import { ComponentID } from '@teambit/component-id';\nimport { Component } from '../component';\n\n/**\n * allows to index components -> values.\n */\nexport class ComponentMap<T> {\n  constructor(readonly hashMap: Map<string, [Component, T]>) {}\n\n  /**\n   * @deprecated please use `get` instead\n   */\n  byComponent(component: Component) {\n    return this.hashMap.get(component.id.toString());\n  }\n\n  get components() {\n    return this.toArray().map(([component]) => component);\n  }\n\n  /**\n   * get a value for a component.\n   */\n  get(component: Component) {\n    return this.hashMap.get(component.id.toString());\n  }\n\n  /**\n   * get a value by the component-id\n   */\n  getValueByComponentId(componentId: ComponentID): T | null {\n    const tuple = this.hashMap.get(componentId.toString());\n    if (!tuple) return null;\n    return tuple[1];\n  }\n\n  /**\n   * returns an array.\n   */\n  toArray() {\n    return Array.from(this.hashMap.values());\n  }\n\n  /**\n   * map entries and return a new component map.\n   */\n  map<NewType>(predicate: (value: T, component: Component) => NewType): ComponentMap<NewType> {\n    const tuples: [string, [Component, NewType]][] = this.toArray().map(([component, value]) => {\n      const newValue = predicate(value, component);\n      return [component.id.toString(), [component, newValue]];\n    });\n\n    return new ComponentMap(new Map(tuples));\n  }\n\n  /**\n   * similar to Array.forEach, but here you get both, the value and the component.\n   */\n  forEach(predicate: (value: T, component: Component) => void): void {\n    this.toArray().forEach(([component, value]) => {\n      predicate(value, component);\n    });\n  }\n\n  /**\n   * flatten values of all components into a single array.\n   */\n  flattenValue(): T[] {\n    return this.toArray().reduce((acc: T[], [, value]) => {\n      acc = acc.concat(value);\n      return acc;\n    }, []);\n  }\n\n  /**\n   * filter all components with empty values and return a new map.\n   */\n  filter(predicate: (value: T) => boolean): ComponentMap<T> {\n    const tuples = this.toArray().filter(([, value]) => {\n      return predicate(value);\n    });\n\n    const asMap: [string, [Component, T]][] = tuples.map(([component, value]) => {\n      return [component.id.toString(), [component, value]];\n    });\n\n    return new ComponentMap(new Map(asMap));\n  }\n\n  /**\n   * get all component ids.\n   */\n  keys() {\n    return this.hashMap.keys();\n  }\n\n  static create<U>(rawMap: [Component, U][]) {\n    const newMap: [string, [Component, U]][] = rawMap.map(([component, data]) => {\n      return [component.id.toString(), [component, data]];\n    });\n    return new ComponentMap(new Map(newMap));\n  }\n\n  /**\n   * create a component map from components and a value predicate.\n   * @param components components to zip into the map.\n   * @param predicate predicate for returning desired value.\n   */\n  static as<U>(components: Component[], predicate: (component: Component) => U): ComponentMap<U> {\n    const tuples: [string, [Component, U]][] = components.map((component) => {\n      return [component.id.toString(), [component, predicate(component)]];\n    });\n\n    return new ComponentMap(new Map(tuples));\n  }\n}\n"],"mappings":";;;;;;;AAGA;AACA;AACA;AACO,MAAMA,YAAY,CAAI;EAC3BC,WAAW,CAAUC,OAAoC,EAAE;IAAA,KAAtCA,OAAoC,GAApCA,OAAoC;EAAG;;EAE5D;AACF;AACA;EACEC,WAAW,CAACC,SAAoB,EAAE;IAChC,OAAO,IAAI,CAACF,OAAO,CAACG,GAAG,CAACD,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,CAAC;EAClD;EAEA,IAAIC,UAAU,GAAG;IACf,OAAO,IAAI,CAACC,OAAO,EAAE,CAACC,GAAG,CAAC,CAAC,CAACN,SAAS,CAAC,KAAKA,SAAS,CAAC;EACvD;;EAEA;AACF;AACA;EACEC,GAAG,CAACD,SAAoB,EAAE;IACxB,OAAO,IAAI,CAACF,OAAO,CAACG,GAAG,CAACD,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,CAAC;EAClD;;EAEA;AACF;AACA;EACEI,qBAAqB,CAACC,WAAwB,EAAY;IACxD,MAAMC,KAAK,GAAG,IAAI,CAACX,OAAO,CAACG,GAAG,CAACO,WAAW,CAACL,QAAQ,EAAE,CAAC;IACtD,IAAI,CAACM,KAAK,EAAE,OAAO,IAAI;IACvB,OAAOA,KAAK,CAAC,CAAC,CAAC;EACjB;;EAEA;AACF;AACA;EACEJ,OAAO,GAAG;IACR,OAAOK,KAAK,CAACC,IAAI,CAAC,IAAI,CAACb,OAAO,CAACc,MAAM,EAAE,CAAC;EAC1C;;EAEA;AACF;AACA;EACEN,GAAG,CAAUO,SAAsD,EAAyB;IAC1F,MAAMC,MAAwC,GAAG,IAAI,CAACT,OAAO,EAAE,CAACC,GAAG,CAAC,CAAC,CAACN,SAAS,EAAEe,KAAK,CAAC,KAAK;MAC1F,MAAMC,QAAQ,GAAGH,SAAS,CAACE,KAAK,EAAEf,SAAS,CAAC;MAC5C,OAAO,CAACA,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEgB,QAAQ,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,OAAO,IAAIpB,YAAY,CAAC,IAAIqB,GAAG,CAACH,MAAM,CAAC,CAAC;EAC1C;;EAEA;AACF;AACA;EACEI,OAAO,CAACL,SAAmD,EAAQ;IACjE,IAAI,CAACR,OAAO,EAAE,CAACa,OAAO,CAAC,CAAC,CAAClB,SAAS,EAAEe,KAAK,CAAC,KAAK;MAC7CF,SAAS,CAACE,KAAK,EAAEf,SAAS,CAAC;IAC7B,CAAC,CAAC;EACJ;;EAEA;AACF;AACA;EACEmB,YAAY,GAAQ;IAClB,OAAO,IAAI,CAACd,OAAO,EAAE,CAACe,MAAM,CAAC,CAACC,GAAQ,EAAE,GAAGN,KAAK,CAAC,KAAK;MACpDM,GAAG,GAAGA,GAAG,CAACC,MAAM,CAACP,KAAK,CAAC;MACvB,OAAOM,GAAG;IACZ,CAAC,EAAE,EAAE,CAAC;EACR;;EAEA;AACF;AACA;EACEE,MAAM,CAACV,SAAgC,EAAmB;IACxD,MAAMC,MAAM,GAAG,IAAI,CAACT,OAAO,EAAE,CAACkB,MAAM,CAAC,CAAC,GAAGR,KAAK,CAAC,KAAK;MAClD,OAAOF,SAAS,CAACE,KAAK,CAAC;IACzB,CAAC,CAAC;IAEF,MAAMS,KAAiC,GAAGV,MAAM,CAACR,GAAG,CAAC,CAAC,CAACN,SAAS,EAAEe,KAAK,CAAC,KAAK;MAC3E,OAAO,CAACf,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEe,KAAK,CAAC,CAAC;IACtD,CAAC,CAAC;IAEF,OAAO,IAAInB,YAAY,CAAC,IAAIqB,GAAG,CAACO,KAAK,CAAC,CAAC;EACzC;;EAEA;AACF;AACA;EACEC,IAAI,GAAG;IACL,OAAO,IAAI,CAAC3B,OAAO,CAAC2B,IAAI,EAAE;EAC5B;EAEA,OAAOC,MAAM,CAAIC,MAAwB,EAAE;IACzC,MAAMC,MAAkC,GAAGD,MAAM,CAACrB,GAAG,CAAC,CAAC,CAACN,SAAS,EAAE6B,IAAI,CAAC,KAAK;MAC3E,OAAO,CAAC7B,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAE6B,IAAI,CAAC,CAAC;IACrD,CAAC,CAAC;IACF,OAAO,IAAIjC,YAAY,CAAC,IAAIqB,GAAG,CAACW,MAAM,CAAC,CAAC;EAC1C;;EAEA;AACF;AACA;AACA;AACA;EACE,OAAOE,EAAE,CAAI1B,UAAuB,EAAES,SAAsC,EAAmB;IAC7F,MAAMC,MAAkC,GAAGV,UAAU,CAACE,GAAG,CAAEN,SAAS,IAAK;MACvE,OAAO,CAACA,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEa,SAAS,CAACb,SAAS,CAAC,CAAC,CAAC;IACrE,CAAC,CAAC;IAEF,OAAO,IAAIJ,YAAY,CAAC,IAAIqB,GAAG,CAACH,MAAM,CAAC,CAAC;EAC1C;AACF;AAAC"}
+{"version":3,"names":["ComponentMap","constructor","hashMap","byComponent","component","get","id","toString","components","toArray","map","getValueByComponentId","componentId","tuple","Array","from","values","predicate","tuples","value","newValue","Map","asyncMap","tuplesP","Promise","all","forEach","flattenValue","reduce","acc","concat","filter","asMap","keys","create","rawMap","newMap","data","as"],"sources":["component-map.ts"],"sourcesContent":["import { ComponentID } from '@teambit/component-id';\nimport { Component } from '../component';\n\n/**\n * allows to index components -> values.\n */\nexport class ComponentMap<T> {\n  constructor(readonly hashMap: Map<string, [Component, T]>) {}\n\n  /**\n   * @deprecated please use `get` instead\n   */\n  byComponent(component: Component) {\n    return this.hashMap.get(component.id.toString());\n  }\n\n  get components() {\n    return this.toArray().map(([component]) => component);\n  }\n\n  /**\n   * get a value for a component.\n   */\n  get(component: Component) {\n    return this.hashMap.get(component.id.toString());\n  }\n\n  /**\n   * get a value by the component-id\n   */\n  getValueByComponentId(componentId: ComponentID): T | null {\n    const tuple = this.hashMap.get(componentId.toString());\n    if (!tuple) return null;\n    return tuple[1];\n  }\n\n  /**\n   * returns an array.\n   */\n  toArray() {\n    return Array.from(this.hashMap.values());\n  }\n\n  /**\n   * map entries and return a new component map.\n   */\n  map<NewType>(predicate: (value: T, component: Component) => NewType): ComponentMap<NewType> {\n    const tuples: [string, [Component, NewType]][] = this.toArray().map(([component, value]) => {\n      const newValue = predicate(value, component);\n      return [component.id.toString(), [component, newValue]];\n    });\n\n    return new ComponentMap(new Map(tuples));\n  }\n\n  /**\n   * map entries and return a new component map.\n   */\n  async asyncMap<NewType>(\n    predicate: (value: T, component: Component) => Promise<NewType>\n  ): Promise<ComponentMap<NewType>> {\n    const tuplesP = this.toArray().map(async ([component, value]) => {\n      const newValue = await predicate(value, component);\n      return [component.id.toString(), [component, newValue]];\n    });\n\n    const tuples = await Promise.all(tuplesP);\n\n    // @ts-ignore TODO: fix this type\n    return new ComponentMap(new Map(tuples));\n  }\n\n  /**\n   * similar to Array.forEach, but here you get both, the value and the component.\n   */\n  forEach(predicate: (value: T, component: Component) => void): void {\n    this.toArray().forEach(([component, value]) => {\n      predicate(value, component);\n    });\n  }\n\n  /**\n   * flatten values of all components into a single array.\n   */\n  flattenValue(): T[] {\n    return this.toArray().reduce((acc: T[], [, value]) => {\n      acc = acc.concat(value);\n      return acc;\n    }, []);\n  }\n\n  /**\n   * filter all components with empty values and return a new map.\n   */\n  filter(predicate: (value: T) => boolean): ComponentMap<T> {\n    const tuples = this.toArray().filter(([, value]) => {\n      return predicate(value);\n    });\n\n    const asMap: [string, [Component, T]][] = tuples.map(([component, value]) => {\n      return [component.id.toString(), [component, value]];\n    });\n\n    return new ComponentMap(new Map(asMap));\n  }\n\n  /**\n   * get all component ids.\n   */\n  keys() {\n    return this.hashMap.keys();\n  }\n\n  static create<U>(rawMap: [Component, U][]) {\n    const newMap: [string, [Component, U]][] = rawMap.map(([component, data]) => {\n      return [component.id.toString(), [component, data]];\n    });\n    return new ComponentMap(new Map(newMap));\n  }\n\n  /**\n   * create a component map from components and a value predicate.\n   * @param components components to zip into the map.\n   * @param predicate predicate for returning desired value.\n   */\n  static as<U>(components: Component[], predicate: (component: Component) => U): ComponentMap<U> {\n    const tuples: [string, [Component, U]][] = components.map((component) => {\n      return [component.id.toString(), [component, predicate(component)]];\n    });\n\n    return new ComponentMap(new Map(tuples));\n  }\n}\n"],"mappings":";;;;;;;;AAGA;AACA;AACA;AACO,MAAMA,YAAY,CAAI;EAC3BC,WAAW,CAAUC,OAAoC,EAAE;IAAA,KAAtCA,OAAoC,GAApCA,OAAoC;EAAG;;EAE5D;AACF;AACA;EACEC,WAAW,CAACC,SAAoB,EAAE;IAChC,OAAO,IAAI,CAACF,OAAO,CAACG,GAAG,CAACD,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,CAAC;EAClD;EAEA,IAAIC,UAAU,GAAG;IACf,OAAO,IAAI,CAACC,OAAO,EAAE,CAACC,GAAG,CAAC,CAAC,CAACN,SAAS,CAAC,KAAKA,SAAS,CAAC;EACvD;;EAEA;AACF;AACA;EACEC,GAAG,CAACD,SAAoB,EAAE;IACxB,OAAO,IAAI,CAACF,OAAO,CAACG,GAAG,CAACD,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,CAAC;EAClD;;EAEA;AACF;AACA;EACEI,qBAAqB,CAACC,WAAwB,EAAY;IACxD,MAAMC,KAAK,GAAG,IAAI,CAACX,OAAO,CAACG,GAAG,CAACO,WAAW,CAACL,QAAQ,EAAE,CAAC;IACtD,IAAI,CAACM,KAAK,EAAE,OAAO,IAAI;IACvB,OAAOA,KAAK,CAAC,CAAC,CAAC;EACjB;;EAEA;AACF;AACA;EACEJ,OAAO,GAAG;IACR,OAAOK,KAAK,CAACC,IAAI,CAAC,IAAI,CAACb,OAAO,CAACc,MAAM,EAAE,CAAC;EAC1C;;EAEA;AACF;AACA;EACEN,GAAG,CAAUO,SAAsD,EAAyB;IAC1F,MAAMC,MAAwC,GAAG,IAAI,CAACT,OAAO,EAAE,CAACC,GAAG,CAAC,CAAC,CAACN,SAAS,EAAEe,KAAK,CAAC,KAAK;MAC1F,MAAMC,QAAQ,GAAGH,SAAS,CAACE,KAAK,EAAEf,SAAS,CAAC;MAC5C,OAAO,CAACA,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEgB,QAAQ,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,OAAO,IAAIpB,YAAY,CAAC,IAAIqB,GAAG,CAACH,MAAM,CAAC,CAAC;EAC1C;;EAEA;AACF;AACA;EACE,MAAMI,QAAQ,CACZL,SAA+D,EAC/B;IAChC,MAAMM,OAAO,GAAG,IAAI,CAACd,OAAO,EAAE,CAACC,GAAG,CAAC,OAAO,CAACN,SAAS,EAAEe,KAAK,CAAC,KAAK;MAC/D,MAAMC,QAAQ,GAAG,MAAMH,SAAS,CAACE,KAAK,EAAEf,SAAS,CAAC;MAClD,OAAO,CAACA,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEgB,QAAQ,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAMF,MAAM,GAAG,MAAMM,OAAO,CAACC,GAAG,CAACF,OAAO,CAAC;;IAEzC;IACA,OAAO,IAAIvB,YAAY,CAAC,IAAIqB,GAAG,CAACH,MAAM,CAAC,CAAC;EAC1C;;EAEA;AACF;AACA;EACEQ,OAAO,CAACT,SAAmD,EAAQ;IACjE,IAAI,CAACR,OAAO,EAAE,CAACiB,OAAO,CAAC,CAAC,CAACtB,SAAS,EAAEe,KAAK,CAAC,KAAK;MAC7CF,SAAS,CAACE,KAAK,EAAEf,SAAS,CAAC;IAC7B,CAAC,CAAC;EACJ;;EAEA;AACF;AACA;EACEuB,YAAY,GAAQ;IAClB,OAAO,IAAI,CAAClB,OAAO,EAAE,CAACmB,MAAM,CAAC,CAACC,GAAQ,EAAE,GAAGV,KAAK,CAAC,KAAK;MACpDU,GAAG,GAAGA,GAAG,CAACC,MAAM,CAACX,KAAK,CAAC;MACvB,OAAOU,GAAG;IACZ,CAAC,EAAE,EAAE,CAAC;EACR;;EAEA;AACF;AACA;EACEE,MAAM,CAACd,SAAgC,EAAmB;IACxD,MAAMC,MAAM,GAAG,IAAI,CAACT,OAAO,EAAE,CAACsB,MAAM,CAAC,CAAC,GAAGZ,KAAK,CAAC,KAAK;MAClD,OAAOF,SAAS,CAACE,KAAK,CAAC;IACzB,CAAC,CAAC;IAEF,MAAMa,KAAiC,GAAGd,MAAM,CAACR,GAAG,CAAC,CAAC,CAACN,SAAS,EAAEe,KAAK,CAAC,KAAK;MAC3E,OAAO,CAACf,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEe,KAAK,CAAC,CAAC;IACtD,CAAC,CAAC;IAEF,OAAO,IAAInB,YAAY,CAAC,IAAIqB,GAAG,CAACW,KAAK,CAAC,CAAC;EACzC;;EAEA;AACF;AACA;EACEC,IAAI,GAAG;IACL,OAAO,IAAI,CAAC/B,OAAO,CAAC+B,IAAI,EAAE;EAC5B;EAEA,OAAOC,MAAM,CAAIC,MAAwB,EAAE;IACzC,MAAMC,MAAkC,GAAGD,MAAM,CAACzB,GAAG,CAAC,CAAC,CAACN,SAAS,EAAEiC,IAAI,CAAC,KAAK;MAC3E,OAAO,CAACjC,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEiC,IAAI,CAAC,CAAC;IACrD,CAAC,CAAC;IACF,OAAO,IAAIrC,YAAY,CAAC,IAAIqB,GAAG,CAACe,MAAM,CAAC,CAAC;EAC1C;;EAEA;AACF;AACA;AACA;AACA;EACE,OAAOE,EAAE,CAAI9B,UAAuB,EAAES,SAAsC,EAAmB;IAC7F,MAAMC,MAAkC,GAAGV,UAAU,CAACE,GAAG,CAAEN,SAAS,IAAK;MACvE,OAAO,CAACA,SAAS,CAACE,EAAE,CAACC,QAAQ,EAAE,EAAE,CAACH,SAAS,EAAEa,SAAS,CAACb,SAAS,CAAC,CAAC,CAAC;IACrE,CAAC,CAAC;IAEF,OAAO,IAAIJ,YAAY,CAAC,IAAIqB,GAAG,CAACH,MAAM,CAAC,CAAC;EAC1C;AACF;AAAC"}

package/dist/{preview-1673580548831.js → preview-1673926142131.js}

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

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

@@ -13,5 +13,9 @@ export declare type MenuNavProps = {
     widgetSlot?: OrderedNavigationSlot;
     navPlugins?: [string, NavPlugin][];
     widgetPlugins?: [string, NavPlugin][];
+    /**
+     * A className to pass to the secondary nav, i.e dropdown
+     */
+    secondaryNavClassName?: string;
 } & React.HTMLAttributes<HTMLElement>;
-export declare function CollapsibleMenuNav({ navigationSlot, widgetSlot, navPlugins, widgetPlugins, className, }: MenuNavProps): JSX.Element;
+export declare function CollapsibleMenuNav({ navigationSlot, widgetSlot, navPlugins, widgetPlugins, className, secondaryNavClassName, children, }: MenuNavProps): JSX.Element;

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

@@ -65,7 +65,9 @@ function CollapsibleMenuNav({
   widgetSlot,
   navPlugins = [],
   widgetPlugins = [],
-  className
+  className,
+  secondaryNavClassName,
+  children
 }) {
   const plugins = (0, _react().useMemo)(() => {
     const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot === null || navigationSlot === void 0 ? void 0 : navigationSlot.toArray();
@@ -88,23 +90,25 @@ function CollapsibleMenuNav({
         isInMenu
       }) {
         const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;
-        return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
+        return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({}, menuItem.props, {
           className: (0, _classnames().default)(menuItem.props.className, _menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder),
           key: id
-        }, menuItem.props), widgetDisplayText || menuItem.props.children);
+        }), widgetDisplayText || menuItem.props.children);
       },
-      style: _objectSpread(_objectSpread({}, firstWidgetStyle), lastPluginStyle)
+      style: _objectSpread(_objectSpread({}, firstWidgetStyle), lastPluginStyle),
+      className: menuItem.props.className
     };
   });
   return /*#__PURE__*/_react().default.createElement(_designNavigation().ResponsiveNavbar, {
     navClassName: (0, _classnames().default)(_menuModule().default.tab, className),
+    secondaryNavClassName: secondaryNavClassName,
     style: {
       width: '100%',
       height: '100%'
     },
     priority: "none",
     tabs: links
-  });
+  }, children);
 }
 function sortFn([, {
   order: first

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

@@ -1 +1 @@
-{"version":3,"names":["CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","className","plugins","useMemo","_navPlugins","length","toArray","sort","sortFn","widgets","_widgetPlugins","links","map","id","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","props","displayName","classnames","styles","topBarNav","noBorder","children","style","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  /**\n   * @deprecated\n   * use @property navPlugins\n   */\n  navigationSlot?: OrderedNavigationSlot;\n  /**\n   * @deprecated\n   * use @property widgetPlugins\n   */\n  widgetSlot?: OrderedNavigationSlot;\n  navPlugins?: [string, NavPlugin][];\n  widgetPlugins?: [string, NavPlugin][];\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n}: MenuNavProps) {\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    return (_navPlugins || []).sort(sortFn);\n  }, [navigationSlot, navPlugins]);\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    return (_widgetPlugins || []).sort(sortFn);\n  }, [widgetSlot, widgetPlugins]);\n\n  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};\n\n    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: function TopBarNavComponent({ isInMenu }: TabProps) {\n        const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;\n        return (\n          <TopBarNav\n            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}\n            key={id}\n            {...menuItem.props}\n          >\n            {widgetDisplayText || menuItem.props.children}\n          </TopBarNav>\n        );\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n    };\n  });\n  return (\n    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, className)}\n      style={{ width: '100%', height: '100%' }}\n      priority=\"none\"\n      tabs={links}\n    />\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"],"mappings":"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"}
+{"version":3,"names":["CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","className","secondaryNavClassName","children","plugins","useMemo","_navPlugins","length","toArray","sort","sortFn","widgets","_widgetPlugins","links","map","id","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","props","displayName","classnames","styles","topBarNav","noBorder","style","tab","width","height","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  /**\n   * @deprecated\n   * use @property navPlugins\n   */\n  navigationSlot?: OrderedNavigationSlot;\n  /**\n   * @deprecated\n   * use @property widgetPlugins\n   */\n  widgetSlot?: OrderedNavigationSlot;\n  navPlugins?: [string, NavPlugin][];\n  widgetPlugins?: [string, NavPlugin][];\n  /**\n   * A className to pass to the secondary nav, i.e dropdown\n   */\n  secondaryNavClassName?: string;\n} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n  secondaryNavClassName,\n  children,\n}: MenuNavProps) {\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    return (_navPlugins || []).sort(sortFn);\n  }, [navigationSlot, navPlugins]);\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    return (_widgetPlugins || []).sort(sortFn);\n  }, [widgetSlot, widgetPlugins]);\n\n  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};\n\n    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: function TopBarNavComponent({ isInMenu }: TabProps) {\n        const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;\n        return (\n          <TopBarNav\n            {...menuItem.props}\n            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}\n            key={id}\n          >\n            {widgetDisplayText || menuItem.props.children}\n          </TopBarNav>\n        );\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n      className: menuItem.props.className,\n    };\n  });\n\n  return (\n    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, className)}\n      secondaryNavClassName={secondaryNavClassName}\n      style={{ width: '100%', height: '100%' }}\n      priority=\"none\"\n      tabs={links}\n    >\n      {children}\n    </ResponsiveNavbar>\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"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 import { ComponentModel } from '../../ui';
 export declare type NavPluginProps = {
     displayName?: string;
+    ignoreQueryParams?: boolean;
 } & LinkProps;
 export declare type NavPlugin = {
     props: NavPluginProps;

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

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

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { NavPluginProps } from '../menu/nav-plugin';
-export declare function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps): JSX.Element;
+export declare function TopBarNav({ href, className, activeClassName, children, displayName, ignoreQueryParams, ...rest }: NavPluginProps): JSX.Element;

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

@@ -61,9 +61,10 @@ function TopBarNav(_ref) {
       className,
       activeClassName,
       children,
-      displayName
+      displayName,
+      ignoreQueryParams
     } = _ref,
-    rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children", "displayName"]);
+    rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children", "displayName", "ignoreQueryParams"]);
   const {
     search
   } = (0, _reactRouterDom().useLocation)(); // sticky query params
@@ -73,7 +74,7 @@ function TopBarNav(_ref) {
   // but not for regular menu links (overview, compositions, etc).
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const preventPassingDisplayNameToLink = displayName;
-  const target = href && `${href}${search}`;
+  const target = href && !ignoreQueryParams && `${href}${search}` || href;
   return /*#__PURE__*/_react().default.createElement(_baseReactNavigation().Link, (0, _extends2().default)({}, rest, {
     className: (0, _classnames().default)(className, _topBarNavModule().default.topBarLink),
     activeClassName: (0, _classnames().default)(activeClassName, _topBarNavModule().default.active),

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

@@ -1 +1 @@
-{"version":3,"names":["TopBarNav","href","className","activeClassName","children","displayName","rest","search","useLocation","preventPassingDisplayNameToLink","target","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = href && `${href}${search}`;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,SAASA,SAAS,OAAuF;EAAA,IAAtF;MAAEC,IAAI;MAAEC,SAAS;MAAEC,eAAe;MAAEC,QAAQ;MAAEC;IAAqC,CAAC;IAAtBC,IAAI;EAC1F,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,6BAAW,GAAE,CAAC,CAAC;;EAElC;EACA;EACA;EACA;EACA,MAAMC,+BAA+B,GAAGJ,WAAW;EAEnD,MAAMK,MAAM,GAAGT,IAAI,IAAK,GAAEA,IAAK,GAAEM,MAAO,EAAC;EAEzC,oBACE,+BAAC,2BAAI,+BACCD,IAAI;IACR,SAAS,EAAE,IAAAK,qBAAU,EAACT,SAAS,EAAEU,0BAAM,CAACC,UAAU,CAAE;IACpD,eAAe,EAAE,IAAAF,qBAAU,EAACR,eAAe,EAAES,0BAAM,CAACE,MAAM,CAAE;IAC5D,IAAI,EAAEJ;EAAO,iBAEb,4CAAMN,QAAQ,CAAO,CAChB;AAEX"}
+{"version":3,"names":["TopBarNav","href","className","activeClassName","children","displayName","ignoreQueryParams","rest","search","useLocation","preventPassingDisplayNameToLink","target","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link } from '@teambit/base-react.navigation.link';\nimport { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport function TopBarNav({\n  href,\n  className,\n  activeClassName,\n  children,\n  displayName,\n  ignoreQueryParams,\n  ...rest\n}: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = (href && !ignoreQueryParams && `${href}${search}`) || href;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,SAASA,SAAS,OAQN;EAAA,IARO;MACxBC,IAAI;MACJC,SAAS;MACTC,eAAe;MACfC,QAAQ;MACRC,WAAW;MACXC;IAEc,CAAC;IADZC,IAAI;EAEP,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,6BAAW,GAAE,CAAC,CAAC;;EAElC;EACA;EACA;EACA;EACA,MAAMC,+BAA+B,GAAGL,WAAW;EAEnD,MAAMM,MAAM,GAAIV,IAAI,IAAI,CAACK,iBAAiB,IAAK,GAAEL,IAAK,GAAEO,MAAO,EAAC,IAAKP,IAAI;EAEzE,oBACE,+BAAC,2BAAI,+BACCM,IAAI;IACR,SAAS,EAAE,IAAAK,qBAAU,EAACV,SAAS,EAAEW,0BAAM,CAACC,UAAU,CAAE;IACpD,eAAe,EAAE,IAAAF,qBAAU,EAACT,eAAe,EAAEU,0BAAM,CAACE,MAAM,CAAE;IAC5D,IAAI,EAAEJ;EAAO,iBAEb,4CAAMP,QAAQ,CAAO,CAChB;AAEX"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.958",
+  "version": "0.0.960",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.958"
+    "version": "0.0.960"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -26,50 +26,50 @@
     "@teambit/base-react.navigation.link": "2.0.27",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
-    "@teambit/explorer.ui.command-bar": "2.0.3",
-    "@teambit/design.navigation.responsive-navbar": "0.0.2",
+    "@teambit/design.navigation.responsive-navbar": "0.0.5",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
+    "@teambit/explorer.ui.command-bar": "2.0.3",
     "@teambit/component-id": "0.0.425",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.497",
-    "@teambit/aspect-loader": "0.0.958",
-    "@teambit/graph": "0.0.958",
+    "@teambit/aspect-loader": "0.0.960",
+    "@teambit/graph": "0.0.960",
     "@teambit/legacy-bit-id": "0.0.421",
     "@teambit/toolbox.path.match-patterns": "0.0.9",
     "@teambit/toolbox.string.capitalize": "0.0.490",
-    "@teambit/cli": "0.0.642",
-    "@teambit/express": "0.0.740",
-    "@teambit/graphql": "0.0.958",
+    "@teambit/cli": "0.0.643",
+    "@teambit/express": "0.0.741",
+    "@teambit/graphql": "0.0.960",
     "@teambit/bit-error": "0.0.402",
-    "@teambit/command-bar": "0.0.958",
-    "@teambit/component.ui.deprecation-icon": "0.0.503",
-    "@teambit/preview": "0.0.958",
-    "@teambit/pubsub": "0.0.958",
-    "@teambit/react-router": "0.0.958",
+    "@teambit/command-bar": "0.0.960",
+    "@teambit/component.ui.deprecation-icon": "0.0.504",
+    "@teambit/preview": "0.0.960",
+    "@teambit/pubsub": "0.0.960",
+    "@teambit/react-router": "0.0.960",
     "@teambit/ui-foundation.ui.is-browser": "0.0.495",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.497",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.501",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.131",
-    "@teambit/ui": "0.0.958",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.132",
+    "@teambit/ui": "0.0.960",
     "@teambit/component-issues": "0.0.85",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
     "@teambit/cli-table": "0.0.41",
     "@teambit/component-descriptor": "0.0.212",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.496",
-    "@teambit/design.ui.empty-box": "0.0.363",
+    "@teambit/design.ui.empty-box": "0.0.364",
     "@teambit/harmony.ui.aspect-box": "0.0.497",
+    "@teambit/compositions": "0.0.960",
+    "@teambit/deprecation": "0.0.960",
+    "@teambit/envs": "0.0.960",
+    "@teambit/legacy-component-log": "0.0.399",
     "@teambit/design.ui.pages.not-found": "0.0.366",
     "@teambit/design.ui.pages.server-error": "0.0.366",
-    "@teambit/compositions": "0.0.958",
-    "@teambit/deprecation": "0.0.958",
-    "@teambit/envs": "0.0.958",
-    "@teambit/legacy-component-log": "0.0.399",
-    "@teambit/design.ui.styles.ellipsis": "0.0.357",
-    "@teambit/envs.ui.env-icon": "0.0.495",
-    "@teambit/component.ui.version-dropdown": "0.0.708",
+    "@teambit/component.ui.version-dropdown": "0.0.709",
     "@teambit/lanes.hooks.use-lanes": "0.0.106",
     "@teambit/lanes.ui.models.lanes-model": "0.0.68",
     "@teambit/ui-foundation.ui.full-loader": "0.0.495",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.131"
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.131",
+    "@teambit/design.ui.styles.ellipsis": "0.0.357",
+    "@teambit/envs.ui.env-icon": "0.0.495"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",

package/ui/menu/menu-nav.tsx

@@ -19,6 +19,10 @@ export type MenuNavProps = {
   widgetSlot?: OrderedNavigationSlot;
   navPlugins?: [string, NavPlugin][];
   widgetPlugins?: [string, NavPlugin][];
+  /**
+   * A className to pass to the secondary nav, i.e dropdown
+   */
+  secondaryNavClassName?: string;
 } & React.HTMLAttributes<HTMLElement>;
 
 export function CollapsibleMenuNav({
@@ -27,6 +31,8 @@ export function CollapsibleMenuNav({
   navPlugins = [],
   widgetPlugins = [],
   className,
+  secondaryNavClassName,
+  children,
 }: MenuNavProps) {
   const plugins = useMemo(() => {
     const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();
@@ -48,24 +54,29 @@ export function CollapsibleMenuNav({
         const widgetDisplayText = menuItem.props.displayName && isInMenu && menuItem.props.displayName;
         return (
           <TopBarNav
+            {...menuItem.props}
             className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}
             key={id}
-            {...menuItem.props}
           >
             {widgetDisplayText || menuItem.props.children}
           </TopBarNav>
         );
       },
       style: { ...firstWidgetStyle, ...lastPluginStyle },
+      className: menuItem.props.className,
     };
   });
+
   return (
     <ResponsiveNavbar
       navClassName={classnames(styles.tab, className)}
+      secondaryNavClassName={secondaryNavClassName}
       style={{ width: '100%', height: '100%' }}
       priority="none"
       tabs={links}
-    />
+    >
+      {children}
+    </ResponsiveNavbar>
   );
 }
 

package/ui/menu/nav-plugin.tsx

@@ -6,6 +6,7 @@ import { ComponentModel } from '../../ui';
 
 export type NavPluginProps = {
   displayName?: string;
+  ignoreQueryParams?: boolean;
 } & LinkProps;
 
 export type NavPlugin = {

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

@@ -6,7 +6,15 @@ import { NavPluginProps } from '../menu/nav-plugin';
 
 import styles from './top-bar-nav.module.scss';
 
-export function TopBarNav({ href, className, activeClassName, children, displayName, ...rest }: NavPluginProps) {
+export function TopBarNav({
+  href,
+  className,
+  activeClassName,
+  children,
+  displayName,
+  ignoreQueryParams,
+  ...rest
+}: NavPluginProps) {
   const { search } = useLocation(); // sticky query params
 
   // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.
@@ -15,7 +23,7 @@ export function TopBarNav({ href, className, activeClassName, children, displayN
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const preventPassingDisplayNameToLink = displayName;
 
-  const target = href && `${href}${search}`;
+  const target = (href && !ignoreQueryParams && `${href}${search}`) || href;
 
   return (
     <Link