@teambit/component 0.0.741 → 0.0.744

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

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

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":"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"}
+{"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.741",
+  "version": "0.0.744",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.741"
+    "version": "0.0.744"
   },
   "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.741",
+    "@teambit/aspect-loader": "0.0.744",
     "@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.741",
+    "@teambit/cli": "0.0.493",
+    "@teambit/config": "0.0.506",
+    "@teambit/express": "0.0.591",
+    "@teambit/graphql": "0.0.744",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.741",
+    "@teambit/command-bar": "0.0.744",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
-    "@teambit/preview": "0.0.741",
-    "@teambit/pubsub": "0.0.741",
-    "@teambit/react-router": "0.0.741",
+    "@teambit/preview": "0.0.744",
+    "@teambit/pubsub": "0.0.744",
+    "@teambit/react-router": "0.0.744",
     "@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.741",
+    "@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.744",
     "@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/compositions": "0.0.741",
-    "@teambit/deprecation": "0.0.741",
-    "@teambit/envs": "0.0.741",
+    "@teambit/design.ui.pages.not-found": "0.0.355",
+    "@teambit/design.ui.pages.server-error": "0.0.355",
+    "@teambit/compositions": "0.0.744",
+    "@teambit/deprecation": "0.0.744",
+    "@teambit/envs": "0.0.744",
     "@teambit/legacy-component-log": "0.0.392",
-    "@teambit/design.ui.pages.not-found": "0.0.354",
-    "@teambit/design.ui.pages.server-error": "0.0.354",
     "@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-1653494536947.js → preview-1653827208409.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.741/dist/component.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.741/dist/component.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.744/dist/component.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.744/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 (