@teambit/lanes.ui.inputs.lane-selector 0.0.1

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanePlaceholder = exports.LaneMenuItem = exports.LaneSelector = void 0;
+var lane_selector_1 = require("./lane-selector");
+Object.defineProperty(exports, "LaneSelector", { enumerable: true, get: function () { return lane_selector_1.LaneSelector; } });
+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");
+Object.defineProperty(exports, "LanePlaceholder", { enumerable: true, get: function () { return lane_placeholder_1.LanePlaceholder; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { LaneId } from '@teambit/lane-id';
+export declare type LaneGroupedMenuItemProps = {
+    selected?: LaneId;
+    current: LaneId[];
+    scope: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function LaneGroupedMenuItem({ selected, current, className, scope, ...rest }: LaneGroupedMenuItemProps): JSX.Element;

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

@@ -0,0 +1,36 @@
+"use strict";
+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.LaneGroupedMenuItem = void 0;
+const react_1 = __importDefault(require("react"));
+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 } = _a, rest = __rest(_a, ["selected", "current", "className", "scope"]);
+    if (current.length === 0)
+        return null;
+    if (current[0].isDefault()) {
+        const defaultLane = current[0];
+        return react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { key: defaultLane.toString(), 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(), selected: selected, current: lane })))));
+}
+exports.LaneGroupedMenuItem = LaneGroupedMenuItem;
+//# sourceMappingURL=lane-grouped-menu-item.js.map

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

@@ -0,0 +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;AAQ1D,SAAgB,mBAAmB,CAAC,EAA0E;QAA1E,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,OAAqC,EAAhC,IAAI,cAA9C,6CAAgD,CAAF;IAChF,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE;QAC1B,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAW,CAAC;QACzC,OAAO,8BAAC,6BAAY,IAAC,GAAG,EAAE,WAAW,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC;KAChG;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,IAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAI,CAC1E,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AApBD,kDAoBC"}

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

@@ -0,0 +1,10 @@
+.groupedMenuItem {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+}
+
+.scope {
+  padding: 8px 16px;
+  font-weight: 700;
+}

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { LaneId } from '@teambit/lane-id';
+export declare type LaneMenuItemProps = {
+    selected?: LaneId;
+    current: LaneId;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function LaneMenuItem({ selected, current, className, ...rest }: LaneMenuItemProps): JSX.Element;

package/dist/lane-menu-item.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.LaneMenuItem = void 0;
+const react_1 = __importStar(require("react"));
+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 lane_menu_item_module_scss_1 = __importDefault(require("./lane-menu-item.module.scss"));
+function LaneMenuItem(_a) {
+    var { selected, current, className } = _a, rest = __rest(_a, ["selected", "current", "className"]);
+    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 = lanes_ui_models_lanes_model_1.LanesModel.getLaneUrl(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 },
+            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"))))));
+}
+exports.LaneMenuItem = LaneMenuItem;
+//# sourceMappingURL=lane-menu-item.js.map

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

@@ -0,0 +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;AAOlD,SAAgB,YAAY,CAAC,EAA4D;QAA5D,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,OAA8B,EAAzB,IAAI,cAAvC,oCAAyC,CAAF;IAClE,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,wCAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAE5C,OAAO,CACL,uDAAS,IAAI,IAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB;QACzD,8BAAC,gDAAY,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,oCAAM,CAAC,QAAQ;YACrE,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;AAxBD,oCAwBC"}

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

@@ -0,0 +1,14 @@
+.menuItem {
+  display: flex;
+  flex-direction: row;
+  padding: 8px 16px;
+  min-width: 120px;
+  cursor: pointer;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.defaultLanePill {
+  font-size: var(--bit-p-xxs, 12px);
+  text-transform: lowercase;
+}

package/dist/lane-placeholder.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { LaneId } from '@teambit/lane-id';
+export declare type LanePlaceholderProps = {
+    selectedLaneId?: LaneId;
+    disabled?: boolean;
+    showScope?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function LanePlaceholder({ selectedLaneId, disabled, className, showScope, ...rest }: LanePlaceholderProps): JSX.Element;

package/dist/lane-placeholder.js

@@ -0,0 +1,35 @@
+"use strict";
+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.LanePlaceholder = void 0;
+const react_1 = __importDefault(require("react"));
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const lanes_ui_icons_lane_icon_1 = require("@teambit/lanes.ui.icons.lane-icon");
+const classnames_1 = __importDefault(require("classnames"));
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const lane_placeholder_module_scss_1 = __importDefault(require("./lane-placeholder.module.scss"));
+function LanePlaceholder(_a) {
+    var { selectedLaneId, disabled, className, showScope = true } = _a, rest = __rest(_a, ["selectedLaneId", "disabled", "className", "showScope"]);
+    const laneIdStr = (selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.isDefault())
+        ? selectedLaneId.name
+        : (showScope && (selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.toString())) || (selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.name);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(lane_placeholder_module_scss_1.default.placeholder, className, disabled && lane_placeholder_module_scss_1.default.disabled) }),
+        react_1.default.createElement(lanes_ui_icons_lane_icon_1.LaneIcon, { className: lane_placeholder_module_scss_1.default.icon }),
+        react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: lane_placeholder_module_scss_1.default.placeholderText }, laneIdStr),
+        !disabled && react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down" })));
+}
+exports.LanePlaceholder = LanePlaceholder;
+//# sourceMappingURL=lane-placeholder.js.map

package/dist/lane-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lane-placeholder.js","sourceRoot":"","sources":["../lane-placeholder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA8C;AAC9C,gFAAyD;AACzD,gFAA6D;AAE7D,4DAAoC;AACpC,kFAA8D;AAE9D,kGAAoD;AAQpD,SAAgB,eAAe,CAAC,EAMT;QANS,EAC9B,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,IAAI,OAEK,EADlB,IAAI,cALuB,wDAM/B,CADQ;IAEP,MAAM,SAAS,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,SAAS,EAAE;QAC3C,CAAC,CAAC,cAAc,CAAC,IAAI;QACrB,CAAC,CAAC,CAAC,SAAS,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,EAAE,CAAA,CAAC,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAAA,CAAC;IAEtE,OAAO,CACL,uDAAS,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,IAAI,sCAAM,CAAC,QAAQ,CAAC;QAC9F,8BAAC,mCAAQ,IAAC,SAAS,EAAE,sCAAM,CAAC,IAAI,GAAI;QACpC,8BAAC,oCAAQ,IAAC,SAAS,EAAE,sCAAM,CAAC,eAAe,IAAG,SAAS,CAAY;QAClE,CAAC,QAAQ,IAAI,8BAAC,+BAAI,IAAC,EAAE,EAAC,gBAAgB,GAAG,CACtC,CACP,CAAC;AACJ,CAAC;AAlBD,0CAkBC"}

package/dist/lane-placeholder.module.scss

@@ -0,0 +1,23 @@
+.placeholder {
+  display: flex;
+  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;
+  border: 1px solid var(--bit-border-color-light, #cccfd4);
+  background-color: var(--bit-border-color-lightest, #ededed);
+  &.disabled {
+    border: unset;
+  }
+}
+
+.placeholderText {
+  padding: 4px 12px;
+  font-size: var(--bit-p-xs, 14px);
+  flex: 1;
+}
+
+.icon {
+  padding-left: 8px;
+}

package/dist/lane-search.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEventHandler } from 'react';
+export declare type LaneSearchProps = {
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    focus: boolean;
+};
+export declare function LaneSearch({ onChange, focus }: LaneSearchProps): JSX.Element;

package/dist/lane-search.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.LaneSearch = void 0;
+const react_1 = __importStar(require("react"));
+const lane_search_module_scss_1 = __importDefault(require("./lane-search.module.scss"));
+function LaneSearch({ onChange, focus }) {
+    const inputRef = (0, react_1.createRef)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (focus)
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [focus]);
+    const handleOnClicked = (e) => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        e.stopPropagation();
+    };
+    return (react_1.default.createElement("input", { className: lane_search_module_scss_1.default.search, placeholder: 'Search', onClick: handleOnClicked, ref: inputRef, onChange: onChange }));
+}
+exports.LaneSearch = LaneSearch;
+//# sourceMappingURL=lane-search.js.map

package/dist/lane-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lane-search.js","sourceRoot":"","sources":["../lane-search.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwE;AAExE,wFAA+C;AAO/C,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAmB;IAC7D,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAoB,CAAC;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,KAAK;YAAE,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,EAAE;;QAC5B,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC1B,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,yCACE,SAAS,EAAE,iCAAM,CAAC,MAAM,EACxB,WAAW,EAAE,QAAQ,EACrB,OAAO,EAAE,eAAe,EACxB,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,GACX,CACV,CAAC;AACJ,CAAC;AArBD,gCAqBC"}

package/dist/lane-search.module.scss

@@ -0,0 +1,8 @@
+.search {
+  margin-bottom: 8px;
+  padding: 8px;
+  border: 1px solid var(--bit-border-color-lightest, #ededed);
+  border-radius: 6px;
+  width: calc(100% - 16px);
+  background: var(--bit-bg-color, #ffffff);
+}

package/dist/lane-selector.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { LaneId } from '@teambit/lane-id';
+export declare type LaneSelectorProps = {
+    lanes: Array<LaneId>;
+    selectedLaneId?: LaneId;
+    groupByScope?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function LaneSelector({ className, lanes, selectedLaneId, groupByScope, ...rest }: LaneSelectorProps): JSX.Element;

package/dist/lane-selector.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.LaneSelector = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
+const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
+const lane_menu_item_1 = require("./lane-menu-item");
+const lane_placeholder_1 = require("./lane-placeholder");
+const lane_grouped_menu_item_1 = require("./lane-grouped-menu-item");
+const lane_search_1 = require("./lane-search");
+const lane_selector_module_scss_1 = __importDefault(require("./lane-selector.module.scss"));
+function LaneSelector(_a) {
+    var { className, lanes, selectedLaneId, groupByScope = true } = _a, rest = __rest(_a, ["className", "lanes", "selectedLaneId", "groupByScope"]);
+    const [filteredLanes, setFilteredLanes] = (0, react_1.useState)(lanes);
+    const [focus, setFocus] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setFilteredLanes(lanes);
+    }, [lanes]);
+    const multipleLanes = lanes.length > 1;
+    const laneDropdownItems = groupByScope
+        ? Array.from(lanes_ui_models_lanes_model_1.LanesModel.groupByScope(filteredLanes).entries())
+        : filteredLanes;
+    const handleOnChange = (e) => {
+        e.stopPropagation();
+        const searchTerm = e.target.value;
+        if (!searchTerm || searchTerm === '') {
+            setFilteredLanes(lanes);
+        }
+        else {
+            setFilteredLanes((value) => value.filter((laneId) => laneId.name.includes(searchTerm)));
+        }
+    };
+    const onDropdownToggled = (_, open) => {
+        setFocus(open);
+    };
+    return (react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, Object.assign({}, rest, { open: !multipleLanes ? false : undefined, dropClass: lane_selector_module_scss_1.default.menu, onChange: multipleLanes ? onDropdownToggled : undefined, 
+        // @ts-ignore - mismatch between @types/react
+        placeholder: react_1.default.createElement(lane_placeholder_1.LanePlaceholder, { disabled: !multipleLanes, selectedLaneId: selectedLaneId, showScope: groupByScope }), className: (0, classnames_1.default)(className, lane_selector_module_scss_1.default.dropdown, !multipleLanes && lane_selector_module_scss_1.default.disabled) }),
+        multipleLanes && react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.header }, "Switch lane"),
+        multipleLanes && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.search },
+            react_1.default.createElement(lane_search_1.LaneSearch, { focus: focus, onChange: handleOnChange }))),
+        multipleLanes &&
+            groupByScope &&
+            laneDropdownItems.map(([scope, lanesByScope]) => (react_1.default.createElement(lane_grouped_menu_item_1.LaneGroupedMenuItem, { key: scope, scope: scope, selected: selectedLaneId, current: lanesByScope }))),
+        multipleLanes &&
+            !groupByScope &&
+            laneDropdownItems.map((lane) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { key: lane.toString(), selected: selectedLaneId, current: lane })))));
+}
+exports.LaneSelector = LaneSelector;
+//# sourceMappingURL=lane-selector.js.map

package/dist/lane-selector.js.map

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

package/dist/lane-selector.module.scss

@@ -0,0 +1,26 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.dropdown {
+  // otherwise when the dropdown is open it clashes with the content of the tree
+  // (this is bizarre, the tree has no position absolute)
+  z-index: $nav-z-index;
+  &.disabled {
+    > div {
+      cursor: unset;
+    }
+  }
+}
+
+.header {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.search {
+  margin: 8px 0px 0px 0px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.menu {
+  width: calc(100% - 24px);
+}

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/index.ts

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

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

@@ -0,0 +1,10 @@
+.groupedMenuItem {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+}
+
+.scope {
+  padding: 8px 16px;
+  font-weight: 700;
+}

package/lane-grouped-menu-item.tsx

@@ -0,0 +1,34 @@
+import React, { HTMLAttributes } from 'react';
+import { LaneId } from '@teambit/lane-id';
+import classnames from 'classnames';
+import { LaneMenuItem } from './lane-menu-item';
+
+import styles from './lane-grouped-menu-item.module.scss';
+
+export type LaneGroupedMenuItemProps = {
+  selected?: LaneId;
+  current: LaneId[];
+  scope: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function LaneGroupedMenuItem({ selected, current, className, scope, ...rest }: LaneGroupedMenuItemProps) {
+  if (current.length === 0) return null;
+
+  if (current[0].isDefault()) {
+    const defaultLane = current[0] as LaneId;
+    return <LaneMenuItem key={defaultLane.toString()} selected={selected} current={defaultLane} />;
+  }
+
+  const onClickStopPropagation = (e) => e.stopPropagation();
+
+  return (
+    <div className={classnames(styles.groupedMenuItem, className)} {...rest}>
+      <div onClick={onClickStopPropagation} className={styles.scope}>
+        {scope}
+      </div>
+      {current.map((lane) => (
+        <LaneMenuItem key={lane.toString()} selected={selected} current={lane} />
+      ))}
+    </div>
+  );
+}

package/lane-menu-item.module.scss

@@ -0,0 +1,14 @@
+.menuItem {
+  display: flex;
+  flex-direction: row;
+  padding: 8px 16px;
+  min-width: 120px;
+  cursor: pointer;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.defaultLanePill {
+  font-size: var(--bit-p-xxs, 12px);
+  text-transform: lowercase;
+}

package/lane-menu-item.tsx

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes, useRef, useEffect } from 'react';
+import { LaneId } from '@teambit/lane-id';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { PillLabel } from '@teambit/design.ui.pill-label';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+
+import styles from './lane-menu-item.module.scss';
+
+export type LaneMenuItemProps = {
+  selected?: LaneId;
+  current: LaneId;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function LaneMenuItem({ selected, current, className, ...rest }: LaneMenuItemProps) {
+  const isCurrent = selected?.toString() === current.toString();
+
+  const currentVersionRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (isCurrent) {
+      currentVersionRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [isCurrent]);
+
+  const href = LanesModel.getLaneUrl(current);
+
+  return (
+    <div {...rest} className={className} ref={currentVersionRef}>
+      <MenuLinkItem active={isCurrent} href={href} className={styles.menuItem}>
+        <div className={styles.laneName}>{current.name}</div>
+        {current.isDefault() && (
+          <PillLabel className={styles.defaultLanePill}>
+            <span>default</span>
+          </PillLabel>
+        )}
+      </MenuLinkItem>
+    </div>
+  );
+}

package/lane-placeholder.module.scss

@@ -0,0 +1,23 @@
+.placeholder {
+  display: flex;
+  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;
+  border: 1px solid var(--bit-border-color-light, #cccfd4);
+  background-color: var(--bit-border-color-lightest, #ededed);
+  &.disabled {
+    border: unset;
+  }
+}
+
+.placeholderText {
+  padding: 4px 12px;
+  font-size: var(--bit-p-xs, 14px);
+  flex: 1;
+}
+
+.icon {
+  padding-left: 8px;
+}

package/lane-placeholder.tsx

@@ -0,0 +1,34 @@
+import React, { HTMLAttributes } from 'react';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { LaneIcon } from '@teambit/lanes.ui.icons.lane-icon';
+import { LaneId } from '@teambit/lane-id';
+import classnames from 'classnames';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+
+import styles from './lane-placeholder.module.scss';
+
+export type LanePlaceholderProps = {
+  selectedLaneId?: LaneId;
+  disabled?: boolean;
+  showScope?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function LanePlaceholder({
+  selectedLaneId,
+  disabled,
+  className,
+  showScope = true,
+  ...rest
+}: LanePlaceholderProps) {
+  const laneIdStr = selectedLaneId?.isDefault()
+    ? selectedLaneId.name
+    : (showScope && selectedLaneId?.toString()) || selectedLaneId?.name;
+
+  return (
+    <div {...rest} className={classnames(styles.placeholder, className, disabled && styles.disabled)}>
+      <LaneIcon className={styles.icon} />
+      <Ellipsis className={styles.placeholderText}>{laneIdStr}</Ellipsis>
+      {!disabled && <Icon of="fat-arrow-down" />}
+    </div>
+  );
+}

package/lane-search.module.scss

@@ -0,0 +1,8 @@
+.search {
+  margin-bottom: 8px;
+  padding: 8px;
+  border: 1px solid var(--bit-border-color-lightest, #ededed);
+  border-radius: 6px;
+  width: calc(100% - 16px);
+  background: var(--bit-bg-color, #ffffff);
+}

package/lane-search.tsx

@@ -0,0 +1,31 @@
+import React, { createRef, useEffect, ChangeEventHandler } from 'react';
+
+import styles from './lane-search.module.scss';
+
+export type LaneSearchProps = {
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  focus: boolean;
+};
+
+export function LaneSearch({ onChange, focus }: LaneSearchProps) {
+  const inputRef = createRef<HTMLInputElement>();
+
+  useEffect(() => {
+    if (focus) inputRef.current?.focus();
+  }, [focus]);
+
+  const handleOnClicked = (e) => {
+    inputRef.current?.focus();
+    e.stopPropagation();
+  };
+
+  return (
+    <input
+      className={styles.search}
+      placeholder={'Search'}
+      onClick={handleOnClicked}
+      ref={inputRef}
+      onChange={onChange}
+    ></input>
+  );
+}

package/lane-selector.module.scss

@@ -0,0 +1,26 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.dropdown {
+  // otherwise when the dropdown is open it clashes with the content of the tree
+  // (this is bizarre, the tree has no position absolute)
+  z-index: $nav-z-index;
+  &.disabled {
+    > div {
+      cursor: unset;
+    }
+  }
+}
+
+.header {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.search {
+  margin: 8px 0px 0px 0px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.menu {
+  width: calc(100% - 24px);
+}

package/lane-selector.tsx

@@ -0,0 +1,79 @@
+import React, { HTMLAttributes, useState, ChangeEventHandler, useEffect } from 'react';
+import classnames from 'classnames';
+import { LaneId } from '@teambit/lane-id';
+import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
+
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { LaneMenuItem } from './lane-menu-item';
+import { LanePlaceholder } from './lane-placeholder';
+import { LaneGroupedMenuItem } from './lane-grouped-menu-item';
+import { LaneSearch } from './lane-search';
+
+import styles from './lane-selector.module.scss';
+
+export type LaneSelectorProps = {
+  lanes: Array<LaneId>;
+  selectedLaneId?: LaneId;
+  groupByScope?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+type LaneDropdownItems = Array<LaneId> | Array<[scope: string, lanes: LaneId[]]>;
+
+export function LaneSelector({ className, lanes, selectedLaneId, groupByScope = true, ...rest }: LaneSelectorProps) {
+  const [filteredLanes, setFilteredLanes] = useState<LaneId[]>(lanes);
+  const [focus, setFocus] = useState<boolean>(false);
+
+  useEffect(() => {
+    setFilteredLanes(lanes);
+  }, [lanes]);
+
+  const multipleLanes = lanes.length > 1;
+  const laneDropdownItems: LaneDropdownItems = groupByScope
+    ? Array.from(LanesModel.groupByScope(filteredLanes).entries())
+    : filteredLanes;
+
+  const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    e.stopPropagation();
+    const searchTerm = e.target.value;
+    if (!searchTerm || searchTerm === '') {
+      setFilteredLanes(lanes);
+    } else {
+      setFilteredLanes((value) => value.filter((laneId) => laneId.name.includes(searchTerm)));
+    }
+  };
+
+  const onDropdownToggled = (_, open) => {
+    setFocus(open);
+  };
+
+  return (
+    <Dropdown
+      {...rest}
+      open={!multipleLanes ? false : undefined}
+      dropClass={styles.menu}
+      onChange={multipleLanes ? onDropdownToggled : undefined}
+      // @ts-ignore - mismatch between @types/react
+      placeholder={
+        <LanePlaceholder disabled={!multipleLanes} selectedLaneId={selectedLaneId} showScope={groupByScope} />
+      }
+      className={classnames(className, styles.dropdown, !multipleLanes && styles.disabled)}
+    >
+      {multipleLanes && <div className={styles.header}>Switch lane</div>}
+      {multipleLanes && (
+        <div className={styles.search}>
+          <LaneSearch focus={focus} onChange={handleOnChange} />
+        </div>
+      )}
+      {multipleLanes &&
+        groupByScope &&
+        (laneDropdownItems as Array<[scope: string, lanes: LaneId[]]>).map(([scope, lanesByScope]) => (
+          <LaneGroupedMenuItem key={scope} scope={scope} selected={selectedLaneId} current={lanesByScope} />
+        ))}
+      {multipleLanes &&
+        !groupByScope &&
+        (laneDropdownItems as LaneId[]).map((lane) => (
+          <LaneMenuItem key={lane.toString()} selected={selectedLaneId} current={lane}></LaneMenuItem>
+        ))}
+    </Dropdown>
+  );
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@teambit/lanes.ui.inputs.lane-selector",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.lanes",
+    "name": "ui/inputs/lane-selector",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "core-js": "^3.0.0",
+    "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
+    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/evangelist.surfaces.dropdown": "1.0.2",
+    "@teambit/lane-id": "0.0.97",
+    "@teambit/design.ui.pill-label": "0.0.356",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.1",
+    "@teambit/design.ui.styles.ellipsis": "0.0.353",
+    "@teambit/lanes.ui.icons.lane-icon": "0.0.1",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.494"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@babel/runtime": "7.12.18",
+    "@types/jest": "^26.0.0",
+    "@types/react-dom": "^17.0.5",
+    "@types/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "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"
+  ]
+}

package/preview-1664735485436.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "CommonJS",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}