@teambit/component 0.0.742 → 0.0.745

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

@@ -81,16 +81,6 @@ function _designInputs() {
   return data;
 }
 
-function _uiFoundationUiReactRouter() {
-  const data = require("@teambit/ui-foundation.ui.react-router.extend-path");
-
-  _uiFoundationUiReactRouter = function () {
-    return data;
-  };
-
-  return data;
-}
-
 function _topBarNav() {
   const data = require("../top-bar-nav");
 
@@ -130,15 +120,11 @@ function MobileMenuNav({
   widgetSlot,
   className
 }) {
-  const {
-    url
-  } = (0, _reactRouterDom().useRouteMatch)();
   const totalSlots = (0, _react().useMemo)(() => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)], [navigationSlot, widgetSlot]);
   return /*#__PURE__*/_react().default.createElement(_designInputs().Dropdown // @ts-ignore - mismatch between @types/react
   , {
     placeholder: /*#__PURE__*/_react().default.createElement(Placeholder, {
-      slots: totalSlots,
-      baseUrl: url
+      slots: totalSlots
     }),
     className: (0, _classnames().default)(_menuModule().default.navigation, _menuModule().default.mobileNav, className),
     dropClass: _mobileMenuNavModule().default.mobileMenu
@@ -168,21 +154,19 @@ function sortFn([, {
 
 function Placeholder(_ref) {
   let {
-    slots,
-    baseUrl = ''
+    slots
   } = _ref,
-      rest = (0, _objectWithoutProperties2().default)(_ref, ["slots", "baseUrl"]);
+      rest = (0, _objectWithoutProperties2().default)(_ref, ["slots"]);
   return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
     className: _mobileMenuNavModule().default.placeholder
-  }), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Switch, null, slots === null || slots === void 0 ? void 0 : slots.map(([id, menuItem]) => {
+  }), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Routes, null, slots === null || slots === void 0 ? void 0 : slots.map(([id, menuItem]) => {
     var _menuItem$props, _menuItem$props2, _menuItem$props3, _menuItem$props4;
 
-    const path = (0, _uiFoundationUiReactRouter().extendPath)(baseUrl, menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props = menuItem.props) === null || _menuItem$props === void 0 ? void 0 : _menuItem$props.href);
     return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
       key: id,
-      exact: true,
-      path: path
-    }, typeof (menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props2 = menuItem.props) === null || _menuItem$props2 === void 0 ? void 0 : _menuItem$props2.children) === 'string' ? menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props3 = menuItem.props) === null || _menuItem$props3 === void 0 ? void 0 : _menuItem$props3.children : menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props4 = menuItem.props) === null || _menuItem$props4 === void 0 ? void 0 : _menuItem$props4.displayName);
+      path: menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props = menuItem.props) === null || _menuItem$props === void 0 ? void 0 : _menuItem$props.href,
+      element: typeof (menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props2 = menuItem.props) === null || _menuItem$props2 === void 0 ? void 0 : _menuItem$props2.children) === 'string' ? menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props3 = menuItem.props) === null || _menuItem$props3 === void 0 ? void 0 : _menuItem$props3.children : menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props4 = menuItem.props) === null || _menuItem$props4 === void 0 ? void 0 : _menuItem$props4.displayName
+    });
   })), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
     of: "fat-arrow-down"
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","url","useRouteMatch","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","baseUrl","rest","placeholder","path","extendPath","href"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Switch, Route, useRouteMatch } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport mobileStyles from './mobile-menu-nav.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MobileMenuNav({\n  navigationSlot,\n  widgetSlot,\n  className,\n}: {\n  navigationSlot: OrderedNavigationSlot;\n  widgetSlot: OrderedNavigationSlot;\n  className?: string;\n}) {\n  const { url } = useRouteMatch();\n  const totalSlots = useMemo(\n    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],\n    [navigationSlot, widgetSlot]\n  );\n\n  return (\n    <Dropdown\n      // @ts-ignore - mismatch between @types/react\n      placeholder={<Placeholder slots={totalSlots} baseUrl={url} />}\n      className={classnames(styles.navigation, styles.mobileNav, className)}\n      dropClass={mobileStyles.mobileMenu}\n    >\n      <nav>\n        <Icon of=\"x-thick\" className={mobileStyles.close} />\n        {totalSlots.map(([id, menuItem]) => {\n          return (\n            <TopBarNav\n              key={id}\n              {...menuItem.props}\n              className={mobileStyles.mobileMenuLink}\n              activeClassName={mobileStyles.active}\n            >\n              {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n            </TopBarNav>\n          );\n        })}\n      </nav>\n    </Dropdown>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\ntype PlaceholderProps = {\n  slots: [string, NavPlugin][];\n  baseUrl?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Placeholder({ slots, baseUrl = '', ...rest }: PlaceholderProps) {\n  return (\n    <div {...rest} className={mobileStyles.placeholder}>\n      <Switch>\n        {slots?.map(([id, menuItem]) => {\n          const path = extendPath(baseUrl, menuItem?.props?.href);\n          return (\n            <Route key={id} exact path={path}>\n              {typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName}\n            </Route>\n          );\n        })}\n      </Switch>\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n"],"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;;AACA;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;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAGO,SAASA,aAAT,CAAuB;EAC5BC,cAD4B;EAE5BC,UAF4B;EAG5BC;AAH4B,CAAvB,EAQJ;EACD,MAAM;IAAEC;EAAF,IAAU,IAAAC,+BAAA,GAAhB;EACA,MAAMC,UAAU,GAAG,IAAAC,gBAAA,EACjB,MAAM,CAAC,GAAGN,cAAc,CAACO,OAAf,GAAyBC,IAAzB,CAA8BC,MAA9B,CAAJ,EAA2C,GAAGR,UAAU,CAACM,OAAX,GAAqBC,IAArB,CAA0BC,MAA1B,CAA9C,CADW,EAEjB,CAACT,cAAD,EAAiBC,UAAjB,CAFiB,CAAnB;EAKA,oBACE,+BAAC,wBAAD,CACE;EADF;IAEE,WAAW,eAAE,+BAAC,WAAD;MAAa,KAAK,EAAEI,UAApB;MAAgC,OAAO,EAAEF;IAAzC,EAFf;IAGE,SAAS,EAAE,IAAAO,qBAAA,EAAWC,qBAAA,CAAOC,UAAlB,EAA8BD,qBAAA,CAAOE,SAArC,EAAgDX,SAAhD,CAHb;IAIE,SAAS,EAAEY,8BAAA,CAAaC;EAJ1B,gBAME,yDACE,+BAAC,sBAAD;IAAM,EAAE,EAAC,SAAT;IAAmB,SAAS,EAAED,8BAAA,CAAaE;EAA3C,EADF,EAEGX,UAAU,CAACY,GAAX,CAAe,CAAC,CAACC,EAAD,EAAKC,QAAL,CAAD,KAAoB;IAClC,oBACE,+BAAC,sBAAD;MACE,GAAG,EAAED;IADP,GAEMC,QAAQ,CAACC,KAFf;MAGE,SAAS,EAAEN,8BAAA,CAAaO,cAH1B;MAIE,eAAe,EAAEP,8BAAA,CAAaQ;IAJhC,IAMG,OAAOH,QAAQ,CAACC,KAAT,CAAeG,QAAtB,KAAmC,QAAnC,GAA8CJ,QAAQ,CAACC,KAAT,CAAeG,QAA7D,GAAwEJ,QAAQ,CAACC,KAAT,CAAeI,WAN1F,CADF;EAUD,CAXA,CAFH,CANF,CADF;AAwBD;;AAED,SAASf,MAAT,CAAgB,GAAG;EAAEgB,KAAK,EAAEC;AAAT,CAAH,CAAhB,EAA2D,GAAG;EAAED,KAAK,EAAEE;AAAT,CAAH,CAA3D,EAAuG;EACrG;EACA;EACA;EAEA,OAAO,CAACD,KAAD,aAACA,KAAD,cAACA,KAAD,GAAU,CAAV,KAAgBC,MAAhB,aAAgBA,MAAhB,cAAgBA,MAAhB,GAA0B,CAA1B,CAAP;AACD;;AAOD,SAASC,WAAT,OAAyE;EAAA,IAApD;IAAEC,KAAF;IAASC,OAAO,GAAG;EAAnB,CAAoD;EAAA,IAA1BC,IAA0B;EACvE,oBACE,mEAASA,IAAT;IAAe,SAAS,EAAEjB,8BAAA,CAAakB;EAAvC,iBACE,+BAAC,wBAAD,QACGH,KADH,aACGA,KADH,uBACGA,KAAK,CAAEZ,GAAP,CAAW,CAAC,CAACC,EAAD,EAAKC,QAAL,CAAD,KAAoB;IAAA;;IAC9B,MAAMc,IAAI,GAAG,IAAAC,uCAAA,EAAWJ,OAAX,EAAoBX,QAApB,aAAoBA,QAApB,0CAAoBA,QAAQ,CAAEC,KAA9B,oDAAoB,gBAAiBe,IAArC,CAAb;IACA,oBACE,+BAAC,uBAAD;MAAO,GAAG,EAAEjB,EAAZ;MAAgB,KAAK,MAArB;MAAsB,IAAI,EAAEe;IAA5B,GACG,QAAOd,QAAP,aAAOA,QAAP,2CAAOA,QAAQ,CAAEC,KAAjB,qDAAO,iBAAiBG,QAAxB,MAAqC,QAArC,GAAgDJ,QAAhD,aAAgDA,QAAhD,2CAAgDA,QAAQ,CAAEC,KAA1D,qDAAgD,iBAAiBG,QAAjE,GAA4EJ,QAA5E,aAA4EA,QAA5E,2CAA4EA,QAAQ,CAAEC,KAAtF,qDAA4E,iBAAiBI,WADhG,CADF;EAKD,CAPA,CADH,CADF,eAWE,+BAAC,sBAAD;IAAM,EAAE,EAAC;EAAT,EAXF,CADF;AAeD"}
+{"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"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Routes, Route } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\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      <Routes>\n        {slots?.map(([id, menuItem]) => (\n          <Route\n            key={id}\n            path={menuItem?.props?.href}\n            element={\n              typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName\n            }\n          />\n        ))}\n      </Routes>\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -59,20 +59,10 @@ function _reactRouterDom() {
   return data;
 }
 
-function _baseUiRouting() {
-  const data = require("@teambit/base-ui.routing.nav-link");
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
 
-  _baseUiRouting = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiFoundationUiReactRouter() {
-  const data = require("@teambit/ui-foundation.ui.react-router.extend-path");
-
-  _uiFoundationUiReactRouter = function () {
+  _baseReactNavigation = function () {
     return data;
   };
 
@@ -97,15 +87,12 @@ function TopBarNav(_ref) {
     children
   } = _ref,
       rest = (0, _objectWithoutProperties2().default)(_ref, ["href", "className", "activeClassName", "children"]);
-  const {
-    url
-  } = (0, _reactRouterDom().useRouteMatch)();
   const {
     search
   } = (0, _reactRouterDom().useLocation)(); // sticky query params
 
-  const target = `${(0, _uiFoundationUiReactRouter().extendPath)(url, href)}${search}`;
-  return /*#__PURE__*/_react().default.createElement(_baseUiRouting().NavLink, (0, _extends2().default)({}, rest, {
+  const target = `${href}${search}`;
+  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),
     href: target

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

@@ -1 +1 @@
-{"version":3,"names":["TopBarNav","href","className","activeClassName","children","rest","url","useRouteMatch","search","useLocation","target","extendPath","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useRouteMatch, useLocation } from 'react-router-dom';\nimport { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';\nimport { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport type TopBarNavProps = {} & NavLinkProps;\n\nexport function TopBarNav({ href, className, activeClassName, children, ...rest }: TopBarNavProps) {\n  const { url } = useRouteMatch();\n  const { search } = useLocation(); // sticky query params\n\n  const target = `${extendPath(url, href)}${search}`;\n\n  return (\n    <NavLink\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </NavLink>\n  );\n}\n"],"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;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIO,SAASA,SAAT,OAA4F;EAAA,IAAzE;IAAEC,IAAF;IAAQC,SAAR;IAAmBC,eAAnB;IAAoCC;EAApC,CAAyE;EAAA,IAAxBC,IAAwB;EACjG,MAAM;IAAEC;EAAF,IAAU,IAAAC,+BAAA,GAAhB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,6BAAA,GAAnB,CAFiG,CAE/D;;EAElC,MAAMC,MAAM,GAAI,GAAE,IAAAC,uCAAA,EAAWL,GAAX,EAAgBL,IAAhB,CAAsB,GAAEO,MAAO,EAAjD;EAEA,oBACE,+BAAC,wBAAD,+BACMH,IADN;IAEE,SAAS,EAAE,IAAAO,qBAAA,EAAWV,SAAX,EAAsBW,0BAAA,CAAOC,UAA7B,CAFb;IAGE,eAAe,EAAE,IAAAF,qBAAA,EAAWT,eAAX,EAA4BU,0BAAA,CAAOE,MAAnC,CAHnB;IAIE,IAAI,EAAEL;EAJR,iBAME,4CAAMN,QAAN,CANF,CADF;AAUD"}
+{"version":3,"names":["TopBarNav","href","className","activeClassName","children","rest","search","useLocation","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, LinkProps } from '@teambit/base-react.navigation.link';\n\nimport styles from './top-bar-nav.module.scss';\n\nexport type TopBarNavProps = {} & LinkProps;\n\nexport function TopBarNav({ href, className, activeClassName, children, ...rest }: TopBarNavProps) {\n  const { search } = useLocation(); // sticky query params\n\n  const target = `${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;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIO,SAASA,SAAT,OAA4F;EAAA,IAAzE;IAAEC,IAAF;IAAQC,SAAR;IAAmBC,eAAnB;IAAoCC;EAApC,CAAyE;EAAA,IAAxBC,IAAwB;EACjG,MAAM;IAAEC;EAAF,IAAa,IAAAC,6BAAA,GAAnB,CADiG,CAC/D;;EAElC,MAAMC,MAAM,GAAI,GAAEP,IAAK,GAAEK,MAAO,EAAhC;EAEA,oBACE,+BAAC,2BAAD,+BACMD,IADN;IAEE,SAAS,EAAE,IAAAI,qBAAA,EAAWP,SAAX,EAAsBQ,0BAAA,CAAOC,UAA7B,CAFb;IAGE,eAAe,EAAE,IAAAF,qBAAA,EAAWN,eAAX,EAA4BO,0BAAA,CAAOE,MAAnC,CAHnB;IAIE,IAAI,EAAEJ;EAJR,iBAME,4CAAMJ,QAAN,CANF,CADF;AAUD"}

package/dist/ui/use-component-from-location.d.ts

@@ -0,0 +1 @@
+export declare function useIdFromLocation(): string | undefined;

package/dist/ui/use-component-from-location.js

@@ -0,0 +1,31 @@
+"use strict";
+
+require("core-js/modules/es.regexp.exec.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIdFromLocation = useIdFromLocation;
+
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+
+  _reactRouterDom = function () {
+    return data;
+  };
+
+  return data;
+}
+
+/** component url is comprised of letters, numbers, "_", "-", "/" but should not include trailing "/", and should not include "~" */
+const componentRegex = /^[\w/-]*[\w-]/;
+
+function useIdFromLocation() {
+  const params = (0, _reactRouterDom().useParams)();
+  const splat = params['*'];
+  if (!splat) return undefined;
+  const match = componentRegex.exec(splat);
+  return match === null || match === void 0 ? void 0 : match[0];
+}
+
+//# sourceMappingURL=use-component-from-location.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["componentRegex","useIdFromLocation","params","useParams","splat","undefined","match","exec"],"sources":["use-component-from-location.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\n\n/** component url is comprised of letters, numbers, \"_\", \"-\", \"/\" but should not include trailing \"/\", and should not include \"~\" */\nconst componentRegex = /^[\\w/-]*[\\w-]/;\nexport function useIdFromLocation() {\n  const params = useParams();\n  const splat = params['*'];\n  if (!splat) return undefined;\n\n  const match = componentRegex.exec(splat);\n  return match?.[0];\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;AACA,MAAMA,cAAc,GAAG,eAAvB;;AACO,SAASC,iBAAT,GAA6B;EAClC,MAAMC,MAAM,GAAG,IAAAC,2BAAA,GAAf;EACA,MAAMC,KAAK,GAAGF,MAAM,CAAC,GAAD,CAApB;EACA,IAAI,CAACE,KAAL,EAAY,OAAOC,SAAP;EAEZ,MAAMC,KAAK,GAAGN,cAAc,CAACO,IAAf,CAAoBH,KAApB,CAAd;EACA,OAAOE,KAAP,aAAOA,KAAP,uBAAOA,KAAK,CAAG,CAAH,CAAZ;AACD"}

package/dist/ui/use-component.d.ts

@@ -7,4 +7,4 @@ export declare type Component = {
     error?: ComponentError;
     componentDescriptor?: ComponentDescriptor;
 };
-export declare function useComponent(host: string, id?: ComponentID): Component;
+export declare function useComponent(host: string, id?: string | ComponentID): Component;

package/dist/ui/use-component.js

@@ -5,16 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useComponent = useComponent;
 
-function _reactRouterDom() {
-  const data = require("react-router-dom");
-
-  _reactRouterDom = function () {
-    return data;
-  };
-
-  return data;
-}
-
 function _uiFoundationUiReactRouter() {
   const data = require("@teambit/ui-foundation.ui.react-router.use-query");
 
@@ -48,17 +38,12 @@ function _useComponentQuery() {
 function useComponent(host, id) {
   var _lanesContext$viewedL, _lanesContext$viewedL2;
 
-  const {
-    params: {
-      componentId
-    }
-  } = (0, _reactRouterDom().useRouteMatch)();
   const query = (0, _uiFoundationUiReactRouter().useQuery)();
   const version = query.get('version') || undefined;
   const lanesContext = (0, _lanesUi().useLanesContext)();
-  const targetId = (id === null || id === void 0 ? void 0 : id.toString({
+  const targetId = typeof id === 'string' && id || typeof id !== 'undefined' && id.toString({
     ignoreVersion: true
-  })) || componentId;
+  });
   if (!targetId) throw new TypeError('useComponent received no component id');
   const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.viewedLane; // when on a lane, always fetch all the logs starting from the 'head' version
 

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

@@ -1 +1 @@
-{"version":3,"names":["useComponent","host","id","params","componentId","useRouteMatch","query","useQuery","version","get","undefined","lanesContext","useLanesContext","targetId","toString","ignoreVersion","TypeError","currentLane","viewedLane","laneComponentId","components","find","component","fullName","componentIdStr","withVersion","logFilters","log","logHead","useComponentQuery","includes"],"sources":["use-component.tsx"],"sourcesContent":["import { useRouteMatch } from 'react-router-dom';\nimport { ComponentID } from '@teambit/component-id';\nimport { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n};\n\ntype ComponentRoute = {\n  componentId?: string;\n};\n\nexport function useComponent(host: string, id?: ComponentID): Component {\n  const {\n    params: { componentId },\n  } = useRouteMatch<ComponentRoute>();\n  const query = useQuery();\n  const version = query.get('version') || undefined;\n  const lanesContext = useLanesContext();\n  const targetId = id?.toString({ ignoreVersion: true }) || componentId;\n  if (!targetId) throw new TypeError('useComponent received no component id');\n  const currentLane = lanesContext?.viewedLane;\n  // when on a lane, always fetch all the logs starting from the 'head' version\n  const laneComponentId = lanesContext?.viewedLane?.components.find(\n    (component) => component.id.fullName === targetId\n  )?.id;\n\n  const componentIdStr = laneComponentId ? laneComponentId?.toString() : withVersion(targetId, version);\n\n  const logFilters = currentLane\n    ? {\n        log: {\n          logHead: laneComponentId?.version,\n        },\n      }\n    : undefined;\n\n  return useComponentQuery(componentIdStr, host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAYO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAAiE;EAAA;;EACtE,MAAM;IACJC,MAAM,EAAE;MAAEC;IAAF;EADJ,IAEF,IAAAC,+BAAA,GAFJ;EAGA,MAAMC,KAAK,GAAG,IAAAC,qCAAA,GAAd;EACA,MAAMC,OAAO,GAAGF,KAAK,CAACG,GAAN,CAAU,SAAV,KAAwBC,SAAxC;EACA,MAAMC,YAAY,GAAG,IAAAC,0BAAA,GAArB;EACA,MAAMC,QAAQ,GAAG,CAAAX,EAAE,SAAF,IAAAA,EAAE,WAAF,YAAAA,EAAE,CAAEY,QAAJ,CAAa;IAAEC,aAAa,EAAE;EAAjB,CAAb,MAAyCX,WAA1D;EACA,IAAI,CAACS,QAAL,EAAe,MAAM,IAAIG,SAAJ,CAAc,uCAAd,CAAN;EACf,MAAMC,WAAW,GAAGN,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEO,UAAlC,CATsE,CAUtE;;EACA,MAAMC,eAAe,GAAGR,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEO,UAAjB,oFAAG,sBAA0BE,UAA1B,CAAqCC,IAArC,CACrBC,SAAD,IAAeA,SAAS,CAACpB,EAAV,CAAaqB,QAAb,KAA0BV,QADnB,CAAH,2DAAG,uBAErBX,EAFH;EAIA,MAAMsB,cAAc,GAAGL,eAAe,GAAGA,eAAH,aAAGA,eAAH,uBAAGA,eAAe,CAAEL,QAAjB,EAAH,GAAiCW,WAAW,CAACZ,QAAD,EAAWL,OAAX,CAAlF;EAEA,MAAMkB,UAAU,GAAGT,WAAW,GAC1B;IACEU,GAAG,EAAE;MACHC,OAAO,EAAET,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEX;IADvB;EADP,CAD0B,GAM1BE,SANJ;EAQA,OAAO,IAAAmB,sCAAA,EAAkBL,cAAlB,EAAkCvB,IAAlC,EAAwCyB,UAAxC,CAAP;AACD;;AAED,SAASD,WAAT,CAAqBvB,EAArB,EAAiCM,OAAjC,EAAmD;EACjD,IAAI,CAACA,OAAL,EAAc,OAAON,EAAP;EACd,IAAIA,EAAE,CAAC4B,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAO5B,EAAP;EACtB,OAAQ,GAAEA,EAAG,IAAGM,OAAQ,EAAxB;AACD"}
+{"version":3,"names":["useComponent","host","id","query","useQuery","version","get","undefined","lanesContext","useLanesContext","targetId","toString","ignoreVersion","TypeError","currentLane","viewedLane","laneComponentId","components","find","component","fullName","componentIdStr","withVersion","logFilters","log","logHead","useComponentQuery","includes"],"sources":["use-component.tsx"],"sourcesContent":["import { ComponentID } from '@teambit/component-id';\nimport { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n};\n\nexport function useComponent(host: string, id?: string | ComponentID): Component {\n  const query = useQuery();\n  const version = query.get('version') || undefined;\n  const lanesContext = useLanesContext();\n\n  const targetId =\n    (typeof id === 'string' && id) || (typeof id !== 'undefined' && id.toString({ ignoreVersion: true }));\n  if (!targetId) throw new TypeError('useComponent received no component id');\n  const currentLane = lanesContext?.viewedLane;\n  // when on a lane, always fetch all the logs starting from the 'head' version\n  const laneComponentId = lanesContext?.viewedLane?.components.find(\n    (component) => component.id.fullName === targetId\n  )?.id;\n\n  const componentIdStr = laneComponentId ? laneComponentId?.toString() : withVersion(targetId, version);\n\n  const logFilters = currentLane\n    ? {\n        log: {\n          logHead: laneComponentId?.version,\n        },\n      }\n    : undefined;\n\n  return useComponentQuery(componentIdStr, host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"],"mappings":";;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAQO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAA0E;EAAA;;EAC/E,MAAMC,KAAK,GAAG,IAAAC,qCAAA,GAAd;EACA,MAAMC,OAAO,GAAGF,KAAK,CAACG,GAAN,CAAU,SAAV,KAAwBC,SAAxC;EACA,MAAMC,YAAY,GAAG,IAAAC,0BAAA,GAArB;EAEA,MAAMC,QAAQ,GACX,OAAOR,EAAP,KAAc,QAAd,IAA0BA,EAA3B,IAAmC,OAAOA,EAAP,KAAc,WAAd,IAA6BA,EAAE,CAACS,QAAH,CAAY;IAAEC,aAAa,EAAE;EAAjB,CAAZ,CADlE;EAEA,IAAI,CAACF,QAAL,EAAe,MAAM,IAAIG,SAAJ,CAAc,uCAAd,CAAN;EACf,MAAMC,WAAW,GAAGN,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEO,UAAlC,CAR+E,CAS/E;;EACA,MAAMC,eAAe,GAAGR,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEO,UAAjB,oFAAG,sBAA0BE,UAA1B,CAAqCC,IAArC,CACrBC,SAAD,IAAeA,SAAS,CAACjB,EAAV,CAAakB,QAAb,KAA0BV,QADnB,CAAH,2DAAG,uBAErBR,EAFH;EAIA,MAAMmB,cAAc,GAAGL,eAAe,GAAGA,eAAH,aAAGA,eAAH,uBAAGA,eAAe,CAAEL,QAAjB,EAAH,GAAiCW,WAAW,CAACZ,QAAD,EAAWL,OAAX,CAAlF;EAEA,MAAMkB,UAAU,GAAGT,WAAW,GAC1B;IACEU,GAAG,EAAE;MACHC,OAAO,EAAET,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEX;IADvB;EADP,CAD0B,GAM1BE,SANJ;EAQA,OAAO,IAAAmB,sCAAA,EAAkBL,cAAlB,EAAkCpB,IAAlC,EAAwCsB,UAAxC,CAAP;AACD;;AAED,SAASD,WAAT,CAAqBpB,EAArB,EAAiCG,OAAjC,EAAmD;EACjD,IAAI,CAACA,OAAL,EAAc,OAAOH,EAAP;EACd,IAAIA,EAAE,CAACyB,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOzB,EAAP;EACtB,OAAQ,GAAEA,EAAG,IAAGG,OAAQ,EAAxB;AACD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.742",
+  "version": "0.0.745",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.742"
+    "version": "0.0.745"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -17,69 +17,65 @@
     "semver": "7.3.4",
     "copy-to-clipboard": "3.3.1",
     "lodash.flatten": "4.4.0",
-    "react-router-dom": "5.2.0",
     "classnames": "2.2.6",
     "lodash.compact": "3.0.1",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/harmony": "0.3.3",
-    "@teambit/base-ui.routing.nav-link": "1.0.0",
+    "@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": "1.0.2",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
-    "@teambit/base-ui.routing.routing-provider": "1.0.0",
     "@teambit/design.elements.icon": "1.0.5",
     "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.402",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
-    "@teambit/aspect-loader": "0.0.742",
+    "@teambit/aspect-loader": "0.0.745",
     "@teambit/legacy-bit-id": "0.0.399",
     "@teambit/toolbox.path.match-patterns": "0.0.1",
     "@teambit/toolbox.string.capitalize": "0.0.483",
-    "@teambit/cli": "0.0.492",
-    "@teambit/config": "0.0.505",
-    "@teambit/express": "0.0.589",
-    "@teambit/graphql": "0.0.742",
+    "@teambit/cli": "0.0.493",
+    "@teambit/config": "0.0.506",
+    "@teambit/express": "0.0.591",
+    "@teambit/graphql": "0.0.745",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.742",
+    "@teambit/command-bar": "0.0.745",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
-    "@teambit/preview": "0.0.742",
-    "@teambit/pubsub": "0.0.742",
-    "@teambit/react-router": "0.0.742",
+    "@teambit/preview": "0.0.745",
+    "@teambit/pubsub": "0.0.745",
+    "@teambit/react-router": "0.0.745",
     "@teambit/ui-foundation.ui.is-browser": "0.0.486",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.489",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.114",
-    "@teambit/ui": "0.0.742",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.115",
+    "@teambit/ui": "0.0.745",
     "@teambit/component-issues": "0.0.53",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
     "@teambit/cli-table": "0.0.34",
-    "@teambit/component-descriptor": "0.0.54",
-    "@teambit/lanes.ui.lanes": "0.0.58",
-    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.486",
+    "@teambit/component-descriptor": "0.0.55",
+    "@teambit/lanes.ui.lanes": "0.0.60",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.487",
     "@teambit/design.ui.empty-box": "0.0.353",
     "@teambit/harmony.ui.aspect-box": "0.0.486",
-    "@teambit/design.ui.pages.not-found": "0.0.354",
-    "@teambit/design.ui.pages.server-error": "0.0.354",
-    "@teambit/compositions": "0.0.742",
-    "@teambit/deprecation": "0.0.742",
-    "@teambit/envs": "0.0.742",
+    "@teambit/design.ui.pages.not-found": "0.0.355",
+    "@teambit/design.ui.pages.server-error": "0.0.355",
+    "@teambit/compositions": "0.0.745",
+    "@teambit/deprecation": "0.0.745",
+    "@teambit/envs": "0.0.745",
     "@teambit/legacy-component-log": "0.0.392",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/envs.ui.env-icon": "0.0.486",
-    "@teambit/component.ui.version-dropdown": "0.0.544",
+    "@teambit/component.ui.version-dropdown": "0.0.546",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.114",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
-    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.486"
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.115",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
     "@types/lodash": "4.14.165",
     "@types/semver": "7.3.4",
     "@types/lodash.flatten": "4.4.6",
-    "@types/react-router-dom": "5.1.7",
     "@types/classnames": "2.2.11",
     "@types/lodash.compact": "3.0.6",
     "@types/mocha": "9.1.0",
@@ -90,8 +86,9 @@
     "@teambit/component.content.component-overview": "1.95.0"
   },
   "peerDependencies": {
+    "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.272",
+    "@teambit/legacy": "1.0.273",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -119,7 +116,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.272",
+        "@teambit/legacy": "1.0.273",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1653535588073.js → preview-1653836960096.js}

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

package/section/section.tsx

@@ -1,9 +1,9 @@
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import type { LinkProps } from '@teambit/base-react.navigation.link';
 import { RouteProps } from 'react-router-dom';
 
 export interface Section {
   route: RouteProps;
-  navigationLink: NavLinkProps;
+  navigationLink: LinkProps;
   /**
    * text to be used in the mobile res dropdown
    */

package/ui/component.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, ReactNode, useMemo } from 'react';
 import flatten from 'lodash.flatten';
-import { RouteSlot, SlotSubRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
 
 import styles from './component.module.scss';
 import { ComponentProvider, ComponentDescriptorProvider } from './context';
 import { useComponent } from './use-component';
 import { ComponentModel } from './component-model';
+import { useIdFromLocation } from './use-component-from-location';
 
 export type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;
 export type ComponentPageElement = {
@@ -25,7 +26,8 @@ export type ComponentProps = {
  * main UI component of the Component extension.
  */
 export function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {
-  const { component, componentDescriptor, error } = useComponent(host);
+  const componentId = useIdFromLocation();
+  const { component, componentDescriptor, error } = useComponent(host, componentId);
   // trigger onComponentChange when component changes
   useEffect(() => onComponentChange?.(component), [component]);
   // cleanup when unmounting component
@@ -42,7 +44,9 @@ export function Component({ routeSlot, containerSlot, host, onComponentChange }:
     <ComponentDescriptorProvider componentDescriptor={componentDescriptor}>
       <ComponentProvider component={component}>
         {before}
-        <div className={styles.container}>{routeSlot && <SlotSubRouter slot={routeSlot} />}</div>
+        <div className={styles.container}>
+          {routeSlot && <SlotRouter parentPath={`${componentId}/*`} slot={routeSlot} />}
+        </div>
         {after}
       </ComponentProvider>
     </ComponentDescriptorProvider>

package/ui/menu/index.ts

@@ -1,2 +1,2 @@
-export { Menu } from './menu';
+export { ComponentMenu } from './menu';
 export type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';

package/ui/menu/menu.tsx

@@ -1,8 +1,9 @@
+import { Routes, Route } from 'react-router-dom';
 import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
 import { VersionDropdown } from '@teambit/component.ui.version-dropdown';
 import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
-import { useLocation } from '@teambit/base-ui.routing.routing-provider';
+import { useLocation } from '@teambit/base-react.navigation.link';
 import { flatten, groupBy, compact } from 'lodash';
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
@@ -16,6 +17,7 @@ import { MenuNav } from './menu-nav';
 import { MobileMenuNav } from './mobile-menu-nav';
 import styles from './menu.module.scss';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
+import { useIdFromLocation } from '../use-component-from-location';
 
 export type MenuProps = {
   className?: string;
@@ -39,24 +41,39 @@ export type MenuProps = {
 /**
  * top bar menu.
  */
-export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot }: MenuProps) {
-  const { component } = useComponent(host);
+export function ComponentMenu({
+  navigationSlot,
+  widgetSlot,
+  className,
+  host,
+  menuItemSlot,
+  consumeMethodSlot,
+}: MenuProps) {
+  const componentId = useIdFromLocation();
+  const { component } = useComponent(host, componentId);
   const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
   if (!component) return <FullLoader />;
   return (
-    <div className={classnames(styles.topBar, className)}>
-      <div className={styles.leftSide}>
-        <MenuNav navigationSlot={navigationSlot} />
-        <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />
-      </div>
-      <div className={styles.rightSide}>
-        <div className={styles.widgets}>
-          <MenuNav navigationSlot={widgetSlot} />
-        </div>
-        <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
-        <MainDropdown menuItems={mainMenuItems} />
-      </div>
-    </div>
+    <Routes>
+      <Route
+        path={`${componentId}/*`}
+        element={
+          <div className={classnames(styles.topBar, className)}>
+            <div className={styles.leftSide}>
+              <MenuNav navigationSlot={navigationSlot} />
+              <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />
+            </div>
+            <div className={styles.rightSide}>
+              <div className={styles.widgets}>
+                <MenuNav navigationSlot={widgetSlot} />
+              </div>
+              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
+              <MainDropdown menuItems={mainMenuItems} />
+            </div>
+          </div>
+        }
+      />
+    </Routes>
   );
 }
 
@@ -102,7 +119,7 @@ function VersionRelatedDropdowns({
   const localVersion = isWorkspace && !isNew && !currentLane;
 
   const currentVersion =
-    isWorkspace && !isNew && !location.search.includes('version') ? 'workspace' : component.version;
+    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;
 
   const methods = useConsumeMethods(consumeMethods, component, currentLane);
   return (

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

@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react';
-import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import classnames from 'classnames';
 import { Icon } from '@teambit/design.elements.icon';
 import { Dropdown } from '@teambit/design.inputs.dropdown';
-import { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';
 import { TopBarNav } from '../top-bar-nav';
 import styles from './menu.module.scss';
 import mobileStyles from './mobile-menu-nav.module.scss';
@@ -18,7 +17,6 @@ export function MobileMenuNav({
   widgetSlot: OrderedNavigationSlot;
   className?: string;
 }) {
-  const { url } = useRouteMatch();
   const totalSlots = useMemo(
     () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],
     [navigationSlot, widgetSlot]
@@ -27,7 +25,7 @@ export function MobileMenuNav({
   return (
     <Dropdown
       // @ts-ignore - mismatch between @types/react
-      placeholder={<Placeholder slots={totalSlots} baseUrl={url} />}
+      placeholder={<Placeholder slots={totalSlots} />}
       className={classnames(styles.navigation, styles.mobileNav, className)}
       dropClass={mobileStyles.mobileMenu}
     >
@@ -63,19 +61,20 @@ type PlaceholderProps = {
   baseUrl?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-function Placeholder({ slots, baseUrl = '', ...rest }: PlaceholderProps) {
+function Placeholder({ slots, ...rest }: PlaceholderProps) {
   return (
     <div {...rest} className={mobileStyles.placeholder}>
-      <Switch>
-        {slots?.map(([id, menuItem]) => {
-          const path = extendPath(baseUrl, menuItem?.props?.href);
-          return (
-            <Route key={id} exact path={path}>
-              {typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName}
-            </Route>
-          );
-        })}
-      </Switch>
+      <Routes>
+        {slots?.map(([id, menuItem]) => (
+          <Route
+            key={id}
+            path={menuItem?.props?.href}
+            element={
+              typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName
+            }
+          />
+        ))}
+      </Routes>
       <Icon of="fat-arrow-down" />
     </div>
   );