@teambit/component 0.0.747 → 0.0.748

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

@@ -81,6 +81,16 @@ function _designInputs() {
   return data;
 }
 
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
+
+  _baseReactNavigation = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _topBarNav() {
   const data = require("../top-bar-nav");
 
@@ -159,17 +169,43 @@ function Placeholder(_ref) {
       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().Routes, null, slots === null || slots === void 0 ? void 0 : slots.map(([id, menuItem]) => {
-    var _menuItem$props, _menuItem$props2, _menuItem$props3, _menuItem$props4;
-
-    return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
-      key: id,
-      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, {
+  }), slots.map(([id, menuItem]) => /*#__PURE__*/_react().default.createElement(ShowWhenMatch, {
+    key: id,
+    href: menuItem.props.href || '',
+    end: menuItem.props.exact
+  }, typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName)), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
     of: "fat-arrow-down"
   }));
 }
 
+function ShowWhenMatch({
+  href,
+  children,
+  caseSensitive,
+  end: exact
+}) {
+  const isMatch = useLinkMatch(href, {
+    caseSensitive,
+    exact
+  });
+  if (!isMatch) return null;
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+}
+
+function useLinkMatch(href, {
+  caseSensitive,
+  exact
+} = {}) {
+  const location = (0, _baseReactNavigation().useLocation)();
+  let pathname = (location === null || location === void 0 ? void 0 : location.pathname) || '/';
+  let destination = (0, _reactRouterDom().useResolvedPath)(href).pathname;
+
+  if (!caseSensitive) {
+    pathname = pathname.toLowerCase();
+    destination = destination.toLowerCase();
+  }
+
+  return destination === pathname || !exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/';
+}
+
 //# sourceMappingURL=mobile-menu-nav.js.map

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

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.747",
+  "version": "0.0.748",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.747"
+    "version": "0.0.748"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -31,25 +31,25 @@
     "@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.747",
+    "@teambit/aspect-loader": "0.0.748",
     "@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.493",
     "@teambit/config": "0.0.506",
     "@teambit/express": "0.0.591",
-    "@teambit/graphql": "0.0.747",
+    "@teambit/graphql": "0.0.748",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.747",
+    "@teambit/command-bar": "0.0.748",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
-    "@teambit/preview": "0.0.747",
-    "@teambit/pubsub": "0.0.747",
-    "@teambit/react-router": "0.0.747",
+    "@teambit/preview": "0.0.748",
+    "@teambit/pubsub": "0.0.748",
+    "@teambit/react-router": "0.0.748",
     "@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.490",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.115",
-    "@teambit/ui": "0.0.747",
+    "@teambit/ui": "0.0.748",
     "@teambit/component-issues": "0.0.53",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
     "@teambit/cli-table": "0.0.34",
@@ -60,9 +60,9 @@
     "@teambit/harmony.ui.aspect-box": "0.0.486",
     "@teambit/design.ui.pages.not-found": "0.0.355",
     "@teambit/design.ui.pages.server-error": "0.0.355",
-    "@teambit/compositions": "0.0.747",
-    "@teambit/deprecation": "0.0.747",
-    "@teambit/envs": "0.0.747",
+    "@teambit/compositions": "0.0.748",
+    "@teambit/deprecation": "0.0.748",
+    "@teambit/envs": "0.0.748",
     "@teambit/legacy-component-log": "0.0.392",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/envs.ui.env-icon": "0.0.486",

package/{preview-1653967602594.js → preview-1654053813292.js}

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

package/tsconfig.json

@@ -31,5 +31,9 @@
   },
   "exclude": [
     "dist"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
   ]
 }

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

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
-import { Routes, Route } from 'react-router-dom';
+import React, { ReactNode, useMemo } from 'react';
+import { useResolvedPath } from 'react-router-dom';
 import classnames from 'classnames';
 import { Icon } from '@teambit/design.elements.icon';
 import { Dropdown } from '@teambit/design.inputs.dropdown';
+import { useLocation } from '@teambit/base-react.navigation.link';
 import { TopBarNav } from '../top-bar-nav';
 import styles from './menu.module.scss';
 import mobileStyles from './mobile-menu-nav.module.scss';
@@ -64,18 +65,44 @@ type PlaceholderProps = {
 function Placeholder({ slots, ...rest }: PlaceholderProps) {
   return (
     <div {...rest} className={mobileStyles.placeholder}>
-      <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>
+      {slots.map(([id, menuItem]) => (
+        <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>
+          {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}
+        </ShowWhenMatch>
+      ))}
       <Icon of="fat-arrow-down" />
     </div>
   );
 }
+
+function ShowWhenMatch({
+  href,
+  children,
+  caseSensitive,
+  end: exact,
+}: {
+  href: string;
+  children: ReactNode;
+  caseSensitive?: boolean;
+  end?: boolean;
+}) {
+  const isMatch = useLinkMatch(href, { caseSensitive, exact });
+  if (!isMatch) return null;
+  return <>{children}</>;
+}
+
+function useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {
+  const location = useLocation();
+  let pathname = location?.pathname || '/';
+  let destination = useResolvedPath(href).pathname;
+
+  if (!caseSensitive) {
+    pathname = pathname.toLowerCase();
+    destination = destination.toLowerCase();
+  }
+
+  return (
+    destination === pathname ||
+    (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')
+  );
+}