@teambit/lanes.ui.inputs.lane-selector 0.0.83 → 0.0.84

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

@@ -4,5 +4,7 @@ export declare type LaneGroupedMenuItemProps = {
     selected?: LaneId;
     current: LaneId[];
     scope: string;
+    getHref?: (laneId: LaneId) => string;
+    onLaneSelected?: (laneId: LaneId) => void;
 } & HTMLAttributes<HTMLDivElement>;
-export declare function LaneGroupedMenuItem({ selected, current, className, scope, ...rest }: LaneGroupedMenuItemProps): JSX.Element;
+export declare function LaneGroupedMenuItem({ selected, current, className, scope, getHref, onLaneSelected, ...rest }: LaneGroupedMenuItemProps): JSX.Element;

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

@@ -20,17 +20,17 @@ 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"]);
+    var { selected, current, className, scope, getHref, onLaneSelected } = _a, rest = __rest(_a, ["selected", "current", "className", "scope", "getHref", "onLaneSelected"]);
     if (current.length === 0)
         return null;
-    if (current[0].isDefault()) {
+    if (current.length === 1 && current[0].isDefault()) {
         const defaultLane = current[0];
-        return react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { key: defaultLane.toString(), selected: selected, current: defaultLane });
+        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(), selected: selected, current: lane })))));
+        current.map((lane) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { key: lane.toString(), onLaneSelected: onLaneSelected, getHref: getHref, selected: selected, current: 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;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"}
+{"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"}

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

@@ -3,5 +3,7 @@ import { LaneId } from '@teambit/lane-id';
 export declare type LaneMenuItemProps = {
     selected?: LaneId;
     current: LaneId;
+    getHref?: (laneId: LaneId) => string;
+    onLaneSelected?: (laneId: LaneId) => void;
 } & HTMLAttributes<HTMLDivElement>;
-export declare function LaneMenuItem({ selected, current, className, ...rest }: LaneMenuItemProps): JSX.Element;
+export declare function LaneMenuItem({ selected, current, className, onLaneSelected, getHref, ...rest }: LaneMenuItemProps): JSX.Element;

package/dist/lane-menu-item.js

@@ -44,7 +44,7 @@ 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"]);
+    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)(() => {
@@ -53,9 +53,9 @@ function LaneMenuItem(_a) {
             (_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);
+    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 },
+        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"))))));

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;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"}
+{"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"}

package/dist/lane-selector.d.ts

@@ -4,5 +4,7 @@ export declare type LaneSelectorProps = {
     lanes: Array<LaneId>;
     selectedLaneId?: LaneId;
     groupByScope?: boolean;
+    getHref?: (laneId: LaneId) => string;
+    onLaneSelected?: (laneId: LaneId) => void;
 } & HTMLAttributes<HTMLDivElement>;
-export declare function LaneSelector({ className, lanes, selectedLaneId, groupByScope, ...rest }: LaneSelectorProps): JSX.Element;
+export declare function LaneSelector({ className, lanes, selectedLaneId, groupByScope, getHref, onLaneSelected, ...rest }: LaneSelectorProps): JSX.Element;

package/dist/lane-selector.js

@@ -48,12 +48,12 @@ 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"]);
+    var { className, lanes, selectedLaneId, groupByScope = true, getHref, onLaneSelected } = _a, rest = __rest(_a, ["className", "lanes", "selectedLaneId", "groupByScope", "getHref", "onLaneSelected"]);
     const [filteredLanes, setFilteredLanes] = (0, react_1.useState)(lanes);
     const [focus, setFocus] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         setFilteredLanes(lanes);
-    }, [lanes]);
+    }, [lanes.length]);
     const multipleLanes = lanes.length > 1;
     const laneDropdownItems = groupByScope
         ? Array.from(lanes_ui_models_lanes_model_1.LanesModel.groupByScope(filteredLanes).entries())
@@ -71,7 +71,7 @@ function LaneSelector(_a) {
     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, elevation: 'none', onChange: multipleLanes ? onDropdownToggled : undefined, 
+    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, elevation: "none", 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"),
@@ -79,10 +79,10 @@ function LaneSelector(_a) {
             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 }))),
+            laneDropdownItems.map(([scope, lanesByScope]) => (react_1.default.createElement(lane_grouped_menu_item_1.LaneGroupedMenuItem, { key: scope, onLaneSelected: onLaneSelected, getHref: getHref, 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 })))));
+            laneDropdownItems.map((lane) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { onLaneSelected: onLaneSelected, key: lane.toString(), getHref: getHref, selected: selectedLaneId, current: lane })))));
 }
 exports.LaneSelector = LaneSelector;
 //# sourceMappingURL=lane-selector.js.map

package/dist/lane-selector.js.map

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

package/dist/lane-selector.module.scss

@@ -5,8 +5,6 @@
   // (this is bizarre, the tree has no position absolute)
   z-index: $nav-z-index;
   border-radius: 8px;
-  // override dropdown default width: 100%
-  width: calc(100% - 40px) !important;
 
   &.disabled {
     > div {
@@ -28,7 +26,7 @@
 }
 
 .menu {
-  width: calc(100% - 24px);
+  width: 100%;
   border-radius: 8px;
   padding: 0;
   padding-top: 8px;

package/lane-grouped-menu-item.tsx

@@ -9,14 +9,32 @@ export type LaneGroupedMenuItemProps = {
   selected?: LaneId;
   current: LaneId[];
   scope: string;
+  getHref?: (laneId: LaneId) => string;
+  onLaneSelected?: (laneId: LaneId) => void;
 } & HTMLAttributes<HTMLDivElement>;
 
-export function LaneGroupedMenuItem({ selected, current, className, scope, ...rest }: LaneGroupedMenuItemProps) {
+export function LaneGroupedMenuItem({
+  selected,
+  current,
+  className,
+  scope,
+  getHref,
+  onLaneSelected,
+  ...rest
+}: LaneGroupedMenuItemProps) {
   if (current.length === 0) return null;
 
-  if (current[0].isDefault()) {
+  if (current.length === 1 && current[0].isDefault()) {
     const defaultLane = current[0] as LaneId;
-    return <LaneMenuItem key={defaultLane.toString()} selected={selected} current={defaultLane} />;
+    return (
+      <LaneMenuItem
+        key={defaultLane.toString()}
+        onLaneSelected={onLaneSelected}
+        getHref={getHref}
+        selected={selected}
+        current={defaultLane}
+      />
+    );
   }
 
   const onClickStopPropagation = (e) => e.stopPropagation();
@@ -27,7 +45,13 @@ export function LaneGroupedMenuItem({ selected, current, className, scope, ...re
         {scope}
       </div>
       {current.map((lane) => (
-        <LaneMenuItem key={lane.toString()} selected={selected} current={lane} />
+        <LaneMenuItem
+          key={lane.toString()}
+          onLaneSelected={onLaneSelected}
+          getHref={getHref}
+          selected={selected}
+          current={lane}
+        />
       ))}
     </div>
   );

package/lane-menu-item.tsx

@@ -9,9 +9,18 @@ import styles from './lane-menu-item.module.scss';
 export type LaneMenuItemProps = {
   selected?: LaneId;
   current: LaneId;
+  getHref?: (laneId: LaneId) => string;
+  onLaneSelected?: (laneId: LaneId) => void;
 } & HTMLAttributes<HTMLDivElement>;
 
-export function LaneMenuItem({ selected, current, className, ...rest }: LaneMenuItemProps) {
+export function LaneMenuItem({
+  selected,
+  current,
+  className,
+  onLaneSelected,
+  getHref = LanesModel.getLaneUrl,
+  ...rest
+}: LaneMenuItemProps) {
   const isCurrent = selected?.toString() === current.toString();
 
   const currentVersionRef = useRef<HTMLDivElement>(null);
@@ -21,11 +30,16 @@ export function LaneMenuItem({ selected, current, className, ...rest }: LaneMenu
     }
   }, [isCurrent]);
 
-  const href = LanesModel.getLaneUrl(current);
+  const href = getHref(current);
 
   return (
     <div {...rest} className={className} ref={currentVersionRef}>
-      <MenuLinkItem active={isCurrent} href={href} className={styles.menuItem}>
+      <MenuLinkItem
+        active={isCurrent}
+        href={href}
+        className={styles.menuItem}
+        onClick={onLaneSelected && (() => onLaneSelected(current))}
+      >
         <div className={styles.laneName}>{current.name}</div>
         {current.isDefault() && (
           <PillLabel className={styles.defaultLanePill}>

package/lane-selector.module.scss

@@ -5,8 +5,6 @@
   // (this is bizarre, the tree has no position absolute)
   z-index: $nav-z-index;
   border-radius: 8px;
-  // override dropdown default width: 100%
-  width: calc(100% - 40px) !important;
 
   &.disabled {
     > div {
@@ -28,7 +26,7 @@
 }
 
 .menu {
-  width: calc(100% - 24px);
+  width: 100%;
   border-radius: 8px;
   padding: 0;
   padding-top: 8px;

package/lane-selector.tsx

@@ -15,17 +15,27 @@ export type LaneSelectorProps = {
   lanes: Array<LaneId>;
   selectedLaneId?: LaneId;
   groupByScope?: boolean;
+  getHref?: (laneId: LaneId) => string;
+  onLaneSelected?: (laneId: LaneId) => void;
 } & HTMLAttributes<HTMLDivElement>;
 
 type LaneDropdownItems = Array<LaneId> | Array<[scope: string, lanes: LaneId[]]>;
 
-export function LaneSelector({ className, lanes, selectedLaneId, groupByScope = true, ...rest }: LaneSelectorProps) {
+export function LaneSelector({
+  className,
+  lanes,
+  selectedLaneId,
+  groupByScope = true,
+  getHref,
+  onLaneSelected,
+  ...rest
+}: LaneSelectorProps) {
   const [filteredLanes, setFilteredLanes] = useState<LaneId[]>(lanes);
   const [focus, setFocus] = useState<boolean>(false);
 
   useEffect(() => {
     setFilteredLanes(lanes);
-  }, [lanes]);
+  }, [lanes.length]);
 
   const multipleLanes = lanes.length > 1;
   const laneDropdownItems: LaneDropdownItems = groupByScope
@@ -51,7 +61,7 @@ export function LaneSelector({ className, lanes, selectedLaneId, groupByScope =
       {...rest}
       open={!multipleLanes ? false : undefined}
       dropClass={styles.menu}
-      elevation='none'
+      elevation="none"
       onChange={multipleLanes ? onDropdownToggled : undefined}
       // @ts-ignore - mismatch between @types/react
       placeholder={
@@ -68,12 +78,25 @@ export function LaneSelector({ className, lanes, selectedLaneId, groupByScope =
       {multipleLanes &&
         groupByScope &&
         (laneDropdownItems as Array<[scope: string, lanes: LaneId[]]>).map(([scope, lanesByScope]) => (
-          <LaneGroupedMenuItem key={scope} scope={scope} selected={selectedLaneId} current={lanesByScope} />
+          <LaneGroupedMenuItem
+            key={scope}
+            onLaneSelected={onLaneSelected}
+            getHref={getHref}
+            scope={scope}
+            selected={selectedLaneId}
+            current={lanesByScope}
+          />
         ))}
       {multipleLanes &&
         !groupByScope &&
         (laneDropdownItems as LaneId[]).map((lane) => (
-          <LaneMenuItem key={lane.toString()} selected={selectedLaneId} current={lane}></LaneMenuItem>
+          <LaneMenuItem
+            onLaneSelected={onLaneSelected}
+            key={lane.toString()}
+            getHref={getHref}
+            selected={selectedLaneId}
+            current={lane}
+          ></LaneMenuItem>
         ))}
     </Dropdown>
   );

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/lanes.ui.inputs.lane-selector",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "homepage": "https://bit.dev/teambit/lanes/ui/inputs/lane-selector",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.lanes",
     "name": "ui/inputs/lane-selector",
-    "version": "0.0.83"
+    "version": "0.0.84"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -15,8 +15,8 @@
     "@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.175",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.83",
+    "@teambit/lane-id": "0.0.176",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.84",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
     "@teambit/lanes.ui.icons.lane-icon": "0.0.4",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498"