@teambit/component 0.0.915 → 0.0.918

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

@@ -4,3 +4,4 @@ export declare type MenuNavProps = {
     navigationSlot: OrderedNavigationSlot;
 } & React.HTMLAttributes<HTMLElement>;
 export declare function MenuNav({ navigationSlot, className }: MenuNavProps): JSX.Element;
+export declare function CollapsableMenuNav({ navigationSlot, className }: MenuNavProps): JSX.Element;

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

@@ -6,6 +6,7 @@ require("core-js/modules/es.array.sort.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.CollapsableMenuNav = CollapsableMenuNav;
 exports.MenuNav = MenuNav;
 function _extends2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -28,6 +29,13 @@ function _classnames() {
   };
   return data;
 }
+function _designNavigation() {
+  const data = require("@teambit/design.navigation.responsive-navbar");
+  _designNavigation = function () {
+    return data;
+  };
+  return data;
+}
 function _topBarNav() {
   const data = require("../top-bar-nav");
   _topBarNav = function () {
@@ -57,6 +65,33 @@ function MenuNav({
     }, menuItem.props));
   }));
 }
+function CollapsableMenuNav({
+  navigationSlot,
+  className
+}) {
+  const plugins = (0, _react().useMemo)(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
+  const links = plugins.map(([id, menuItem]) => {
+    return {
+      component: function TopBarNavComponent({
+        isInMenu
+      }) {
+        return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, (0, _extends2().default)({
+          className: (0, _classnames().default)(_menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder),
+          key: id
+        }, menuItem.props));
+      }
+    };
+  });
+  return /*#__PURE__*/_react().default.createElement(_designNavigation().ResponsiveNavbar, {
+    navClassName: (0, _classnames().default)(_menuModule().default.tab, className),
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    priority: "none",
+    tabs: links
+  });
+}
 function sortFn([, {
   order: first
 }], [, {

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

@@ -1 +1 @@
-{"version":3,"names":["MenuNav","navigationSlot","className","plugins","useMemo","toArray","sort","sortFn","classnames","styles","navigation","desktopNav","map","id","menuItem","props","order","first","second"],"sources":["menu-nav.tsx"],"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"],"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;AAAwC;AAAA;AAOjC,SAASA,OAAO,CAAC;EAAEC,cAAc;EAAEC;AAAwB,CAAC,EAAE;EACnE,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC,MAAMH,cAAc,CAACI,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACN,cAAc,CAAC,CAAC;EAEtF,oBACE;IAAK,SAAS,EAAE,IAAAO,qBAAU,EAACC,qBAAM,CAACC,UAAU,EAAED,qBAAM,CAACE,UAAU,EAAET,SAAS;EAAE,GACzEC,OAAO,CAACS,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,QAAQ,CAAC,KAAK;IAC/B,oBAAO,+BAAC,sBAAS;MAAC,GAAG,EAAED;IAAG,GAAKC,QAAQ,CAACC,KAAK,EAAI;EACnD,CAAC,CAAC,CACE;AAEV;AAEA,SAASR,MAAM,CAAC,GAAG;EAAES,KAAK,EAAEC;AAAM,CAAC,CAAsB,EAAE,GAAG;EAAED,KAAK,EAAEE;AAAO,CAAC,CAAsB,EAAE;EACrG;EACA;EACA;;EAEA,OAAO,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,KAAKC,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":["MenuNav","navigationSlot","className","plugins","useMemo","toArray","sort","sortFn","classnames","styles","navigation","desktopNav","map","id","menuItem","props","CollapsableMenuNav","links","component","TopBarNavComponent","isInMenu","topBarNav","noBorder","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  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\nexport function CollapsableMenuNav({ navigationSlot, className }: MenuNavProps) {\n  const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);\n  const links = plugins.map(([id, menuItem]) => {\n    return {\n      component: function TopBarNavComponent({ isInMenu }: TabProps) {\n        return (\n          <TopBarNav\n            className={classnames(styles.topBarNav, isInMenu && styles.noBorder)}\n            key={id}\n            {...menuItem.props}\n          />\n        );\n      },\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":";;;;;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAwC;AAAA;AAOjC,SAASA,OAAO,CAAC;EAAEC,cAAc;EAAEC;AAAwB,CAAC,EAAE;EACnE,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC,MAAMH,cAAc,CAACI,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACN,cAAc,CAAC,CAAC;EAEtF,oBACE;IAAK,SAAS,EAAE,IAAAO,qBAAU,EAACC,qBAAM,CAACC,UAAU,EAAED,qBAAM,CAACE,UAAU,EAAET,SAAS;EAAE,GACzEC,OAAO,CAACS,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,QAAQ,CAAC,KAAK;IAC/B,oBAAO,+BAAC,sBAAS;MAAC,GAAG,EAAED;IAAG,GAAKC,QAAQ,CAACC,KAAK,EAAI;EACnD,CAAC,CAAC,CACE;AAEV;AAEO,SAASC,kBAAkB,CAAC;EAAEf,cAAc;EAAEC;AAAwB,CAAC,EAAE;EAC9E,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EAAC,MAAMH,cAAc,CAACI,OAAO,EAAE,CAACC,IAAI,CAACC,MAAM,CAAC,EAAE,CAACN,cAAc,CAAC,CAAC;EACtF,MAAMgB,KAAK,GAAGd,OAAO,CAACS,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,QAAQ,CAAC,KAAK;IAC5C,OAAO;MACLI,SAAS,EAAE,SAASC,kBAAkB,CAAC;QAAEC;MAAmB,CAAC,EAAE;QAC7D,oBACE,+BAAC,sBAAS;UACR,SAAS,EAAE,IAAAZ,qBAAU,EAACC,qBAAM,CAACY,SAAS,EAAED,QAAQ,IAAIX,qBAAM,CAACa,QAAQ,CAAE;UACrE,GAAG,EAAET;QAAG,GACJC,QAAQ,CAACC,KAAK,EAClB;MAEN;IACF,CAAC;EACH,CAAC,CAAC;EACF,oBACE,+BAAC,oCAAgB;IACf,YAAY,EAAE,IAAAP,qBAAU,EAACC,qBAAM,CAACc,GAAG,EAAErB,SAAS,CAAE;IAChD,KAAK,EAAE;MAAEsB,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE;IAAO,CAAE;IACzC,QAAQ,EAAC,MAAM;IACf,IAAI,EAAER;EAAM,EACZ;AAEN;AAEA,SAASV,MAAM,CAAC,GAAG;EAAEmB,KAAK,EAAEC;AAAM,CAAC,CAAsB,EAAE,GAAG;EAAED,KAAK,EAAEE;AAAO,CAAC,CAAsB,EAAE;EACrG;EACA;EACA;;EAEA,OAAO,CAACD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,KAAKC,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/ui/menu/menu.js

@@ -105,13 +105,6 @@ 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"));
   _menuModule = function () {
@@ -175,11 +168,8 @@ function ComponentMenu({
       className: (0, _classnames().default)(_menuModule().default.topBar, className)
     }, /*#__PURE__*/_react().default.createElement("div", {
       className: _menuModule().default.leftSide
-    }, /*#__PURE__*/_react().default.createElement(_menuNav().MenuNav, {
+    }, /*#__PURE__*/_react().default.createElement(_menuNav().CollapsableMenuNav, {
       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", {
@@ -191,6 +181,7 @@ function ComponentMenu({
       consumeMethods: consumeMethodSlot,
       host: host
     }), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MainDropdown, {
+      className: _menuModule().default.hideOnMobile,
       menuItems: mainMenuItems
     })))
   }));
@@ -232,7 +223,7 @@ function VersionRelatedDropdowns({
   const methods = useConsumeMethods(consumeMethods, component, currentLane);
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, tags.length > 0 && /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox().UseBoxDropdown, {
     position: "bottom-end",
-    className: _menuModule().default.useBox,
+    className: (0, _classnames().default)(_menuModule().default.useBox, _menuModule().default.hideOnMobile),
     Menu: /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox2().Menu, {
       methods: methods,
       componentName: component.id.name

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

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

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

@@ -6,12 +6,15 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  min-width: 0;
 }
 
 .leftSide {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  min-width: 0;
 }
 
 .navigation {
@@ -91,3 +94,22 @@
 .componentVersionMenu {
   width: 350px;
 }
+
+.tab {
+  > div {
+    padding: 0;
+  }
+}
+.topBarNav {
+  height: 100%;
+
+  &.noBorder::after {
+    display: none;
+  }
+}
+
+.hideOnMobile {
+  @media screen and (max-width: $br-md) {
+    display: none;
+  }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.915",
+  "version": "0.0.918",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.915"
+    "version": "0.0.918"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -27,50 +27,48 @@
     "@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.1",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
-    "@teambit/design.elements.icon": "1.0.5",
-    "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.425",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.495",
-    "@teambit/aspect-loader": "0.0.915",
+    "@teambit/aspect-loader": "0.0.918",
     "@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.611",
-    "@teambit/express": "0.0.709",
-    "@teambit/graphql": "0.0.915",
+    "@teambit/cli": "0.0.614",
+    "@teambit/express": "0.0.712",
+    "@teambit/graphql": "0.0.918",
     "@teambit/bit-error": "0.0.402",
-    "@teambit/command-bar": "0.0.915",
+    "@teambit/command-bar": "0.0.918",
     "@teambit/component.ui.deprecation-icon": "0.0.501",
-    "@teambit/preview": "0.0.915",
-    "@teambit/pubsub": "0.0.915",
-    "@teambit/react-router": "0.0.915",
+    "@teambit/preview": "0.0.918",
+    "@teambit/pubsub": "0.0.918",
+    "@teambit/react-router": "0.0.918",
     "@teambit/ui-foundation.ui.is-browser": "0.0.493",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.494",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.497",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.126",
-    "@teambit/ui": "0.0.915",
-    "@teambit/component-issues": "0.0.80",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.127",
+    "@teambit/ui": "0.0.918",
+    "@teambit/component-issues": "0.0.82",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.498",
     "@teambit/cli-table": "0.0.41",
-    "@teambit/component-descriptor": "0.0.181",
+    "@teambit/component-descriptor": "0.0.184",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.494",
     "@teambit/design.ui.empty-box": "0.0.361",
     "@teambit/harmony.ui.aspect-box": "0.0.495",
     "@teambit/design.ui.pages.not-found": "0.0.364",
     "@teambit/design.ui.pages.server-error": "0.0.364",
-    "@teambit/compositions": "0.0.915",
-    "@teambit/deprecation": "0.0.915",
-    "@teambit/envs": "0.0.915",
-    "@teambit/legacy-component-log": "0.0.399",
     "@teambit/design.ui.styles.ellipsis": "0.0.355",
     "@teambit/envs.ui.env-icon": "0.0.493",
-    "@teambit/component.ui.version-dropdown": "0.0.676",
-    "@teambit/lanes.hooks.use-lanes": "0.0.74",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.36",
+    "@teambit/compositions": "0.0.918",
+    "@teambit/deprecation": "0.0.918",
+    "@teambit/envs": "0.0.918",
+    "@teambit/legacy-component-log": "0.0.399",
+    "@teambit/component.ui.version-dropdown": "0.0.679",
+    "@teambit/lanes.hooks.use-lanes": "0.0.77",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.39",
     "@teambit/ui-foundation.ui.full-loader": "0.0.493",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.126",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.496"
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.127"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -89,7 +87,7 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.6.0",
-    "@teambit/legacy": "1.0.390",
+    "@teambit/legacy": "1.0.395",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },

package/{preview-1669346776422.js → preview-1669765084342.js}

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

package/ui/menu/menu-nav.tsx

@@ -1,5 +1,7 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
+import { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';
+import type { TabProps } from '@teambit/design.navigation.responsive-navbar';
 import { TopBarNav } from '../top-bar-nav';
 import styles from './menu.module.scss';
 import { NavPlugin, OrderedNavigationSlot } from './nav-plugin';
@@ -20,6 +22,31 @@ export function MenuNav({ navigationSlot, className }: MenuNavProps) {
   );
 }
 
+export function CollapsableMenuNav({ navigationSlot, className }: MenuNavProps) {
+  const plugins = useMemo(() => navigationSlot.toArray().sort(sortFn), [navigationSlot]);
+  const links = plugins.map(([id, menuItem]) => {
+    return {
+      component: function TopBarNavComponent({ isInMenu }: TabProps) {
+        return (
+          <TopBarNav
+            className={classnames(styles.topBarNav, isInMenu && styles.noBorder)}
+            key={id}
+            {...menuItem.props}
+          />
+        );
+      },
+    };
+  });
+  return (
+    <ResponsiveNavbar
+      navClassName={classnames(styles.tab, className)}
+      style={{ width: '100%', height: '100%' }}
+      priority="none"
+      tabs={links}
+    />
+  );
+}
+
 function sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {
   // 0  - equal
   // <0 - first < second

package/ui/menu/menu.module.scss

@@ -6,12 +6,15 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  min-width: 0;
 }
 
 .leftSide {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  min-width: 0;
 }
 
 .navigation {
@@ -91,3 +94,22 @@
 .componentVersionMenu {
   width: 350px;
 }
+
+.tab {
+  > div {
+    padding: 0;
+  }
+}
+.topBarNav {
+  height: 100%;
+
+  &.noBorder::after {
+    display: none;
+  }
+}
+
+.hideOnMobile {
+  @media screen and (max-width: $br-md) {
+    display: none;
+  }
+}

package/ui/menu/menu.tsx

@@ -14,8 +14,7 @@ import { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.me
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
 import type { ComponentModel } from '../component-model';
 import { useComponent as useComponentQuery, UseComponentType } from '../use-component';
-import { MenuNav } from './menu-nav';
-import { MobileMenuNav } from './mobile-menu-nav';
+import { MenuNav, CollapsableMenuNav } from './menu-nav';
 import styles from './menu.module.scss';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 import { useIdFromLocation } from '../use-component-from-location';
@@ -87,15 +86,15 @@ export function ComponentMenu({
         element={
           <div className={classnames(styles.topBar, className)}>
             <div className={styles.leftSide}>
-              <MenuNav navigationSlot={navigationSlot} />
-              <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />
+              <CollapsableMenuNav navigationSlot={navigationSlot} />
+              
             </div>
             <div className={styles.rightSide}>
               <div className={styles.widgets}>
                 <MenuNav navigationSlot={widgetSlot} />
               </div>
               <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
-              <MainDropdown menuItems={mainMenuItems} />
+              <MainDropdown className={styles.hideOnMobile} menuItems={mainMenuItems} />
             </div>
           </div>
         }
@@ -154,7 +153,7 @@ function VersionRelatedDropdowns({
       {tags.length > 0 && (
         <UseBoxDropdown
           position="bottom-end"
-          className={styles.useBox}
+          className={classnames(styles.useBox, styles.hideOnMobile)}
           Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}
         />
       )}

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

@@ -1,7 +0,0 @@
-/// <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

@@ -1,168 +0,0 @@
-"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 _baseReactNavigation() {
-  const data = require("@teambit/base-react.navigation.link");
-  _baseReactNavigation = 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 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
-    }),
-    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
-    } = _ref,
-    rest = (0, _objectWithoutProperties2().default)(_ref, ["slots"]);
-  return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
-    className: _mobileMenuNavModule().default.placeholder
-  }), slots.map(([id, menuItem]) => /*#__PURE__*/_react().default.createElement(ShowWhenMatch, {
-    key: id,
-    href: menuItem.props.href || '',
-    end: menuItem.props.exact
-  }, typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName)), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
-    of: "fat-arrow-down"
-  }));
-}
-function ShowWhenMatch({
-  href,
-  children,
-  caseSensitive,
-  end: exact
-}) {
-  const isMatch = useLinkMatch(href, {
-    caseSensitive,
-    exact
-  });
-  if (!isMatch) return null;
-  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
-}
-function useLinkMatch(href, {
-  caseSensitive,
-  exact
-} = {}) {
-  const location = (0, _baseReactNavigation().useLocation)();
-  let pathname = (location === null || location === void 0 ? void 0 : location.pathname) || '/';
-  let destination = (0, _reactRouterDom().useResolvedPath)(href).pathname;
-  if (!caseSensitive) {
-    pathname = pathname.toLowerCase();
-    destination = destination.toLowerCase();
-  }
-  return destination === pathname || !exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/';
-}
-
-//# sourceMappingURL=mobile-menu-nav.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","totalSlots","useMemo","toArray","sort","sortFn","classnames","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","rest","placeholder","href","exact","ShowWhenMatch","caseSensitive","end","isMatch","useLinkMatch","location","useLocation","pathname","destination","useResolvedPath","toLowerCase","startsWith","charAt","length"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { useResolvedPath } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { useLocation } from '@teambit/base-react.navigation.link';\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 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} />}\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, ...rest }: PlaceholderProps) {\n  return (\n    <div {...rest} className={mobileStyles.placeholder}>\n      {slots.map(([id, menuItem]) => (\n        <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>\n          {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n        </ShowWhenMatch>\n      ))}\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n\nfunction ShowWhenMatch({\n  href,\n  children,\n  caseSensitive,\n  end: exact,\n}: {\n  href: string;\n  children: ReactNode;\n  caseSensitive?: boolean;\n  end?: boolean;\n}) {\n  const isMatch = useLinkMatch(href, { caseSensitive, exact });\n  if (!isMatch) return null;\n  return <>{children}</>;\n}\n\nfunction useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {\n  const location = useLocation();\n  let pathname = location?.pathname || '/';\n  let destination = useResolvedPath(href).pathname;\n\n  if (!caseSensitive) {\n    pathname = pathname.toLowerCase();\n    destination = destination.toLowerCase();\n  }\n\n  return (\n    destination === pathname ||\n    (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')\n  );\n}\n"],"mappings":"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"}

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

@@ -1,70 +0,0 @@
-@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.module.scss

@@ -1,70 +0,0 @@
-@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

@@ -1,108 +0,0 @@
-import React, { ReactNode, useMemo } from 'react';
-import { useResolvedPath } from 'react-router-dom';
-import classnames from 'classnames';
-import { Icon } from '@teambit/design.elements.icon';
-import { Dropdown } from '@teambit/design.inputs.dropdown';
-import { useLocation } from '@teambit/base-react.navigation.link';
-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 totalSlots = useMemo(
-    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],
-    [navigationSlot, widgetSlot]
-  );
-
-  return (
-    <Dropdown
-      // @ts-ignore - mismatch between @types/react
-      placeholder={<Placeholder slots={totalSlots} />}
-      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, ...rest }: PlaceholderProps) {
-  return (
-    <div {...rest} className={mobileStyles.placeholder}>
-      {slots.map(([id, menuItem]) => (
-        <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>
-          {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}
-        </ShowWhenMatch>
-      ))}
-      <Icon of="fat-arrow-down" />
-    </div>
-  );
-}
-
-function ShowWhenMatch({
-  href,
-  children,
-  caseSensitive,
-  end: exact,
-}: {
-  href: string;
-  children: ReactNode;
-  caseSensitive?: boolean;
-  end?: boolean;
-}) {
-  const isMatch = useLinkMatch(href, { caseSensitive, exact });
-  if (!isMatch) return null;
-  return <>{children}</>;
-}
-
-function useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {
-  const location = useLocation();
-  let pathname = location?.pathname || '/';
-  let destination = useResolvedPath(href).pathname;
-
-  if (!caseSensitive) {
-    pathname = pathname.toLowerCase();
-    destination = destination.toLowerCase();
-  }
-
-  return (
-    destination === pathname ||
-    (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')
-  );
-}