@teambit/component.ui.version-dropdown 0.0.0-0aa660598a05d04f2b124cb0ae8b4a1c05b66d78

package/dist/version-dropdown.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionDropdown = exports.LOCAL_VERSION = void 0;
+const react_1 = __importStar(require("react"));
+const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
+const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
+const ui_foundation_ui_use_box_tab_1 = require("@teambit/ui-foundation.ui.use-box.tab");
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
+const classnames_1 = __importDefault(require("classnames"));
+const version_dropdown_module_scss_1 = __importDefault(require("./version-dropdown.module.scss"));
+const version_info_1 = require("./version-info");
+const lane_info_1 = require("./lane-info");
+const version_dropdown_placeholder_1 = require("./version-dropdown-placeholder");
+exports.LOCAL_VERSION = 'workspace';
+exports.VersionDropdown = react_1.default.memo(_VersionDropdown);
+const VersionMenu = react_1.default.memo(_VersionMenu);
+function _VersionDropdown(_a) {
+    var { currentVersion, latestVersion, localVersion, useCurrentVersionLog, hasMoreVersions, loading, overrideVersionHref, className, placeholderClassName, getActiveTabIndex, dropdownClassName, menuClassName, showVersionDetails = true, disabled, PlaceholderComponent: _PlaceholderComponent, currentLane, useComponentVersions, lanes } = _a, rest = __rest(_a, ["currentVersion", "latestVersion", "localVersion", "useCurrentVersionLog", "hasMoreVersions", "loading", "overrideVersionHref", "className", "placeholderClassName", "getActiveTabIndex", "dropdownClassName", "menuClassName", "showVersionDetails", "disabled", "PlaceholderComponent", "currentLane", "useComponentVersions", "lanes"]);
+    const [key, setKey] = (0, react_1.useState)(0);
+    const singleVersion = !hasMoreVersions;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    react_1.default.useEffect(() => {
+        if (loading && open) {
+            setOpen(false);
+        }
+    }, [loading]);
+    const handlePlaceholderClicked = (e) => {
+        if (loading)
+            return;
+        if (e.target === e.currentTarget) {
+            setOpen((o) => !o);
+        }
+    };
+    const defaultPlaceholder = (react_1.default.createElement(version_dropdown_placeholder_1.SimpleVersion, { useCurrentVersionLog: useCurrentVersionLog, disabled: disabled, className: placeholderClassName, currentVersion: currentVersion, onClick: handlePlaceholderClicked, hasMoreVersions: hasMoreVersions, loading: loading, showFullVersion: currentVersion === 'workspace' }));
+    const PlaceholderComponent = _PlaceholderComponent ? (react_1.default.createElement(_PlaceholderComponent, { useCurrentVersionLog: useCurrentVersionLog, disabled: disabled, className: placeholderClassName, currentVersion: currentVersion, onClick: handlePlaceholderClicked, hasMoreVersions: hasMoreVersions, loading: loading, showFullVersion: currentVersion === 'workspace' })) : (defaultPlaceholder);
+    if (disabled || (singleVersion && !loading)) {
+        return react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.noVersions, className) }, PlaceholderComponent);
+    }
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionDropdown, className) }),
+        react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.dropdown, dropdownClassName), dropClass: (0, classnames_1.default)(version_dropdown_module_scss_1.default.menu, menuClassName), open: open, onClick: handlePlaceholderClicked, onClickOutside: () => setOpen(false), onChange: (_e, _open) => _open && setKey((x) => x + 1), PlaceholderComponent: (_a) => {
+                var { children } = _a, other = __rest(_a, ["children"]);
+                return (react_1.default.createElement("div", Object.assign({}, other, { className: placeholderClassName, onClick: handlePlaceholderClicked }), children));
+            }, placeholder: PlaceholderComponent },
+            react_1.default.createElement(VersionMenu, { className: menuClassName, key: key, currentVersion: currentVersion, latestVersion: latestVersion, localVersion: localVersion, overrideVersionHref: overrideVersionHref, showVersionDetails: showVersionDetails, currentLane: currentLane, getActiveTabIndex: getActiveTabIndex, lanes: lanes, useVersions: useComponentVersions, onVersionClicked: () => setOpen(false), open: open }))));
+}
+const defaultActiveTabIndex = (currentVersion, tabs = [], tags, snaps) => {
+    if ((snaps || []).some((snap) => snap.version === currentVersion))
+        return tabs.findIndex((tab) => tab.name === 'SNAP');
+    return 0;
+};
+const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'];
+function _VersionMenu(_a) {
+    var _b, _c;
+    var { currentVersion, localVersion, latestVersion, overrideVersionHref, showVersionDetails, useVersions, currentLane, lanes, getActiveTabIndex = defaultActiveTabIndex, loading: loadingFromProps, open, onVersionClicked } = _a, rest = __rest(_a, ["currentVersion", "localVersion", "latestVersion", "overrideVersionHref", "showVersionDetails", "useVersions", "currentLane", "lanes", "getActiveTabIndex", "loading", "open", "onVersionClicked"]);
+    const { snaps, tags, loading: loadingVersions } = (useVersions === null || useVersions === void 0 ? void 0 : useVersions()) || {};
+    const loading = loadingFromProps || loadingVersions;
+    const tabs = react_1.default.useMemo(() => VERSION_TAB_NAMES.map((name) => {
+        switch (name) {
+            case 'SNAP':
+                return { name, payload: snaps || [] };
+            case 'LANE':
+                return { name, payload: lanes || [] };
+            default:
+                return { name, payload: tags || [] };
+        }
+    }).filter((tab) => tab.payload.length > 0), [snaps === null || snaps === void 0 ? void 0 : snaps.length, tags === null || tags === void 0 ? void 0 : tags.length, lanes === null || lanes === void 0 ? void 0 : lanes.length, loading]);
+    const [activeTabIndex, setActiveTab] = react_1.default.useState(getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane));
+    const activeTab = react_1.default.useMemo(() => (activeTabIndex !== undefined ? tabs[activeTabIndex] : undefined), [activeTabIndex, tabs]);
+    react_1.default.useEffect(() => {
+        if (!currentLane)
+            return;
+        if (tabs.length === 0)
+            return;
+        const _activeTabIndex = getActiveTabIndex(currentVersion, tabs, tags, snaps, currentLane);
+        if (_activeTabIndex !== activeTabIndex)
+            setActiveTab(_activeTabIndex);
+    }, [currentLane, tabs.length, tags === null || tags === void 0 ? void 0 : tags.length, snaps === null || snaps === void 0 ? void 0 : snaps.length, currentVersion, loading]);
+    const multipleTabs = tabs.length > 1;
+    const message = multipleTabs
+        ? 'Switch to view tags, snaps, or lanes'
+        : `Switch between ${(_b = tabs[0]) === null || _b === void 0 ? void 0 : _b.name.toLocaleLowerCase()}s`;
+    const showTab = activeTabIndex !== undefined && ((_c = tabs[activeTabIndex]) === null || _c === void 0 ? void 0 : _c.payload.length) > 0;
+    const _rowRenderer = react_1.default.useCallback(function VersionRowRenderer({ index }) {
+        const { name, payload = [] } = activeTab || {};
+        const item = payload[index];
+        if (!item)
+            return null;
+        if (name === 'LANE') {
+            const lane = item;
+            return react_1.default.createElement(lane_info_1.LaneInfo, Object.assign({ key: lane.id.toString(), currentLane: currentLane }, lane));
+        }
+        const version = item;
+        return (react_1.default.createElement(version_info_1.VersionInfo, Object.assign({ key: version.version, currentVersion: currentVersion, latestVersion: latestVersion, overrideVersionHref: overrideVersionHref, showDetails: showVersionDetails, onVersionClicked: onVersionClicked }, version)));
+    }, [activeTab, currentVersion, latestVersion, showVersionDetails, currentLane === null || currentLane === void 0 ? void 0 : currentLane.id.toString(), showTab]);
+    const rowRenderer = react_1.default.useMemo(() => (showTab && activeTab ? _rowRenderer : () => null), [showTab, activeTab, _rowRenderer]);
+    const ActiveTab = react_1.default.useMemo(() => {
+        return activeTab === null || activeTab === void 0 ? void 0 : activeTab.payload.map((payload, index) => {
+            return rowRenderer({ index });
+        });
+    }, [activeTab]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionMenuContainer, !open && version_dropdown_module_scss_1.default.hide) }),
+        react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.top },
+            loading && react_1.default.createElement(base_ui_loaders_skeleton_1.LineSkeleton, { count: 6, className: version_dropdown_module_scss_1.default.loader }),
+            !loading && react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.titleContainer, version_dropdown_module_scss_1.default.title) }, message),
+            !loading && localVersion && (react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { href: '?', active: currentVersion === exports.LOCAL_VERSION, className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionRow, version_dropdown_module_scss_1.default.localVersion), onClick: onVersionClicked },
+                react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.version },
+                    react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: {}, className: version_dropdown_module_scss_1.default.versionUserAvatar }),
+                    react_1.default.createElement("span", { className: version_dropdown_module_scss_1.default.versionName }, exports.LOCAL_VERSION))))),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(multipleTabs && version_dropdown_module_scss_1.default.tabs) }, multipleTabs &&
+            tabs.map(({ name }, index) => {
+                return (react_1.default.createElement(ui_foundation_ui_use_box_tab_1.Tab, { className: version_dropdown_module_scss_1.default.tab, key: name, isActive: activeTabIndex === index, onClick: () => setActiveTab(index) }, name));
+            })),
+        react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.versionContainerRoot }, ActiveTab)));
+}
+//# sourceMappingURL=version-dropdown.js.map

package/dist/version-dropdown.js.map

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

package/dist/version-dropdown.module.scss

@@ -0,0 +1,128 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.versionDropdown {
+  height: 100%;
+
+  > div {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .menu {
+    padding: 0;
+    right: 0;
+    // top: 43px;
+    font-size: var(--bit-p-xs);
+    border-radius: 6px;
+    z-index: $modal-z-index;
+  }
+}
+
+.title {
+  padding: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.titleContainer {
+  margin-bottom: 2px;
+}
+
+.versionContainerRoot {
+  max-height: 240px;
+  overflow-y: scroll;
+  padding-bottom: 8px;
+  position: relative;
+}
+
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+
+  &:hover {
+    background-color: var(--surface-hover-color, #eceaff) !important;
+  }
+
+  &.localVersion {
+    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  }
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .laneIcon {
+    padding: 0px 4px;
+  }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+  }
+  .versionName {
+    padding: 0px 8px;
+    min-width: fit-content;
+  }
+}
+
+.withVersions {
+  cursor: pointer;
+  > div {
+    margin-right: 5px;
+  }
+  > span {
+    display: unset;
+  }
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+  [data-open='true'] & {
+    transition:
+      color 300ms,
+      background-color 300ms ease-in-out;
+    background-color: var(--bit-bg-color, #ffffff);
+    color: var(--bit-accent-color, #6c5ce7);
+    &:hover {
+      background-color: var(--bit-bg-color, #ffffff);
+    }
+  }
+}
+
+.tabs {
+  display: flex;
+  padding: 0 24px;
+  line-height: 14px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  overflow-x: auto;
+  margin-top: 8px;
+
+  .tab {
+    font-weight: bold;
+    padding-top: 4px;
+    font-size: 12px;
+  }
+}
+
+.loading {
+  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.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/version-dropdown.spec.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const chai_1 = require("chai");
+const version_dropdown_composition_1 = require("./version-dropdown.composition");
+describe('version dropdown tests', () => {
+    /**
+     *  https://github.com/jsdom/jsdom/issues/1695
+     *  scrollIntoView is not implemented in jsdom
+     * */
+    beforeEach(() => {
+        Element.prototype.scrollIntoView = jest.fn();
+    });
+    it('should render one version', () => {
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(version_dropdown_composition_1.VersionDropdownWithOneVersion, null));
+        const textVersion = getByText(/^0.1$/);
+        (0, chai_1.expect)(textVersion).to.exist;
+    });
+    it('should not return multiple versions when mounted (lazy loading)', () => {
+        (0, react_2.render)(react_1.default.createElement(version_dropdown_composition_1.VersionDropdownWithMultipleVersions, null));
+        const textVersionOne = react_2.screen.queryByText(/^0.1$/);
+        const textVersionTwo = react_2.screen.queryByText(/^0.2$/);
+        const textVersionThree = react_2.screen.getAllByText(/^0.3$/);
+        (0, chai_1.expect)(textVersionOne).to.be.null;
+        (0, chai_1.expect)(textVersionTwo).to.be.null;
+        (0, chai_1.expect)(textVersionThree).to.have.lengthOf.at.least(1);
+    });
+});
+//# sourceMappingURL=version-dropdown.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"version-dropdown.spec.js","sourceRoot":"","sources":["../version-dropdown.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAwD;AACxD,+BAA8B;AAC9B,iFAAoH;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,IAAA,cAAM,EAAC,8BAAC,4DAA6B,OAAG,CAAC,CAAC;QAChE,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACvC,IAAA,aAAM,EAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,iEAAiE,EAAE,GAAG,EAAE;QACzE,IAAA,cAAM,EAAC,8BAAC,kEAAmC,OAAG,CAAC,CAAC;QAChD,MAAM,cAAc,GAAG,cAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,cAAc,GAAG,cAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,gBAAgB,GAAG,cAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAEtD,IAAA,aAAM,EAAC,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAClC,IAAA,aAAM,EAAC,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAClC,IAAA,aAAM,EAAC,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/index.d.ts

@@ -0,0 +1,2 @@
+export { VersionInfo } from './version-info';
+export type { VersionInfoProps } from './version-info';

package/dist/version-info/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionInfo = void 0;
+var version_info_1 = require("./version-info");
+Object.defineProperty(exports, "VersionInfo", { enumerable: true, get: function () { return version_info_1.VersionInfo; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../version-info/index.ts"],"names":[],"mappings":";;;AAAA,+CAA6C;AAApC,2GAAA,WAAW,OAAA"}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DropdownComponentVersion } from '../version-dropdown';
+export interface VersionInfoProps extends DropdownComponentVersion {
+    currentVersion?: string;
+    latestVersion?: string;
+    overrideVersionHref?: (version: string) => string;
+    showDetails?: boolean;
+    onVersionClicked?: () => void;
+}
+export declare const VersionInfo: React.MemoExoticComponent<React.ForwardRefExoticComponent<VersionInfoProps & React.RefAttributes<HTMLDivElement>>>;

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

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionInfo = void 0;
+const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
+const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
+const component_ui_version_label_1 = require("@teambit/component.ui.version-label");
+const react_1 = __importStar(require("react"));
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const classnames_1 = __importDefault(require("classnames"));
+const version_info_module_scss_1 = __importDefault(require("./version-info.module.scss"));
+exports.VersionInfo = react_1.default.memo(react_1.default.forwardRef(_VersionInfo));
+function _VersionInfo({ version, currentVersion, latestVersion, date, username, displayName, email, overrideVersionHref, showDetails, message, tag, profileImage, onVersionClicked, }, ref) {
+    const isCurrent = version === currentVersion;
+    const author = (0, react_1.useMemo)(() => {
+        return {
+            displayName: displayName !== null && displayName !== void 0 ? displayName : '',
+            email,
+            name: username !== null && username !== void 0 ? username : '',
+            profileImage,
+        };
+    }, [displayName, email, username, profileImage]);
+    const timestamp = (0, react_1.useMemo)(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
+    const currentVersionRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isCurrent) {
+            (_a = currentVersionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isCurrent]);
+    const href = overrideVersionHref ? overrideVersionHref(version) : `?version=${version}`;
+    const formattedVersion = (0, react_1.useMemo)(() => {
+        return tag ? version : version.slice(0, 6);
+    }, [tag, version]);
+    const isLatest = version === latestVersion;
+    return (react_1.default.createElement("div", { ref: ref || currentVersionRef, onClick: onVersionClicked },
+        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { active: isCurrent, href: href, className: version_info_module_scss_1.default.versionRow },
+            react_1.default.createElement("div", { className: version_info_module_scss_1.default.version },
+                react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: author, className: version_info_module_scss_1.default.versionUserAvatar, showTooltip: true }),
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: (0, classnames_1.default)(version_info_module_scss_1.default.versionName) }, formattedVersion),
+                isLatest && react_1.default.createElement(component_ui_version_label_1.VersionLabel, { status: "latest" }),
+                react_1.default.createElement(CommitMessage, { message: message, showDetails: showDetails })),
+            react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.versionTimestamp },
+                react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: timestamp })))));
+}
+function CommitMessage({ message, showDetails }) {
+    if (!showDetails)
+        return null;
+    if (!message || message === '')
+        return react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.emptyMessage }, "No commit message");
+    return react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.commitMessage }, message);
+}
+//# sourceMappingURL=version-info.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,54 @@
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  line-height: 1.2em;
+
+  &:hover {
+    background-color: var(--surface-hover-color, #eceaff) !important;
+  }
+}
+
+.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-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.versionName {
+  padding: 0px 8px;
+  flex-grow: 1;
+  min-width: fit-content;
+}
+
+.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

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

package/lane-info/index.ts

@@ -0,0 +1,2 @@
+export { LaneInfo } from './lane-info';
+export type { LaneInfoProps } from './lane-info';

package/lane-info/lane-info.module.scss

@@ -0,0 +1,27 @@
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 24px;
+
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .laneIcon {
+    padding: 0px 4px;
+  }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+  }
+  .versionName {
+    padding: 0px 8px;
+  }
+}

package/lane-info/lane-info.tsx

@@ -0,0 +1,23 @@
+import type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import React from 'react';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import styles from './lane-info.module.scss';
+
+export type LaneInfoProps = LaneModel & { currentLane?: LaneModel };
+
+export function LaneInfo({ id, currentLane }: LaneInfoProps) {
+  const isCurrent = currentLane && id.isEqual(currentLane.id);
+
+  return (
+    <div key={id.toString()}>
+      <MenuLinkItem active={isCurrent} href={LanesModel.getLaneUrl(id)} className={styles.versionRow}>
+        <span>
+          <Icon className={styles.laneIcon} of="lane"></Icon>
+          {id.toString()}
+        </span>
+      </MenuLinkItem>
+    </div>
+  );
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@teambit/component.ui.version-dropdown",
+  "version": "0.0.0-0aa660598a05d04f2b124cb0ae8b4a1c05b66d78",
+  "homepage": "https://bit.cloud/teambit/component/ui/version-dropdown",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/version-dropdown",
+    "version": "0aa660598a05d04f2b124cb0ae8b4a1c05b66d78"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "semver": "7.7.1",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/design.ui.styles.ellipsis": "0.0.357",
+    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
+    "@teambit/design.ui.surfaces.menu.link-item": "1.0.12",
+    "@teambit/evangelist.surfaces.dropdown": "1.0.2",
+    "@teambit/legacy-component-log": "0.0.408",
+    "@teambit/ui-foundation.ui.use-box.tab": "0.0.122",
+    "@teambit/component.ui.version-label": "0.0.509",
+    "@teambit/design.ui.avatar": "0.0.0-b608e87351ba5197d6555f2cd8f428fe2f4fcff6",
+    "@teambit/design.ui.time-ago": "0.0.0-c4a6511f1e58171b1607278db4608877ddedd790",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.0-820e3004a8778034bb2558a3b16ec1c7322707a9"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/react": "^17.0.8",
+    "@types/semver": "7.5.8",
+    "@types/chai": "4.2.15",
+    "chai": "4.3.0",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@teambit/documenter.theme.theme-compositions": "4.1.1",
+    "@teambit/documenter.ui.section": "4.1.1",
+    "@teambit/documenter.ui.separator": "4.1.1"
+  },
+  "peerDependencies": {
+    "@testing-library/react": "^12.1.5",
+    "react-router-dom": "^6.22.3",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}