@teambit/lanes.ui.inputs.lane-selector 0.0.107 → 0.0.109

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { LaneSelector, LaneSelectorProps } from './lane-selector';
+export { LaneSelector, LaneSelectorProps, LaneSelectorSortBy } from './lane-selector';
 export { LaneMenuItem, LaneMenuItemProps } from './lane-menu-item';
 export { LanePlaceholder, LanePlaceholderProps } from './lane-placeholder';

package/dist/index.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LanePlaceholder = exports.LaneMenuItem = exports.LaneSelector = void 0;
+exports.LanePlaceholder = exports.LaneMenuItem = exports.LaneSelectorSortBy = exports.LaneSelector = void 0;
 var lane_selector_1 = require("./lane-selector");
 Object.defineProperty(exports, "LaneSelector", { enumerable: true, get: function () { return lane_selector_1.LaneSelector; } });
+Object.defineProperty(exports, "LaneSelectorSortBy", { enumerable: true, get: function () { return lane_selector_1.LaneSelectorSortBy; } });
 var lane_menu_item_1 = require("./lane-menu-item");
 Object.defineProperty(exports, "LaneMenuItem", { enumerable: true, get: function () { return lane_menu_item_1.LaneMenuItem; } });
 var lane_placeholder_1 = require("./lane-placeholder");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAAkE;AAAzD,6GAAA,YAAY,OAAA;AACrB,mDAAmE;AAA1D,8GAAA,YAAY,OAAA;AACrB,uDAA2E;AAAlE,mHAAA,eAAe,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAAsF;AAA7E,6GAAA,YAAY,OAAA;AAAqB,mHAAA,kBAAkB,OAAA;AAC5D,mDAAmE;AAA1D,8GAAA,YAAY,OAAA;AACrB,uDAA2E;AAAlE,mHAAA,eAAe,OAAA"}

package/dist/lane-grouped-menu-item.d.ts

@@ -1,10 +1,13 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { LaneId } from '@teambit/lane-id';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 export declare type LaneGroupedMenuItemProps = {
     selected?: LaneId;
-    current: LaneId[];
+    current: LaneModel[];
     scope: string;
     getHref?: (laneId: LaneId) => string;
     onLaneSelected?: (laneId: LaneId) => void;
+    icon?: React.ReactNode;
+    timestamp?: (lane: LaneModel) => Date | undefined;
 } & HTMLAttributes<HTMLDivElement>;
-export declare function LaneGroupedMenuItem({ selected, current, className, scope, getHref, onLaneSelected, ...rest }: LaneGroupedMenuItemProps): JSX.Element;
+export declare function LaneGroupedMenuItem({ selected, current, className, scope, timestamp, icon, getHref, onLaneSelected, ...rest }: LaneGroupedMenuItemProps): JSX.Element;

package/dist/lane-grouped-menu-item.js

@@ -16,21 +16,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LaneGroupedMenuItem = void 0;
 const react_1 = __importDefault(require("react"));
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
 const classnames_1 = __importDefault(require("classnames"));
 const lane_menu_item_1 = require("./lane-menu-item");
 const lane_grouped_menu_item_module_scss_1 = __importDefault(require("./lane-grouped-menu-item.module.scss"));
 function LaneGroupedMenuItem(_a) {
-    var { selected, current, className, scope, getHref, onLaneSelected } = _a, rest = __rest(_a, ["selected", "current", "className", "scope", "getHref", "onLaneSelected"]);
+    var { selected, current, className, scope, timestamp, icon = react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: lane_grouped_menu_item_module_scss_1.default.defaultScopeIcon, of: "collection-full" }), getHref, onLaneSelected } = _a, rest = __rest(_a, ["selected", "current", "className", "scope", "timestamp", "icon", "getHref", "onLaneSelected"]);
     if (current.length === 0)
         return null;
-    if (current.length === 1 && current[0].isDefault()) {
+    if (current.length === 1 && current[0].id.isDefault()) {
         const defaultLane = current[0];
         return (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { key: defaultLane.toString(), onLaneSelected: onLaneSelected, getHref: getHref, selected: selected, current: defaultLane }));
     }
     const onClickStopPropagation = (e) => e.stopPropagation();
     return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(lane_grouped_menu_item_module_scss_1.default.groupedMenuItem, className) }, rest),
-        react_1.default.createElement("div", { onClick: onClickStopPropagation, className: lane_grouped_menu_item_module_scss_1.default.scope }, scope),
-        current.map((lane) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { key: lane.toString(), onLaneSelected: onLaneSelected, getHref: getHref, selected: selected, current: lane })))));
+        react_1.default.createElement("div", { onClick: onClickStopPropagation, className: lane_grouped_menu_item_module_scss_1.default.scope },
+            react_1.default.createElement("div", { className: lane_grouped_menu_item_module_scss_1.default.scopeIcon }, icon),
+            react_1.default.createElement("div", { className: lane_grouped_menu_item_module_scss_1.default.scopeName }, scope)),
+        current.map((lane) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { key: lane.id.toString(), onLaneSelected: onLaneSelected, getHref: getHref, selected: selected, current: lane, timestamp: timestamp === null || timestamp === void 0 ? void 0 : timestamp(lane) })))));
 }
 exports.LaneGroupedMenuItem = LaneGroupedMenuItem;
 //# sourceMappingURL=lane-grouped-menu-item.js.map

package/dist/lane-grouped-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"lane-grouped-menu-item.js","sourceRoot":"","sources":["../lane-grouped-menu-item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA8C;AAE9C,4DAAoC;AACpC,qDAAgD;AAEhD,8GAA0D;AAU1D,SAAgB,mBAAmB,CAAC,EAQT;QARS,EAClC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,cAAc,OAEW,EADtB,IAAI,cAP2B,0EAQnC,CADQ;IAEP,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE;QAClD,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAW,CAAC;QACzC,OAAO,CACL,8BAAC,6BAAY,IACX,GAAG,EAAE,WAAW,CAAC,QAAQ,EAAE,EAC3B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,CACH,CAAC;KACH;IAED,MAAM,sBAAsB,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IAE1D,OAAO,CACL,qDAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,4CAAM,CAAC,eAAe,EAAE,SAAS,CAAC,IAAM,IAAI;QACrE,uCAAK,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,4CAAM,CAAC,KAAK,IAC1D,KAAK,CACF;QACL,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrB,8BAAC,6BAAY,IACX,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,EACpB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,GACb,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AA1CD,kDA0CC"}
+{"version":3,"file":"lane-grouped-menu-item.js","sourceRoot":"","sources":["../lane-grouped-menu-item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA8C;AAC9C,gFAAyD;AAEzD,4DAAoC;AAEpC,qDAAgD;AAEhD,8GAA0D;AAY1D,SAAgB,mBAAmB,CAAC,EAUT;QAVS,EAClC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,IAAI,GAAG,8BAAC,+BAAI,IAAC,SAAS,EAAE,4CAAM,CAAC,gBAAgB,EAAE,EAAE,EAAC,iBAAiB,GAAG,EACxE,OAAO,EACP,cAAc,OAEW,EADtB,IAAI,cAT2B,+FAUnC,CADQ;IAEP,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE;QACrD,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAC/B,OAAO,CACL,8BAAC,6BAAY,IACX,GAAG,EAAE,WAAW,CAAC,QAAQ,EAAE,EAC3B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,CACH,CAAC;KACH;IAED,MAAM,sBAAsB,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IAE1D,OAAO,CACL,qDAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,4CAAM,CAAC,eAAe,EAAE,SAAS,CAAC,IAAM,IAAI;QACrE,uCAAK,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,4CAAM,CAAC,KAAK;YAC3D,uCAAK,SAAS,EAAE,4CAAM,CAAC,SAAS,IAAG,IAAI,CAAO;YAC9C,uCAAK,SAAS,EAAE,4CAAM,CAAC,SAAS,IAAG,KAAK,CAAO,CAC3C;QACL,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrB,8BAAC,6BAAY,IACX,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,EACvB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,GAC5B,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AA9CD,kDA8CC"}

package/dist/lane-grouped-menu-item.module.scss

@@ -1,10 +1,27 @@
 .groupedMenuItem {
   display: flex;
   flex-direction: column;
-  min-width: 120px;
+  // min-width: 120px;
 }
 
 .scope {
   padding: 8px 16px;
-  font-weight: 700;
+  color: var(--on-surface-medium-color, #707279);
+  display: flex;
+  gap: 8px;
+}
+
+.scopeIcon {
+  display: flex;
+
+  > img {
+    height: 16px;
+    width: 16px;
+  }
+}
+
+.defaultScopeIcon {
+  height: 16px;
+  width: 16px;
+  padding: 0px 2px;
 }

package/dist/lane-menu-item.d.ts

@@ -1,9 +1,12 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { LaneId } from '@teambit/lane-id';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 export declare type LaneMenuItemProps = {
     selected?: LaneId;
-    current: LaneId;
+    current: LaneModel;
     getHref?: (laneId: LaneId) => string;
     onLaneSelected?: (laneId: LaneId) => void;
+    icon?: React.ReactNode;
+    timestamp?: Date;
 } & HTMLAttributes<HTMLDivElement>;
-export declare function LaneMenuItem({ selected, current, className, onLaneSelected, getHref, ...rest }: LaneMenuItemProps): JSX.Element;
+export declare function LaneMenuItem({ selected, current, className, onLaneSelected, getHref, icon, timestamp, ...rest }: LaneMenuItemProps): JSX.Element;

package/dist/lane-menu-item.js

@@ -1,27 +1,4 @@
 "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)
@@ -38,27 +15,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LaneMenuItem = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
-const design_ui_pill_label_1 = require("@teambit/design.ui.pill-label");
 const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
 const lane_menu_item_module_scss_1 = __importDefault(require("./lane-menu-item.module.scss"));
 function LaneMenuItem(_a) {
-    var { selected, current, className, onLaneSelected, getHref = lanes_ui_models_lanes_model_1.LanesModel.getLaneUrl } = _a, rest = __rest(_a, ["selected", "current", "className", "onLaneSelected", "getHref"]);
-    const isCurrent = (selected === null || selected === void 0 ? void 0 : selected.toString()) === current.toString();
-    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', behavior: 'smooth' });
-        }
-    }, [isCurrent]);
-    const href = getHref(current);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { className: className, ref: currentVersionRef }),
-        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { active: isCurrent, href: href, className: lane_menu_item_module_scss_1.default.menuItem, onClick: onLaneSelected && (() => onLaneSelected(current)) },
-            react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneName }, current.name),
-            current.isDefault() && (react_1.default.createElement(design_ui_pill_label_1.PillLabel, { className: lane_menu_item_module_scss_1.default.defaultLanePill },
-                react_1.default.createElement("span", null, "default"))))));
+    var _b;
+    var { selected, current, className, onLaneSelected, getHref = lanes_ui_models_lanes_model_1.LanesModel.getLaneUrl, icon, timestamp } = _a, rest = __rest(_a, ["selected", "current", "className", "onLaneSelected", "getHref", "icon", "timestamp"]);
+    const isCurrent = (selected === null || selected === void 0 ? void 0 : selected.toString()) === current.id.toString();
+    const isDefaultLane = current.id.isDefault();
+    const iconWithDefault = icon || (isDefaultLane ? react_1.default.createElement("img", { src: "https://static.bit.cloud/bit-icons/changed-components.svg" }) : undefined);
+    const href = getHref(current.id);
+    const onClick = () => {
+        onLaneSelected === null || onLaneSelected === void 0 ? void 0 : onLaneSelected(current.id);
+    };
+    const laneDescription = current.description || current.id.name;
+    const laneName = current.id.name;
+    const user = current.updatedBy || current.createdBy;
+    const avatar = iconWithDefault || (react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: {
+            name: (_b = user === null || user === void 0 ? void 0 : user.name) === null || _b === void 0 ? void 0 : _b.split(' ')[0],
+            displayName: user === null || user === void 0 ? void 0 : user.name,
+            profileImage: user === null || user === void 0 ? void 0 : user.profileImage,
+        } }));
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_menu_item_module_scss_1.default.laneMenuItemContainer) }),
+        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { active: isCurrent, href: href, className: lane_menu_item_module_scss_1.default.menuItem, onClick: onClick },
+            react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneContainer },
+                react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.left, isDefaultLane && lane_menu_item_module_scss_1.default.mainLane) },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.icon, isDefaultLane && !icon && lane_menu_item_module_scss_1.default.defaultMainLaneIcon) }, avatar),
+                    react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneInfo },
+                        react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.laneDescription) }, laneDescription),
+                        !isDefaultLane && react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneName }, laneName))),
+                react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.right }, timestamp && (react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.timeStamp },
+                    react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: timestamp === null || timestamp === void 0 ? void 0 : timestamp.toString() }))))))));
 }
 exports.LaneMenuItem = LaneMenuItem;
 //# sourceMappingURL=lane-menu-item.js.map

package/dist/lane-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"lane-menu-item.js","sourceRoot":"","sources":["../lane-menu-item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiE;AAEjE,sFAAkE;AAClE,wEAA0D;AAC1D,kGAA0E;AAE1E,8FAAkD;AASlD,SAAgB,YAAY,CAAC,EAOT;QAPS,EAC3B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,cAAc,EACd,OAAO,GAAG,wCAAU,CAAC,UAAU,OAEb,EADf,IAAI,cANoB,iEAO5B,CADQ;IAEP,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,EAAE,MAAK,OAAO,CAAC,QAAQ,EAAE,CAAC;IAE9D,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACrF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAE9B,OAAO,CACL,uDAAS,IAAI,IAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB;QACzD,8BAAC,gDAAY,IACX,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,oCAAM,CAAC,QAAQ,EAC1B,OAAO,EAAE,cAAc,IAAI,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAE1D,uCAAK,SAAS,EAAE,oCAAM,CAAC,QAAQ,IAAG,OAAO,CAAC,IAAI,CAAO;YACpD,OAAO,CAAC,SAAS,EAAE,IAAI,CACtB,8BAAC,gCAAS,IAAC,SAAS,EAAE,oCAAM,CAAC,eAAe;gBAC1C,sDAAoB,CACV,CACb,CACY,CACX,CACP,CAAC;AACJ,CAAC;AApCD,oCAoCC"}
+{"version":3,"file":"lane-menu-item.js","sourceRoot":"","sources":["../lane-menu-item.tsx"],"names":[],"mappings":"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"}

package/dist/lane-menu-item.module.scss

@@ -1,13 +1,88 @@
 .menuItem {
   display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 50px;
   flex-direction: row;
   padding: 8px 16px;
   cursor: pointer;
+  // border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.laneMenuItemContainer {
+  display: flex;
+  width: 100%;
+
+  &.selected {
+    background-color: var(--surface-active-color, #dcd8f9);
+  }
+}
+
+.laneContainer {
+  display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  gap: 4px;
+  width: 100%;
+
+  .left {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    width: 100%;
+    flex: 2;
+
+    &.mainLane {
+      align-items: center;
+    }
+
+    .laneInfo {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .laneDescription {
+      font-weight: 700;
+      font-size: var(--bit-p-xs, '14px');
+    }
+
+    .laneName {
+      font-weight: 400;
+      font-size: var(--bit-p-xxs, '12px');
+      background: var(--surface-neutral-hover-color, #f7f7f7);
+      border-radius: 4px;
+      width: fit-content;
+      padding: 2px 4px;
+    }
+  }
+
+  .right {
+    display: flex;
+    text-align: right;
+    flex: 1;
+    align-items: flex-end;
+    justify-content: flex-end;
+
+    .timeStamp {
+      > span {
+        font-size: var(--bit-p-xxs, '12px');
+      }
+      font-size: var(--bit-p-xxs, '12px');
+      // @todo replace with var
+      color: #9598a1;
+    }
+  }
 }
 
-.defaultLanePill {
-  font-size: var(--bit-p-xxs, 12px);
-  text-transform: lowercase;
+.icon {
+  display: flex;
+
+  > img {
+    height: 16px;
+    width: 16px;
+  }
+
+  &.defaultMainLaneIcon {
+    padding: 0px 4px;
+  }
 }

package/dist/lane-placeholder.module.scss

@@ -3,11 +3,10 @@
   align-items: center;
   padding: 4px 8px 4px 4px;
   line-height: var(--bit-p-md, 16px);
-  // font-size: var(--bit-p-md, 16px);
   border-radius: 6px;
   font-size: 14px;
-  border: 1px solid var(--bit-border-color-light, #cccfd4);
-  background-color: var(--bit-border-color-lightest, #ededed);
+  border: 1px solid var(--border-medium-color, #ededed);
+  background-color: var(--surface-neutral-hover-color, #f7f7f7);
   &.disabled {
     border: unset;
   }

package/dist/lane-selector-list.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { LaneSelectorProps } from './lane-selector';
+export declare type LaneSelectorListProps = {
+    search?: string;
+} & LaneSelectorProps & HTMLAttributes<HTMLDivElement>;
+export declare function LaneSelectorList({ selectedLaneId, mainLane, nonMainLanes, className, groupByScope, getHref, onLaneSelected, search, mainIcon, scopeIconLookup, sortBy, sortOptions, scopeIcon, ...rest }: LaneSelectorListProps): JSX.Element;

package/dist/lane-selector-list.js

@@ -0,0 +1,97 @@
+"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.LaneSelectorList = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const lodash_1 = require("lodash");
+const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
+const lane_selector_1 = require("./lane-selector");
+// import { LaneGroupedMenuItem } from './lane-grouped-menu-item';
+const lane_menu_item_1 = require("./lane-menu-item");
+const lane_selector_list_module_scss_1 = __importDefault(require("./lane-selector-list.module.scss"));
+const lane_grouped_menu_item_1 = require("./lane-grouped-menu-item");
+function LaneSelectorList(_a) {
+    var { selectedLaneId, mainLane, nonMainLanes, className, groupByScope, getHref, onLaneSelected, search = '', mainIcon, scopeIconLookup, sortBy, sortOptions, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    scopeIcon } = _a, rest = __rest(_a, ["selectedLaneId", "mainLane", "nonMainLanes", "className", "groupByScope", "getHref", "onLaneSelected", "search", "mainIcon", "scopeIconLookup", "sortBy", "sortOptions", "scopeIcon"]);
+    const selectedNonMainLane = (!!selectedLaneId && nonMainLanes.find((nonMainLane) => nonMainLane.id.isEqual(selectedLaneId))) || undefined;
+    const laneDropdownItems = (0, react_1.useMemo)(() => {
+        var _a;
+        if (nonMainLanes.length === 0)
+            return [];
+        const lanesToRenderFn = () => {
+            const mainLaneToRender = search === '' || (mainLane === null || mainLane === void 0 ? void 0 : mainLane.id.name.toLowerCase().includes(search.toLowerCase())) ? mainLane : undefined;
+            if (selectedNonMainLane) {
+                const nonMainLanesWithoutSelected = nonMainLanes.filter((nonMainLane) => !nonMainLane.id.isEqual(selectedNonMainLane.id));
+                return (0, lodash_1.compact)([selectedNonMainLane, mainLaneToRender, ...nonMainLanesWithoutSelected]);
+            }
+            return (0, lodash_1.compact)([mainLaneToRender, ...nonMainLanes]);
+        };
+        if (groupByScope) {
+            const groupedNonMainLanes = lanes_ui_models_lanes_model_1.LanesModel.groupLanesByScope(nonMainLanes);
+            if (selectedNonMainLane) {
+                const groupedSelected = (_a = groupedNonMainLanes.get(selectedNonMainLane.id.scope)) !== null && _a !== void 0 ? _a : [];
+                groupedNonMainLanes.delete(selectedNonMainLane.id.scope);
+                const grouped = [
+                    [selectedNonMainLane.id.scope, groupedSelected],
+                    ['', (mainLane && [mainLane]) || []],
+                    ...groupedNonMainLanes.entries(),
+                ];
+                return grouped;
+            }
+            const grouped = [
+                ['', (mainLane && [mainLane]) || []],
+                ...groupedNonMainLanes.entries(),
+            ];
+            return grouped;
+        }
+        const lanesToRender = lanesToRenderFn();
+        return lanesToRender;
+    }, [selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.toString(), nonMainLanes.length, search, sortBy, groupByScope]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_selector_list_module_scss_1.default.laneSelectorList) }),
+        groupByScope &&
+            laneDropdownItems.map(([scope, lanesByScope], index) => {
+                return (react_1.default.createElement(lane_grouped_menu_item_1.LaneGroupedMenuItem, { key: `${scope !== null && scope !== void 0 ? scope : 'main'}-${index}`, onLaneSelected: onLaneSelected, getHref: getHref, scope: scope, selected: selectedLaneId, current: lanesByScope, icon: scopeIconLookup === null || scopeIconLookup === void 0 ? void 0 : scopeIconLookup.get(scope), timestamp: (lane) => (sortOptions === null || sortOptions === void 0 ? void 0 : sortOptions.includes(lane_selector_1.LaneSelectorSortBy.UPDATED)) ? lane.updatedAt : lane.createdAt }));
+            }),
+        !groupByScope &&
+            laneDropdownItems.map((lane, index) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { onLaneSelected: onLaneSelected, key: `${lane.id.toString()}-${index}`, getHref: getHref, selected: selectedLaneId, current: lane, timestamp: (sortOptions === null || sortOptions === void 0 ? void 0 : sortOptions.includes(lane_selector_1.LaneSelectorSortBy.UPDATED)) ? lane.updatedAt : lane.createdAt, icon: (lane.id.isDefault() && mainIcon) || undefined })))));
+}
+exports.LaneSelectorList = LaneSelectorList;
+//# sourceMappingURL=lane-selector-list.js.map

package/dist/lane-selector-list.js.map

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

package/dist/lane-selector-list.module.scss

@@ -0,0 +1,15 @@
+.laneSelectorList {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  width: 350px;
+  max-height: 50vh;
+}
+
+.mainIcon {
+  > img {
+    height: 16px;
+    width: 16px;
+    padding: 0px 2px;
+  }
+}

package/dist/lane-selector.d.ts

@@ -1,10 +1,24 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { LaneId } from '@teambit/lane-id';
+import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
 export declare type LaneSelectorProps = {
-    lanes: Array<LaneId>;
+    nonMainLanes: Array<LaneModel>;
+    mainLane?: LaneModel;
     selectedLaneId?: LaneId;
     groupByScope?: boolean;
     getHref?: (laneId: LaneId) => string;
     onLaneSelected?: (laneId: LaneId) => void;
+    mainIcon?: React.ReactNode;
+    scopeIcon?: (scopeName: string) => React.ReactNode;
+    sortBy?: LaneSelectorSortBy;
+    sortOptions?: LaneSelectorSortBy[];
+    scopeIconLookup?: Map<string, React.ReactNode>;
 } & HTMLAttributes<HTMLDivElement>;
-export declare function LaneSelector({ className, lanes, selectedLaneId, groupByScope, getHref, onLaneSelected, ...rest }: LaneSelectorProps): JSX.Element;
+export declare type GroupedLaneDropdownItem = [scope: string, lanes: LaneModel[]];
+export declare type LaneDropdownItems = Array<LaneModel> | Array<GroupedLaneDropdownItem>;
+export declare enum LaneSelectorSortBy {
+    UPDATED = "UPDATED",
+    CREATED = "CREATED",
+    ALPHABETICAL = "ALPHABETICAL"
+}
+export declare function LaneSelector(props: LaneSelectorProps): JSX.Element;