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

package/dist/index.d.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/dist/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionDropdown = exports.DetailedVersion = exports.SimpleVersion = void 0;
+var version_dropdown_placeholder_1 = require("./version-dropdown-placeholder");
+Object.defineProperty(exports, "SimpleVersion", { enumerable: true, get: function () { return version_dropdown_placeholder_1.SimpleVersion; } });
+Object.defineProperty(exports, "DetailedVersion", { enumerable: true, get: function () { return version_dropdown_placeholder_1.DetailedVersion; } });
+var version_dropdown_1 = require("./version-dropdown");
+Object.defineProperty(exports, "VersionDropdown", { enumerable: true, get: function () { return version_dropdown_1.VersionDropdown; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,+EAAgF;AAAvE,6HAAA,aAAa,OAAA;AAAE,+HAAA,eAAe,OAAA;AAEvC,uDAAqD;AAA5C,mHAAA,eAAe,OAAA"}

package/dist/lane-info/index.d.ts

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

package/dist/lane-info/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../lane-info/index.ts"],"names":[],"mappings":";;;AAAA,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA"}

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

@@ -0,0 +1,6 @@
+import type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+import React from 'react';
+export type LaneInfoProps = LaneModel & {
+    currentLane?: LaneModel;
+};
+export declare function LaneInfo({ id, currentLane }: LaneInfoProps): React.JSX.Element;

package/dist/lane-info/lane-info.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LaneInfo = LaneInfo;
+const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
+const react_1 = __importDefault(require("react"));
+const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const lane_info_module_scss_1 = __importDefault(require("./lane-info.module.scss"));
+function LaneInfo({ id, currentLane }) {
+    const isCurrent = currentLane && id.isEqual(currentLane.id);
+    return (react_1.default.createElement("div", { key: id.toString() },
+        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { active: isCurrent, href: lanes_ui_models_lanes_model_1.LanesModel.getLaneUrl(id), className: lane_info_module_scss_1.default.versionRow },
+            react_1.default.createElement("span", null,
+                react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: lane_info_module_scss_1.default.laneIcon, of: "lane" }),
+                id.toString()))));
+}
+//# sourceMappingURL=lane-info.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lane-info.js","sourceRoot":"","sources":["../../lane-info/lane-info.tsx"],"names":[],"mappings":";;;;;AASA,4BAaC;AArBD,sFAAkE;AAClE,kDAA0B;AAC1B,kGAA0E;AAC1E,gFAAyD;AACzD,oFAA6C;AAI7C,SAAgB,QAAQ,CAAC,EAAE,EAAE,EAAE,WAAW,EAAiB;IACzD,MAAM,SAAS,GAAG,WAAW,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAE5D,OAAO,CACL,uCAAK,GAAG,EAAE,EAAE,CAAC,QAAQ,EAAE;QACrB,8BAAC,gDAAY,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,wCAAU,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,+BAAM,CAAC,UAAU;YAC5F;gBACE,8BAAC,+BAAI,IAAC,SAAS,EAAE,+BAAM,CAAC,QAAQ,EAAE,EAAE,EAAC,MAAM,GAAQ;gBAClD,EAAE,CAAC,QAAQ,EAAE,CACT,CACM,CACX,CACP,CAAC;AACJ,CAAC"}

package/dist/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/dist/preview-1753890535938.js

@@ -0,0 +1,7 @@
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_ui_version-dropdown@0aa660598a05d04f2b124cb0ae8b4a1c05b66d78/dist/version-dropdown.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.component_ui_version-dropdown@0aa660598a05d04f2b124cb0ae8b4a1c05b66d78/dist/version-dropdown.docs.js';
+
+export const compositions = [compositions_0];
+export const overview = [overview_0];
+
+export const compositions_metadata = {"compositions":[{"displayName":"Version dropdown with one version","identifier":"VersionDropdownWithOneVersion"},{"displayName":"Version dropdown with multiple versions","identifier":"VersionDropdownWithMultipleVersions"}]};

package/dist/version-dropdown-placeholder.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { DropdownComponentVersion } from './version-dropdown';
+export type VersionProps = {
+    currentVersion?: string;
+    isTag?: (version?: string) => boolean;
+    disabled?: boolean;
+    hasMoreVersions?: boolean;
+    showFullVersion?: boolean;
+    loading?: boolean;
+    useCurrentVersionLog?: (props: {
+        skip?: boolean;
+        version?: string;
+    }) => DropdownComponentVersion | undefined;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function SimpleVersion({ currentVersion, className, disabled, hasMoreVersions, isTag, useCurrentVersionLog, showFullVersion, loading, ...rest }: VersionProps): React.JSX.Element;
+export declare function DetailedVersion({ currentVersion, className, disabled, hasMoreVersions, isTag, loading, useCurrentVersionLog, showFullVersion, ...rest }: VersionProps): React.JSX.Element;

package/dist/version-dropdown-placeholder.js

@@ -0,0 +1,92 @@
+"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.SimpleVersion = SimpleVersion;
+exports.DetailedVersion = DetailedVersion;
+const react_1 = __importDefault(require("react"));
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const classnames_1 = __importDefault(require("classnames"));
+const semver = __importStar(require("semver"));
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
+const version_dropdown_placeholder_module_scss_1 = __importDefault(require("./version-dropdown-placeholder.module.scss"));
+function SimpleVersion(_a) {
+    var { currentVersion, className, disabled, hasMoreVersions, isTag = (version) => semver.valid(version) !== null, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    useCurrentVersionLog, showFullVersion, loading } = _a, rest = __rest(_a, ["currentVersion", "className", "disabled", "hasMoreVersions", "isTag", "useCurrentVersionLog", "showFullVersion", "loading"]);
+    if (loading)
+        return react_1.default.createElement(base_ui_loaders_skeleton_1.WordSkeleton, { className: version_dropdown_placeholder_module_scss_1.default.loader, length: 9 });
+    const formattedVersion = showFullVersion || isTag(currentVersion) ? currentVersion : currentVersion === null || currentVersion === void 0 ? void 0 : currentVersion.slice(0, 6);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.simple, className, disabled && version_dropdown_placeholder_module_scss_1.default.disabled) }),
+        react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.versionName), onClick: rest.onClick }, formattedVersion),
+        hasMoreVersions && react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down", onClick: rest.onClick })));
+}
+function DetailedVersion(_a) {
+    var { currentVersion, className, disabled, hasMoreVersions, isTag = (version) => semver.valid(version) !== null, loading, useCurrentVersionLog, showFullVersion } = _a, rest = __rest(_a, ["currentVersion", "className", "disabled", "hasMoreVersions", "isTag", "loading", "useCurrentVersionLog", "showFullVersion"]);
+    const currentVersionLog = useCurrentVersionLog === null || useCurrentVersionLog === void 0 ? void 0 : useCurrentVersionLog({ skip: loading, version: currentVersion });
+    const { displayName, message, username, email, date: _date, profileImage } = currentVersionLog || {};
+    const author = react_1.default.useMemo(() => {
+        return {
+            displayName: displayName !== null && displayName !== void 0 ? displayName : '',
+            email,
+            name: username !== null && username !== void 0 ? username : '',
+            profileImage,
+        };
+    }, [displayName, email, username, profileImage]);
+    const formattedVersion = showFullVersion || isTag(currentVersion) ? currentVersion : currentVersion === null || currentVersion === void 0 ? void 0 : currentVersion.slice(0, 6);
+    const date = _date ? new Date(+_date) : undefined;
+    const timestamp = react_1.default.useMemo(() => (date ? new Date(+date).toString() : new Date().toString()), [date]);
+    if (loading)
+        return react_1.default.createElement(base_ui_loaders_skeleton_1.WordSkeleton, { className: version_dropdown_placeholder_module_scss_1.default.loader, length: 9 });
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.detailed, className, disabled && version_dropdown_placeholder_module_scss_1.default.disabled) }),
+        react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: author !== null && author !== void 0 ? author : {}, className: version_dropdown_placeholder_module_scss_1.default.versionUserAvatar, showTooltip: true, onClick: rest.onClick }),
+        react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.versionName), onClick: rest.onClick }, formattedVersion),
+        commitMessage(message, rest.onClick),
+        react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_dropdown_placeholder_module_scss_1.default.versionTimestamp, onClick: rest.onClick },
+            react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: timestamp, onClick: rest.onClick })),
+        hasMoreVersions && react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down", onClick: rest.onClick })));
+}
+function commitMessage(message, onClick) {
+    if (!message || message === '')
+        return (react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_dropdown_placeholder_module_scss_1.default.emptyMessage, onClick: onClick }, "No commit message"));
+    return (react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_dropdown_placeholder_module_scss_1.default.commitMessage, onClick: onClick }, message));
+}
+//# sourceMappingURL=version-dropdown-placeholder.js.map

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

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

package/dist/version-dropdown-placeholder.module.scss

@@ -0,0 +1,50 @@
+.simple,
+.detailed {
+  cursor: pointer;
+  border: 1px solid var(--bit-border-color, #babec9);
+  border-radius: 6px;
+  transition: background-color 300ms ease-in-out;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  user-select: none;
+  flex-wrap: nowrap;
+  gap: 8px;
+  padding: 8px;
+  line-height: 1.2em;
+
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+
+  &.disabled {
+    cursor: default;
+    background-color: var(--border-medium-color, #ededed);
+    color: var(--on-background-medium-color, #707279);
+    > span {
+      display: none;
+    }
+  }
+}
+.versionName {
+  flex-grow: 1;
+  min-width: fit-content;
+}
+
+.commitMessage {
+  flex-grow: 1;
+  max-width: 200px;
+}
+
+.versionUserAvatar {
+  flex: none;
+  margin-right: 5px;
+}
+
+.loader {
+  color: var(--bit-bg-dent, #f6f6f6);
+  > span {
+    padding: 4px;
+  }
+}

package/dist/version-dropdown.composition.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const VersionDropdownWithOneVersion: () => React.JSX.Element;
+export declare const VersionDropdownWithMultipleVersions: () => React.JSX.Element;

package/dist/version-dropdown.composition.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionDropdownWithMultipleVersions = exports.VersionDropdownWithOneVersion = void 0;
+const react_1 = __importDefault(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const documenter_theme_theme_compositions_1 = require("@teambit/documenter.theme.theme-compositions");
+const version_dropdown_1 = require("./version-dropdown");
+const style = { display: 'flex', justifyContent: 'center', alignContent: 'center' };
+const VersionDropdownWithOneVersion = () => {
+    return (react_1.default.createElement(documenter_theme_theme_compositions_1.ThemeCompositions, { style: style },
+        react_1.default.createElement(version_dropdown_1.VersionDropdown, { useComponentVersions: () => ({
+                tags: [{ version: '0.1' }],
+            }), currentVersion: "0.1" })));
+};
+exports.VersionDropdownWithOneVersion = VersionDropdownWithOneVersion;
+const VersionDropdownWithMultipleVersions = () => {
+    const versions = ['0.3', '0.2', '0.1'].map((version) => ({ version }));
+    return (react_1.default.createElement(documenter_theme_theme_compositions_1.ThemeCompositions, { style: style },
+        react_1.default.createElement(react_router_dom_1.MemoryRouter, null,
+            react_1.default.createElement(version_dropdown_1.VersionDropdown, { useComponentVersions: () => ({
+                    tags: [{ version: '0.1' }],
+                }), currentVersion: versions[0].version }))));
+};
+exports.VersionDropdownWithMultipleVersions = VersionDropdownWithMultipleVersions;
+//# sourceMappingURL=version-dropdown.composition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"version-dropdown.composition.js","sourceRoot":"","sources":["../version-dropdown.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAgD;AAChD,sGAAiF;AACjF,yDAAqD;AAErD,MAAM,KAAK,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;AAE7E,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,OAAO,CACL,8BAAC,uDAAiB,IAAC,KAAK,EAAE,KAAK;QAC7B,8BAAC,kCAAe,IACd,oBAAoB,EAAE,GAAG,EAAE,CAAC,CAAC;gBAC3B,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;aAC3B,CAAC,EACF,cAAc,EAAC,KAAK,GACpB,CACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,6BAA6B,iCAWxC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAEvE,OAAO,CACL,8BAAC,uDAAiB,IAAC,KAAK,EAAE,KAAK;QAC7B,8BAAC,+BAAY;YACX,8BAAC,kCAAe,IACd,oBAAoB,EAAE,GAAG,EAAE,CAAC,CAAC;oBAC3B,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;iBAC3B,CAAC,EACF,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,GACnC,CACW,CACG,CACrB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,mCAAmC,uCAe9C"}

package/dist/version-dropdown.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { LegacyComponentLog } from '@teambit/legacy-component-log';
+import type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+import type { VersionProps } from './version-dropdown-placeholder';
+export declare const LOCAL_VERSION = "workspace";
+export type DropdownComponentVersion = Partial<LegacyComponentLog> & {
+    version: string;
+};
+export type UseComponentDropdownVersionsResult = {
+    tags?: DropdownComponentVersion[];
+    snaps?: DropdownComponentVersion[];
+    loading?: boolean;
+};
+export type UseComponentDropdownVersionsProps = {
+    skip?: boolean;
+};
+export type UseComponentDropdownVersions = (props?: UseComponentDropdownVersionsProps) => UseComponentDropdownVersionsResult;
+export type GetActiveTabIndex = (currentVersion?: string, tabs?: Array<VersionMenuTab>, tags?: DropdownComponentVersion[], snaps?: DropdownComponentVersion[], currentLane?: LaneModel) => number;
+export type VersionDropdownProps = {
+    localVersion?: boolean;
+    latestVersion?: string;
+    currentVersion: string;
+    useCurrentVersionLog?: (props?: {
+        skip?: boolean;
+        version?: string;
+    }) => DropdownComponentVersion | undefined;
+    hasMoreVersions?: boolean;
+    loading?: boolean;
+    useComponentVersions?: UseComponentDropdownVersions;
+    currentLane?: LaneModel;
+    lanes?: LaneModel[];
+    getActiveTabIndex?: GetActiveTabIndex;
+    overrideVersionHref?: (version: string) => string;
+    placeholderClassName?: string;
+    dropdownClassName?: string;
+    menuClassName?: string;
+    showVersionDetails?: boolean;
+    disabled?: boolean;
+    PlaceholderComponent?: React.ComponentType<VersionProps>;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const VersionDropdown: React.MemoExoticComponent<typeof _VersionDropdown>;
+declare function _VersionDropdown({ currentVersion, latestVersion, localVersion, useCurrentVersionLog, hasMoreVersions, loading, overrideVersionHref, className, placeholderClassName, getActiveTabIndex, dropdownClassName, menuClassName, showVersionDetails, disabled, PlaceholderComponent: _PlaceholderComponent, currentLane, useComponentVersions, lanes, ...rest }: VersionDropdownProps): React.JSX.Element;
+export type VersionMenuTab = {
+    name: 'SNAP';
+    payload: DropdownComponentVersion[];
+} | {
+    name: 'LANE';
+    payload: LaneModel[];
+} | {
+    name: 'TAG';
+    payload: DropdownComponentVersion[];
+};
+export {};

package/dist/version-dropdown.docs.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+declare function Overview(): React.JSX.Element;
+declare namespace Overview {
+    var abstract: string;
+    var labels: string[];
+    var examples: ({
+        scope: {
+            VersionDropdown: React.MemoExoticComponent<({ currentVersion, latestVersion, localVersion, useCurrentVersionLog, hasMoreVersions, loading, overrideVersionHref, className, placeholderClassName, getActiveTabIndex, dropdownClassName, menuClassName, showVersionDetails, disabled, PlaceholderComponent: _PlaceholderComponent, currentLane, useComponentVersions, lanes, ...rest }: import("./version-dropdown").VersionDropdownProps) => React.JSX.Element>;
+            style: {
+                display: string;
+                justifyContent: string;
+                alignContent: string;
+            };
+            MemoryRouter?: undefined;
+        };
+        title: string;
+        description: string;
+        code: string;
+    } | {
+        scope: {
+            VersionDropdown: React.MemoExoticComponent<({ currentVersion, latestVersion, localVersion, useCurrentVersionLog, hasMoreVersions, loading, overrideVersionHref, className, placeholderClassName, getActiveTabIndex, dropdownClassName, menuClassName, showVersionDetails, disabled, PlaceholderComponent: _PlaceholderComponent, currentLane, useComponentVersions, lanes, ...rest }: import("./version-dropdown").VersionDropdownProps) => React.JSX.Element>;
+            style: {
+                display: string;
+                justifyContent: string;
+                alignContent: string;
+            };
+            MemoryRouter: typeof MemoryRouter;
+        };
+        title: string;
+        description: string;
+        code: string;
+    })[];
+}
+export default Overview;

package/dist/version-dropdown.docs.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Overview;
+const react_1 = __importDefault(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const documenter_ui_section_1 = require("@teambit/documenter.ui.section");
+const documenter_theme_theme_compositions_1 = require("@teambit/documenter.theme.theme-compositions");
+const documenter_ui_separator_1 = require("@teambit/documenter.ui.separator");
+const version_dropdown_1 = require("./version-dropdown");
+function Overview() {
+    return (react_1.default.createElement(documenter_theme_theme_compositions_1.ThemeCompositions, null,
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(documenter_ui_section_1.Section, null,
+                "The version-dropdown displays the latest version of the viewed component. ",
+                react_1.default.createElement("br", null),
+                "If previous versions are available, the component will display a list of them, when clicked. ",
+                react_1.default.createElement("br", null),
+                "This allows the user to navigate to previous versions, and explore them."),
+            react_1.default.createElement(documenter_ui_separator_1.Separator, null))));
+}
+Overview.abstract = 'The version-dropdown lists the latest and previous versions of the viewed component.';
+Overview.labels = ['react', 'typescript', 'version', 'dropdown'];
+const style = { display: 'flex', justifyContent: 'center', alignContent: 'center' };
+Overview.examples = [
+    {
+        scope: {
+            VersionDropdown: version_dropdown_1.VersionDropdown,
+            style,
+        },
+        title: 'Version Dropdown',
+        description: 'Using the Version Dropdown component with one verion',
+        code: `
+    () => {
+      return (
+        <div style={{...style, minHeight: 150 }}>
+          <VersionDropdown versions={['0.1']} currentVersion="0.1" />
+        </div>
+      );
+    }
+      `,
+    },
+    {
+        scope: {
+            VersionDropdown: version_dropdown_1.VersionDropdown,
+            style,
+            MemoryRouter: react_router_dom_1.MemoryRouter,
+        },
+        title: 'Version Dropdown with multiple versions',
+        description: 'Using the Version Dropdown component with more than one version',
+        code: `
+    () => {
+      const versions = ['0.3', '0.2', '0.1'];
+      return (
+        <div style={{...style, minHeight: 400, alignItems: 'end', justifyContent: 'flex-end', margin: 10 }}>
+          <MemoryRouter>
+            <VersionDropdown versions={versions} currentVersion={versions[0]} />
+          </MemoryRouter>
+        </div>
+      );
+    }
+      `,
+    },
+];
+//# sourceMappingURL=version-dropdown.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"version-dropdown.docs.js","sourceRoot":"","sources":["../version-dropdown.docs.tsx"],"names":[],"mappings":";;;;;AAOA,2BAaC;AApBD,kDAA0B;AAC1B,uDAAgD;AAChD,0EAAyD;AACzD,sGAAiF;AACjF,8EAA6D;AAC7D,yDAAqD;AAErD,SAAwB,QAAQ;IAC9B,OAAO,CACL,8BAAC,uDAAiB;QAChB;YACE,8BAAC,+BAAO;;gBACoE,yCAAM;;gBACa,yCAAM;2FAE3F;YACV,8BAAC,mCAAS,OAAG,CACZ,CACe,CACrB,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,sFAAsF,CAAC;AAE3G,QAAQ,CAAC,MAAM,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAEjE,MAAM,KAAK,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEpF,QAAQ,CAAC,QAAQ,GAAG;IAClB;QACE,KAAK,EAAE;YACL,eAAe,EAAf,kCAAe;YACf,KAAK;SACN;QACD,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,sDAAsD;QACnE,IAAI,EAAE;;;;;;;;OAQH;KACJ;IACD;QACE,KAAK,EAAE;YACL,eAAe,EAAf,kCAAe;YACf,KAAK;YACL,YAAY,EAAZ,+BAAY;SACb;QACD,KAAK,EAAE,yCAAyC;QAChD,WAAW,EAAE,iEAAiE;QAC9E,IAAI,EAAE;;;;;;;;;;;OAWH;KACJ;CACF,CAAC"}