Skip to content

refactor(multiple): migrate Accordion and Tree to ClickEventManager #33036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ok7sai wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(multiple): migrate Accordion and Tree to ClickEventManager #33036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions goldens/aria/private/index.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface AccordionGroupInputs extends Omit<ListNavigationInputs<Accordio
// @public
export class AccordionGroupPattern {
constructor(inputs: AccordionGroupInputs);
click: SignalLike<ClickEventManager<PointerEvent>>;
collapseAll(): void;
expandAll(): void;
readonly expansionBehavior: ListExpansion;
Expand All @@ -24,10 +25,9 @@ export class AccordionGroupPattern {
keydown: SignalLike<KeyboardEventManager<KeyboardEvent>>;
readonly navigationBehavior: ListNavigation<AccordionTriggerPattern>;
nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
onClick(event: PointerEvent): void;
onFocus(event: FocusEvent): void;
onKeydown(event: KeyboardEvent): void;
onPointerdown(event: PointerEvent): void;
pointerdown: SignalLike<PointerEventManager<PointerEvent>>;
prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
toggle(): void;
}
Expand Down Expand Up @@ -248,8 +248,8 @@ export class ComboboxTreePattern<V> extends TreePattern<V> implements ComboboxTr
items: SignalLike<TreeItemPattern<V>[]>;
last: () => void;
next: () => void;
onClick(_: PointerEvent): void;
onKeydown(_: KeyboardEvent): void;
onPointerdown(_: PointerEvent): void;
prev: () => void;
role: () => "tree";
select: (item?: TreeItemPattern<V>) => void;
Expand Down Expand Up @@ -878,6 +878,7 @@ export class TreePattern<V> implements TreeInputs<V> {
readonly activeDescendant: SignalLike<string | undefined>;
readonly activeItem: WritableSignalLike<TreeItemPattern<V> | undefined>;
readonly children: SignalLike<TreeItemPattern<V>[]>;
clickManager: SignalLike<ClickEventManager<PointerEvent>>;
readonly collapseKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
_collapseOrParent(opts?: SelectOptions): void;
readonly currentType: SignalLike<'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'>;
Expand All @@ -902,11 +903,10 @@ export class TreePattern<V> implements TreeInputs<V> {
readonly multi: SignalLike<boolean>;
readonly nav: SignalLike<boolean>;
readonly nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
onClick(event: PointerEvent): void;
onFocusIn(): void;
onKeydown(event: KeyboardEvent): void;
onPointerdown(event: PointerEvent): void;
readonly orientation: SignalLike<'vertical' | 'horizontal'>;
pointerdown: SignalLike<PointerEventManager<PointerEvent>>;
readonly prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
readonly selectionMode: SignalLike<'follow' | 'explicit'>;
setDefaultState(): void;
Expand Down
2 changes: 1 addition & 1 deletion src/aria/accordion/accordion-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ import {ACCORDION_GROUP} from './accordion-tokens';
exportAs: 'ngAccordionGroup',
host: {
'(keydown)': '_pattern.onKeydown($event)',
'(pointerdown)': '_pattern.onPointerdown($event)',
'(click)': '_pattern.onClick($event)',
'(focusin)': '_pattern.onFocus($event)',
},
providers: [{provide: ACCORDION_GROUP, useExisting: AccordionGroup}],
Expand Down
2 changes: 1 addition & 1 deletion src/aria/accordion/accordion.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('AccordionGroup', () => {
};

const click = (target: HTMLElement) => {
target.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true}));
target.dispatchEvent(new PointerEvent('click', {bubbles: true}));
fixture.detectChanges();
};

Expand Down
4 changes: 0 additions & 4 deletions src/aria/listbox/listbox.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,6 @@ describe('Listbox', () => {
(targets || optionElements)[index].dispatchEvent(
new PointerEvent('click', {
bubbles: true,
detail: 1,
pointerType: 'mouse',
clientX: 1,
clientY: 1,
...eventInit,
}),
);
Expand Down
14 changes: 7 additions & 7 deletions src/aria/private/accordion/accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.dev/license
*/

import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';
import {KeyboardEventManager, ClickEventManager} from '../behaviors/event-manager';
import {ExpansionItem, ListExpansion, ListExpansionInputs} from '../behaviors/expansion/expansion';
import {ListFocus, ListFocusInputs, ListFocusItem} from '../behaviors/list-focus/list-focus';
import {
Expand Down Expand Up @@ -79,9 +79,9 @@ export class AccordionGroupPattern {
.on('Enter', () => this.toggle());
});

/** The pointerdown event manager for the accordion trigger. */
pointerdown = computed(() => {
return new PointerEventManager().on(e => {
/** The click event manager for the accordion trigger. */
click = computed(() => {
return new ClickEventManager<PointerEvent>().on((e: PointerEvent) => {
const item = this._findTriggerPattern(e.target as Element);
if (!item) return;

Expand All @@ -95,9 +95,9 @@ export class AccordionGroupPattern {
this.keydown().handle(event);
}

/** Handles pointerdown events on the trigger, delegating to the group if not disabled. */
onPointerdown(event: PointerEvent): void {
this.pointerdown().handle(event);
/** Handles click events on the trigger, delegating to the group if not disabled. */
onClick(event: PointerEvent): void {
this.click().handle(event);
}

/** Handles focus events on the trigger. This ensures the tabbing changes the active index. */
Expand Down
1 change: 1 addition & 0 deletions src/aria/private/behaviors/event-manager/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@
export {Modifier} from './event-manager';
export {KeyboardEventManager} from './keyboard-event-manager';
export {PointerEventManager} from './pointer-event-manager';
export {ClickEventManager} from './click-event-manager';
3 changes: 1 addition & 2 deletions src/aria/private/listbox/listbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
*/

import {OptionPattern} from './option';
import {KeyboardEventManager, Modifier} from '../behaviors/event-manager';
import {ClickEventManager} from '../behaviors/event-manager/click-event-manager';
import {KeyboardEventManager, Modifier, ClickEventManager} from '../behaviors/event-manager';
import {computed, signal, SignalLike} from '../behaviors/signal-like/signal-like';
import {List, ListInputs} from '../behaviors/list/list';

Expand Down
3 changes: 1 addition & 2 deletions src/aria/private/tabs/tabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
* found in the LICENSE file at https://angular.dev/license
*/

import {KeyboardEventManager} from '../behaviors/event-manager';
import {ClickEventManager} from '../behaviors/event-manager/click-event-manager';
import {KeyboardEventManager, ClickEventManager} from '../behaviors/event-manager';
import {ExpansionItem, ListExpansionInputs, ListExpansion} from '../behaviors/expansion/expansion';
import {
SignalLike,
Expand Down
4 changes: 2 additions & 2 deletions src/aria/private/tree/combobox-tree.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ export class ComboboxTreePattern<V>
/** Noop. The combobox handles keydown events. */
override onKeydown(_: KeyboardEvent): void {}

/** Noop. The combobox handles pointerdown events. */
override onPointerdown(_: PointerEvent): void {}
/** Noop. The combobox handles click events. */
override onClick(_: PointerEvent): void {}

/** Noop. The combobox controls the open state. */
override setDefaultState(): void {}
Expand Down
54 changes: 27 additions & 27 deletions src/aria/private/tree/tree.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -952,7 +952,7 @@ describe('Tree Pattern', () => {
const {tree, items} = createTree(treeExample, treeInputs);
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.activeItem()).toBe(item1);
expect(tree.inputs.value()).toEqual(['Item 1']);
});
Expand All @@ -962,7 +962,7 @@ describe('Tree Pattern', () => {
const {tree, items} = createTree(treeExample, treeInputs);
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.inputs.value()).toEqual([]);
});
});
Expand Down Expand Up @@ -994,7 +994,7 @@ describe('Tree Pattern', () => {
const {tree, items} = createTree(treeExample, treeInputs);
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.activeItem()).toBe(item1);
expect(tree.inputs.value()).toEqual(['Item 1']);
});
Expand All @@ -1003,11 +1003,11 @@ describe('Tree Pattern', () => {
const {tree, items} = createTree(treeExample, treeInputs);
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.activeItem()).toBe(item1);
expect(tree.inputs.value()).toEqual(['Item 1']);

tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.activeItem()).toBe(item1);
expect(tree.inputs.value()).toEqual(['Item 1']);
});
Expand All @@ -1017,7 +1017,7 @@ describe('Tree Pattern', () => {
const {tree, items} = createTree(treeExample, treeInputs);
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.inputs.value()).toEqual([]);
});
});
Expand Down Expand Up @@ -1050,13 +1050,13 @@ describe('Tree Pattern', () => {
const item0 = getItemByValue(items(), 'Item 0');
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item0.element()!));
tree.onClick(createClickEvent(item0.element()!));
expect(tree.inputs.value()).toEqual(['Item 0']);

tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']);

tree.onPointerdown(createClickEvent(item0.element()!));
tree.onClick(createClickEvent(item0.element()!));
expect(tree.inputs.value()).toEqual(['Item 1']);
});

Expand All @@ -1067,7 +1067,7 @@ describe('Tree Pattern', () => {
item0.expanded.set(true);

tree.onKeydown(shift());
tree.onPointerdown(createClickEvent(item1.element()!, {shift: true}));
tree.onClick(createClickEvent(item1.element()!, {shift: true}));
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']);
});
});
Expand Down Expand Up @@ -1100,9 +1100,9 @@ describe('Tree Pattern', () => {
const item0 = getItemByValue(items(), 'Item 0');
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item0.element()!));
tree.onClick(createClickEvent(item0.element()!));
expect(tree.inputs.value()).toEqual(['Item 0']);
tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(tree.inputs.value()).toEqual(['Item 1']);
});

Expand All @@ -1111,10 +1111,10 @@ describe('Tree Pattern', () => {
const item0 = getItemByValue(items(), 'Item 0');
const item1 = getItemByValue(items(), 'Item 1');

tree.onPointerdown(createClickEvent(item0.element()!)); // Select and expand Item 0
tree.onPointerdown(createClickEvent(item1.element()!, {control: true}));
tree.onClick(createClickEvent(item0.element()!)); // Select and expand Item 0
tree.onClick(createClickEvent(item1.element()!, {control: true}));
expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']);
tree.onPointerdown(createClickEvent(item0.element()!, {control: true}));
tree.onClick(createClickEvent(item0.element()!, {control: true}));
expect(tree.inputs.value()).toEqual(['Item 1']);
});

Expand All @@ -1123,9 +1123,9 @@ describe('Tree Pattern', () => {
const item0 = getItemByValue(items(), 'Item 0');
const item2 = getItemByValue(items(), 'Item 2');

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

Expand All @@ -1137,10 +1137,10 @@ describe('Tree Pattern', () => {
item0.expanded.set(true);

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

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

Expand All @@ -1151,7 +1151,7 @@ describe('Tree Pattern', () => {
const {tree, items} = createTree(localTreeData, treeInputs);
const itemA = getItemByValue(items(), 'A');

tree.onPointerdown(createClickEvent(itemA.element()!));
tree.onClick(createClickEvent(itemA.element()!));
expect(tree.inputs.value()).toEqual([]);
expect(tree.activeItem()).toBe(itemA);
});
Expand All @@ -1162,7 +1162,7 @@ describe('Tree Pattern', () => {
];
const {tree, items} = createTree(localTreeData, treeInputs);
const itemA = getItemByValue(items(), 'A');
tree.onPointerdown(createClickEvent(itemA.element()!));
tree.onClick(createClickEvent(itemA.element()!));
expect(tree.inputs.value()).toEqual([]);
});
});
Expand Down Expand Up @@ -1332,9 +1332,9 @@ describe('Tree Pattern', () => {
const item0 = getItemByValue(items(), 'Item 0');

expect(item0.expanded()).toBe(false);
tree.onPointerdown(createClickEvent(item0.element()!));
tree.onClick(createClickEvent(item0.element()!));
expect(item0.expanded()).toBe(true);
tree.onPointerdown(createClickEvent(item0.element()!));
tree.onClick(createClickEvent(item0.element()!));
expect(item0.expanded()).toBe(false);
});

Expand All @@ -1343,7 +1343,7 @@ describe('Tree Pattern', () => {
const item1 = getItemByValue(items(), 'Item 1');

expect(item1.expanded()).toBe(false);
tree.onPointerdown(createClickEvent(item1.element()!));
tree.onClick(createClickEvent(item1.element()!));
expect(item1.expanded()).toBe(false);
});

Expand All @@ -1352,7 +1352,7 @@ describe('Tree Pattern', () => {
const item0 = getItemByValue(items(), 'Item 0');
itemPatternInputsMap.get(item0.id())!.disabled.set(true);

tree.onPointerdown(createClickEvent(item0.element()!));
tree.onClick(createClickEvent(item0.element()!));
expect(item0.expanded()).toBe(false);
});

Expand All @@ -1361,7 +1361,7 @@ describe('Tree Pattern', () => {
const {tree, items} = createTree(treeExample, treeInputs);
const item0 = getItemByValue(items(), 'Item 0');

tree.onPointerdown(createClickEvent(item0.element()!));
tree.onClick(createClickEvent(item0.element()!));
expect(item0.expanded()).toBe(false);
});

Expand Down Expand Up @@ -1566,7 +1566,7 @@ describe('Tree Pattern', () => {
it('should NOT set default state if pointer interacted', () => {
const {tree, items} = createTree(treeExample, treeInputs);
const item0 = getItemByValue(items(), 'Item 0');
tree.onPointerdown(createClickEvent(item0.element()!)); // Interaction
tree.onClick(createClickEvent(item0.element()!)); // Interaction

treeInputs.value.set(['Item 2']);
tree.setDefaultStateEffect();
Expand Down
Loading
Loading