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

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 (16) hide show
  1. package/dist/lane-menu-item.js +17 -7
  2. package/dist/lane-menu-item.js.map +1 -1
  3. package/dist/lane-menu-item.module.scss +15 -19
  4. package/dist/lane-selector-list.module.scss +3 -2
  5. package/dist/lane-selector.js +16 -22
  6. package/dist/lane-selector.js.map +1 -1
  7. package/dist/lane-selector.module.scss +9 -6
  8. package/lane-menu-item.module.scss +15 -19
  9. package/lane-menu-item.tsx +19 -9
  10. package/lane-selector-list.module.scss +3 -2
  11. package/lane-selector.module.scss +9 -6
  12. package/lane-selector.tsx +34 -37
  13. package/package-tar/teambit-lanes.ui.inputs.lane-selector-0.0.111.tgz +0 -0
  14. package/package.json +6 -5
  15. package/package-tar/teambit-lanes.ui.inputs.lane-selector-0.0.109.tgz +0 -0
  16. /package/dist/{preview-1679542267429.js → preview-1679887855248.js} +0 -0
package/dist/lane-menu-item.js CHANGED
@@ -32,7 +32,7 @@ function LaneMenuItem(_a) {
32
32
  const onClick = () => {
33
33
  onLaneSelected === null || onLaneSelected === void 0 ? void 0 : onLaneSelected(current.id);
34
34
  };
35
- const laneDescription = current.description || current.id.name;
35
+ const laneDisplayName = current.displayName || current.id.name;
36
36
  const laneName = current.id.name;
37
37
  const user = current.updatedBy || current.createdBy;
38
38
  const avatar = iconWithDefault || (react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: {
@@ -40,16 +40,26 @@ function LaneMenuItem(_a) {
40
40
  displayName: user === null || user === void 0 ? void 0 : user.name,
41
41
  profileImage: user === null || user === void 0 ? void 0 : user.profileImage,
42
42
  } }));
43
+ const options = {
44
+ year: 'numeric',
45
+ month: '2-digit',
46
+ day: '2-digit',
47
+ hour: '2-digit',
48
+ minute: '2-digit',
49
+ second: '2-digit',
50
+ hour12: true,
51
+ };
52
+ const formattedTimestamp = timestamp === null || timestamp === void 0 ? void 0 : timestamp.toLocaleString(undefined, options).replace(',', '');
43
53
  return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_menu_item_module_scss_1.default.laneMenuItemContainer) }),
44
54
  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 },
45
55
  react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneContainer },
46
- react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.left, isDefaultLane && lane_menu_item_module_scss_1.default.mainLane) },
56
+ 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) },
47
57
  react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.icon, isDefaultLane && !icon && lane_menu_item_module_scss_1.default.defaultMainLaneIcon) }, avatar),
48
- react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneInfo },
49
- react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.laneDescription) }, laneDescription),
50
- !isDefaultLane && react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneName }, laneName))),
51
- react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.right }, timestamp && (react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.timeStamp },
52
- react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: timestamp === null || timestamp === void 0 ? void 0 : timestamp.toString() }))))))));
58
+ react_1.default.createElement("div", { className: (0, classnames_1.default)(lane_menu_item_module_scss_1.default.laneDisplayName) }, laneDisplayName)),
59
+ react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.bottom },
60
+ !isDefaultLane && react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.laneName }, laneName),
61
+ formattedTimestamp && (react_1.default.createElement("div", { className: lane_menu_item_module_scss_1.default.timeStamp },
62
+ react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: formattedTimestamp }))))))));
53
63
  }
54
64
  exports.LaneMenuItem = LaneMenuItem;
55
65
  //# 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":"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"}
package/dist/lane-menu-item.module.scss CHANGED
@@ -20,13 +20,13 @@
20
20
 
21
21
  .laneContainer {
22
22
  display: flex;
23
- justify-content: space-between;
24
- gap: 4px;
23
+ flex-direction: column;
25
24
  width: 100%;
25
+ gap: 4px;
26
26
 
27
- .left {
27
+ .top {
28
28
  display: flex;
29
- align-items: flex-start;
29
+ align-items: center;
30
30
  gap: 8px;
31
31
  width: 100%;
32
32
  flex: 2;
@@ -35,18 +35,21 @@
35
35
  align-items: center;
36
36
  }
37
37
 
38
- .laneInfo {
39
- display: flex;
40
- flex-direction: column;
41
- gap: 4px;
42
- }
43
-
44
- .laneDescription {
38
+ .laneDisplayName {
45
39
  font-weight: 700;
46
40
  font-size: var(--bit-p-xs, '14px');
47
41
  }
42
+ }
43
+
44
+ .bottom {
45
+ display: flex;
46
+ flex: 1;
47
+ align-items: center;
48
+ justify-content: space-between;
49
+ width: 100%;
48
50
 
49
51
  .laneName {
52
+ text-align: left;
50
53
  font-weight: 400;
51
54
  font-size: var(--bit-p-xxs, '12px');
52
55
  background: var(--surface-neutral-hover-color, #f7f7f7);
@@ -54,16 +57,9 @@
54
57
  width: fit-content;
55
58
  padding: 2px 4px;
56
59
  }
57
- }
58
-
59
- .right {
60
- display: flex;
61
- text-align: right;
62
- flex: 1;
63
- align-items: flex-end;
64
- justify-content: flex-end;
65
60
 
66
61
  .timeStamp {
62
+ text-align: right;
67
63
  > span {
68
64
  font-size: var(--bit-p-xxs, '12px');
69
65
  }
package/dist/lane-selector-list.module.scss CHANGED
@@ -2,8 +2,9 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  overflow: auto;
5
- width: 350px;
6
- max-height: 50vh;
5
+ // adjust for border
6
+ width: calc(300px - 2px);
7
+ max-height: 30vh;
7
8
  }
8
9
 
9
10
  .mainIcon {
package/dist/lane-selector.js CHANGED
@@ -40,11 +40,13 @@ 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 lodash_1 = require("lodash");
43
44
  const design_inputs_dropdown_1 = require("@teambit/design.inputs.dropdown");
44
45
  const design_inputs_input_text_1 = require("@teambit/design.inputs.input-text");
45
46
  const design_inputs_toggle_button_1 = require("@teambit/design.inputs.toggle-button");
46
47
  const design_elements_icon_1 = require("@teambit/design.elements.icon");
47
48
  const design_inputs_selectors_checkbox_item_1 = require("@teambit/design.inputs.selectors.checkbox-item");
49
+ const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
48
50
  const lane_selector_list_1 = require("./lane-selector-list");
49
51
  const lane_placeholder_1 = require("./lane-placeholder");
50
52
  const lane_selector_module_scss_1 = __importDefault(require("./lane-selector.module.scss"));
@@ -89,21 +91,10 @@ function LaneSelector(props) {
89
91
  }, []);
90
92
  const [search, setSearch] = (0, react_1.useState)('');
91
93
  const [sortBy, setSortBy] = (0, react_1.useState)(sortByFromProps);
92
- const inputRef = (0, react_1.useRef)(null);
93
94
  const sortedNonMainLanes = (0, react_1.useMemo)(() => {
94
95
  return nonMainLanes.sort(compareFn(sortBy));
95
96
  }, [sortBy, nonMainLanes.length]);
96
97
  const [filteredLanes, setFilteredLanes] = (0, react_1.useState)(sortedNonMainLanes);
97
- const [, setTrackedDropdownOpenState] = (0, react_1.useState)(false);
98
- const onDropdownPlaceholderToggled = () => {
99
- setTrackedDropdownOpenState((v) => {
100
- var _a;
101
- if (!v) {
102
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
103
- }
104
- return !v;
105
- });
106
- };
107
98
  const [groupScope, setGroupScope] = (0, react_1.useState)(groupByScope);
108
99
  (0, react_1.useEffect)(() => {
109
100
  if (filteredLanes.length !== nonMainLanes.length) {
@@ -142,30 +133,33 @@ function LaneSelector(props) {
142
133
  };
143
134
  function LaneSearch() {
144
135
  return ((multipleLanes && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.search },
145
- react_1.default.createElement(design_inputs_input_text_1.InputText, { ref: inputRef, className: lane_selector_module_scss_1.default.searchInput, value: search, onChange: handleSearchOnChange, onClick: handleSearchOnClick, autoFocus: true, icon: react_1.default.createElement(design_elements_icon_1.Icon, { of: "magnifying", className: lane_selector_module_scss_1.default.searchIcon }) })))) ||
136
+ react_1.default.createElement(design_inputs_input_text_1.InputText, { activeLabel: false, inputSize: 's',
137
+ // ref={inputRef}
138
+ className: lane_selector_module_scss_1.default.searchInput, placeholder: 'Search', value: search, onChange: handleSearchOnChange, onClick: handleSearchOnClick, autoFocus: true, icon: react_1.default.createElement(design_elements_icon_1.Icon, { of: "magnifying", className: lane_selector_module_scss_1.default.searchIcon }) })))) ||
146
139
  null);
147
140
  }
148
141
  function LaneGroup() {
149
- return ((multipleLanes && groupByScope && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.group },
142
+ return (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.group },
150
143
  react_1.default.createElement(design_inputs_selectors_checkbox_item_1.CheckboxItem, { checked: groupByScope, onInputChanged: (e) => {
151
144
  // prevent dropdown from closing
152
145
  setGroupScope((v) => !v);
153
146
  e.stopPropagation();
154
- } }, "Group scopes")))) ||
155
- null);
147
+ } }, "Group scopes")));
156
148
  }
157
149
  return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, lane_selector_module_scss_1.default.laneSelector) }),
158
- react_1.default.createElement(design_inputs_dropdown_1.Dropdown, { dropClass: lane_selector_module_scss_1.default.menu, position: "bottom", clickPlaceholderToggles: true, onPlaceholderToggle: onDropdownPlaceholderToggled, 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) },
159
- react_1.default.createElement(LaneSearch, null),
160
- multipleLanes && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.sortAndGroupBy },
161
- react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.groupBy },
162
- react_1.default.createElement(LaneGroup, null)),
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
+ multipleLanes && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.toolbar },
152
+ multipleLanes && groupByScope && (react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.groupBy },
153
+ react_1.default.createElement(LaneGroup, null))),
154
+ react_1.default.createElement(LaneSearch, null),
163
155
  react_1.default.createElement("div", { className: lane_selector_module_scss_1.default.sort },
164
156
  react_1.default.createElement(design_inputs_toggle_button_1.ToggleButton, { className: (0, classnames_1.default)(lane_selector_module_scss_1.default.sortToggle), defaultIndex: sortOptions.indexOf(sortBy), options: sortOptions.map((option) => {
165
157
  return {
166
158
  value: option,
167
- icon: option === LaneSelectorSortBy.ALPHABETICAL ? (react_1.default.createElement("img", { className: lane_selector_module_scss_1.default.sortIcon, src: "https://static.bit.cloud/bit-icons/ripple-list.svg" })) : (react_1.default.createElement("img", { className: lane_selector_module_scss_1.default.sortIcon, src: "https://static.bit.cloud/bit-icons/clock.svg" })),
168
- element: option === LaneSelectorSortBy.ALPHABETICAL ? 'a-Z' : option.toLowerCase(),
159
+ icon: option === LaneSelectorSortBy.ALPHABETICAL ? (react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: 'bottom', content: `Sort by Lane ID (A-Z)` },
160
+ react_1.default.createElement("img", { className: lane_selector_module_scss_1.default.sortIcon, src: "https://static.bit.cloud/bit-icons/ripple-list.svg" }))) : (react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: 'bottom', content: `Sort by ${(0, lodash_1.startCase)(option.toLowerCase())} Date` },
161
+ react_1.default.createElement("img", { className: lane_selector_module_scss_1.default.sortIcon, src: "https://static.bit.cloud/bit-icons/clock.svg" }))),
162
+ element: null,
169
163
  };
170
164
  }), onOptionSelect: (index, e) => {
171
165
  e === null || e === void 0 ? void 0 : e.stopPropagation();
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/dist/lane-selector.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  .dropdown {
4
4
  // otherwise when the dropdown is open it clashes with the content of the tree
5
5
  // (this is bizarre, the tree has no position absolute)
6
- z-index: $nav-z-index;
6
+ z-index: $modal-z-index;
7
7
  border-radius: 8px;
8
8
  width: 100%;
9
9
 
@@ -20,14 +20,11 @@
20
20
  }
21
21
 
22
22
  .search {
23
- // margin: 8px 0px 0px 0px;
24
- border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
25
23
  display: flex;
26
- padding: 8px;
27
24
  }
28
25
 
29
26
  .menu {
30
- width: 350px;
27
+ width: 300px;
31
28
  border-radius: 8px;
32
29
  padding: 0;
33
30
  // border: 1px solid var(--border-medium-color);
@@ -46,11 +43,13 @@
46
43
 
47
44
  .searchInput {
48
45
  width: 100%;
46
+ padding-top: 0;
49
47
  }
50
48
 
51
- .sortAndGroupBy {
49
+ .toolbar {
52
50
  display: flex;
53
51
  justify-content: space-between;
52
+ align-items: center;
54
53
  padding: 6px 8px;
55
54
  }
56
55
 
@@ -79,3 +78,7 @@
79
78
  padding-right: 4px;
80
79
  filter: invert(46%) sepia(8%) saturate(298%) hue-rotate(189deg) brightness(95%) contrast(91%);
81
80
  }
81
+
82
+ .searchIcon {
83
+ top: calc(50% - 0.4rem) !important;
84
+ }
package/lane-menu-item.module.scss CHANGED
@@ -20,13 +20,13 @@
20
20
 
21
21
  .laneContainer {
22
22
  display: flex;
23
- justify-content: space-between;
24
- gap: 4px;
23
+ flex-direction: column;
25
24
  width: 100%;
25
+ gap: 4px;
26
26
 
27
- .left {
27
+ .top {
28
28
  display: flex;
29
- align-items: flex-start;
29
+ align-items: center;
30
30
  gap: 8px;
31
31
  width: 100%;
32
32
  flex: 2;
@@ -35,18 +35,21 @@
35
35
  align-items: center;
36
36
  }
37
37
 
38
- .laneInfo {
39
- display: flex;
40
- flex-direction: column;
41
- gap: 4px;
42
- }
43
-
44
- .laneDescription {
38
+ .laneDisplayName {
45
39
  font-weight: 700;
46
40
  font-size: var(--bit-p-xs, '14px');
47
41
  }
42
+ }
43
+
44
+ .bottom {
45
+ display: flex;
46
+ flex: 1;
47
+ align-items: center;
48
+ justify-content: space-between;
49
+ width: 100%;
48
50
 
49
51
  .laneName {
52
+ text-align: left;
50
53
  font-weight: 400;
51
54
  font-size: var(--bit-p-xxs, '12px');
52
55
  background: var(--surface-neutral-hover-color, #f7f7f7);
@@ -54,16 +57,9 @@
54
57
  width: fit-content;
55
58
  padding: 2px 4px;
56
59
  }
57
- }
58
-
59
- .right {
60
- display: flex;
61
- text-align: right;
62
- flex: 1;
63
- align-items: flex-end;
64
- justify-content: flex-end;
65
60
 
66
61
  .timeStamp {
62
+ text-align: right;
67
63
  > span {
68
64
  font-size: var(--bit-p-xxs, '12px');
69
65
  }
package/lane-menu-item.tsx CHANGED
@@ -38,7 +38,7 @@ export function LaneMenuItem({
38
38
  onLaneSelected?.(current.id);
39
39
  };
40
40
 
41
- const laneDescription = current.description || current.id.name;
41
+ const laneDisplayName = current.displayName || current.id.name;
42
42
  const laneName = current.id.name;
43
43
  const user = current.updatedBy || current.createdBy;
44
44
 
@@ -53,23 +53,33 @@ export function LaneMenuItem({
53
53
  />
54
54
  );
55
55
 
56
+ const options: Intl.DateTimeFormatOptions = {
57
+ year: 'numeric',
58
+ month: '2-digit',
59
+ day: '2-digit',
60
+ hour: '2-digit',
61
+ minute: '2-digit',
62
+ second: '2-digit',
63
+ hour12: true,
64
+ };
65
+ const formattedTimestamp = timestamp?.toLocaleString(undefined, options).replace(',', '');
66
+
56
67
  return (
57
68
  <div {...rest} className={classnames(className, styles.laneMenuItemContainer)}>
58
69
  <MenuLinkItem active={isCurrent} href={href} className={styles.menuItem} onClick={onClick}>
59
70
  <div className={styles.laneContainer}>
60
- <div className={classnames(styles.left, isDefaultLane && styles.mainLane)}>
71
+ <div className={classnames(styles.top, isDefaultLane && styles.mainLane)}>
61
72
  <div className={classnames(styles.icon, isDefaultLane && !icon && styles.defaultMainLaneIcon)}>
62
73
  {avatar}
63
74
  </div>
64
- <div className={styles.laneInfo}>
65
- <div className={classnames(styles.laneDescription)}>{laneDescription}</div>
66
- {!isDefaultLane && <div className={styles.laneName}>{laneName}</div>}
67
- </div>
75
+ <div className={classnames(styles.laneDisplayName)}>{laneDisplayName}</div>
68
76
  </div>
69
- <div className={styles.right}>
70
- {timestamp && (
77
+ <div className={styles.bottom}>
78
+ {!isDefaultLane && <div className={styles.laneName}>{laneName}</div>}
79
+
80
+ {formattedTimestamp && (
71
81
  <div className={styles.timeStamp}>
72
- <TimeAgo date={timestamp?.toString()} />
82
+ <TimeAgo date={formattedTimestamp} />
73
83
  </div>
74
84
  )}
75
85
  </div>
package/lane-selector-list.module.scss CHANGED
@@ -2,8 +2,9 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  overflow: auto;
5
- width: 350px;
6
- max-height: 50vh;
5
+ // adjust for border
6
+ width: calc(300px - 2px);
7
+ max-height: 30vh;
7
8
  }
8
9
 
9
10
  .mainIcon {
package/lane-selector.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  .dropdown {
4
4
  // otherwise when the dropdown is open it clashes with the content of the tree
5
5
  // (this is bizarre, the tree has no position absolute)
6
- z-index: $nav-z-index;
6
+ z-index: $modal-z-index;
7
7
  border-radius: 8px;
8
8
  width: 100%;
9
9
 
@@ -20,14 +20,11 @@
20
20
  }
21
21
 
22
22
  .search {
23
- // margin: 8px 0px 0px 0px;
24
- border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
25
23
  display: flex;
26
- padding: 8px;
27
24
  }
28
25
 
29
26
  .menu {
30
- width: 350px;
27
+ width: 300px;
31
28
  border-radius: 8px;
32
29
  padding: 0;
33
30
  // border: 1px solid var(--border-medium-color);
@@ -46,11 +43,13 @@
46
43
 
47
44
  .searchInput {
48
45
  width: 100%;
46
+ padding-top: 0;
49
47
  }
50
48
 
51
- .sortAndGroupBy {
49
+ .toolbar {
52
50
  display: flex;
53
51
  justify-content: space-between;
52
+ align-items: center;
54
53
  padding: 6px 8px;
55
54
  }
56
55
 
@@ -79,3 +78,7 @@
79
78
  padding-right: 4px;
80
79
  filter: invert(46%) sepia(8%) saturate(298%) hue-rotate(189deg) brightness(95%) contrast(91%);
81
80
  }
81
+
82
+ .searchIcon {
83
+ top: calc(50% - 0.4rem) !important;
84
+ }
package/lane-selector.tsx CHANGED
@@ -1,5 +1,6 @@
1
- import React, { HTMLAttributes, useState, ChangeEventHandler, useEffect, useCallback, useMemo, useRef } from 'react';
1
+ import React, { HTMLAttributes, useState, ChangeEventHandler, useEffect, useCallback, useMemo } from 'react';
2
2
  import classnames from 'classnames';
3
+ import { startCase } from 'lodash';
3
4
  import { LaneId } from '@teambit/lane-id';
4
5
  import { Dropdown } from '@teambit/design.inputs.dropdown';
5
6
  import { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
@@ -7,6 +8,7 @@ import { InputText as SearchInput } from '@teambit/design.inputs.input-text';
7
8
  import { ToggleButton } from '@teambit/design.inputs.toggle-button';
8
9
  import { Icon } from '@teambit/design.elements.icon';
9
10
  import { CheckboxItem } from '@teambit/design.inputs.selectors.checkbox-item';
11
+ import { Tooltip } from '@teambit/design.ui.tooltip';
10
12
 
11
13
  import { LaneSelectorList } from './lane-selector-list';
12
14
  import { LanePlaceholder } from './lane-placeholder';
@@ -80,7 +82,6 @@ export function LaneSelector(props: LaneSelectorProps) {
80
82
 
81
83
  const [search, setSearch] = useState<string>('');
82
84
  const [sortBy, setSortBy] = useState<LaneSelectorSortBy>(sortByFromProps);
83
- const inputRef = useRef<HTMLInputElement>(null);
84
85
 
85
86
  const sortedNonMainLanes = useMemo(() => {
86
87
  return nonMainLanes.sort(compareFn(sortBy));
@@ -88,16 +89,6 @@ export function LaneSelector(props: LaneSelectorProps) {
88
89
 
89
90
  const [filteredLanes, setFilteredLanes] = useState<LaneModel[]>(sortedNonMainLanes);
90
91
 
91
- const [, setTrackedDropdownOpenState] = useState<boolean>(false);
92
- const onDropdownPlaceholderToggled = () => {
93
- setTrackedDropdownOpenState((v) => {
94
- if (!v) {
95
- inputRef.current?.focus();
96
- }
97
- return !v;
98
- });
99
- };
100
-
101
92
  const [groupScope, setGroupScope] = useState<boolean>(groupByScope);
102
93
 
103
94
  useEffect(() => {
@@ -143,8 +134,11 @@ export function LaneSelector(props: LaneSelectorProps) {
143
134
  (multipleLanes && (
144
135
  <div className={styles.search}>
145
136
  <SearchInput
146
- ref={inputRef}
137
+ activeLabel={false}
138
+ inputSize={'s'}
139
+ // ref={inputRef}
147
140
  className={styles.searchInput}
141
+ placeholder={'Search'}
148
142
  value={search}
149
143
  onChange={handleSearchOnChange}
150
144
  onClick={handleSearchOnClick}
@@ -159,21 +153,18 @@ export function LaneSelector(props: LaneSelectorProps) {
159
153
 
160
154
  function LaneGroup() {
161
155
  return (
162
- (multipleLanes && groupByScope && (
163
- <div className={styles.group}>
164
- <CheckboxItem
165
- checked={groupByScope}
166
- onInputChanged={(e) => {
167
- // prevent dropdown from closing
168
- setGroupScope((v) => !v);
169
- e.stopPropagation();
170
- }}
171
- >
172
- Group scopes
173
- </CheckboxItem>
174
- </div>
175
- )) ||
176
- null
156
+ <div className={styles.group}>
157
+ <CheckboxItem
158
+ checked={groupByScope}
159
+ onInputChanged={(e) => {
160
+ // prevent dropdown from closing
161
+ setGroupScope((v) => !v);
162
+ e.stopPropagation();
163
+ }}
164
+ >
165
+ Group scopes
166
+ </CheckboxItem>
167
+ </div>
177
168
  );
178
169
  }
179
170
 
@@ -183,18 +174,20 @@ export function LaneSelector(props: LaneSelectorProps) {
183
174
  dropClass={styles.menu}
184
175
  position="bottom"
185
176
  clickPlaceholderToggles={true}
186
- onPlaceholderToggle={onDropdownPlaceholderToggled}
177
+ clickToggles={true}
187
178
  placeholderContent={
188
179
  <LanePlaceholder disabled={!multipleLanes} selectedLaneId={selectedLaneId} showScope={groupByScope} />
189
180
  }
190
181
  className={classnames(styles.dropdown, !multipleLanes && styles.disabled)}
191
182
  >
192
- <LaneSearch />
193
183
  {multipleLanes && (
194
- <div className={styles.sortAndGroupBy}>
195
- <div className={styles.groupBy}>
196
- <LaneGroup />
197
- </div>
184
+ <div className={styles.toolbar}>
185
+ {multipleLanes && groupByScope && (
186
+ <div className={styles.groupBy}>
187
+ <LaneGroup />
188
+ </div>
189
+ )}
190
+ <LaneSearch />
198
191
  <div className={styles.sort}>
199
192
  <ToggleButton
200
193
  className={classnames(styles.sortToggle)}
@@ -204,11 +197,15 @@ export function LaneSelector(props: LaneSelectorProps) {
204
197
  value: option,
205
198
  icon:
206
199
  option === LaneSelectorSortBy.ALPHABETICAL ? (
207
- <img className={styles.sortIcon} src="https://static.bit.cloud/bit-icons/ripple-list.svg" />
200
+ <Tooltip placement={'bottom'} content={`Sort by Lane ID (A-Z)`}>
201
+ <img className={styles.sortIcon} src="https://static.bit.cloud/bit-icons/ripple-list.svg" />
202
+ </Tooltip>
208
203
  ) : (
209
- <img className={styles.sortIcon} src="https://static.bit.cloud/bit-icons/clock.svg" />
204
+ <Tooltip placement={'bottom'} content={`Sort by ${startCase(option.toLowerCase())} Date`}>
205
+ <img className={styles.sortIcon} src="https://static.bit.cloud/bit-icons/clock.svg" />
206
+ </Tooltip>
210
207
  ),
211
- element: option === LaneSelectorSortBy.ALPHABETICAL ? 'a-Z' : option.toLowerCase(),
208
+ element: null,
212
209
  };
213
210
  })}
214
211
  onOptionSelect={(index, e) => {
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@teambit/lanes.ui.inputs.lane-selector",
3
- "version": "0.0.109",
3
+ "version": "0.0.111",
4
4
  "homepage": "https://bit.dev/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.109"
9
+ "version": "0.0.111"
10
10
  },
11
11
  "dependencies": {
12
12
  "classnames": "2.2.6",
@@ -19,13 +19,14 @@
19
19
  "@teambit/design.inputs.dropdown": "1.2.16",
20
20
  "@teambit/design.inputs.input-text": "1.0.21",
21
21
  "@teambit/design.inputs.selectors.checkbox-item": "1.1.11",
22
- "@teambit/lane-id": "0.0.201",
23
- "@teambit/lanes.ui.models.lanes-model": "0.0.109",
22
+ "@teambit/lane-id": "0.0.203",
23
+ "@teambit/lanes.ui.models.lanes-model": "0.0.111",
24
24
  "@teambit/design.ui.time-ago": "0.0.366",
25
25
  "@teambit/design.ui.styles.ellipsis": "0.0.357",
26
26
  "@teambit/lanes.ui.icons.lane-icon": "0.0.4",
27
27
  "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
28
- "@teambit/design.inputs.toggle-button": "0.0.9"
28
+ "@teambit/design.inputs.toggle-button": "0.0.9",
29
+ "@teambit/design.ui.tooltip": "0.0.361"
29
30
  },
30
31
  "devDependencies": {
31
32
  "@types/classnames": "2.2.11",