@oscarpalmer/tabela 0.10.0 → 0.11.0

package/src/managers/navigation.manager.ts

@@ -0,0 +1,145 @@
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import type {Key} from '@oscarpalmer/atoms/models';
+import {clamp} from '@oscarpalmer/atoms/number';
+import {getKey} from '../helpers/misc.helpers';
+import type {TabelaState} from '../models/tabela.model';
+
+export class NavigationManager {
+	active: Key | undefined;
+
+	constructor(public state: TabelaState) {}
+
+	destroy(): void {
+		this.state = undefined as never;
+	}
+
+	handle(event: KeyboardEvent): void {
+		if (!allKeys.has(event.key)) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const {components, id, managers} = this.state;
+
+		const activeDescendant = components.body.elements.group.getAttribute('aria-activedescendant');
+
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const {length} = keys;
+
+		let next: number;
+
+		if (isNullableOrWhitespace(activeDescendant)) {
+			next = getDefaultIndex(event.key, length);
+		} else {
+			next = getIndex(event, activeDescendant, id, keys)!;
+		}
+
+		if (next != null) {
+			this.setActive(keys.at(next)!);
+		}
+	}
+
+	setActive(key: Key | undefined, scroll?: boolean): void {
+		const {components, managers, options} = this.state;
+
+		this.active = key;
+
+		const active = components.body.elements.group.querySelectorAll('[data-active="true"]');
+
+		for (const item of active) {
+			item.setAttribute('data-active', 'false');
+		}
+
+		const row = managers.row.get(key!);
+
+		if (row != null) {
+			row.element?.setAttribute('data-active', 'true');
+
+			if (scroll ?? true) {
+				if (row.element == null) {
+					components.body.elements.group.scrollTo({
+						top: managers.data.getIndex(key!) * options.rowHeight,
+						behavior: 'smooth',
+					});
+				} else {
+					row.element.scrollIntoView({
+						block: 'nearest',
+					});
+				}
+			}
+		}
+
+		components.body.elements.group.setAttribute(
+			'aria-activedescendant',
+			row == null ? '' : `tabela_${this.state.id}_row_${key}`,
+		);
+	}
+}
+
+function getDefaultIndex(key: string, max: number): number {
+	switch (true) {
+		case negativeDefaultKeys.has(key):
+			return -1;
+
+		case key === 'PageDown':
+			return Math.min(9, max - 1);
+
+		case key === 'PageUp':
+			return max < 10 ? 0 : max - 10;
+
+		default:
+			return 0;
+	}
+}
+
+function getIndex(
+	event: KeyboardEvent,
+	active: string,
+	id: number,
+	keys: Key[],
+): number | undefined {
+	const key = getKey(active.replace(`tabela_${id}_row_`, ''));
+
+	if (key == null) {
+		return;
+	}
+
+	if (absoluteKeys.has(event.key)) {
+		return event.key === 'Home' ? 0 : keys.length - 1;
+	}
+
+	const index = keys.indexOf(key);
+	const offset = getOffset(event.key);
+
+	return clamp(index + offset, 0, keys.length - 1, true);
+}
+
+function getOffset(key: string): number {
+	switch (key) {
+		case 'ArrowDown':
+			return 1;
+
+		case 'ArrowUp':
+			return -1;
+
+		case 'PageDown':
+			return 10;
+
+		case 'PageUp':
+			return -10;
+
+		default:
+			return 0;
+	}
+}
+
+const absoluteKeys = new Set(['End', 'Home']);
+
+const arrowKeys = new Set(['ArrowDown', 'ArrowUp']);
+
+const negativeDefaultKeys = new Set(['ArrowUp', 'End']);
+
+const pageKeys = new Set(['PageDown', 'PageUp']);
+
+const allKeys = new Set([...absoluteKeys, ...arrowKeys, ...pageKeys]);

package/src/managers/render.manager.ts

@@ -3,21 +3,21 @@ import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {removeRow, renderRow} from '../components/row.component';
 import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
-import type {TabelaComponents, TabelaManagers} from '../models/tabela.model';
+import type {TabelaState} from '../models/tabela.model';
 
 function getRange(this: RenderManager, down: boolean): RenderRange {
-	const {components, managers} = this;
+	const {components, managers, options} = this.state;
 	const {clientHeight, scrollTop} = components.body.elements.group;
 
-	const first = Math.floor(scrollTop / managers.row.height);
+	const first = Math.floor(scrollTop / options.rowHeight);
 
 	const last = Math.min(
 		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
-		Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1,
+		Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1,
 	);
 
-	const before = Math.ceil(clientHeight / managers.row.height) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / managers.row.height) * (down ? 2 : 1);
+	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
+	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
 
 	const start = Math.max(0, first - before);
 
@@ -30,17 +30,19 @@ function getRange(this: RenderManager, down: boolean): RenderRange {
 }
 
 function onScroll(this: RenderManager): void {
-	if (!this.state.active) {
+	const {state} = this;
+
+	if (!state.active) {
 		requestAnimationFrame(() => {
-			const top = this.components.body.elements.group.scrollTop;
+			const top = state.components.body.elements.group.scrollTop;
 
-			this.update(top > this.state.top);
+			this.update(top > state.top);
 
-			this.state.active = false;
-			this.state.top = top;
+			state.active = false;
+			state.top = top;
 		});
 
-		this.state.active = true;
+		state.active = true;
 	}
 }
 
@@ -49,23 +51,23 @@ export class RenderManager {
 
 	listener: RemovableEventListener;
 
-	readonly pool: RenderElementPool = {
+	pool: RenderElementPool = {
 		cells: {},
 		rows: [],
 	};
 
-	readonly state: RenderState = {
-		active: false,
-		top: 0,
-	};
+	state: RenderState;
 
 	visible = new Map<number, Key>();
 
-	constructor(
-		public managers: TabelaManagers,
-		public components: TabelaComponents,
-	) {
-		this.listener = on(components.body.elements.group, 'scroll', onScroll.bind(this));
+	constructor(state: TabelaState) {
+		this.listener = on(state.components.body.elements.group, 'scroll', onScroll.bind(this));
+
+		this.state = {
+			...state,
+			active: false,
+			top: 0,
+		};
 	}
 
 	destroy(): void {
@@ -77,12 +79,15 @@ export class RenderManager {
 		pool.cells = {};
 		pool.rows = [];
 
+		this.fragment = undefined as never;
 		this.listener = undefined as never;
+		this.pool = undefined as never;
+		this.state = undefined as never;
 		this.visible = undefined as never;
 	}
 
 	removeCells(fields: string[]): void {
-		const {managers, pool, visible} = this;
+		const {pool, state, visible} = this;
 		const {length} = fields;
 
 		for (let index = 0; index < length; index += 1) {
@@ -90,7 +95,7 @@ export class RenderManager {
 		}
 
 		for (const [, key] of visible) {
-			const row = managers.row.get(key);
+			const row = state.managers.row.get(key);
 
 			if (row == null || row.element == null) {
 				continue;
@@ -115,9 +120,10 @@ export class RenderManager {
 	}
 
 	update(down: boolean, rerender?: boolean): void {
-		const {components, managers, pool, visible} = this;
+		const {state, pool, visible} = this;
+		const {components, managers, options} = state;
 
-		components.body.elements.faker.style.height = `${managers.data.size * managers.row.height}px`;
+		components.body.elements.faker.style.height = `${managers.data.size * options.rowHeight}px`;
 
 		const indices = new Set<number>();
 		const range = getRange.call(this, down);
@@ -160,12 +166,12 @@ export class RenderManager {
 
 			count += 1;
 
-			renderRow(managers, row);
+			renderRow(state, row);
 
 			visible.set(index, key);
 
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
+				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
 
 				fragment.append(row.element);
 			}

package/src/managers/row.manager.ts

@@ -1,29 +1,24 @@
 import type {Key} from '@oscarpalmer/atoms/models';
 import {removeRow, renderRow, RowComponent} from '../components/row.component';
-import type {TabelaManagers} from '../models/tabela.model';
+import type {TabelaState} from '../models/tabela.model';
 
 export class RowManager {
-	readonly components: Map<Key, RowComponent> = new Map();
+	components = new Map<Key, RowComponent>();
 
-	readonly height: number;
-
-	constructor(
-		readonly managers: TabelaManagers,
-		rowHeight: number,
-	) {
-		this.height = rowHeight;
-	}
+	constructor(public state: TabelaState) {}
 
 	destroy(): void {
 		const components = [...this.components.values()];
-
 		const {length} = components;
 
 		for (let index = 0; index < length; index += 1) {
-			removeRow(this.managers.render.pool, components[index]);
+			removeRow(this.state.managers.render.pool, components[index]);
 		}
 
 		this.components.clear();
+
+		this.components = undefined as never;
+		this.state = undefined as never;
 	}
 
 	get(key: Key): RowComponent | undefined {
@@ -46,7 +41,7 @@ export class RowManager {
 		const row = this.components.get(key);
 
 		if (row != null) {
-			removeRow(this.managers.render.pool, row);
+			removeRow(this.state.managers.render.pool, row);
 
 			this.components.delete(key);
 		}
@@ -56,7 +51,7 @@ export class RowManager {
 		const row = this.components.get(key);
 
 		if (row != null) {
-			renderRow(this.managers, row);
+			renderRow(this.state, row);
 		}
 	}
 }

package/src/managers/selection.manager.ts

@@ -6,7 +6,7 @@ import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {createElement} from '../helpers/dom.helpers';
 import {getKey} from '../helpers/misc.helpers';
 import {dragStyling} from '../helpers/style.helper';
-import type {TabelaManagers, TabelaSelection} from '../models/tabela.model';
+import type {TabelaSelection, TabelaState} from '../models/tabela.model';
 
 export class SelectionManager {
 	handlers = Object.freeze({
@@ -20,11 +20,8 @@ export class SelectionManager {
 
 	last: Key | undefined;
 
-	constructor(
-		public element: HTMLElement,
-		readonly managers: TabelaManagers,
-	) {
-		mapped.set(element, this);
+	constructor(public state: TabelaState) {
+		mapped.set(state.element, this);
 	}
 
 	clear(): void {
@@ -58,11 +55,12 @@ export class SelectionManager {
 	}
 
 	destroy(): void {
-		mapped.delete(this.element);
+		mapped.delete(this.state.element);
 
 		this.handlers = undefined as never;
-		this.element = undefined as never;
 		this.items = undefined as never;
+		this.last = undefined;
+		this.state = undefined as never;
 	}
 
 	handle(event: MouseEvent, target: HTMLElement): void {
@@ -76,20 +74,18 @@ export class SelectionManager {
 
 		if (event.shiftKey) {
 			if (this.last == null) {
-				this.last = key;
-
-				return;
+				this.state.managers.navigation.setActive(key, false);
+			} else {
+				this.range(this.last, key);
 			}
 
-			this.range(this.last, key);
-
-			this.last = key;
-
 			return;
 		}
 
 		this.last = key;
 
+		this.state.managers.navigation.setActive(key, false);
+
 		if (event.ctrlKey || event.metaKey) {
 			if (items.has(key)) {
 				this.deselect([key]);
@@ -100,18 +96,12 @@ export class SelectionManager {
 			return;
 		}
 
-		if (items.has(key)) {
-			if (items.size === 1) {
-				this.clear();
-			} else {
-				this.set([key]);
-			}
-		} else {
-			this.set([key]);
-		}
+		this.set([key]);
 	}
 
 	range(from: Key | HTMLElement, to: Key | HTMLElement): void {
+		const {state} = this;
+
 		const keyed = isKey(from) && isKey(to);
 
 		const fromKey = keyed ? (from as Key) : getKey((from as HTMLElement).getAttribute('data-key'))!;
@@ -121,10 +111,10 @@ export class SelectionManager {
 			return;
 		}
 
-		const keys = this.managers.data.values.keys.active ?? this.managers.data.values.keys.original;
+		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
 
-		const fromIndex = keys.indexOf(fromKey);
-		const toIndex = keys.indexOf(toKey);
+		const fromIndex = state.managers.data.getIndex(fromKey);
+		const toIndex = state.managers.data.getIndex(toKey);
 
 		if (fromIndex === -1 || toIndex === -1) {
 			return;
@@ -143,6 +133,10 @@ export class SelectionManager {
 		} else {
 			this.set(selected);
 		}
+
+		this.last = toKey;
+
+		this.state.managers.navigation.setActive(toKey, false);
 	}
 
 	select(keys: Key[]): void {
@@ -181,9 +175,9 @@ export class SelectionManager {
 	}
 
 	toggle(): void {
-		const {items, managers} = this;
+		const {items, state} = this;
 
-		const all = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
 
 		if (items.size === all.length) {
 			this.clear();
@@ -203,7 +197,7 @@ export class SelectionManager {
 		for (let index = 0; index < length; index += 1) {
 			const {key, removed} = items[index];
 
-			const row = this.managers.row.get(key);
+			const row = this.state.managers.row.get(key);
 
 			if (row == null || row.element == null) {
 				continue;

package/src/managers/sort.manager.ts

@@ -2,7 +2,7 @@ import {sort, type ArrayKeySorter} from '@oscarpalmer/atoms/array';
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
 import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
 import type {SortDirection, SortItem} from '../models/sort.model';
-import type {TabelaManagers, TabelaSort} from '../models/tabela.model';
+import type {TabelaSort, TabelaState} from '../models/tabela.model';
 
 export class SortManager {
 	handlers = Object.freeze({
@@ -13,9 +13,9 @@ export class SortManager {
 		set: items => this.set(items),
 	} satisfies TabelaSort);
 
-	readonly items: ArrayKeySorter<PlainObject>[] = [];
+	items: ArrayKeySorter<PlainObject>[] = [];
 
-	constructor(readonly managers: TabelaManagers) {}
+	constructor(public state: TabelaState) {}
 
 	add(field: string, direction?: SortDirection): void {
 		const index = this.items.findIndex(item => item.key === field);
@@ -50,7 +50,8 @@ export class SortManager {
 
 	destroy(): void {
 		this.handlers = undefined as never;
-		this.items.length = 0;
+		this.items = undefined as never;
+		this.state = undefined as never;
 	}
 
 	flip(field: string): void {
@@ -94,12 +95,12 @@ export class SortManager {
 	}
 
 	sort(): void {
-		const {items, managers} = this;
+		const {items, state} = this;
 
-		const {length} = managers.column.items;
+		const {length} = state.managers.column.items;
 
 		for (let index = 0; index < length; index += 1) {
-			const column = managers.column.items[index];
+			const column = state.managers.column.items[index];
 
 			const sorterIndex = items.findIndex(item => item.key === column.options.field);
 			const sorterItem = items[sorterIndex];
@@ -117,18 +118,17 @@ export class SortManager {
 			);
 		}
 
-		managers.data.values.keys.active =
+		state.managers.data.values.keys.active =
 			items.length === 0
 				? undefined
 				: (sort(
-						managers.data.values.keys.active?.map(
-								key => managers.data.values.objects.mapped.get(key)!,
-							) ??
-							managers.data.values.objects.array,
+						state.managers.data.values.keys.active?.map(
+							key => state.managers.data.values.objects.mapped.get(key)!,
+						) ?? state.managers.data.values.objects.array,
 						items,
-					).map(row => row[managers.data.field]) as Key[]);
+					).map(row => row[state.key]) as Key[]);
 
-		managers.render.update(true, true);
+		state.managers.render.update(true, true);
 	}
 
 	toggle(event: MouseEvent, field: string, direction?: string | null): void {

package/src/models/render.model.ts

@@ -1,3 +1,5 @@
+import type {TabelaState} from './tabela.model';
+
 export type RenderElementPool = {
 	cells: Record<string, HTMLDivElement[]>;
 	rows: HTMLDivElement[];
@@ -11,4 +13,4 @@ export type RenderRange = {
 export type RenderState = {
 	active: boolean;
 	top: number;
-};
+} & TabelaState;

package/src/models/tabela.model.ts

@@ -6,12 +6,14 @@ import type {ColumnManager} from '../managers/column.manager';
 import type {DataManager} from '../managers/data.manager';
 import type {EventManager} from '../managers/event.manager';
 import type {FilterManager} from '../managers/filter.manager';
+import type {NavigationManager} from '../managers/navigation.manager';
 import type {RenderManager} from '../managers/render.manager';
 import type {RowManager} from '../managers/row.manager';
 import type {SelectionManager} from '../managers/selection.manager';
 import type {SortManager} from '../managers/sort.manager';
 import type {FilterItem} from './filter.model';
 import type {SortDirection, SortItem} from './sort.model';
+import type {TabelaOptions} from './tabela.options';
 
 export type TabelaComponents = {
 	body: BodyComponent;
@@ -42,6 +44,7 @@ export type TabelaManagers = {
 	data: DataManager;
 	event: EventManager;
 	filter: FilterManager;
+	navigation: NavigationManager;
 	row: RowManager;
 	selection: SelectionManager;
 	sort: SortManager;
@@ -62,3 +65,12 @@ export type TabelaSort = {
 	remove(field: string): void;
 	set(items: SortItem[]): void;
 };
+
+export type TabelaState = {
+	readonly components: TabelaComponents;
+	readonly element: HTMLElement;
+	readonly id: number;
+	readonly key: string;
+	readonly managers: TabelaManagers;
+	readonly options: TabelaOptions;
+};

package/src/tabela.ts

@@ -5,10 +5,11 @@ import {ColumnManager} from './managers/column.manager';
 import {DataManager} from './managers/data.manager';
 import {EventManager} from './managers/event.manager';
 import {FilterManager} from './managers/filter.manager';
+import {NavigationManager} from './managers/navigation.manager';
+import {RenderManager} from './managers/render.manager';
 import {RowManager} from './managers/row.manager';
 import {SelectionManager} from './managers/selection.manager';
 import {SortManager} from './managers/sort.manager';
-import {RenderManager} from './managers/render.manager';
 import type {
 	TabelaComponents,
 	TabelaData,
@@ -16,6 +17,7 @@ import type {
 	TabelaManagers,
 	TabelaSelection,
 	TabelaSort,
+	TabelaState,
 } from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
@@ -28,6 +30,8 @@ export class Tabela {
 
 	#element: HTMLElement;
 
+	#id = getId();
+
 	readonly #key: string;
 
 	readonly #managers: TabelaManagers = {
@@ -35,6 +39,7 @@ export class Tabela {
 		data: undefined as never,
 		event: undefined as never,
 		filter: undefined as never,
+		navigation: undefined as never,
 		render: undefined as never,
 		row: undefined as never,
 		selection: undefined as never,
@@ -69,14 +74,24 @@ export class Tabela {
 		this.#components.body = new BodyComponent();
 		this.#components.footer = new FooterComponent();
 
-		this.#managers.column = new ColumnManager(this.#managers, this.#components, options.columns);
-		this.#managers.data = new DataManager(this.#managers, this.#components, options.key);
-		this.#managers.event = new EventManager(this.#element, this.#managers);
-		this.#managers.filter = new FilterManager(this.#managers);
-		this.#managers.render = new RenderManager(this.#managers, this.#components);
-		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
-		this.#managers.selection = new SelectionManager(this.#element, this.#managers);
-		this.#managers.sort = new SortManager(this.#managers);
+		const state: TabelaState = {
+			element,
+			options,
+			components: this.#components,
+			id: this.#id,
+			key: this.#key,
+			managers: this.#managers,
+		};
+
+		this.#managers.column = new ColumnManager(state);
+		this.#managers.data = new DataManager(state);
+		this.#managers.event = new EventManager(state);
+		this.#managers.filter = new FilterManager(state);
+		this.#managers.navigation = new NavigationManager(state);
+		this.#managers.render = new RenderManager(state);
+		this.#managers.row = new RowManager(state);
+		this.#managers.selection = new SelectionManager(state);
+		this.#managers.sort = new SortManager(state);
 
 		element.append(
 			this.#components.header.elements.group,
@@ -105,8 +120,10 @@ export class Tabela {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
+		// managers.navigation.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
+		managers.selection.destroy();
 		managers.sort.destroy();
 
 		element.innerHTML = '';
@@ -119,3 +136,11 @@ export class Tabela {
 		this.#element = undefined as never;
 	}
 }
+
+function getId(): number {
+	id += 1;
+
+	return id;
+}
+
+let id = 0;

package/types/components/row.component.d.ts

@@ -1,8 +1,8 @@
 import type { Key } from '@oscarpalmer/atoms/models';
 import type { RenderElementPool } from '../models/render.model';
-import type { TabelaManagers } from '../models/tabela.model';
+import type { TabelaState } from '../models/tabela.model';
 export declare function removeRow(pool: RenderElementPool, row: RowComponent): void;
-export declare function renderRow(managers: TabelaManagers, row: RowComponent): void;
+export declare function renderRow(state: TabelaState, row: RowComponent): void;
 export declare class RowComponent {
     readonly key: Key;
     cells: Record<string, HTMLDivElement>;