@teambit/lanes.ui.inputs.lane-selector 0.0.112 → 0.0.113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/index.d.ts +6 -3
  2. package/dist/index.js +1 -2
  3. package/dist/index.js.map +1 -1
  4. package/dist/lane-grouped-menu-item.d.ts +2 -1
  5. package/dist/lane-grouped-menu-item.js +2 -2
  6. package/dist/lane-grouped-menu-item.js.map +1 -1
  7. package/dist/lane-menu-item.d.ts +8 -1
  8. package/dist/lane-menu-item.js +27 -5
  9. package/dist/lane-menu-item.js.map +1 -1
  10. package/dist/lane-selector-list.d.ts +6 -1
  11. package/dist/lane-selector-list.js +74 -8
  12. package/dist/lane-selector-list.js.map +1 -1
  13. package/dist/lane-selector.d.ts +1 -0
  14. package/dist/lane-selector.js +57 -5
  15. package/dist/lane-selector.js.map +1 -1
  16. package/index.ts +6 -3
  17. package/lane-grouped-menu-item.tsx +3 -0
  18. package/lane-menu-item.tsx +68 -63
  19. package/lane-selector-list.tsx +95 -7
  20. package/lane-selector.tsx +75 -14
  21. package/package-tar/teambit-lanes.ui.inputs.lane-selector-0.0.113.tgz +0 -0
  22. package/package.json +11 -10
  23. package/package-tar/teambit-lanes.ui.inputs.lane-selector-0.0.112.tgz +0 -0
  24. /package/dist/{preview-1679974224627.js → preview-1680751703602.js} +0 -0
package/dist/index.d.ts CHANGED
@@ -1,3 +1,6 @@
1
- export { LaneSelector, LaneSelectorProps, LaneSelectorSortBy } from './lane-selector';
2
- export { LaneMenuItem, LaneMenuItemProps } from './lane-menu-item';
3
- export { LanePlaceholder, LanePlaceholderProps } from './lane-placeholder';
1
+ export { LaneSelector } from './lane-selector';
2
+ export { LaneMenuItem } from './lane-menu-item';
3
+ export { LanePlaceholder } from './lane-placeholder';
4
+ export type { LaneSelectorProps, LaneSelectorSortBy } from './lane-selector';
5
+ export type { LanePlaceholderProps } from './lane-placeholder';
6
+ export type { LaneMenuItemProps } from './lane-menu-item';
package/dist/index.js CHANGED
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.LanePlaceholder = exports.LaneMenuItem = exports.LaneSelectorSortBy = exports.LaneSelector = void 0;
3
+ exports.LanePlaceholder = exports.LaneMenuItem = exports.LaneSelector = void 0;
4
4
  var lane_selector_1 = require("./lane-selector");
5
5
  Object.defineProperty(exports, "LaneSelector", { enumerable: true, get: function () { return lane_selector_1.LaneSelector; } });
6
- Object.defineProperty(exports, "LaneSelectorSortBy", { enumerable: true, get: function () { return lane_selector_1.LaneSelectorSortBy; } });
7
6
  var lane_menu_item_1 = require("./lane-menu-item");
8
7
  Object.defineProperty(exports, "LaneMenuItem", { enumerable: true, get: function () { return lane_menu_item_1.LaneMenuItem; } });
9
8
  var lane_placeholder_1 = require("./lane-placeholder");
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA;AACrB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA;AACrB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA"}
package/dist/lane-grouped-menu-item.d.ts CHANGED
@@ -9,5 +9,6 @@ export declare type LaneGroupedMenuItemProps = {
9
9
  onLaneSelected?: (laneId: LaneId) => void;
10
10
  icon?: React.ReactNode;
11
11
  timestamp?: (lane: LaneModel) => Date | undefined;
12
+ innerRefs?: (laneId: LaneId) => React.RefObject<HTMLDivElement> | undefined;
12
13
  } & HTMLAttributes<HTMLDivElement>;
13
- export declare function LaneGroupedMenuItem({ selected, current, className, scope, timestamp, icon, getHref, onLaneSelected, ...rest }: LaneGroupedMenuItemProps): JSX.Element;
14
+ export declare function LaneGroupedMenuItem({ selected, current, className, scope, timestamp, icon, getHref, onLaneSelected, innerRefs, ...rest }: LaneGroupedMenuItemProps): JSX.Element;
package/dist/lane-grouped-menu-item.js CHANGED
@@ -21,7 +21,7 @@ const classnames_1 = __importDefault(require("classnames"));
21
21
  const lane_menu_item_1 = require("./lane-menu-item");
22
22
  const lane_grouped_menu_item_module_scss_1 = __importDefault(require("./lane-grouped-menu-item.module.scss"));
23
23
  function LaneGroupedMenuItem(_a) {
24
- 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"]);
24
+ 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, innerRefs } = _a, rest = __rest(_a, ["selected", "current", "className", "scope", "timestamp", "icon", "getHref", "onLaneSelected", "innerRefs"]);
25
25
  if (current.length === 0)
26
26
  return null;
27
27
  if (current.length === 1 && current[0].id.isDefault()) {
@@ -33,7 +33,7 @@ function LaneGroupedMenuItem(_a) {
33
33
  react_1.default.createElement("div", { onClick: onClickStopPropagation, className: lane_grouped_menu_item_module_scss_1.default.scope },
34
34
  react_1.default.createElement("div", { className: lane_grouped_menu_item_module_scss_1.default.scopeIcon }, icon),
35
35
  react_1.default.createElement("div", { className: lane_grouped_menu_item_module_scss_1.default.scopeName }, scope)),
36
- 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) })))));
36
+ current.map((lane) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { ref: innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs(lane.id), key: lane.id.toString(), onLaneSelected: onLaneSelected, getHref: getHref, selected: selected, current: lane, timestamp: timestamp === null || timestamp === void 0 ? void 0 : timestamp(lane) })))));
37
37
  }
38
38
  exports.LaneGroupedMenuItem = LaneGroupedMenuItem;
39
39
  //# sourceMappingURL=lane-grouped-menu-item.js.map
package/dist/lane-grouped-menu-item.js.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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;AAa1D,SAAgB,mBAAmB,CAAC,EAWT;QAXS,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,EACd,SAAS,OAEgB,EADtB,IAAI,cAV2B,4GAWnC,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,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,EAAE,CAAC,EACzB,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;AAhDD,kDAgDC"}
package/dist/lane-menu-item.d.ts CHANGED
@@ -9,4 +9,11 @@ export declare type LaneMenuItemProps = {
9
9
  icon?: React.ReactNode;
10
10
  timestamp?: Date;
11
11
  } & HTMLAttributes<HTMLDivElement>;
12
- export declare function LaneMenuItem({ selected, current, className, onLaneSelected, getHref, icon, timestamp, ...rest }: LaneMenuItemProps): JSX.Element;
12
+ export declare const LaneMenuItem: React.ForwardRefExoticComponent<{
13
+ selected?: LaneId;
14
+ current: LaneModel;
15
+ getHref?: (laneId: LaneId) => string;
16
+ onLaneSelected?: (laneId: LaneId) => void;
17
+ icon?: React.ReactNode;
18
+ timestamp?: Date;
19
+ } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
package/dist/lane-menu-item.js CHANGED
@@ -1,4 +1,27 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __rest = (this && this.__rest) || function (s, e) {
3
26
  var t = {};
4
27
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
15
38
  };
16
39
  Object.defineProperty(exports, "__esModule", { value: true });
17
40
  exports.LaneMenuItem = void 0;
18
- const react_1 = __importDefault(require("react"));
41
+ const react_1 = __importStar(require("react"));
19
42
  const classnames_1 = __importDefault(require("classnames"));
20
43
  const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
21
44
  const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
@@ -23,7 +46,7 @@ const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
23
46
  const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
24
47
  const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
25
48
  const lane_menu_item_module_scss_1 = __importDefault(require("./lane-menu-item.module.scss"));
26
- function LaneMenuItem(_a) {
49
+ exports.LaneMenuItem = (0, react_1.forwardRef)((_a, ref) => {
27
50
  var _b;
28
51
  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"]);
29
52
  const isCurrent = (selected === null || selected === void 0 ? void 0 : selected.toString()) === current.id.toString();
@@ -51,7 +74,7 @@ function LaneMenuItem(_a) {
51
74
  hour12: true,
52
75
  };
53
76
  const formattedTimestamp = timestamp === null || timestamp === void 0 ? void 0 : timestamp.toLocaleString(undefined, options).replace(',', '');
54
- return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_menu_item_module_scss_1.default.laneMenuItemContainer) }),
77
+ return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, lane_menu_item_module_scss_1.default.laneMenuItemContainer) }),
55
78
  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 },
56
79
  react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneContainer },
57
80
  react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.top, isDefaultLane && lane_menu_item_module_scss_1.default.mainLane) },
@@ -61,6 +84,5 @@ function LaneMenuItem(_a) {
61
84
  !isDefaultLane && react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: lane_menu_item_module_scss_1.default.laneName }, laneName),
62
85
  formattedTimestamp && (react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.timeStamp },
63
86
  react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: formattedTimestamp }))))))));
64
- }
65
- exports.LaneMenuItem = LaneMenuItem;
87
+ });
66
88
  //# sourceMappingURL=lane-menu-item.js.map
package/dist/lane-menu-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lane-menu-item.js","sourceRoot":"","sources":["../lane-menu-item.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"lane-menu-item.js","sourceRoot":"","sources":["../lane-menu-item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,4DAAoC;AAEpC,sFAA6E;AAC7E,kGAA0E;AAC1E,gEAAuD;AACvD,oEAAsD;AACtD,kFAA8D;AAE9D,8FAAkD;AAWrC,QAAA,YAAY,GAAG,IAAA,kBAAU,EACpC,CACE,EASoB,EACpB,GAAG,EACH,EAAE;;QAXF,EACE,QAAQ,EACR,OAAO,EACP,SAAS,EACT,cAAc,EACd,OAAO,GAAG,wCAAU,CAAC,UAAU,EAC/B,IAAI,EACJ,SAAS,OAES,EADf,IAAI,cART,sFASC,CADQ;IAIT,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,EAAE,MAAK,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACjE,MAAM,aAAa,GAAG,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC;IAC7C,MAAM,eAAe,GACnB,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,uCAAK,GAAG,EAAC,2DAA2D,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEhH,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAEjC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,OAAO,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC;IAC/D,MAAM,QAAQ,GAAG,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC;IACjC,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC;IAEpD,MAAM,MAAM,GAAG,eAAe,IAAI,CAChC,8BAAC,6BAAU,IACT,IAAI,EAAE,EAAE,EACR,OAAO,EAAE;YACP,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;YAC/B,WAAW,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI;YACvB,YAAY,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY;SACjC,GACD,CACH,CAAC;IAEF,MAAM,OAAO,GAA+B;QAC1C,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,IAAI;KACb,CAAC;IACF,MAAM,kBAAkB,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAE1F,OAAO,CACL,uDAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,oCAAM,CAAC,qBAAqB,CAAC;QACrF,8BAAC,gDAAY,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,oCAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO;YACvF,uCAAK,SAAS,EAAE,oCAAM,CAAC,aAAa;gBAClC,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,GAAG,EAAE,aAAa,IAAI,oCAAM,CAAC,QAAQ,CAAC;oBACtE,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,IAAI,EAAE,aAAa,IAAI,CAAC,IAAI,IAAI,oCAAM,CAAC,mBAAmB,CAAC,IAC1F,MAAM,CACH;oBACN,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,eAAe,CAAC,IAAG,eAAe,CAAO,CACvE;gBACN,uCAAK,SAAS,EAAE,oCAAM,CAAC,MAAM;oBAC1B,CAAC,aAAa,IAAI,8BAAC,oCAAQ,IAAC,SAAS,EAAE,oCAAM,CAAC,QAAQ,IAAG,QAAQ,CAAY;oBAE7E,kBAAkB,IAAI,CACrB,uCAAK,SAAS,EAAE,oCAAM,CAAC,SAAS;wBAC9B,8BAAC,4BAAO,IAAC,IAAI,EAAE,kBAAkB,GAAI,CACjC,CACP,CACG,CACF,CACO,CACX,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
package/dist/lane-selector-list.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import { HTMLAttributes } from 'react';
2
2
  import { LaneSelectorProps } from './lane-selector';
3
+ export declare type ListNavigatorCmd = 'Up' | 'Down' | 'Enter';
3
4
  export declare type LaneSelectorListProps = {
4
5
  search?: string;
6
+ listNavigator?: {
7
+ command?: ListNavigatorCmd;
8
+ update?: number;
9
+ };
5
10
  } & LaneSelectorProps & HTMLAttributes<HTMLDivElement>;
6
- export declare function LaneSelectorList({ selectedLaneId, mainLane, nonMainLanes, className, groupByScope, getHref, onLaneSelected, search, mainIcon, scopeIconLookup, sortBy, sortOptions, scopeIcon, ...rest }: LaneSelectorListProps): JSX.Element;
11
+ export declare function LaneSelectorList({ selectedLaneId: selectedLaneIdFromProps, mainLane, nonMainLanes, className, groupByScope, getHref, onLaneSelected, search, mainIcon, scopeIconLookup, sortBy, sortOptions, scopeIcon, listNavigator, forceCloseOnEnter, ...rest }: LaneSelectorListProps): JSX.Element;
package/dist/lane-selector-list.js CHANGED
@@ -39,21 +39,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.LaneSelectorList = void 0;
41
41
  const react_1 = __importStar(require("react"));
42
+ const react_router_dom_1 = require("react-router-dom");
42
43
  const classnames_1 = __importDefault(require("classnames"));
43
44
  const lodash_1 = require("lodash");
44
45
  const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
45
46
  const lane_selector_1 = require("./lane-selector");
46
- // import { LaneGroupedMenuItem } from './lane-grouped-menu-item';
47
47
  const lane_menu_item_1 = require("./lane-menu-item");
48
- const lane_selector_list_module_scss_1 = __importDefault(require("./lane-selector-list.module.scss"));
49
48
  const lane_grouped_menu_item_1 = require("./lane-grouped-menu-item");
49
+ const lane_selector_list_module_scss_1 = __importDefault(require("./lane-selector-list.module.scss"));
50
50
  function LaneSelectorList(_a) {
51
- var { selectedLaneId, mainLane, nonMainLanes, className, groupByScope, getHref, onLaneSelected, search = '', mainIcon, scopeIconLookup, sortBy, sortOptions,
51
+ var { selectedLaneId: selectedLaneIdFromProps, mainLane, nonMainLanes, className, groupByScope, getHref = lanes_ui_models_lanes_model_1.LanesModel.getLaneUrl, onLaneSelected, search = '', mainIcon, scopeIconLookup, sortBy, sortOptions,
52
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
53
+ scopeIcon, listNavigator,
52
54
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
53
- scopeIcon } = _a, rest = __rest(_a, ["selectedLaneId", "mainLane", "nonMainLanes", "className", "groupByScope", "getHref", "onLaneSelected", "search", "mainIcon", "scopeIconLookup", "sortBy", "sortOptions", "scopeIcon"]);
54
- const selectedNonMainLane = (!!selectedLaneId && nonMainLanes.find((nonMainLane) => nonMainLane.id.isEqual(selectedLaneId))) || undefined;
55
+ forceCloseOnEnter } = _a, rest = __rest(_a, ["selectedLaneId", "mainLane", "nonMainLanes", "className", "groupByScope", "getHref", "onLaneSelected", "search", "mainIcon", "scopeIconLookup", "sortBy", "sortOptions", "scopeIcon", "listNavigator", "forceCloseOnEnter"]);
56
+ const navigate = (0, react_router_dom_1.useNavigate)();
57
+ const selectedNonMainLane = (!!selectedLaneIdFromProps &&
58
+ nonMainLanes.find((nonMainLane) => nonMainLane.id.isEqual(selectedLaneIdFromProps))) ||
59
+ undefined;
60
+ const laneDOMRefs = (0, react_1.useRef)(new Map());
61
+ const laneRefs = (0, react_1.useRef)([]);
62
+ const [selectedLaneId, setSelectedLaneId] = (0, react_1.useState)(selectedLaneIdFromProps);
63
+ (0, react_1.useEffect)(() => {
64
+ if (selectedLaneIdFromProps && (selectedLaneIdFromProps === null || selectedLaneIdFromProps === void 0 ? void 0 : selectedLaneIdFromProps.toString()) !== (selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.toString())) {
65
+ setSelectedLaneId(selectedLaneIdFromProps);
66
+ }
67
+ }, [selectedLaneIdFromProps === null || selectedLaneIdFromProps === void 0 ? void 0 : selectedLaneIdFromProps.toString()]);
55
68
  const laneDropdownItems = (0, react_1.useMemo)(() => {
56
69
  var _a;
70
+ laneRefs.current = [];
57
71
  if (nonMainLanes.length === 0)
58
72
  return [];
59
73
  const lanesToRenderFn = () => {
@@ -80,18 +94,70 @@ function LaneSelectorList(_a) {
80
94
  ['', (mainLane && [mainLane]) || []],
81
95
  ...groupedNonMainLanes.entries(),
82
96
  ];
97
+ grouped.forEach(([, lanes]) => {
98
+ lanes.forEach((lane) => {
99
+ laneDOMRefs.current.set(lane.id.toString(), react_1.default.createRef());
100
+ laneRefs.current.push(lane.id);
101
+ });
102
+ });
83
103
  return grouped;
84
104
  }
85
105
  const lanesToRender = lanesToRenderFn();
106
+ lanesToRender.forEach((lane) => {
107
+ laneDOMRefs.current.set(lane.id.toString(), react_1.default.createRef());
108
+ laneRefs.current.push(lane.id);
109
+ });
86
110
  return lanesToRender;
87
- }, [selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.toString(), nonMainLanes.length, search, sortBy, groupByScope]);
111
+ }, [
112
+ nonMainLanes.length,
113
+ search,
114
+ sortBy,
115
+ groupByScope,
116
+ selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.toString(),
117
+ selectedNonMainLane === null || selectedNonMainLane === void 0 ? void 0 : selectedNonMainLane.id.toString(),
118
+ ]);
119
+ (0, react_1.useEffect)(() => {
120
+ const selectedIndex = selectedLaneId
121
+ ? laneRefs.current.findIndex((lane) => lane.toString() === selectedLaneId.toString())
122
+ : undefined;
123
+ switch (listNavigator === null || listNavigator === void 0 ? void 0 : listNavigator.command) {
124
+ case 'Enter': {
125
+ selectedLaneId && (onLaneSelected === null || onLaneSelected === void 0 ? void 0 : onLaneSelected(selectedLaneId));
126
+ selectedLaneId && navigate(getHref(selectedLaneId));
127
+ break;
128
+ }
129
+ case 'Up': {
130
+ const updatedIndex = (selectedIndex !== undefined &&
131
+ (laneRefs.current[selectedIndex - 1] ? selectedIndex - 1 : laneRefs.current.length - 1)) ||
132
+ 0;
133
+ setSelectedLaneId(laneRefs.current[updatedIndex]);
134
+ break;
135
+ }
136
+ case 'Down': {
137
+ const updatedIndex = (selectedIndex !== undefined && (laneRefs.current[selectedIndex + 1] ? selectedIndex + 1 : 0)) || 0;
138
+ setSelectedLaneId(laneRefs.current[updatedIndex]);
139
+ break;
140
+ }
141
+ default:
142
+ break;
143
+ }
144
+ }, [listNavigator === null || listNavigator === void 0 ? void 0 : listNavigator.update, listNavigator === null || listNavigator === void 0 ? void 0 : listNavigator.command]);
145
+ (0, react_1.useEffect)(() => {
146
+ var _a;
147
+ if (selectedLaneId) {
148
+ const selectedLaneElement = (_a = laneDOMRefs.current.get(selectedLaneId.toString())) === null || _a === void 0 ? void 0 : _a.current;
149
+ selectedLaneElement === null || selectedLaneElement === void 0 ? void 0 : selectedLaneElement.scrollIntoView({ block: 'nearest' });
150
+ }
151
+ }, [selectedLaneId === null || selectedLaneId === void 0 ? void 0 : selectedLaneId.toString()]);
88
152
  return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_selector_list_module_scss_1.default.laneSelectorList) }),
89
153
  groupByScope &&
90
154
  laneDropdownItems.map(([scope, lanesByScope], index) => {
91
- 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 }));
155
+ 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, innerRefs: (laneId) => {
156
+ return laneDOMRefs.current.get(laneId.toString());
157
+ } }));
92
158
  }),
93
159
  !groupByScope &&
94
- 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 })))));
160
+ laneDropdownItems.map((lane, index) => (react_1.default.createElement(lane_menu_item_1.LaneMenuItem, { ref: laneDOMRefs.current.get(lane.id.toString()), 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 })))));
95
161
  }
96
162
  exports.LaneSelectorList = LaneSelectorList;
97
163
  //# sourceMappingURL=lane-selector-list.js.map
package/dist/lane-selector-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lane-selector-list.js","sourceRoot":"","sources":["../lane-selector-list.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"lane-selector-list.js","sourceRoot":"","sources":["../lane-selector-list.tsx"],"names":[],"mappings":"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"}
package/dist/lane-selector.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare type LaneSelectorProps = {
13
13
  sortBy?: LaneSelectorSortBy;
14
14
  sortOptions?: LaneSelectorSortBy[];
15
15
  scopeIconLookup?: Map<string, React.ReactNode>;
16
+ forceCloseOnEnter?: boolean;
16
17
  } & HTMLAttributes<HTMLDivElement>;
17
18
  export declare type GroupedLaneDropdownItem = [scope: string, lanes: LaneModel[]];
18
19
  export declare type LaneDropdownItems = Array<LaneModel> | Array<GroupedLaneDropdownItem>;
package/dist/lane-selector.js CHANGED
@@ -40,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.LaneSelector = exports.LaneSelectorSortBy = void 0;
41
41
  const react_1 = __importStar(require("react"));
42
42
  const classnames_1 = __importDefault(require("classnames"));
43
+ const react_router_dom_1 = require("react-router-dom");
43
44
  const lodash_1 = require("lodash");
44
45
  const design_inputs_dropdown_1 = require("@teambit/design.inputs.dropdown");
45
46
  const design_inputs_input_text_1 = require("@teambit/design.inputs.input-text");
@@ -67,7 +68,7 @@ function LaneSelector(props) {
67
68
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
68
69
  mainIcon,
69
70
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
70
- scopeIcon, scopeIconLookup } = props, rest = __rest(props, ["className", "mainLane", "nonMainLanes", "selectedLaneId", "groupByScope", "getHref", "onLaneSelected", "sortBy", "sortOptions", "mainIcon", "scopeIcon", "scopeIconLookup"]);
71
+ scopeIcon, scopeIconLookup, forceCloseOnEnter } = props, rest = __rest(props, ["className", "mainLane", "nonMainLanes", "selectedLaneId", "groupByScope", "getHref", "onLaneSelected", "sortBy", "sortOptions", "mainIcon", "scopeIcon", "scopeIconLookup", "forceCloseOnEnter"]);
71
72
  const compareFn = (0, react_1.useCallback)((_sortBy) => {
72
73
  switch (_sortBy) {
73
74
  case LaneSelectorSortBy.UPDATED:
@@ -96,12 +97,13 @@ function LaneSelector(props) {
96
97
  }, [sortBy, nonMainLanes.length]);
97
98
  const [filteredLanes, setFilteredLanes] = (0, react_1.useState)(sortedNonMainLanes);
98
99
  const [groupScope, setGroupScope] = (0, react_1.useState)(groupByScope);
100
+ const location = (0, react_router_dom_1.useLocation)();
99
101
  (0, react_1.useEffect)(() => {
100
102
  if (filteredLanes.length !== nonMainLanes.length) {
101
103
  setFilteredLanes(nonMainLanes);
102
104
  }
103
105
  }, [nonMainLanes.length]);
104
- const multipleLanes = nonMainLanes.length > 1;
106
+ const multipleLanes = nonMainLanes.length >= 1;
105
107
  const handleSearchOnChange = (e) => {
106
108
  e.stopPropagation();
107
109
  const searchTerm = e.target.value;
@@ -146,8 +148,58 @@ function LaneSelector(props) {
146
148
  e.stopPropagation();
147
149
  } }, "Group scopes")));
148
150
  }
149
- return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_selector_module_scss_1.default.laneSelector) }),
150
- react_1.default.createElement(design_inputs_dropdown_1.Dropdown, { dropClass: lane_selector_module_scss_1.default.menu, position: "bottom", clickPlaceholderToggles: true, clickToggles: true, placeholderContent: react_1.default.createElement(lane_placeholder_1.LanePlaceholder, { disabled: !multipleLanes, selectedLaneId: selectedLaneId, showScope: groupByScope }), className: (0, classnames_1.default)(lane_selector_module_scss_1.default.dropdown, !multipleLanes && lane_selector_module_scss_1.default.disabled) },
151
+ const containerRef = (0, react_1.useRef)(null);
152
+ const [, setPlaceholderOpenStateTracker] = (0, react_1.useState)(false);
153
+ const [forceCloseDropdown, setForceCloseDropdown] = (0, react_1.useState)(true);
154
+ const [listNavCmd, setListNavCmd] = (0, react_1.useState)();
155
+ const handleKeyDown = (e) => {
156
+ setListNavCmd((_listNavCmd) => {
157
+ var _a, _b, _c;
158
+ switch (e.key) {
159
+ case 'Enter': {
160
+ if (forceCloseOnEnter)
161
+ setForceCloseDropdown(true);
162
+ return { command: 'Enter', update: ((_a = _listNavCmd === null || _listNavCmd === void 0 ? void 0 : _listNavCmd.update) !== null && _a !== void 0 ? _a : 0) + 1 };
163
+ }
164
+ case 'ArrowUp': {
165
+ return { command: 'Up', update: ((_b = _listNavCmd === null || _listNavCmd === void 0 ? void 0 : _listNavCmd.update) !== null && _b !== void 0 ? _b : 0) + 1 };
166
+ }
167
+ case 'ArrowDown': {
168
+ return { command: 'Down', update: ((_c = _listNavCmd === null || _listNavCmd === void 0 ? void 0 : _listNavCmd.update) !== null && _c !== void 0 ? _c : 0) + 1 };
169
+ }
170
+ default:
171
+ return _listNavCmd;
172
+ }
173
+ });
174
+ };
175
+ (0, react_1.useEffect)(() => {
176
+ const containerElement = containerRef.current;
177
+ if (containerElement) {
178
+ containerElement.addEventListener('keydown', handleKeyDown);
179
+ }
180
+ return () => {
181
+ if (containerElement) {
182
+ containerElement.removeEventListener('keydown', handleKeyDown);
183
+ }
184
+ };
185
+ }, [containerRef.current]);
186
+ (0, react_1.useEffect)(() => {
187
+ setForceCloseDropdown(() => {
188
+ setPlaceholderOpenStateTracker(false);
189
+ return true;
190
+ });
191
+ }, [location.pathname]);
192
+ (0, react_1.useEffect)(() => {
193
+ if (forceCloseDropdown)
194
+ setForceCloseDropdown(false);
195
+ }, [forceCloseDropdown]);
196
+ return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_selector_module_scss_1.default.laneSelector), ref: containerRef }),
197
+ react_1.default.createElement(design_inputs_dropdown_1.Dropdown, { dropClass: lane_selector_module_scss_1.default.menu, position: "bottom", clickPlaceholderToggles: multipleLanes, clickToggles: multipleLanes, open: forceCloseDropdown ? !forceCloseDropdown : undefined, onPlaceholderToggle: () => {
198
+ setPlaceholderOpenStateTracker((v) => {
199
+ // if (!v) containerRef.current?.focus();
200
+ return !v;
201
+ });
202
+ }, placeholderContent: react_1.default.createElement(lane_placeholder_1.LanePlaceholder, { disabled: !multipleLanes, selectedLaneId: selectedLaneId, showScope: groupByScope }), className: (0, classnames_1.default)(lane_selector_module_scss_1.default.dropdown, !multipleLanes && lane_selector_module_scss_1.default.disabled) },
151
203
  multipleLanes && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.toolbar },
152
204
  multipleLanes && groupByScope && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.groupBy },
153
205
  react_1.default.createElement(LaneGroup, null))),
@@ -169,7 +221,7 @@ function LaneSelector(props) {
169
221
  return [...sortedState];
170
222
  });
171
223
  } })))),
172
- react_1.default.createElement(lane_selector_list_1.LaneSelectorList, Object.assign({}, props, { nonMainLanes: filteredLanes, search: search, sortBy: sortBy, groupByScope: groupScope, scopeIconLookup: scopeIconLookup })))));
224
+ multipleLanes && (react_1.default.createElement(lane_selector_list_1.LaneSelectorList, Object.assign({}, props, { nonMainLanes: filteredLanes, search: search, sortBy: sortBy, groupByScope: groupScope, scopeIconLookup: scopeIconLookup, listNavigator: listNavCmd }))))));
173
225
  }
174
226
  exports.LaneSelector = LaneSelector;
175
227
  //# sourceMappingURL=lane-selector.js.map
package/dist/lane-selector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lane-selector.js","sourceRoot":"","sources":["../lane-selector.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"lane-selector.js","sourceRoot":"","sources":["../lane-selector.tsx"],"names":[],"mappings":"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"}
package/index.ts CHANGED
@@ -1,3 +1,6 @@
1
- export { LaneSelector, LaneSelectorProps, LaneSelectorSortBy } from './lane-selector';
2
- export { LaneMenuItem, LaneMenuItemProps } from './lane-menu-item';
3
- export { LanePlaceholder, LanePlaceholderProps } from './lane-placeholder';
1
+ export { LaneSelector } from './lane-selector';
2
+ export { LaneMenuItem } from './lane-menu-item';
3
+ export { LanePlaceholder } from './lane-placeholder';
4
+ export type { LaneSelectorProps, LaneSelectorSortBy } from './lane-selector';
5
+ export type { LanePlaceholderProps } from './lane-placeholder';
6
+ export type { LaneMenuItemProps } from './lane-menu-item';
package/lane-grouped-menu-item.tsx CHANGED
@@ -15,6 +15,7 @@ export type LaneGroupedMenuItemProps = {
15
15
  onLaneSelected?: (laneId: LaneId) => void;
16
16
  icon?: React.ReactNode;
17
17
  timestamp?: (lane: LaneModel) => Date | undefined;
18
+ innerRefs?: (laneId: LaneId) => React.RefObject<HTMLDivElement> | undefined;
18
19
  } & HTMLAttributes<HTMLDivElement>;
19
20
 
20
21
  export function LaneGroupedMenuItem({
@@ -26,6 +27,7 @@ export function LaneGroupedMenuItem({
26
27
  icon = <Icon className={styles.defaultScopeIcon} of="collection-full" />,
27
28
  getHref,
28
29
  onLaneSelected,
30
+ innerRefs,
29
31
  ...rest
30
32
  }: LaneGroupedMenuItemProps) {
31
33
  if (current.length === 0) return null;
@@ -53,6 +55,7 @@ export function LaneGroupedMenuItem({
53
55
  </div>
54
56
  {current.map((lane) => (
55
57
  <LaneMenuItem
58
+ ref={innerRefs?.(lane.id)}
56
59
  key={lane.id.toString()}
57
60
  onLaneSelected={onLaneSelected}
58
61
  getHref={getHref}
package/lane-menu-item.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { HTMLAttributes } from 'react';
1
+ import React, { HTMLAttributes, forwardRef } from 'react';
2
2
  import classnames from 'classnames';
3
3
  import { LaneId } from '@teambit/lane-id';
4
4
  import { LaneModel, LanesModel } from '@teambit/lanes.ui.models.lanes-model';
@@ -18,74 +18,79 @@ export type LaneMenuItemProps = {
18
18
  timestamp?: Date;
19
19
  } & HTMLAttributes<HTMLDivElement>;
20
20
 
21
- export function LaneMenuItem({
22
- selected,
23
- current,
24
- className,
25
- onLaneSelected,
26
- getHref = LanesModel.getLaneUrl,
27
- icon,
28
- timestamp,
29
- ...rest
30
- }: LaneMenuItemProps) {
31
- const isCurrent = selected?.toString() === current.id.toString();
32
- const isDefaultLane = current.id.isDefault();
33
- const iconWithDefault: React.ReactNode =
34
- icon || (isDefaultLane ? <img src="https://static.bit.cloud/bit-icons/changed-components.svg" /> : undefined);
21
+ export const LaneMenuItem = forwardRef<HTMLDivElement, LaneMenuItemProps>(
22
+ (
23
+ {
24
+ selected,
25
+ current,
26
+ className,
27
+ onLaneSelected,
28
+ getHref = LanesModel.getLaneUrl,
29
+ icon,
30
+ timestamp,
31
+ ...rest
32
+ }: LaneMenuItemProps,
33
+ ref
34
+ ) => {
35
+ const isCurrent = selected?.toString() === current.id.toString();
36
+ const isDefaultLane = current.id.isDefault();
37
+ const iconWithDefault: React.ReactNode =
38
+ icon || (isDefaultLane ? <img src="https://static.bit.cloud/bit-icons/changed-components.svg" /> : undefined);
35
39
 
36
- const href = getHref(current.id);
40
+ const href = getHref(current.id);
37
41
 
38
- const onClick = () => {
39
- onLaneSelected?.(current.id);
40
- };
42
+ const onClick = () => {
43
+ onLaneSelected?.(current.id);
44
+ };
41
45
 
42
- const laneDisplayName = current.displayName || current.id.name;
43
- const laneName = current.id.name;
44
- const user = current.updatedBy || current.createdBy;
46
+ const laneDisplayName = current.displayName || current.id.name;
47
+ const laneName = current.id.name;
48
+ const user = current.updatedBy || current.createdBy;
45
49
 
46
- const avatar = iconWithDefault || (
47
- <UserAvatar
48
- size={24}
49
- account={{
50
- name: user?.name?.split(' ')[0],
51
- displayName: user?.name,
52
- profileImage: user?.profileImage,
53
- }}
54
- />
55
- );
50
+ const avatar = iconWithDefault || (
51
+ <UserAvatar
52
+ size={24}
53
+ account={{
54
+ name: user?.name?.split(' ')[0],
55
+ displayName: user?.name,
56
+ profileImage: user?.profileImage,
57
+ }}
58
+ />
59
+ );
56
60
 
57
- const options: Intl.DateTimeFormatOptions = {
58
- year: 'numeric',
59
- month: '2-digit',
60
- day: '2-digit',
61
- hour: '2-digit',
62
- minute: '2-digit',
63
- second: '2-digit',
64
- hour12: true,
65
- };
66
- const formattedTimestamp = timestamp?.toLocaleString(undefined, options).replace(',', '');
61
+ const options: Intl.DateTimeFormatOptions = {
62
+ year: 'numeric',
63
+ month: '2-digit',
64
+ day: '2-digit',
65
+ hour: '2-digit',
66
+ minute: '2-digit',
67
+ second: '2-digit',
68
+ hour12: true,
69
+ };
70
+ const formattedTimestamp = timestamp?.toLocaleString(undefined, options).replace(',', '');
67
71
 
68
- return (
69
- <div {...rest} className={classnames(className, styles.laneMenuItemContainer)}>
70
- <MenuLinkItem active={isCurrent} href={href} className={styles.menuItem} onClick={onClick}>
71
- <div className={styles.laneContainer}>
72
- <div className={classnames(styles.top, isDefaultLane && styles.mainLane)}>
73
- <div className={classnames(styles.icon, isDefaultLane && !icon && styles.defaultMainLaneIcon)}>
74
- {avatar}
72
+ return (
73
+ <div {...rest} ref={ref} className={classnames(className, styles.laneMenuItemContainer)}>
74
+ <MenuLinkItem active={isCurrent} href={href} className={styles.menuItem} onClick={onClick}>
75
+ <div className={styles.laneContainer}>
76
+ <div className={classnames(styles.top, isDefaultLane && styles.mainLane)}>
77
+ <div className={classnames(styles.icon, isDefaultLane && !icon && styles.defaultMainLaneIcon)}>
78
+ {avatar}
79
+ </div>
80
+ <div className={classnames(styles.laneDisplayName)}>{laneDisplayName}</div>
75
81
  </div>
76
- <div className={classnames(styles.laneDisplayName)}>{laneDisplayName}</div>
77
- </div>
78
- <div className={styles.bottom}>
79
- {!isDefaultLane && <Ellipsis className={styles.laneName}>{laneName}</Ellipsis>}
82
+ <div className={styles.bottom}>
83
+ {!isDefaultLane && <Ellipsis className={styles.laneName}>{laneName}</Ellipsis>}
80
84
 
81
- {formattedTimestamp && (
82
- <div className={styles.timeStamp}>
83
- <TimeAgo date={formattedTimestamp} />
84
- </div>
85
- )}
85
+ {formattedTimestamp && (
86
+ <div className={styles.timeStamp}>
87
+ <TimeAgo date={formattedTimestamp} />
88
+ </div>
89
+ )}
90
+ </div>
86
91
  </div>
87
- </div>
88
- </MenuLinkItem>
89
- </div>
90
- );
91
- }
92
+ </MenuLinkItem>
93
+ </div>
94
+ );
95
+ }
96
+ );
package/lane-selector-list.tsx CHANGED
@@ -1,26 +1,33 @@
1
- import React, { HTMLAttributes, useMemo } from 'react';
1
+ import React, { HTMLAttributes, useMemo, useRef, useEffect, useState } from 'react';
2
+ import { useNavigate } from 'react-router-dom';
2
3
  import classnames from 'classnames';
3
4
  import { compact } from 'lodash';
4
5
  import { LaneModel, LanesModel } from '@teambit/lanes.ui.models.lanes-model';
6
+ import { LaneId } from '@teambit/lane-id';
5
7
  import { LaneDropdownItems, LaneSelectorProps, LaneSelectorSortBy, GroupedLaneDropdownItem } from './lane-selector';
6
- // import { LaneGroupedMenuItem } from './lane-grouped-menu-item';
7
8
  import { LaneMenuItem } from './lane-menu-item';
9
+ import { LaneGroupedMenuItem } from './lane-grouped-menu-item';
8
10
 
9
11
  import styles from './lane-selector-list.module.scss';
10
- import { LaneGroupedMenuItem } from './lane-grouped-menu-item';
12
+
13
+ export type ListNavigatorCmd = 'Up' | 'Down' | 'Enter';
11
14
 
12
15
  export type LaneSelectorListProps = {
13
16
  search?: string;
17
+ listNavigator?: {
18
+ command?: ListNavigatorCmd;
19
+ update?: number;
20
+ };
14
21
  } & LaneSelectorProps &
15
22
  HTMLAttributes<HTMLDivElement>;
16
23
 
17
24
  export function LaneSelectorList({
18
- selectedLaneId,
25
+ selectedLaneId: selectedLaneIdFromProps,
19
26
  mainLane,
20
27
  nonMainLanes,
21
28
  className,
22
29
  groupByScope,
23
- getHref,
30
+ getHref = LanesModel.getLaneUrl,
24
31
  onLaneSelected,
25
32
  search = '',
26
33
  mainIcon,
@@ -29,12 +36,30 @@ export function LaneSelectorList({
29
36
  sortOptions,
30
37
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
31
38
  scopeIcon,
39
+ listNavigator,
40
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
41
+ forceCloseOnEnter,
32
42
  ...rest
33
43
  }: LaneSelectorListProps) {
44
+ const navigate = useNavigate();
34
45
  const selectedNonMainLane =
35
- (!!selectedLaneId && nonMainLanes.find((nonMainLane) => nonMainLane.id.isEqual(selectedLaneId))) || undefined;
46
+ (!!selectedLaneIdFromProps &&
47
+ nonMainLanes.find((nonMainLane) => nonMainLane.id.isEqual(selectedLaneIdFromProps))) ||
48
+ undefined;
49
+ const laneDOMRefs = useRef<Map<string, React.RefObject<HTMLDivElement>>>(new Map());
50
+ const laneRefs = useRef<LaneId[]>([]);
51
+
52
+ const [selectedLaneId, setSelectedLaneId] = useState<LaneId | undefined>(selectedLaneIdFromProps);
53
+
54
+ useEffect(() => {
55
+ if (selectedLaneIdFromProps && selectedLaneIdFromProps?.toString() !== selectedLaneId?.toString()) {
56
+ setSelectedLaneId(selectedLaneIdFromProps);
57
+ }
58
+ }, [selectedLaneIdFromProps?.toString()]);
36
59
 
37
60
  const laneDropdownItems: LaneDropdownItems = useMemo(() => {
61
+ laneRefs.current = [];
62
+
38
63
  if (nonMainLanes.length === 0) return [];
39
64
 
40
65
  const lanesToRenderFn = () => {
@@ -50,6 +75,7 @@ export function LaneSelectorList({
50
75
 
51
76
  return compact([mainLaneToRender, ...nonMainLanes]);
52
77
  };
78
+
53
79
  if (groupByScope) {
54
80
  const groupedNonMainLanes = LanesModel.groupLanesByScope(nonMainLanes);
55
81
  if (selectedNonMainLane) {
@@ -66,11 +92,69 @@ export function LaneSelectorList({
66
92
  ['', (mainLane && [mainLane]) || []],
67
93
  ...groupedNonMainLanes.entries(),
68
94
  ];
95
+
96
+ grouped.forEach(([, lanes]) => {
97
+ lanes.forEach((lane) => {
98
+ laneDOMRefs.current.set(lane.id.toString(), React.createRef<HTMLDivElement>());
99
+ laneRefs.current.push(lane.id);
100
+ });
101
+ });
102
+
69
103
  return grouped;
70
104
  }
71
105
  const lanesToRender = lanesToRenderFn();
106
+ lanesToRender.forEach((lane) => {
107
+ laneDOMRefs.current.set(lane.id.toString(), React.createRef<HTMLDivElement>());
108
+ laneRefs.current.push(lane.id);
109
+ });
72
110
  return lanesToRender;
73
- }, [selectedLaneId?.toString(), nonMainLanes.length, search, sortBy, groupByScope]);
111
+ }, [
112
+ nonMainLanes.length,
113
+ search,
114
+ sortBy,
115
+ groupByScope,
116
+ selectedLaneId?.toString(),
117
+ selectedNonMainLane?.id.toString(),
118
+ ]);
119
+
120
+ useEffect(() => {
121
+ const selectedIndex = selectedLaneId
122
+ ? laneRefs.current.findIndex((lane) => lane.toString() === selectedLaneId.toString())
123
+ : undefined;
124
+
125
+ switch (listNavigator?.command) {
126
+ case 'Enter': {
127
+ selectedLaneId && onLaneSelected?.(selectedLaneId);
128
+ selectedLaneId && navigate(getHref(selectedLaneId));
129
+ break;
130
+ }
131
+ case 'Up': {
132
+ const updatedIndex =
133
+ (selectedIndex !== undefined &&
134
+ (laneRefs.current[selectedIndex - 1] ? selectedIndex - 1 : laneRefs.current.length - 1)) ||
135
+ 0;
136
+ setSelectedLaneId(laneRefs.current[updatedIndex]);
137
+ break;
138
+ }
139
+
140
+ case 'Down': {
141
+ const updatedIndex =
142
+ (selectedIndex !== undefined && (laneRefs.current[selectedIndex + 1] ? selectedIndex + 1 : 0)) || 0;
143
+ setSelectedLaneId(laneRefs.current[updatedIndex]);
144
+
145
+ break;
146
+ }
147
+ default:
148
+ break;
149
+ }
150
+ }, [listNavigator?.update, listNavigator?.command]);
151
+
152
+ useEffect(() => {
153
+ if (selectedLaneId) {
154
+ const selectedLaneElement = laneDOMRefs.current.get(selectedLaneId.toString())?.current;
155
+ selectedLaneElement?.scrollIntoView({ block: 'nearest' });
156
+ }
157
+ }, [selectedLaneId?.toString()]);
74
158
 
75
159
  return (
76
160
  <div {...rest} className={classnames(className, styles.laneSelectorList)}>
@@ -88,12 +172,16 @@ export function LaneSelectorList({
88
172
  timestamp={(lane) =>
89
173
  sortOptions?.includes(LaneSelectorSortBy.UPDATED) ? lane.updatedAt : lane.createdAt
90
174
  }
175
+ innerRefs={(laneId) => {
176
+ return laneDOMRefs.current.get(laneId.toString());
177
+ }}
91
178
  />
92
179
  );
93
180
  })}
94
181
  {!groupByScope &&
95
182
  (laneDropdownItems as LaneModel[]).map((lane, index) => (
96
183
  <LaneMenuItem
184
+ ref={laneDOMRefs.current.get(lane.id.toString())}
97
185
  onLaneSelected={onLaneSelected}
98
186
  key={`${lane.id.toString()}-${index}`}
99
187
  getHref={getHref}
package/lane-selector.tsx CHANGED
@@ -1,5 +1,6 @@
1
- import React, { HTMLAttributes, useState, ChangeEventHandler, useEffect, useCallback, useMemo } from 'react';
1
+ import React, { HTMLAttributes, useState, ChangeEventHandler, useEffect, useCallback, useMemo, useRef } from 'react';
2
2
  import classnames from 'classnames';
3
+ import { useLocation } from 'react-router-dom';
3
4
  import { startCase } from 'lodash';
4
5
  import { LaneId } from '@teambit/lane-id';
5
6
  import { Dropdown } from '@teambit/design.inputs.dropdown';
@@ -10,7 +11,7 @@ import { Icon } from '@teambit/design.elements.icon';
10
11
  import { CheckboxItem } from '@teambit/design.inputs.selectors.checkbox-item';
11
12
  import { Tooltip } from '@teambit/design.ui.tooltip';
12
13
 
13
- import { LaneSelectorList } from './lane-selector-list';
14
+ import { LaneSelectorList, ListNavigatorCmd } from './lane-selector-list';
14
15
  import { LanePlaceholder } from './lane-placeholder';
15
16
 
16
17
  import styles from './lane-selector.module.scss';
@@ -27,6 +28,7 @@ export type LaneSelectorProps = {
27
28
  sortBy?: LaneSelectorSortBy;
28
29
  sortOptions?: LaneSelectorSortBy[];
29
30
  scopeIconLookup?: Map<string, React.ReactNode>;
31
+ forceCloseOnEnter?: boolean;
30
32
  } & HTMLAttributes<HTMLDivElement>;
31
33
 
32
34
  export type GroupedLaneDropdownItem = [scope: string, lanes: LaneModel[]];
@@ -58,6 +60,7 @@ export function LaneSelector(props: LaneSelectorProps) {
58
60
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
59
61
  scopeIcon,
60
62
  scopeIconLookup,
63
+ forceCloseOnEnter,
61
64
  ...rest
62
65
  } = props;
63
66
 
@@ -90,6 +93,7 @@ export function LaneSelector(props: LaneSelectorProps) {
90
93
  const [filteredLanes, setFilteredLanes] = useState<LaneModel[]>(sortedNonMainLanes);
91
94
 
92
95
  const [groupScope, setGroupScope] = useState<boolean>(groupByScope);
96
+ const location = useLocation();
93
97
 
94
98
  useEffect(() => {
95
99
  if (filteredLanes.length !== nonMainLanes.length) {
@@ -97,7 +101,7 @@ export function LaneSelector(props: LaneSelectorProps) {
97
101
  }
98
102
  }, [nonMainLanes.length]);
99
103
 
100
- const multipleLanes = nonMainLanes.length > 1;
104
+ const multipleLanes = nonMainLanes.length >= 1;
101
105
 
102
106
  const handleSearchOnChange: ChangeEventHandler<HTMLInputElement> = (e) => {
103
107
  e.stopPropagation();
@@ -168,14 +172,68 @@ export function LaneSelector(props: LaneSelectorProps) {
168
172
  </div>
169
173
  );
170
174
  }
175
+ const containerRef = useRef<HTMLDivElement>(null);
176
+ const [, setPlaceholderOpenStateTracker] = useState<boolean | undefined>(false);
177
+ const [forceCloseDropdown, setForceCloseDropdown] = useState<boolean | undefined>(true);
178
+ const [listNavCmd, setListNavCmd] = useState<{ command?: ListNavigatorCmd; update?: number } | undefined>();
179
+
180
+ const handleKeyDown = (e: KeyboardEvent) => {
181
+ setListNavCmd((_listNavCmd) => {
182
+ switch (e.key) {
183
+ case 'Enter': {
184
+ if (forceCloseOnEnter) setForceCloseDropdown(true);
185
+ return { command: 'Enter', update: (_listNavCmd?.update ?? 0) + 1 };
186
+ }
187
+ case 'ArrowUp': {
188
+ return { command: 'Up', update: (_listNavCmd?.update ?? 0) + 1 };
189
+ }
190
+
191
+ case 'ArrowDown': {
192
+ return { command: 'Down', update: (_listNavCmd?.update ?? 0) + 1 };
193
+ }
194
+ default:
195
+ return _listNavCmd;
196
+ }
197
+ });
198
+ };
199
+
200
+ useEffect(() => {
201
+ const containerElement = containerRef.current;
202
+ if (containerElement) {
203
+ containerElement.addEventListener('keydown', handleKeyDown);
204
+ }
205
+ return () => {
206
+ if (containerElement) {
207
+ containerElement.removeEventListener('keydown', handleKeyDown);
208
+ }
209
+ };
210
+ }, [containerRef.current]);
211
+
212
+ useEffect(() => {
213
+ setForceCloseDropdown(() => {
214
+ setPlaceholderOpenStateTracker(false);
215
+ return true;
216
+ });
217
+ }, [location.pathname]);
218
+
219
+ useEffect(() => {
220
+ if (forceCloseDropdown) setForceCloseDropdown(false);
221
+ }, [forceCloseDropdown]);
171
222
 
172
223
  return (
173
- <div {...rest} className={classnames(className, styles.laneSelector)}>
224
+ <div {...rest} className={classnames(className, styles.laneSelector)} ref={containerRef}>
174
225
  <Dropdown
175
226
  dropClass={styles.menu}
176
227
  position="bottom"
177
- clickPlaceholderToggles={true}
178
- clickToggles={true}
228
+ clickPlaceholderToggles={multipleLanes}
229
+ clickToggles={multipleLanes}
230
+ open={forceCloseDropdown ? !forceCloseDropdown : undefined}
231
+ onPlaceholderToggle={() => {
232
+ setPlaceholderOpenStateTracker((v) => {
233
+ // if (!v) containerRef.current?.focus();
234
+ return !v;
235
+ });
236
+ }}
179
237
  placeholderContent={
180
238
  <LanePlaceholder disabled={!multipleLanes} selectedLaneId={selectedLaneId} showScope={groupByScope} />
181
239
  }
@@ -221,14 +279,17 @@ export function LaneSelector(props: LaneSelectorProps) {
221
279
  </div>
222
280
  </div>
223
281
  )}
224
- <LaneSelectorList
225
- {...props}
226
- nonMainLanes={filteredLanes}
227
- search={search}
228
- sortBy={sortBy}
229
- groupByScope={groupScope}
230
- scopeIconLookup={scopeIconLookup}
231
- />
282
+ {multipleLanes && (
283
+ <LaneSelectorList
284
+ {...props}
285
+ nonMainLanes={filteredLanes}
286
+ search={search}
287
+ sortBy={sortBy}
288
+ groupByScope={groupScope}
289
+ scopeIconLookup={scopeIconLookup}
290
+ listNavigator={listNavCmd}
291
+ />
292
+ )}
232
293
  </Dropdown>
233
294
  </div>
234
295
  );
package/package.json CHANGED
@@ -1,32 +1,32 @@
1
1
  {
2
2
  "name": "@teambit/lanes.ui.inputs.lane-selector",
3
- "version": "0.0.112",
4
- "homepage": "https://bit.dev/teambit/lanes/ui/inputs/lane-selector",
3
+ "version": "0.0.113",
4
+ "homepage": "https://bit.cloud/teambit/lanes/ui/inputs/lane-selector",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.lanes",
8
8
  "name": "ui/inputs/lane-selector",
9
- "version": "0.0.112"
9
+ "version": "0.0.113"
10
10
  },
11
11
  "dependencies": {
12
12
  "classnames": "2.2.6",
13
13
  "lodash": "4.17.21",
14
14
  "core-js": "^3.0.0",
15
15
  "@teambit/evangelist.elements.icon": "1.0.2",
16
+ "@teambit/lanes.ui.models.lanes-model": "0.0.112",
16
17
  "@teambit/design.ui.avatar": "1.0.16",
18
+ "@teambit/design.ui.styles.ellipsis": "0.0.357",
17
19
  "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
20
+ "@teambit/design.ui.time-ago": "0.0.366",
21
+ "@teambit/lanes.ui.icons.lane-icon": "0.0.4",
18
22
  "@teambit/design.elements.icon": "1.0.5",
19
23
  "@teambit/design.inputs.dropdown": "1.2.16",
20
24
  "@teambit/design.inputs.input-text": "1.0.21",
21
25
  "@teambit/design.inputs.selectors.checkbox-item": "1.1.11",
22
- "@teambit/lane-id": "0.0.204",
23
- "@teambit/lanes.ui.models.lanes-model": "0.0.112",
24
- "@teambit/design.ui.styles.ellipsis": "0.0.357",
25
- "@teambit/design.ui.time-ago": "0.0.366",
26
- "@teambit/lanes.ui.icons.lane-icon": "0.0.4",
27
- "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
28
26
  "@teambit/design.inputs.toggle-button": "0.0.9",
29
- "@teambit/design.ui.tooltip": "0.0.361"
27
+ "@teambit/design.ui.tooltip": "0.0.361",
28
+ "@teambit/lane-id": "0.0.211",
29
+ "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@types/classnames": "2.2.11",
@@ -40,6 +40,7 @@
40
40
  "@types/testing-library__jest-dom": "5.9.5"
41
41
  },
42
42
  "peerDependencies": {
43
+ "react-router-dom": "^6.0.0",
43
44
  "react": "^16.8.0 || ^17.0.0",
44
45
  "react-dom": "^16.8.0 || ^17.0.0"
45
46
  },