Skip to content

Commit b6e4cf7

Browse files
wagnermacielwagnermaciel
committed
fixup! feat(cdk-experimental/ui-patterns): listbox ui pattern
1 parent 6bcf751 commit b6e4cf7

File tree

5 files changed

+51
-52
lines changed

5 files changed

+51
-52
lines changed

‎src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ describe('List Focus', () => {
8585
expect(items()[4].tabindex()).toBe(-1);
8686
});
8787

88-
it('should update the tabindex of the active item when navigating', async () => {
88+
it('should update the tabindex of the active item when navigating', () => {
8989
const items = getItems(5);
9090
const nav = getNavigation(items);
9191
const focus = getFocus(nav);
@@ -142,7 +142,7 @@ describe('List Focus', () => {
142142
expect(items()[4].tabindex()).toBe(-1);
143143
});
144144

145-
it('should update the activedescendant of the list when navigating', async () => {
145+
it('should update the activedescendant of the list when navigating', () => {
146146
const items = getItems(5);
147147
const nav = getNavigation(items);
148148
const focus = getFocus(nav, {

‎src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.spec.ts‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('List Navigation', () => {
3939
}
4040

4141
describe('#goto', () => {
42-
it('should navigate to an item', async () => {
42+
it('should navigate to an item', () => {
4343
const items = getItems(5);
4444
const nav = getNavigation(items);
4545

@@ -50,13 +50,13 @@ describe('List Navigation', () => {
5050
});
5151

5252
describe('#next', () => {
53-
it('should navigate next', async () => {
53+
it('should navigate next', () => {
5454
const nav = getNavigation(getItems(3));
5555
nav.next(); // 0 -> 1
5656
expect(nav.inputs.activeIndex()).toBe(1);
5757
});
5858

59-
it('should wrap', async () => {
59+
it('should wrap', () => {
6060
const nav = getNavigation(getItems(3), {
6161
wrap: signal(true),
6262
});
@@ -68,7 +68,7 @@ describe('List Navigation', () => {
6868
expect(nav.inputs.activeIndex()).toBe(0);
6969
});
7070

71-
it('should not wrap', async () => {
71+
it('should not wrap', () => {
7272
const nav = getNavigation(getItems(3), {
7373
wrap: signal(false),
7474
});
@@ -80,7 +80,7 @@ describe('List Navigation', () => {
8080
expect(nav.inputs.activeIndex()).toBe(2);
8181
});
8282

83-
it('should skip disabled items', async () => {
83+
it('should skip disabled items', () => {
8484
const nav = getNavigation(getItems(3), {
8585
skipDisabled: signal(true),
8686
});
@@ -90,7 +90,7 @@ describe('List Navigation', () => {
9090
expect(nav.inputs.activeIndex()).toBe(2);
9191
});
9292

93-
it('should not skip disabled items', async () => {
93+
it('should not skip disabled items', () => {
9494
const nav = getNavigation(getItems(3), {
9595
skipDisabled: signal(false),
9696
});
@@ -100,7 +100,7 @@ describe('List Navigation', () => {
100100
expect(nav.inputs.activeIndex()).toBe(1);
101101
});
102102

103-
it('should wrap and skip disabled items', async () => {
103+
it('should wrap and skip disabled items', () => {
104104
const nav = getNavigation(getItems(3), {
105105
wrap: signal(true),
106106
skipDisabled: signal(true),
@@ -113,7 +113,7 @@ describe('List Navigation', () => {
113113
expect(nav.inputs.activeIndex()).toBe(0);
114114
});
115115

116-
it('should do nothing if other items are disabled', async () => {
116+
it('should do nothing if other items are disabled', () => {
117117
const nav = getNavigation(getItems(3), {
118118
skipDisabled: signal(true),
119119
});
@@ -124,39 +124,39 @@ describe('List Navigation', () => {
124124
expect(nav.inputs.activeIndex()).toBe(0);
125125
});
126126

127-
it('should do nothing if there are no other items to navigate to', async () => {
127+
it('should do nothing if there are no other items to navigate to', () => {
128128
const nav = getNavigation(getItems(1));
129129
nav.next(); // 0 -> 0
130130
expect(nav.inputs.activeIndex()).toBe(0);
131131
});
132132
});
133133

134134
describe('#prev', () => {
135-
it('should navigate prev', async () => {
135+
it('should navigate prev', () => {
136136
const nav = getNavigation(getItems(3), {
137137
activeIndex: signal(2),
138138
});
139139
nav.prev(); // 2 -> 1
140140
expect(nav.inputs.activeIndex()).toBe(1);
141141
});
142142

143-
it('should wrap', async () => {
143+
it('should wrap', () => {
144144
const nav = getNavigation(getItems(3), {
145145
wrap: signal(true),
146146
});
147147
nav.prev(); // 0 -> 2
148148
expect(nav.inputs.activeIndex()).toBe(2);
149149
});
150150

151-
it('should not wrap', async () => {
151+
it('should not wrap', () => {
152152
const nav = getNavigation(getItems(3), {
153153
wrap: signal(false),
154154
});
155155
nav.prev(); // 0 -> 0
156156
expect(nav.inputs.activeIndex()).toBe(0);
157157
});
158158

159-
it('should skip disabled items', async () => {
159+
it('should skip disabled items', () => {
160160
const nav = getNavigation(getItems(3), {
161161
activeIndex: signal(2),
162162
skipDisabled: signal(true),
@@ -167,7 +167,7 @@ describe('List Navigation', () => {
167167
expect(nav.inputs.activeIndex()).toBe(0);
168168
});
169169

170-
it('should not skip disabled items', async () => {
170+
it('should not skip disabled items', () => {
171171
const nav = getNavigation(getItems(3), {
172172
activeIndex: signal(2),
173173
skipDisabled: signal(false),
@@ -178,7 +178,7 @@ describe('List Navigation', () => {
178178
expect(nav.inputs.activeIndex()).toBe(1);
179179
});
180180

181-
it('should wrap and skip disabled items', async () => {
181+
it('should wrap and skip disabled items', () => {
182182
const nav = getNavigation(getItems(3), {
183183
wrap: signal(true),
184184
activeIndex: signal(2),
@@ -192,7 +192,7 @@ describe('List Navigation', () => {
192192
expect(nav.inputs.activeIndex()).toBe(2);
193193
});
194194

195-
it('should do nothing if other items are disabled', async () => {
195+
it('should do nothing if other items are disabled', () => {
196196
const nav = getNavigation(getItems(3), {
197197
activeIndex: signal(2),
198198
skipDisabled: signal(true),
@@ -204,15 +204,15 @@ describe('List Navigation', () => {
204204
expect(nav.inputs.activeIndex()).toBe(2);
205205
});
206206

207-
it('should do nothing if there are no other items to navigate to', async () => {
207+
it('should do nothing if there are no other items to navigate to', () => {
208208
const nav = getNavigation(getItems(1));
209209
nav.prev(); // 0 -> 0
210210
expect(nav.inputs.activeIndex()).toBe(0);
211211
});
212212
});
213213

214214
describe('#first', () => {
215-
it('should navigate to the first item', async () => {
215+
it('should navigate to the first item', () => {
216216
const nav = getNavigation(getItems(3), {
217217
activeIndex: signal(2),
218218
});
@@ -221,7 +221,7 @@ describe('List Navigation', () => {
221221
expect(nav.inputs.activeIndex()).toBe(0);
222222
});
223223

224-
it('should skip disabled items', async () => {
224+
it('should skip disabled items', () => {
225225
const nav = getNavigation(getItems(3), {
226226
activeIndex: signal(2),
227227
skipDisabled: signal(true),
@@ -232,7 +232,7 @@ describe('List Navigation', () => {
232232
expect(nav.inputs.activeIndex()).toBe(1);
233233
});
234234

235-
it('should not skip disabled items', async () => {
235+
it('should not skip disabled items', () => {
236236
const nav = getNavigation(getItems(3), {
237237
activeIndex: signal(2),
238238
skipDisabled: signal(false),
@@ -245,13 +245,13 @@ describe('List Navigation', () => {
245245
});
246246

247247
describe('#last', () => {
248-
it('should navigate to the last item', async () => {
248+
it('should navigate to the last item', () => {
249249
const nav = getNavigation(getItems(3));
250250
nav.last();
251251
expect(nav.inputs.activeIndex()).toBe(2);
252252
});
253253

254-
it('should skip disabled items', async () => {
254+
it('should skip disabled items', () => {
255255
const nav = getNavigation(getItems(3), {
256256
skipDisabled: signal(true),
257257
});
@@ -261,7 +261,7 @@ describe('List Navigation', () => {
261261
expect(nav.inputs.activeIndex()).toBe(1);
262262
});
263263

264-
it('should not skip disabled items', async () => {
264+
it('should not skip disabled items', () => {
265265
const nav = getNavigation(getItems(3), {
266266
skipDisabled: signal(false),
267267
});
@@ -273,7 +273,7 @@ describe('List Navigation', () => {
273273
});
274274

275275
describe('#isFocusable', () => {
276-
it('should return true for enabled items', async () => {
276+
it('should return true for enabled items', () => {
277277
const nav = getNavigation(getItems(3), {
278278
skipDisabled: signal(true),
279279
});
@@ -283,7 +283,7 @@ describe('List Navigation', () => {
283283
expect(nav.isFocusable(nav.inputs.items()[2])).toBeTrue();
284284
});
285285

286-
it('should return false for disabled items', async () => {
286+
it('should return false for disabled items', () => {
287287
const nav = getNavigation(getItems(3), {
288288
skipDisabled: signal(true),
289289
});
@@ -294,7 +294,7 @@ describe('List Navigation', () => {
294294
expect(nav.isFocusable(nav.inputs.items()[2])).toBeTrue();
295295
});
296296

297-
it('should return true for disabled items if skip disabled is false', async () => {
297+
it('should return true for disabled items if skip disabled is false', () => {
298298
const nav = getNavigation(getItems(3), {
299299
skipDisabled: signal(false),
300300
});

‎src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export class ListNavigation<T extends ListNavigationItem> {
6060
const startIndex = this.inputs.activeIndex();
6161
const step = (i: number) => this._stepIndex(i, 1);
6262

63-
for (let i = step(startIndex); i !== startIndex && i < itemCount; step(i)) {
63+
for (let i = step(startIndex); i !== startIndex && i < itemCount; i = step(i)) {
6464
if (this.isFocusable(items[i])) {
6565
this.goto(items[i]);
6666
return;
@@ -74,7 +74,7 @@ export class ListNavigation<T extends ListNavigationItem> {
7474
const startIndex = this.inputs.activeIndex();
7575
const step = (i: number) => this._stepIndex(i, -1);
7676

77-
for (let i = step(startIndex); i !== startIndex && i >= 0; step(i)) {
77+
for (let i = step(startIndex); i !== startIndex && i >= 0; i = step(i)) {
7878
if (this.isFocusable(items[i])) {
7979
this.goto(items[i]);
8080
return;
@@ -108,8 +108,7 @@ export class ListNavigation<T extends ListNavigationItem> {
108108
}
109109

110110
private _stepIndex(index: number, step: -1 | 1) {
111-
return this.inputs.wrap()
112-
? (index + step + this.inputs.items().length) % this.inputs.items().length
113-
: index + step;
111+
const itemCount = this.inputs.items().length;
112+
return this.inputs.wrap() ? (index + step + itemCount) % itemCount : index + step;
114113
}
115114
}

0 commit comments

Comments
 (0)