@teambit/component 0.0.741 → 0.0.744

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>
   );

package/ui/menu/nav-plugin.tsx

@@ -1,13 +1,12 @@
-// import { ReactNode } from 'react';
 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 type NavPluginProps = {
   displayName?: string;
-} & NavLinkProps;
+} & LinkProps;
 
 export type NavPlugin = {
   props: NavPluginProps;

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

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

package/ui/use-component-from-location.tsx

@@ -0,0 +1,12 @@
+import { useParams } from 'react-router-dom';
+
+/** component url is comprised of letters, numbers, "_", "-", "/" but should not include trailing "/", and should not include "~" */
+const componentRegex = /^[\w/-]*[\w-]/;
+export function useIdFromLocation() {
+  const params = useParams();
+  const splat = params['*'];
+  if (!splat) return undefined;
+
+  const match = componentRegex.exec(splat);
+  return match?.[0];
+}

package/ui/use-component.tsx

@@ -1,4 +1,3 @@
-import { useRouteMatch } from 'react-router-dom';
 import { ComponentID } from '@teambit/component-id';
 import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
@@ -13,18 +12,13 @@ export type Component = {
   componentDescriptor?: ComponentDescriptor;
 };
 
-type ComponentRoute = {
-  componentId?: string;
-};
-
-export function useComponent(host: string, id?: ComponentID): Component {
-  const {
-    params: { componentId },
-  } = useRouteMatch<ComponentRoute>();
+export function useComponent(host: string, id?: string | ComponentID): Component {
   const query = useQuery();
   const version = query.get('version') || undefined;
   const lanesContext = useLanesContext();
-  const targetId = id?.toString({ ignoreVersion: true }) || componentId;
+
+  const targetId =
+    (typeof id === 'string' && id) || (typeof id !== 'undefined' && id.toString({ ignoreVersion: true }));
   if (!targetId) throw new TypeError('useComponent received no component id');
   const currentLane = lanesContext?.viewedLane;
   // when on a lane, always fetch all the logs starting from the 'head' version