Skip to content

Commit 0d830c5

Browse files
wagnermacielwagnermaciel
committed
refactor(multiple): make ListItem.element() optional
1 parent a97003a commit 0d830c5

File tree

11 files changed

+39
-39
lines changed

11 files changed

+39
-39
lines changed

‎src/aria/listbox/listbox.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ export class Listbox<V> {
185185
}
186186

187187
scrollActiveItemIntoView(options: ScrollIntoViewOptions = {block: 'nearest'}) {
188-
this._pattern.inputs.activeItem()?.element().scrollIntoView(options);
188+
this._pattern.inputs.activeItem()?.element()?.scrollIntoView(options);
189189
}
190190
}
191191

‎src/aria/private/behaviors/list-focus/list-focus.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface ListFocusItem {
1515
id: SignalLike<string>;
1616

1717
/** The html element that should receive focus. */
18-
element: SignalLike<HTMLElement>;
18+
element: SignalLike<HTMLElement | undefined>;
1919

2020
/** Whether an item is disabled. */
2121
disabled: SignalLike<boolean>;
@@ -112,7 +112,7 @@ export class ListFocus<T extends ListFocusItem> {
112112

113113
if (opts?.focusElement || opts?.focusElement === undefined) {
114114
this.inputs.focusMode() === 'roving'
115-
? item.element().focus()
115+
? item.element()?.focus()
116116
: this.inputs.element()?.focus();
117117
}
118118

‎src/aria/private/listbox/option.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export class OptionPattern<V> {
5757
tabindex = computed(() => this.listbox()?.listBehavior.getItemTabindex(this));
5858

5959
/** The html element that should receive focus. */
60-
element: SignalLike<HTMLElement>;
60+
element: SignalLike<HTMLElement | undefined>;
6161

6262
constructor(args: OptionInputs<V>) {
6363
this.id = args.id;

‎src/aria/private/menu/menu.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ export class MenuPattern<V> {
248248
if (parent instanceof MenuItemPattern) {
249249
const grandparent = parent.inputs.parent();
250250
const siblings = grandparent?.inputs.items().filter(i => i !== parent);
251-
const item = siblings?.find(i => i.element().contains(relatedTarget));
251+
const item = siblings?.find(i => i.element()?.contains(relatedTarget));
252252

253253
if (item) {
254254
return;
@@ -602,7 +602,7 @@ export class MenuItemPattern<V> implements ListItem<V> {
602602
searchTerm: SignalLike<string>;
603603

604604
/** The element of the menu item. */
605-
element: SignalLike<HTMLElement>;
605+
element: SignalLike<HTMLElement | undefined>;
606606

607607
/** Whether the menu item is active. */
608608
isActive = computed(() => this.inputs.parent()?.inputs.activeItem() === this);

‎src/aria/private/tabs/tabs.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export class TabPattern {
4747
readonly disabled: SignalLike<boolean>;
4848

4949
/** The html element that should receive focus. */
50-
readonly element: SignalLike<HTMLElement>;
50+
readonly element: SignalLike<HTMLElement | undefined>;
5151

5252
/** Whether the tab is selectable. */
5353
readonly selectable = () => true;

‎src/aria/private/toolbar/toolbar-widget-group.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export class ToolbarWidgetGroupPattern<V> implements ListItem<V> {
6060
readonly id: SignalLike<string>;
6161

6262
/** The html element that should receive focus. */
63-
readonly element: SignalLike<HTMLElement>;
63+
readonly element: SignalLike<HTMLElement | undefined>;
6464

6565
/** Whether the widget is disabled. */
6666
readonly disabled: SignalLike<boolean>;

‎src/aria/private/toolbar/toolbar-widget.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class ToolbarWidgetPattern<V> implements ListItem<V> {
2323
readonly id: SignalLike<string>;
2424

2525
/** The html element that should receive focus. */
26-
readonly element: SignalLike<HTMLElement>;
26+
readonly element: SignalLike<HTMLElement | undefined>;
2727

2828
/** Whether the widget is disabled. */
2929
readonly disabled: SignalLike<boolean>;

‎src/aria/private/toolbar/toolbar.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,13 +238,13 @@ describe('Toolbar Pattern', () => {
238238
});
239239

240240
it('should set the active item on pointerdown', () => {
241-
toolbar.onPointerdown(click(items[1].element()));
241+
toolbar.onPointerdown(click(items[1].element()!));
242242
expect(toolbarInputs.activeItem()).toBe(items[1]);
243243
});
244244

245245
it('should not set the active item on pointerdown if the toolbar is disabled', () => {
246246
toolbarInputs.disabled.set(true);
247-
toolbar.onPointerdown(click(items[1].element()));
247+
toolbar.onPointerdown(click(items[1].element()!));
248248
expect(toolbarInputs.activeItem()).toBe(items[0]);
249249
});
250250
});

‎src/aria/private/tree/tree.spec.ts‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -949,7 +949,7 @@ describe('Tree Pattern', () => {
949949
const {tree, allItems} = createTree(treeExample, treeInputs);
950950
const item1 = getItemByValue(allItems(), 'Item 1');
951951

952-
tree.onPointerdown(createClickEvent(item1.element()));
952+
tree.onPointerdown(createClickEvent(item1.element()!));
953953
expect(tree.activeItem()).toBe(item1);
954954
expect(tree.inputs.value()).toEqual(['Item 1']);
955955
});
@@ -959,7 +959,7 @@ describe('Tree Pattern', () => {
959959
const {tree, allItems} = createTree(treeExample, treeInputs);
960960
const item1 = getItemByValue(allItems(), 'Item 1');
961961

962-
tree.onPointerdown(createClickEvent(item1.element()));
962+
tree.onPointerdown(createClickEvent(item1.element()!));
963963
expect(tree.inputs.value()).toEqual([]);
964964
});
965965
});
@@ -991,7 +991,7 @@ describe('Tree Pattern', () => {
991991
const {tree, allItems} = createTree(treeExample, treeInputs);
992992
const item1 = getItemByValue(allItems(), 'Item 1');
993993

994-
tree.onPointerdown(createClickEvent(item1.element()));
994+
tree.onPointerdown(createClickEvent(item1.element()!));
995995
expect(tree.activeItem()).toBe(item1);
996996
expect(tree.inputs.value()).toEqual(['Item 1']);
997997
});
@@ -1000,11 +1000,11 @@ describe('Tree Pattern', () => {
10001000
const {tree, allItems} = createTree(treeExample, treeInputs);
10011001
const item1 = getItemByValue(allItems(), 'Item 1');
10021002

1003-
tree.onPointerdown(createClickEvent(item1.element()));
1003+
tree.onPointerdown(createClickEvent(item1.element()!));
10041004
expect(tree.activeItem()).toBe(item1);
10051005
expect(tree.inputs.value()).toEqual(['Item 1']);
10061006

1007-
tree.onPointerdown(createClickEvent(item1.element()));
1007+
tree.onPointerdown(createClickEvent(item1.element()!));
10081008
expect(tree.activeItem()).toBe(item1);
10091009
expect(tree.inputs.value()).toEqual(['Item 1']);
10101010
});
@@ -1014,7 +1014,7 @@ describe('Tree Pattern', () => {
10141014
const {tree, allItems} = createTree(treeExample, treeInputs);
10151015
const item1 = getItemByValue(allItems(), 'Item 1');
10161016

1017-
tree.onPointerdown(createClickEvent(item1.element()));
1017+
tree.onPointerdown(createClickEvent(item1.element()!));
10181018
expect(tree.inputs.value()).toEqual([]);
10191019
});
10201020
});
@@ -1047,13 +1047,13 @@ describe('Tree Pattern', () => {
10471047
const item0 = getItemByValue(allItems(), 'Item 0');
10481048
const item1 = getItemByValue(allItems(), 'Item 1');
10491049

1050-
tree.onPointerdown(createClickEvent(item0.element()));
1050+
tree.onPointerdown(createClickEvent(item0.element()!));
10511051
expect(tree.inputs.value()).toEqual(['Item 0']);
10521052

1053-
tree.onPointerdown(createClickEvent(item1.element()));
1053+
tree.onPointerdown(createClickEvent(item1.element()!));
10541054
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']);
10551055

1056-
tree.onPointerdown(createClickEvent(item0.element()));
1056+
tree.onPointerdown(createClickEvent(item0.element()!));
10571057
expect(tree.inputs.value()).toEqual(['Item 1']);
10581058
});
10591059

@@ -1064,7 +1064,7 @@ describe('Tree Pattern', () => {
10641064
item0.expansion.open();
10651065

10661066
tree.onKeydown(shift());
1067-
tree.onPointerdown(createClickEvent(item1.element(), {shift: true}));
1067+
tree.onPointerdown(createClickEvent(item1.element()!, {shift: true}));
10681068
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']);
10691069
});
10701070
});
@@ -1097,9 +1097,9 @@ describe('Tree Pattern', () => {
10971097
const item0 = getItemByValue(allItems(), 'Item 0');
10981098
const item1 = getItemByValue(allItems(), 'Item 1');
10991099

1100-
tree.onPointerdown(createClickEvent(item0.element()));
1100+
tree.onPointerdown(createClickEvent(item0.element()!));
11011101
expect(tree.inputs.value()).toEqual(['Item 0']);
1102-
tree.onPointerdown(createClickEvent(item1.element()));
1102+
tree.onPointerdown(createClickEvent(item1.element()!));
11031103
expect(tree.inputs.value()).toEqual(['Item 1']);
11041104
});
11051105

@@ -1108,10 +1108,10 @@ describe('Tree Pattern', () => {
11081108
const item0 = getItemByValue(allItems(), 'Item 0');
11091109
const item1 = getItemByValue(allItems(), 'Item 1');
11101110

1111-
tree.onPointerdown(createClickEvent(item0.element())); // Select and expand Item 0
1112-
tree.onPointerdown(createClickEvent(item1.element(), {control: true}));
1111+
tree.onPointerdown(createClickEvent(item0.element()!)); // Select and expand Item 0
1112+
tree.onPointerdown(createClickEvent(item1.element()!, {control: true}));
11131113
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']);
1114-
tree.onPointerdown(createClickEvent(item0.element(), {control: true}));
1114+
tree.onPointerdown(createClickEvent(item0.element()!, {control: true}));
11151115
expect(tree.inputs.value()).toEqual(['Item 1']);
11161116
});
11171117

@@ -1120,9 +1120,9 @@ describe('Tree Pattern', () => {
11201120
const item0 = getItemByValue(allItems(), 'Item 0');
11211121
const item2 = getItemByValue(allItems(), 'Item 2');
11221122

1123-
tree.onPointerdown(createClickEvent(item0.element())); // Select and expand Item 0
1123+
tree.onPointerdown(createClickEvent(item0.element()!)); // Select and expand Item 0
11241124
tree.onKeydown(shift());
1125-
tree.onPointerdown(createClickEvent(item2.element(), {shift: true}));
1125+
tree.onPointerdown(createClickEvent(item2.element()!, {shift: true}));
11261126
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']);
11271127
});
11281128

@@ -1134,10 +1134,10 @@ describe('Tree Pattern', () => {
11341134
item0.expansion.open();
11351135

11361136
tree.onKeydown(shift());
1137-
tree.onPointerdown(createClickEvent(item1.element(), {shift: true}));
1137+
tree.onPointerdown(createClickEvent(item1.element()!, {shift: true}));
11381138
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']);
11391139

1140-
tree.onPointerdown(createClickEvent(item0_0.element(), {shift: true}));
1140+
tree.onPointerdown(createClickEvent(item0_0.element()!, {shift: true}));
11411141
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0']);
11421142
});
11431143

@@ -1148,7 +1148,7 @@ describe('Tree Pattern', () => {
11481148
const {tree, allItems} = createTree(localTreeData, treeInputs);
11491149
const itemA = getItemByValue(allItems(), 'A');
11501150

1151-
tree.onPointerdown(createClickEvent(itemA.element()));
1151+
tree.onPointerdown(createClickEvent(itemA.element()!));
11521152
expect(tree.inputs.value()).toEqual([]);
11531153
expect(tree.activeItem()).toBe(itemA);
11541154
});
@@ -1159,7 +1159,7 @@ describe('Tree Pattern', () => {
11591159
];
11601160
const {tree, allItems} = createTree(localTreeData, treeInputs);
11611161
const itemA = getItemByValue(allItems(), 'A');
1162-
tree.onPointerdown(createClickEvent(itemA.element()));
1162+
tree.onPointerdown(createClickEvent(itemA.element()!));
11631163
expect(tree.inputs.value()).toEqual([]);
11641164
});
11651165
});
@@ -1324,9 +1324,9 @@ describe('Tree Pattern', () => {
13241324
const item0 = getItemByValue(allItems(), 'Item 0');
13251325

13261326
expect(item0.expanded()).toBe(false);
1327-
tree.onPointerdown(createClickEvent(item0.element()));
1327+
tree.onPointerdown(createClickEvent(item0.element()!));
13281328
expect(item0.expanded()).toBe(true);
1329-
tree.onPointerdown(createClickEvent(item0.element()));
1329+
tree.onPointerdown(createClickEvent(item0.element()!));
13301330
expect(item0.expanded()).toBe(false);
13311331
});
13321332

@@ -1335,7 +1335,7 @@ describe('Tree Pattern', () => {
13351335
const item1 = getItemByValue(allItems(), 'Item 1');
13361336

13371337
expect(item1.expanded()).toBe(false);
1338-
tree.onPointerdown(createClickEvent(item1.element()));
1338+
tree.onPointerdown(createClickEvent(item1.element()!));
13391339
expect(item1.expanded()).toBe(false);
13401340
});
13411341

@@ -1344,7 +1344,7 @@ describe('Tree Pattern', () => {
13441344
const item0 = getItemByValue(allItems(), 'Item 0');
13451345
itemPatternInputsMap.get(item0.id())!.disabled.set(true);
13461346

1347-
tree.onPointerdown(createClickEvent(item0.element()));
1347+
tree.onPointerdown(createClickEvent(item0.element()!));
13481348
expect(item0.expanded()).toBe(false);
13491349
});
13501350

@@ -1353,7 +1353,7 @@ describe('Tree Pattern', () => {
13531353
const {tree, allItems} = createTree(treeExample, treeInputs);
13541354
const item0 = getItemByValue(allItems(), 'Item 0');
13551355

1356-
tree.onPointerdown(createClickEvent(item0.element()));
1356+
tree.onPointerdown(createClickEvent(item0.element()!));
13571357
expect(item0.expanded()).toBe(false);
13581358
});
13591359

‎src/aria/private/tree/tree.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export class TreeItemPattern<V> implements ListItem<V>, ExpansionItem {
3838
readonly value: SignalLike<V>;
3939

4040
/** A reference to the item element. */
41-
readonly element: SignalLike<HTMLElement>;
41+
readonly element: SignalLike<HTMLElement | undefined>;
4242

4343
/** Whether the item is disabled. */
4444
readonly disabled: SignalLike<boolean>;

0 commit comments

Comments
 (0)