@teambit/component.ui.version-dropdown 0.0.785 → 0.0.787

package/dist/version-dropdown.module.scss

@@ -28,10 +28,11 @@
   margin-bottom: 2px;
 }
 
-.versionContainer {
+.versionContainerRoot {
   max-height: 240px;
   overflow-y: scroll;
   padding-bottom: 8px;
+  position: relative;
 }
 
 .versionRow {
@@ -103,5 +104,19 @@
 }
 
 .loading {
-  color: var(--bit-bg-heavy, #f6f6f6);
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.loader {
+  color: var(--bit-bg-dent, #f6f6f6);
+  > div {
+    padding: 8px 0px;
+  }
+}
+
+.versionMenuContainer {
+  display: initial;
+  &.hide {
+    display: none;
+  }
 }

package/dist/version-dropdown.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { expect } from 'chai';
 import { VersionDropdownWithOneVersion, VersionDropdownWithMultipleVersions } from './version-dropdown.composition';
 describe('version dropdown tests', () => {
@@ -15,14 +15,14 @@ describe('version dropdown tests', () => {
         const textVersion = getByText(/^0.1$/);
         expect(textVersion).to.exist;
     });
-    it('should return multiple versions', () => {
-        const { getByText, getAllByText } = render(React.createElement(VersionDropdownWithMultipleVersions, null));
-        const textVersionOne = getByText(/^0.1$/);
-        const textVersionTwo = getByText(/^0.2$/);
-        const textVersionThree = getAllByText(/^0.3$/);
-        expect(textVersionOne).to.exist;
-        expect(textVersionTwo).to.exist;
-        expect(textVersionThree).to.exist;
+    it('should not return multiple versions when mounted (lazy loading)', () => {
+        render(React.createElement(VersionDropdownWithMultipleVersions, null));
+        const textVersionOne = screen.queryByText(/^0.1$/);
+        const textVersionTwo = screen.queryByText(/^0.2$/);
+        const textVersionThree = screen.getAllByText(/^0.3$/);
+        expect(textVersionOne).to.be.null;
+        expect(textVersionTwo).to.be.null;
+        expect(textVersionThree).to.have.lengthOf.at.least(1);
     });
 });
 //# sourceMappingURL=version-dropdown.spec.js.map

package/dist/version-dropdown.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"version-dropdown.spec.js","sourceRoot":"","sources":["../version-dropdown.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,6BAA6B,EAAE,mCAAmC,EAAE,MAAM,gCAAgC,CAAC;AAEpH,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC;;;SAGK;IACL,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,6BAA6B,OAAG,CAAC,CAAC;QAChE,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACvC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,oBAAC,mCAAmC,OAAG,CAAC,CAAC;QACpF,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"version-dropdown.spec.js","sourceRoot":"","sources":["../version-dropdown.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,6BAA6B,EAAE,mCAAmC,EAAE,MAAM,gCAAgC,CAAC;AAEpH,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC;;;SAGK;IACL,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,6BAA6B,OAAG,CAAC,CAAC;QAChE,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACvC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,iEAAiE,EAAE,GAAG,EAAE;QACzE,MAAM,CAAC,oBAAC,mCAAmC,OAAG,CAAC,CAAC;QAChD,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAEtD,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAClC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAClC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/version-info/version-info.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DropdownComponentVersion } from '../version-dropdown';
 export declare type VersionInfoProps = DropdownComponentVersion & {
     currentVersion?: string;
@@ -6,4 +6,11 @@ export declare type VersionInfoProps = DropdownComponentVersion & {
     overrideVersionHref?: (version: string) => string;
     showDetails?: boolean;
 };
-export declare function VersionInfo({ version, currentVersion, latestVersion, date, username, email, overrideVersionHref, showDetails, message, tag, }: VersionInfoProps): JSX.Element;
+export declare const VersionInfo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Partial<import("@teambit/legacy-component-log").LegacyComponentLog> & {
+    version: string;
+} & {
+    currentVersion?: string;
+    latestVersion?: string;
+    overrideVersionHref?: (version: string) => string;
+    showDetails?: boolean;
+} & React.RefAttributes<HTMLDivElement>>>;

package/dist/version-info/version-info.js

@@ -6,14 +6,17 @@ import { UserAvatar } from '@teambit/design.ui.avatar';
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
 import classNames from 'classnames';
 import styles from './version-info.module.scss';
-export function VersionInfo({ version, currentVersion, latestVersion, date, username, email, overrideVersionHref, showDetails, message, tag, }) {
+export const VersionInfo = React.memo(React.forwardRef(_VersionInfo));
+function _VersionInfo({ version, currentVersion, latestVersion, date, username, displayName, email, overrideVersionHref, showDetails, message, tag, profileImage, }, ref) {
     const isCurrent = version === currentVersion;
     const author = useMemo(() => {
         return {
-            displayName: username,
+            displayName: displayName !== null && displayName !== void 0 ? displayName : '',
             email,
+            name: username !== null && username !== void 0 ? username : '',
+            profileImage,
         };
-    }, [version]);
+    }, [displayName, email, username, profileImage]);
     const timestamp = useMemo(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
     const currentVersionRef = useRef(null);
     useEffect(() => {
@@ -23,17 +26,23 @@ export function VersionInfo({ version, currentVersion, latestVersion, date, user
         }
     }, [isCurrent]);
     const href = overrideVersionHref ? overrideVersionHref(version) : `?version=${version}`;
-    return (React.createElement("div", { ref: currentVersionRef },
+    const formattedVersion = useMemo(() => {
+        return tag ? version : version.slice(0, 6);
+    }, [tag, version]);
+    const isLatest = version === latestVersion;
+    return (React.createElement("div", { ref: ref || currentVersionRef },
         React.createElement(MenuLinkItem, { active: isCurrent, href: href, className: styles.versionRow },
             React.createElement("div", { className: styles.version },
                 React.createElement(UserAvatar, { size: 24, account: author, className: styles.versionUserAvatar, showTooltip: true }),
-                React.createElement(Ellipsis, { className: classNames(styles.versionName, tag && styles.tag, !tag && styles.snap) }, version),
-                version === latestVersion && React.createElement(VersionLabel, { className: styles.label, status: "latest" }),
-                showDetails && commitMessage(message)),
+                React.createElement(Ellipsis, { className: classNames(styles.versionName) }, formattedVersion),
+                isLatest && React.createElement(VersionLabel, { status: "latest" }),
+                React.createElement(CommitMessage, { message: message, showDetails: showDetails })),
             React.createElement(Ellipsis, { className: styles.versionTimestamp },
                 React.createElement(TimeAgo, { date: timestamp })))));
 }
-function commitMessage(message) {
+function CommitMessage({ message, showDetails }) {
+    if (!showDetails)
+        return null;
     if (!message || message === '')
         return React.createElement(Ellipsis, { className: styles.emptyMessage }, "No commit message");
     return React.createElement(Ellipsis, { className: styles.commitMessage }, message);

package/dist/version-info/version-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":"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"}

package/dist/version-info/version-info.module.scss

@@ -4,41 +4,47 @@
   align-items: center;
   height: 40px;
   padding: 0 16px;
+  line-height: 24px;
 }
+
 .versionTimestamp {
   min-width: fit-content;
   margin-right: 2px;
   text-align: right;
 }
+
 .versionUserAvatar {
+  flex: none;
   padding: 0px 8px;
 }
+
 .laneIcon {
   padding: 0px 4px;
 }
+
 .version {
   max-width: 70%;
   display: flex;
   flex-direction: row;
-  align-content: space-between;
   align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
 }
+
 .versionName {
   padding: 0px 8px;
-  &.tag {
-    min-width: fit-content;
-  }
-  &.snap {
-    min-width: 20%;
-  }
+  flex-grow: 1;
+  min-width: fit-content;
 }
 
-.commitMessage,
-.emptyMessage {
-  min-width: 50%;
+.commitMessage {
+  flex-grow: 1;
   padding: 0px 8px;
 }
+
 .emptyMessage {
   font-style: italic;
   color: var(--bit-text-color-light, #6c707c);
+  padding: 0px 8px;
+  font-size: (var-bit-p-xs, 14px);
 }

package/index.ts

@@ -1,2 +1,4 @@
+export { SimpleVersion, DetailedVersion } from './version-dropdown-placeholder';
+export type { VersionProps } from './version-dropdown-placeholder';
 export { VersionDropdown } from './version-dropdown';
-export type { DropdownComponentVersion } from './version-dropdown';
+export type { DropdownComponentVersion, GetActiveTabIndex } from './version-dropdown';

package/package.json

@@ -1,32 +1,34 @@
 {
   "name": "@teambit/component.ui.version-dropdown",
-  "version": "0.0.785",
+  "version": "0.0.787",
   "homepage": "https://bit.cloud/teambit/component/ui/version-dropdown",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/version-dropdown",
-    "version": "0.0.785"
+    "version": "0.0.787"
   },
   "dependencies": {
     "classnames": "2.2.6",
+    "semver": "7.3.4",
     "core-js": "^3.0.0",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
     "@teambit/design.ui.avatar": "1.0.16",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
     "@teambit/design.ui.time-ago": "0.0.366",
     "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/base-ui.loaders.skeleton": "1.0.1",
     "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
     "@teambit/evangelist.surfaces.dropdown": "1.0.2",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.499",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.144",
-    "@teambit/legacy-component-log": "0.0.399",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.145",
+    "@teambit/legacy-component-log": "0.0.400",
     "@teambit/ui-foundation.ui.use-box.tab": "0.0.116",
     "@teambit/component.ui.version-label": "0.0.504"
   },
   "devDependencies": {
     "@types/classnames": "2.2.11",
     "@types/react": "^17.0.8",
+    "@types/semver": "7.3.4",
     "@types/chai": "4.2.15",
     "chai": "4.3.0",
     "@types/mocha": "9.1.0",

package/version-dropdown-placeholder.module.scss

@@ -1,25 +1,22 @@
-.simple {
+.simple,
+.detailed {
   cursor: pointer;
   border: 1px solid var(--bit-border-color, #babec9);
   border-radius: 6px;
   transition: background-color 300ms ease-in-out;
   height: 30px;
-  padding: 0 8px;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   user-select: none;
+  flex-wrap: nowrap;
+  gap: 8px;
+  padding: 8px;
 
-  > div {
-    margin-right: 5px;
-  }
   &:hover {
     background-color: var(--bit-bg-heavy);
   }
 
-  > div {
-    max-width: 80px;
-  }
   &.disabled {
     cursor: default;
     background-color: #ededed;
@@ -27,71 +24,24 @@
       display: none;
     }
   }
-  .versionName {
-    &.tag {
-      min-width: fit-content;
-    }
-    &.snap {
-      min-width: 20%;
-    }
-  }
+}
+.versionName {
+  flex-grow: 1;
+  min-width: fit-content;
 }
 
-.detailed {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 0 8px;
-  height: 30px;
-  border-radius: 6px;
-  user-select: none;
-  transition: background-color 300ms ease-in-out;
-  border: 1px solid var(--bit-border-color, #babec9);
+.commitMessage {
+  flex-grow: 1;
+}
 
-  cursor: pointer;
-  > div {
-    margin-right: 5px;
-  }
-  &:hover {
-    background-color: var(--bit-bg-heavy);
-  }
-  > div {
-    max-width: 80px;
-  }
-  &.disabled {
-    cursor: default;
-    background-color: #ededed;
-    > span {
-      display: none;
-    }
-  }
-  .versionName {
-    &.tag {
-      min-width: fit-content;
-    }
-    &.snap {
-      min-width: 20%;
-    }
-  }
-  .commitMessage,
-  .emptyMessage {
-    max-width: 50%;
-    padding: 0px 8px;
-  }
-  .emptyMessage {
-    font-style: italic;
-    color: var(--bit-text-color-light, #6c707c);
-  }
-  .author {
-    text-transform: capitalize;
-    min-width: fit-content;
-  }
-  .versionTimestamp {
-    min-width: fit-content;
-    margin-right: 2px;
-    text-align: right;
-  }
-  .versionUserAvatar {
-    flex: none;
+.versionUserAvatar {
+  flex: none;
+  margin-right: 5px;
+}
+
+.loader {
+  color: var(--bit-bg-dent, #f6f6f6);
+  > span {
+    padding: 4px;
   }
 }

package/version-dropdown-placeholder.tsx

@@ -1,85 +1,108 @@
-import React, { HTMLAttributes, useMemo } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
 import classNames from 'classnames';
+import * as semver from 'semver';
 import { Icon } from '@teambit/evangelist.elements.icon';
 import { TimeAgo } from '@teambit/design.ui.time-ago';
 import { UserAvatar } from '@teambit/design.ui.avatar';
+import { WordSkeleton } from '@teambit/base-ui.loaders.skeleton';
 import { DropdownComponentVersion } from './version-dropdown';
 
 import styles from './version-dropdown-placeholder.module.scss';
 
 export type VersionProps = {
-  tags: DropdownComponentVersion[];
-  snaps?: DropdownComponentVersion[];
-  currentVersion: string;
+  currentVersion?: string;
+  isTag?: (version?: string) => boolean;
   disabled?: boolean;
+  hasMoreVersions?: boolean;
+  showFullVersion?: boolean;
+  loading?: boolean;
+  useCurrentVersionLog?: (props: { skip?: boolean; version?: string }) => DropdownComponentVersion | undefined;
 } & HTMLAttributes<HTMLDivElement>;
 
-const getVersionDetailFromTags = (version, tags) => tags.find((tag) => tag.tag === version);
-const getVersionDetailFromSnaps = (version, snaps) => (snaps || []).find((snap) => snap.hash === version);
-const getVersionDetails = (version, tags, snaps) => {
-  if (version === 'workspace' || version === 'new') return { version };
-  return getVersionDetailFromTags(version, tags) || getVersionDetailFromSnaps(version, snaps);
-};
-
-export function SimpleVersion({ currentVersion, className, disabled, tags, snaps }: VersionProps) {
-  const showArrowDown = useMemo(() => (snaps || []).concat(tags).length > 1, [tags, snaps]);
-  const versionDetails = useMemo(() => getVersionDetails(currentVersion, tags, snaps), [currentVersion, tags, snaps]);
+export function SimpleVersion({
+  currentVersion,
+  className,
+  disabled,
+  hasMoreVersions,
+  isTag = (version) => semver.valid(version) !== null,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  useCurrentVersionLog,
+  showFullVersion,
+  loading,
+  ...rest
+}: VersionProps) {
+  if (loading) return <WordSkeleton className={styles.loader} length={9} />;
+  const formattedVersion = showFullVersion || isTag(currentVersion) ? currentVersion : currentVersion?.slice(0, 6);
 
   return (
-    <div className={classNames(styles.simple, className, disabled && styles.disabled)}>
-      <Ellipsis
-        className={classNames(
-          styles.versionName,
-          versionDetails?.tag && styles.tag,
-          !versionDetails?.tag && styles.snap
-        )}
-      >
-        {currentVersion}
+    <div {...rest} className={classNames(styles.simple, className, disabled && styles.disabled)}>
+      <Ellipsis className={classNames(styles.versionName)} onClick={rest.onClick}>
+        {formattedVersion}
       </Ellipsis>
-      {showArrowDown && <Icon of="fat-arrow-down" />}
+      {hasMoreVersions && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
     </div>
   );
 }
 
-export function DetailedVersion({ currentVersion, className, disabled, snaps, tags }: VersionProps) {
-  const showArrowDown = useMemo(() => (snaps || []).concat(tags).length > 1, [tags, snaps]);
-  const versionDetails = useMemo(() => getVersionDetails(currentVersion, tags, snaps), [currentVersion, tags, snaps]);
-
-  const timestamp = useMemo(
-    () => (versionDetails?.date ? new Date(parseInt(versionDetails.date)).toString() : new Date().toString()),
-    [versionDetails?.date]
-  );
-
-  const author = useMemo(() => {
+export function DetailedVersion({
+  currentVersion,
+  className,
+  disabled,
+  hasMoreVersions,
+  isTag = (version) => semver.valid(version) !== null,
+  loading,
+  useCurrentVersionLog,
+  showFullVersion,
+  ...rest
+}: VersionProps) {
+  const currentVersionLog = useCurrentVersionLog?.({ skip: loading, version: currentVersion });
+  const { displayName, message, username, email, date: _date, profileImage } = currentVersionLog || {};
+  const author = React.useMemo(() => {
     return {
-      displayName: versionDetails?.username,
-      email: versionDetails?.email,
+      displayName: displayName ?? '',
+      email,
+      name: username ?? '',
+      profileImage,
     };
-  }, [versionDetails]);
+  }, [displayName, email, username, profileImage]);
+  const formattedVersion = showFullVersion || isTag(currentVersion) ? currentVersion : currentVersion?.slice(0, 6);
+
+  const date = _date ? new Date(+_date) : undefined;
+  const timestamp = React.useMemo(() => (date ? new Date(+date).toString() : new Date().toString()), [date]);
+  if (loading) return <WordSkeleton className={styles.loader} length={9} />;
 
   return (
-    <div className={classNames(styles.detailed, className, disabled && styles.disabled)}>
-      <UserAvatar size={24} account={author} className={styles.versionUserAvatar} showTooltip={true} />
-      <Ellipsis
-        className={classNames(
-          styles.versionName,
-          versionDetails?.tag && styles.tag,
-          !versionDetails?.tag && styles.snap
-        )}
-      >
-        {currentVersion}
+    <div {...rest} className={classNames(styles.detailed, className, disabled && styles.disabled)}>
+      <UserAvatar
+        size={24}
+        account={author ?? {}}
+        className={styles.versionUserAvatar}
+        showTooltip={true}
+        onClick={rest.onClick}
+      />
+      <Ellipsis className={classNames(styles.versionName)} onClick={rest.onClick}>
+        {formattedVersion}
       </Ellipsis>
-      {commitMessage(versionDetails?.message)}
-      <Ellipsis className={styles.versionTimestamp}>
-        <TimeAgo date={timestamp} />
+      {commitMessage(message, rest.onClick)}
+      <Ellipsis className={styles.versionTimestamp} onClick={rest.onClick}>
+        <TimeAgo date={timestamp} onClick={rest.onClick} />
       </Ellipsis>
-      {showArrowDown && <Icon of="fat-arrow-down" />}
+      {hasMoreVersions && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
     </div>
   );
 }
 
-function commitMessage(message?: string) {
-  if (!message || message === '') return <Ellipsis className={styles.emptyMessage}>No commit message</Ellipsis>;
-  return <Ellipsis className={styles.commitMessage}>{message}</Ellipsis>;
+function commitMessage(message?: string, onClick?: React.MouseEventHandler<HTMLDivElement> | undefined) {
+  if (!message || message === '')
+    return (
+      <Ellipsis className={styles.emptyMessage} onClick={onClick}>
+        No commit message
+      </Ellipsis>
+    );
+  return (
+    <Ellipsis className={styles.commitMessage} onClick={onClick}>
+      {message}
+    </Ellipsis>
+  );
 }

package/version-dropdown.composition.tsx

@@ -8,17 +8,28 @@ const style = { display: 'flex', justifyContent: 'center', alignContent: 'center
 export const VersionDropdownWithOneVersion = () => {
   return (
     <ThemeCompositions style={style}>
-      <VersionDropdown tags={[{ version: '0.1' }]} currentVersion="0.1" />
+      <VersionDropdown
+        useComponentVersions={() => ({
+          tags: [{ version: '0.1' }],
+        })}
+        currentVersion="0.1"
+      />
     </ThemeCompositions>
   );
 };
 
 export const VersionDropdownWithMultipleVersions = () => {
   const versions = ['0.3', '0.2', '0.1'].map((version) => ({ version }));
+
   return (
     <ThemeCompositions style={style}>
       <MemoryRouter>
-        <VersionDropdown tags={versions} currentVersion={versions[0].version} />
+        <VersionDropdown
+          useComponentVersions={() => ({
+            tags: [{ version: '0.1' }],
+          })}
+          currentVersion={versions[0].version}
+        />
       </MemoryRouter>
     </ThemeCompositions>
   );

package/version-dropdown.module.scss

@@ -28,10 +28,11 @@
   margin-bottom: 2px;
 }
 
-.versionContainer {
+.versionContainerRoot {
   max-height: 240px;
   overflow-y: scroll;
   padding-bottom: 8px;
+  position: relative;
 }
 
 .versionRow {
@@ -103,5 +104,19 @@
 }
 
 .loading {
-  color: var(--bit-bg-heavy, #f6f6f6);
+  color: var(--bit-bg-dent, #f6f6f6);
+}
+
+.loader {
+  color: var(--bit-bg-dent, #f6f6f6);
+  > div {
+    padding: 8px 0px;
+  }
+}
+
+.versionMenuContainer {
+  display: initial;
+  &.hide {
+    display: none;
+  }
 }

package/version-dropdown.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { expect } from 'chai';
 import { VersionDropdownWithOneVersion, VersionDropdownWithMultipleVersions } from './version-dropdown.composition';
 
@@ -16,13 +16,14 @@ describe('version dropdown tests', () => {
     const textVersion = getByText(/^0.1$/);
     expect(textVersion).to.exist;
   });
-  it('should return multiple versions', () => {
-    const { getByText, getAllByText } = render(<VersionDropdownWithMultipleVersions />);
-    const textVersionOne = getByText(/^0.1$/);
-    const textVersionTwo = getByText(/^0.2$/);
-    const textVersionThree = getAllByText(/^0.3$/);
-    expect(textVersionOne).to.exist;
-    expect(textVersionTwo).to.exist;
-    expect(textVersionThree).to.exist;
+  it('should not return multiple versions when mounted (lazy loading)', () => {
+    render(<VersionDropdownWithMultipleVersions />);
+    const textVersionOne = screen.queryByText(/^0.1$/);
+    const textVersionTwo = screen.queryByText(/^0.2$/);
+    const textVersionThree = screen.getAllByText(/^0.3$/);
+
+    expect(textVersionOne).to.be.null;
+    expect(textVersionTwo).to.be.null;
+    expect(textVersionThree).to.have.lengthOf.at.least(1);
   });
 });