Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
17 changes: 8 additions & 9 deletions src/aria/ui-patterns/accordion/accordion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,6 @@ export class AccordionTriggerPattern {
this.id = inputs.id;
this.element = inputs.element;
this.value = inputs.value;
this.accordionGroup = inputs.accordionGroup;
this.accordionPanel = inputs.accordionPanel;
this.expansionControl = new ExpansionControl({
...inputs,
expansionId: inputs.value,
Expand Down Expand Up @@ -148,10 +146,10 @@ export class AccordionTriggerPattern {
/** The keydown event manager for the accordion trigger. */
keydown = computed(() => {
return new KeyboardEventManager()
.on(this.prevKey, () => this.accordionGroup().navigation.prev())
.on(this.nextKey, () => this.accordionGroup().navigation.next())
.on('Home', () => this.accordionGroup().navigation.first())
.on('End', () => this.accordionGroup().navigation.last())
.on(this.prevKey, () => this.inputs.accordionGroup().navigation.prev())
.on(this.nextKey, () => this.inputs.accordionGroup().navigation.next())
.on('Home', () => this.inputs.accordionGroup().navigation.first())
.on('End', () => this.inputs.accordionGroup().navigation.last())
.on(' ', () => this.expansionControl.toggle())
.on('Enter', () => this.expansionControl.toggle());
});
Expand All @@ -162,7 +160,7 @@ export class AccordionTriggerPattern {
const item = this._getItem(e);

if (item) {
this.accordionGroup().navigation.goto(item);
this.inputs.accordionGroup().navigation.goto(item);
this.expansionControl.toggle();
}
});
Expand All @@ -183,7 +181,7 @@ export class AccordionTriggerPattern {
const item = this._getItem(event);

if (item && this.inputs.accordionGroup().focusManager.isFocusable(item)) {
this.accordionGroup().focusManager.focus(item);
this.inputs.accordionGroup().focusManager.focus(item);
}
}

Expand All @@ -193,7 +191,8 @@ export class AccordionTriggerPattern {
}

const element = e.target.closest('[role="button"]');
return this.accordionGroup()
return this.inputs
.accordionGroup()
.items()
.find(i => i.element() === element);
}
Expand Down
4 changes: 2 additions & 2 deletions src/aria/ui-patterns/tree/combobox-tree.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export class ComboboxTreePattern<V>
implements ComboboxTreeControls<TreeItemPattern<V>, V>
{
/** Whether the currently focused item is collapsible. */
isItemCollapsible = () => this.activeItem()?.parent() instanceof TreeItemPattern;
isItemCollapsible = () => this.inputs.activeItem()?.parent() instanceof TreeItemPattern;

/** The ARIA role for the tree. */
role = () => 'tree' as const;
Expand Down Expand Up @@ -94,7 +94,7 @@ export class ComboboxTreePattern<V>
collapseItem = () => this.collapse();

/** Whether the specified item or the currently active item is expandable. */
isItemExpandable(item: TreeItemPattern<V> | undefined = this.activeItem()) {
isItemExpandable(item: TreeItemPattern<V> | undefined = this.inputs.activeItem()) {
return item ? item.expandable() : false;
}

Expand Down
68 changes: 67 additions & 1 deletion src/aria/ui-patterns/tree/tree.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import {computed, signal} from '@angular/core';
import {SignalLike} from '../behaviors/signal-like/signal-like';
import {SignalLike, WritableSignalLike} from '../behaviors/signal-like/signal-like';
import {List, ListInputs, ListItem} from '../behaviors/list/list';
import {ExpansionItem, ExpansionControl, ListExpansion} from '../behaviors/expansion/expansion';
import {KeyboardEventManager, PointerEventManager, Modifier} from '../behaviors/event-manager';
Expand Down Expand Up @@ -84,6 +84,30 @@ export class TreeItemPattern<V> implements ExpansionItem {
return this.tree().value().includes(this.value()) ? this.tree().currentType() : undefined;
});

/** A unique identifier for this item. */
id: SignalLike<string>;

/** The value of this item. */
value: SignalLike<V>;

/** A reference to the item element. */
element: SignalLike<HTMLElement>;

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

/** The text used by the typeahead search. */
searchTerm: SignalLike<string>;

/** The tree pattern this item belongs to. */
tree: SignalLike<TreePattern<V>>;

/** The parent item. */
parent: SignalLike<TreeItemPattern<V> | TreePattern<V>>;

/** The children items. */
children: SignalLike<TreeItemPattern<V>[]>;

constructor(readonly inputs: TreeItemInputs<V>) {
this.id = inputs.id;
this.value = inputs.value;
Expand Down Expand Up @@ -295,6 +319,48 @@ export class TreePattern<V> {
return manager;
});

/** A unique identifier for the tree. */
id: SignalLike<string>;

/** Whether the tree is in navigation mode. */
nav: SignalLike<boolean>;

/** The aria-current type. */
currentType: SignalLike<'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'>;

/** All items in the tree, in document order (DFS-like, a flattened list). */
allItems: SignalLike<TreeItemPattern<V>[]>;

/** Whether the tree is disabled. */
disabled: SignalLike<boolean>;

/** The currently active item in the tree. */
activeItem: WritableSignalLike<TreeItemPattern<V> | undefined> = signal(undefined);

/** Whether disabled items should be skipped when navigating. */
skipDisabled: SignalLike<boolean>;

/** Whether the focus should wrap when navigating past the first or last item. */
wrap: SignalLike<boolean>;

/** The orientation of the tree. */
orientation: SignalLike<'vertical' | 'horizontal'>;

/** The text direction of the tree. */
textDirection: SignalLike<'ltr' | 'rtl'>;

/** Whether multiple items can be selected at the same time. */
multi: SignalLike<boolean>;

/** The selection mode of the tree. */
selectionMode: SignalLike<'follow' | 'explicit'>;

/** The delay in milliseconds to wait before clearing the typeahead buffer. */
typeaheadDelay: SignalLike<number>;

/** The current value of the tree (the selected items). */
value: WritableSignalLike<V[]>;

constructor(readonly inputs: TreeInputs<V>) {
this.id = inputs.id;
this.nav = inputs.nav;
Expand Down
Loading