@teambit/component 0.0.636 → 0.0.640

package/{__preview-1643426469482.js → __preview-1643858579620.js}

@@ -1 +1 @@
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.636/dist/component.docs.mdx')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.640/dist/component.docs.mdx')]

package/dist/ui/menu/menu.js

@@ -4,6 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 require("core-js/modules/es.array.iterator.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -39,6 +41,16 @@ function _fullLoader() {
   return data;
 }
 
+function _baseUiRouting() {
+  const data = require("@teambit/base-ui.routing.routing-provider");
+
+  _baseUiRouting = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _lodash() {
   const data = require("lodash");
 
@@ -153,7 +165,8 @@ function Menu({
     navigationSlot: widgetSlot
   })), /*#__PURE__*/_react().default.createElement(VersionRelatedDropdowns, {
     component: component,
-    consumeMethods: consumeMethodSlot
+    consumeMethods: consumeMethodSlot,
+    host: host
   }), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MainDropdown, {
     menuItems: mainMenuItems
   })));
@@ -161,17 +174,24 @@ function Menu({
 
 function VersionRelatedDropdowns({
   component,
-  consumeMethods
+  consumeMethods,
+  host
 }) {
+  const location = (0, _baseUiRouting().useLocation)();
+  const isNew = component.tags.isEmpty();
+  const isWorkspace = host === 'teambit.workspace/workspace';
   const versionList = (0, _react().useMemo)(() => {
     var _component$tags;
 
-    return (_component$tags = component.tags) === null || _component$tags === void 0 ? void 0 : _component$tags.toArray().map(tag => {
+    const tagsArray = (_component$tags = component.tags) === null || _component$tags === void 0 ? void 0 : _component$tags.toArray().map(tag => {
       var _tag$version;
 
       return tag === null || tag === void 0 ? void 0 : (_tag$version = tag.version) === null || _tag$version === void 0 ? void 0 : _tag$version.version;
     }).filter(x => x !== undefined).reverse();
-  }, [component.tags]) || [];
+    const wsLink = [isWorkspace && !isNew ? 'workspace' : undefined];
+    return (0, _lodash().compact)([...wsLink, ...tagsArray]);
+  }, [component.tags, isWorkspace, isNew]);
+  const currentVersion = isWorkspace && !isNew && !location.search.includes('version') ? 'workspace' : component.version;
   const methods = useConsumeMethods(consumeMethods, component);
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, versionList.length > 0 && /*#__PURE__*/_react().default.createElement(_uiFoundationUiUseBox().UseBoxDropdown, {
     position: "bottom-end",
@@ -182,7 +202,8 @@ function VersionRelatedDropdowns({
     })
   }), /*#__PURE__*/_react().default.createElement(_componentUi().VersionDropdown, {
     versions: versionList,
-    currentVersion: component.version
+    currentVersion: currentVersion,
+    latestVersion: component.latest
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["menu.tsx"],"names":["Menu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","component","mainMenuItems","values","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","versionList","tags","toArray","map","tag","version","filter","x","undefined","reverse","methods","useConsumeMethods","length","useBox","id","name","componentModel","method","Component","Title"],"mappings":"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","sourcesContent":["import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { flatten, groupBy } 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 type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './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      </div>\n      <div className={styles.rightSide}>\n        <div className={styles.widgets}>\n          <MenuNav navigationSlot={widgetSlot} />\n        </div>\n        <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} />\n        <MainDropdown menuItems={mainMenuItems} />\n      </div>\n    </div>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n}) {\n  const versionList =\n    useMemo(\n      () =>\n        component.tags\n          ?.toArray()\n          .map((tag) => tag?.version?.version)\n          .filter((x) => x !== undefined)\n          .reverse(),\n      [component.tags]\n    ) || [];\n\n  const methods = useConsumeMethods(consumeMethods, component);\n  return (\n    <>\n      {versionList.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 versions={versionList} currentVersion={component.version} />\n    </>\n  );\n}\n\nfunction useConsumeMethods(consumeMethods: ConsumeMethodSlot, componentModel: ComponentModel): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel);\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel]\n  );\n}\n"]}
+{"version":3,"sources":["menu.tsx"],"names":["Menu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","component","mainMenuItems","values","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","isNew","tags","isEmpty","isWorkspace","versionList","tagsArray","toArray","map","tag","version","filter","x","undefined","reverse","wsLink","currentVersion","search","includes","methods","useConsumeMethods","length","useBox","id","name","latest","componentModel","method","Component","Title"],"mappings":"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","sourcesContent":["import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-ui.routing.routing-provider';\nimport { compact, flatten, groupBy } 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 type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './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      </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\n  const isWorkspace = host === 'teambit.workspace/workspace';\n  const versionList = useMemo(() => {\n    const tagsArray = component.tags\n      ?.toArray()\n      .map((tag) => tag?.version?.version)\n      .filter((x) => x !== undefined)\n      .reverse();\n    const wsLink = [isWorkspace && !isNew ? 'workspace' : undefined];\n\n    return compact([...wsLink, ...tagsArray]);\n  }, [component.tags, isWorkspace, isNew]);\n\n  const currentVersion =\n    isWorkspace && !isNew && !location.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(consumeMethods, component);\n  return (\n    <>\n      {versionList.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 versions={versionList} currentVersion={currentVersion} latestVersion={component.latest} />\n    </>\n  );\n}\n\nfunction useConsumeMethods(consumeMethods: ConsumeMethodSlot, componentModel: ComponentModel): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel);\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel]\n  );\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.636",
+  "version": "0.0.640",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.636"
+    "version": "0.0.640"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -26,24 +26,25 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
+    "@teambit/base-ui.routing.routing-provider": "1.0.0",
     "@teambit/component-id": "0.0.400",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.487",
-    "@teambit/aspect-loader": "0.0.636",
+    "@teambit/aspect-loader": "0.0.640",
     "@teambit/legacy-bit-id": "0.0.397",
     "@teambit/toolbox.string.capitalize": "0.0.482",
-    "@teambit/cli": "0.0.434",
-    "@teambit/config": "0.0.447",
-    "@teambit/express": "0.0.528",
-    "@teambit/graphql": "0.0.636",
+    "@teambit/cli": "0.0.437",
+    "@teambit/config": "0.0.450",
+    "@teambit/express": "0.0.531",
+    "@teambit/graphql": "0.0.640",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.636",
-    "@teambit/preview": "0.0.636",
-    "@teambit/pubsub": "0.0.636",
+    "@teambit/command-bar": "0.0.640",
+    "@teambit/preview": "0.0.640",
+    "@teambit/pubsub": "0.0.640",
     "@teambit/ui-foundation.ui.is-browser": "0.0.485",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.485",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.487",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.108",
-    "@teambit/ui": "0.0.636",
+    "@teambit/ui": "0.0.640",
     "@teambit/component-issues": "0.0.45",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.486",
     "@teambit/cli-table": "0.0.33",
@@ -52,10 +53,10 @@
     "@teambit/harmony.ui.aspect-box": "0.0.485",
     "@teambit/design.ui.pages.not-found": "0.0.353",
     "@teambit/design.ui.pages.server-error": "0.0.353",
-    "@teambit/compositions": "0.0.636",
-    "@teambit/deprecation": "0.0.636",
-    "@teambit/envs": "0.0.636",
-    "@teambit/component.ui.version-dropdown": "0.0.490",
+    "@teambit/compositions": "0.0.640",
+    "@teambit/deprecation": "0.0.640",
+    "@teambit/envs": "0.0.640",
+    "@teambit/component.ui.version-dropdown": "0.0.491",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.108",
     "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.485"
   },
@@ -76,7 +77,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.210",
+    "@teambit/legacy": "1.0.213",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -104,7 +105,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.210",
+        "@teambit/legacy": "1.0.213",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/ui/menu/menu.tsx

@@ -2,7 +2,8 @@ import { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropd
 import { VersionDropdown } from '@teambit/component.ui.version-dropdown';
 import { FullLoader } from '@teambit/legacy/dist/to-eject/full-loader';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
-import { flatten, groupBy } from 'lodash';
+import { useLocation } from '@teambit/base-ui.routing.routing-provider';
+import { compact, flatten, groupBy } from 'lodash';
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
 import { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';
@@ -48,7 +49,7 @@ export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot
         <div className={styles.widgets}>
           <MenuNav navigationSlot={widgetSlot} />
         </div>
-        <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} />
+        <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />
         <MainDropdown menuItems={mainMenuItems} />
       </div>
     </div>
@@ -58,20 +59,29 @@ export function Menu({ navigationSlot, widgetSlot, className, host, menuItemSlot
 function VersionRelatedDropdowns({
   component,
   consumeMethods,
+  host,
 }: {
   component: ComponentModel;
   consumeMethods: ConsumeMethodSlot;
+  host: string;
 }) {
-  const versionList =
-    useMemo(
-      () =>
-        component.tags
-          ?.toArray()
-          .map((tag) => tag?.version?.version)
-          .filter((x) => x !== undefined)
-          .reverse(),
-      [component.tags]
-    ) || [];
+  const location = useLocation();
+  const isNew = component.tags.isEmpty();
+
+  const isWorkspace = host === 'teambit.workspace/workspace';
+  const versionList = useMemo(() => {
+    const tagsArray = component.tags
+      ?.toArray()
+      .map((tag) => tag?.version?.version)
+      .filter((x) => x !== undefined)
+      .reverse();
+    const wsLink = [isWorkspace && !isNew ? 'workspace' : undefined];
+
+    return compact([...wsLink, ...tagsArray]);
+  }, [component.tags, isWorkspace, isNew]);
+
+  const currentVersion =
+    isWorkspace && !isNew && !location.search.includes('version') ? 'workspace' : component.version;
 
   const methods = useConsumeMethods(consumeMethods, component);
   return (
@@ -83,7 +93,7 @@ function VersionRelatedDropdowns({
           Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}
         />
       )}
-      <VersionDropdown versions={versionList} currentVersion={component.version} />
+      <VersionDropdown versions={versionList} currentVersion={currentVersion} latestVersion={component.latest} />
     </>
   );
 }