@oscarpalmer/tabela 0.12.0 → 0.13.0

package/src/managers/group.manager.ts

@@ -2,7 +2,9 @@ import {sort} from '@oscarpalmer/atoms/array';
 import {toRecord} from '@oscarpalmer/atoms/array/to-record';
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import type {Key, Simplify} from '@oscarpalmer/atoms/models';
-import type {GroupComponent} from '../components/group.component';
+import {getString} from '@oscarpalmer/atoms/string';
+import {removeGroup, type GroupComponent} from '../components/group.component';
+import type {TabelaGroup} from '../models/group.model';
 import type {State} from '../models/tabela.model';
 
 export class GroupManager {
@@ -12,11 +14,24 @@ export class GroupManager {
 
 	field!: string;
 
+	handlers = Object.freeze({
+		set: (group?: string) => {
+			if (group === this.field) {
+				return;
+			}
+
+			this.enabled = !isNullableOrWhitespace(group);
+			this.field = group ?? '';
+
+			this.state.managers.data.set(this.state.managers.data.get());
+		},
+	} satisfies TabelaGroup);
+
 	items: GroupComponent[] = [];
 
 	order: Record<never, number> = {};
 
-	constructor(readonly state: State) {
+	constructor(public state: State) {
 		if (isNullableOrWhitespace(state.options.grouping)) {
 			return;
 		}
@@ -29,13 +44,38 @@ export class GroupManager {
 		this.set([...this.items, group]);
 	}
 
+	clear(): void {
+		const groups = this.items.splice(0);
+		const {length} = groups;
+
+		for (let index = 0; index < length; index += 1) {
+			this.remove(groups[index]);
+		}
+	}
+
+	destroy(): void {
+		const groups = this.items.splice(0);
+		const {length} = groups;
+
+		for (let index = 0; index < length; index += 1) {
+			removeGroup(groups[index]);
+		}
+
+		this.collapsed.clear();
+
+		this.handlers = undefined as never;
+		this.state = undefined as never;
+	}
+
 	get(value: unknown) {
-		return this.items.find(item => item.value === value);
+		const asString = getString(value);
+
+		return this.items.find(item => item.value.stringified === asString);
 	}
 
 	handle(button: HTMLElement): void {
-		const key = button.dataset.key;
-		const group = this.get(key);
+		const value = button.dataset.key?.replace(`tabela_${this.state.id}_group:`, '');
+		const group = this.get(value);
 
 		if (group == null) {
 			return;
@@ -47,15 +87,15 @@ export class GroupManager {
 
 		const index = items.indexOf(group);
 
-		let first = state.managers.data.values.keys.original.indexOf(items[index]) + 1;
+		let first = state.managers.data.state.items.original.indexOf(items[index]) + 1;
 
 		const last =
 			items[index + 1] == null
-				? state.managers.data.keys.length - 1
-				: state.managers.data.values.keys.original.indexOf(items[index + 1]) - 1;
+				? state.managers.data.state.items.original.length - 1
+				: state.managers.data.state.items.original.indexOf(items[index + 1]) - 1;
 
 		for (; first <= last; first += 1) {
-			const key = state.managers.data.values.keys.original[first] as Key;
+			const key = state.managers.data.state.items.original[first] as Key;
 
 			if (group.expanded) {
 				collapsed.delete(key);
@@ -64,16 +104,28 @@ export class GroupManager {
 			}
 		}
 
-		state.managers.render.update(true, true);
+		if (Object.keys(state.managers.filter.items).length > 0) {
+			state.managers.filter.filter();
+		} else if (state.managers.sort.items.length > 0) {
+			state.managers.sort.sort();
+		} else {
+			state.managers.render.update(true, true);
+		}
 	}
 
 	remove(group: GroupComponent): void {
+		removeGroup(group);
+
 		this.set(this.items.filter(item => item !== group));
 	}
 
 	set(items: GroupComponent[]) {
 		this.items = sort(items, item => item.label);
 
-		this.order = toRecord(items as Simplify<GroupComponent>[], 'value', (_, index) => index);
+		this.order = toRecord(
+			items as Simplify<GroupComponent>[],
+			group => group.value.stringified,
+			(_, index) => index,
+		);
 	}
 }

package/src/managers/navigation.manager.ts

@@ -1,12 +1,12 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
-import type {Key} from '@oscarpalmer/atoms/models';
 import {clamp} from '@oscarpalmer/atoms/number';
-import type {GroupComponent} from '../components/group.component';
 import {getKey} from '../helpers/misc.helpers';
+import type {DataItem} from '../models/data.model';
 import type {State} from '../models/tabela.model';
+import {GroupComponent} from '../components/group.component';
 
 export class NavigationManager {
-	active: Key | undefined;
+	active: DataItem | undefined;
 
 	constructor(public state: State) {}
 
@@ -25,26 +25,26 @@ export class NavigationManager {
 
 		const activeDescendant = components.body.elements.group.getAttribute('aria-activedescendant');
 
-		const {keys} = managers.data;
-		const {length} = keys;
+		const {items} = managers.data;
+		const {length} = items;
 
 		let next: number;
 
 		if (isNullableOrWhitespace(activeDescendant)) {
 			next = getDefaultIndex(event.key, length);
 		} else {
-			next = getIndex(event, activeDescendant, id, keys)!;
+			next = getIndex(this.state, event, activeDescendant, id)!;
 		}
 
 		if (next != null) {
-			this.setActive(keys.at(next) as Key);
+			this.setActive(items.at(next));
 		}
 	}
 
-	setActive(key: Key | undefined, scroll?: boolean): void {
-		const {components, managers, options} = this.state;
+	setActive(item: DataItem | undefined, scroll?: boolean): void {
+		const {components, id, managers, options} = this.state;
 
-		this.active = key;
+		this.active = item;
 
 		const active = components.body.elements.group.querySelectorAll('[data-active="true"]');
 
@@ -52,19 +52,19 @@ export class NavigationManager {
 			item.setAttribute('data-active', 'false');
 		}
 
-		const row = managers.row.get(key!);
+		const component = item instanceof GroupComponent ? item : managers.row.get(item!, false);
 
-		if (row != null) {
-			row.element?.setAttribute('data-active', 'true');
+		if (component != null) {
+			component.element?.setAttribute('data-active', 'true');
 
 			if (scroll ?? true) {
-				if (row.element == null) {
+				if (component.element == null) {
 					components.body.elements.group.scrollTo({
-						top: managers.data.getIndex(key!) * options.rowHeight,
+						top: managers.data.getIndex(item!) * options.rowHeight,
 						behavior: 'smooth',
 					});
 				} else {
-					row.element.scrollIntoView({
+					component.element.scrollIntoView({
 						block: 'nearest',
 					});
 				}
@@ -73,7 +73,7 @@ export class NavigationManager {
 
 		components.body.elements.group.setAttribute(
 			'aria-activedescendant',
-			row == null ? '' : `tabela_${this.state.id}_row_${key}`,
+			component == null ? '' : `tabela_${id}_${component.key}`,
 		);
 	}
 }
@@ -95,25 +95,26 @@ function getDefaultIndex(key: string, max: number): number {
 }
 
 function getIndex(
+	state: State,
 	event: KeyboardEvent,
 	active: string,
 	id: number,
-	keys: Array<GroupComponent | Key>,
 ): number | undefined {
-	const key = getKey(active.replace(`tabela_${id}_row_`, ''));
+	const key = getKey(active.replace(`tabela_${id}_`, ''));
 
 	if (key == null) {
 		return;
 	}
 
 	if (absoluteKeys.has(event.key)) {
-		return event.key === 'Home' ? 0 : keys.length - 1;
+		return event.key === 'Home' ? 0 : state.managers.data.size - 1;
 	}
 
-	const index = keys.indexOf(key);
+	const index = state.managers.data.getIndex(key);
+
 	const offset = getOffset(event.key);
 
-	return clamp(index + offset, 0, keys.length - 1, true);
+	return clamp(index + offset, 0, state.managers.data.size - 1, true);
 }
 
 function getOffset(key: string): number {

package/src/managers/render.manager.ts

@@ -1,29 +1,29 @@
-import type {Key} from '@oscarpalmer/atoms/models';
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {GroupComponent, renderGroup} from '../components/group.component';
 import {removeRow, renderRow} from '../components/row.component';
+import type {DataItem} from '../models/data.model';
 import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
 import type {State} from '../models/tabela.model';
 
 function getRange(state: State, down: boolean): RenderRange {
-	const {components, managers, options} = state;
-	const {clientHeight, scrollTop} = components.body.elements.group;
+	const {element, managers, options} = state;
+	const {clientHeight, scrollTop} = element;
 
-	const {keys} = managers.data;
+	const {items} = managers.data;
 
-	const first = Math.floor(scrollTop / options.rowHeight);
+	const firstIndex = Math.floor(scrollTop / options.rowHeight);
+	const lastIndex = items.length - managers.group.collapsed.size - 1;
 
-	const last = Math.min(
-		keys.length - managers.group.collapsed.size - 1,
-		Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1,
-	);
+	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
 
-	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
+	const visible = clientHeight / options.rowHeight;
 
-	const start = Math.max(0, first - before);
-	const end = Math.min(keys.length - managers.group.collapsed.size - 1, last + after);
+	const before = Math.ceil(visible) * (down ? 1 : 2);
+	const after = Math.ceil(visible) * (down ? 2 : 1);
+
+	const start = Math.max(0, firstIndex - before);
+	const end = Math.min(lastIndex, last + after);
 
 	return {end, start};
 }
@@ -33,7 +33,7 @@ function onScroll(this: RenderManager): void {
 
 	if (!state.active) {
 		requestAnimationFrame(() => {
-			const top = state.components.body.elements.group.scrollTop;
+			const top = state.element.scrollTop;
 
 			this.update(top > state.top);
 
@@ -57,10 +57,10 @@ export class RenderManager {
 
 	state: RenderState;
 
-	visible = new Map<number, GroupComponent | Key>();
+	visible = new Map<number, DataItem>();
 
 	constructor(state: State) {
-		this.listener = on(state.components.body.elements.group, 'scroll', onScroll.bind(this));
+		this.listener = on(state.element, 'scroll', onScroll.bind(this));
 
 		this.state = {
 			...state,
@@ -75,6 +75,20 @@ export class RenderManager {
 		listener();
 		visible.clear();
 
+		const cells = Object.values(pool.cells).flat();
+
+		let {length} = cells;
+
+		for (let index = 0; index < length; index += 1) {
+			cells[index].remove();
+		}
+
+		length = pool.rows.length;
+
+		for (let index = 0; index < length; index += 1) {
+			pool.rows[index].remove();
+		}
+
 		pool.cells = {};
 		pool.rows = [];
 
@@ -98,7 +112,7 @@ export class RenderManager {
 				continue;
 			}
 
-			const row = state.managers.row.get(key);
+			const row = state.managers.row.get(key, false);
 
 			if (row == null || row.element == null) {
 				continue;
@@ -149,7 +163,7 @@ export class RenderManager {
 				continue;
 			}
 
-			const row = managers.row.get(key);
+			const row = managers.row.get(key, false);
 
 			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
 				visible.delete(index);
@@ -162,7 +176,7 @@ export class RenderManager {
 
 		const fragment = this.getFragment();
 
-		const {keys} = managers.data;
+		const {items} = managers.data;
 
 		let count = 0;
 		let offset = 0;
@@ -172,31 +186,31 @@ export class RenderManager {
 				continue;
 			}
 
-			const key = keys[index];
+			const item = items[index];
 
-			if (key instanceof GroupComponent) {
+			if (item instanceof GroupComponent) {
 				count += 1;
 
-				renderGroup(state, key);
+				renderGroup(state, item);
 
-				visible.set(index, key);
+				visible.set(index, item);
 
-				if (key.element != null) {
-					key.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+				if (item.element != null) {
+					item.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 
-					fragment.append(key.element);
+					fragment.append(item.element);
 				}
 
 				continue;
 			}
 
-			const row = managers.row.get(key);
+			const row = managers.row.get(item, true);
 
 			if (row == null) {
 				continue;
 			}
 
-			if (managers.group.collapsed.has(key)) {
+			if (managers.group.collapsed.has(item)) {
 				offset += 1;
 
 				continue;
@@ -206,7 +220,7 @@ export class RenderManager {
 
 			renderRow(state, row);
 
-			visible.set(index, key);
+			visible.set(index, item);
 
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;

package/src/managers/row.manager.ts

@@ -7,24 +7,30 @@ export class RowManager {
 
 	constructor(public state: State) {}
 
-	destroy(): void {
-		const components = [...this.components.values()];
-		const {length} = components;
+	clear(): void {
+		const {components} = this;
+
+		const rows = [...components.values()];
+		const {length} = rows;
 
 		for (let index = 0; index < length; index += 1) {
-			removeRow(this.state.managers.render.pool, components[index]);
+			this.removeRow(rows[index]);
 		}
 
-		this.components.clear();
+		components.clear();
+	}
+
+	destroy(): void {
+		this.clear();
 
 		this.components = undefined as never;
 		this.state = undefined as never;
 	}
 
-	get(key: Key): RowComponent | undefined {
+	get(key: Key, create: boolean): RowComponent | undefined {
 		let row = this.components.get(key);
 
-		if (row == null) {
+		if (row == null && create) {
 			row = new RowComponent(key);
 
 			this.components.set(key, row);
@@ -41,10 +47,16 @@ export class RowManager {
 		const row = this.components.get(key);
 
 		if (row != null) {
-			removeRow(this.state.managers.render.pool, row);
+			this.removeRow(row);
+		}
+	}
 
-			this.components.delete(key);
+	removeRow(row: RowComponent): void {
+		if (row.element != null) {
+			removeRow(this.state.managers.render.pool, row);
 		}
+
+		this.components.delete(row.key);
 	}
 
 	update(key: Key): void {

package/src/managers/selection.manager.ts

@@ -4,12 +4,17 @@ import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import type {EventPosition} from '@oscarpalmer/toretto/models';
+import {GroupComponent} from '../components/group.component';
 import {createElement} from '../helpers/dom.helpers';
 import {getKey} from '../helpers/misc.helpers';
-import {dragStyling} from '../helpers/style.helper';
+import {preventSelection} from '../helpers/style.helper';
 import type {TabelaSelection} from '../models/selection.model';
+import {
+	CSS_TABELA_ROW_BODY,
+	CSS_TABELA_ROW_SELECTED,
+	CSS_TABELA_SELECTION,
+} from '../models/style.model';
 import type {State} from '../models/tabela.model';
-import {GroupComponent} from '../components/group.component';
 
 export class SelectionManager {
 	handlers = Object.freeze({
@@ -117,7 +122,7 @@ export class SelectionManager {
 			return;
 		}
 
-		const {keys} = state.managers.data;
+		const {items} = state.managers.data;
 
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
@@ -131,10 +136,10 @@ export class SelectionManager {
 		const selected: Key[] = [];
 
 		for (let index = start; index <= end; index += 1) {
-			const key = keys[index];
+			const item = items[index];
 
-			if (!(key instanceof GroupComponent)) {
-				selected.push(key);
+			if (!(item instanceof GroupComponent)) {
+				selected.push(item as Key);
 			}
 		}
 
@@ -184,38 +189,40 @@ export class SelectionManager {
 
 	toggle(): void {
 		const {items, state} = this;
-		const {keys} = state.managers.data;
+		const data = state.managers.data.items;
 
-		if (items.size === keys.length - state.managers.group.items.length) {
+		if (items.size === data.length - state.managers.group.items.length) {
 			this.clear();
 		} else {
-			this.set(keys.filter(key => !(key instanceof GroupComponent)) as Key[]);
+			this.set(data.filter(key => !(key instanceof GroupComponent)) as Key[]);
 		}
 	}
 
 	update(removed: Key[]): void {
+		const {state} = this;
+
 		const items = [
 			...removed.map(key => ({key, removed: true})),
 			...[...this.items].map(key => ({key, removed: false})),
 		];
 
-		const {length} = items;
+		let {length} = items;
 
 		for (let index = 0; index < length; index += 1) {
 			const {key, removed} = items[index];
 
-			const row = this.state.managers.row.get(key);
+			const element = state.managers.row.get(key, false)?.element;
 
-			if (row == null || row.element == null) {
+			if (element == null) {
 				continue;
 			}
 
-			setAttribute(row.element, 'aria-selected', String(!removed));
+			setAttribute(element, 'aria-selected', String(!removed));
 
 			if (removed) {
-				row.element.classList.remove('tabela__row--selected');
+				element.classList.remove(CSS_TABELA_ROW_SELECTED);
 			} else {
-				row.element.classList.add('tabela__row--selected');
+				element.classList.add(CSS_TABELA_ROW_SELECTED);
 			}
 		}
 	}
@@ -225,7 +232,7 @@ function getPlaceholder(): HTMLElement {
 	placeholder ??= createElement(
 		'div',
 		{
-			className: 'tabela__selection--placeholder',
+			className: CSS_TABELA_SELECTION,
 		},
 		{},
 		{},
@@ -236,7 +243,7 @@ function getPlaceholder(): HTMLElement {
 
 function onMouseDown(event: MouseEvent): void {
 	if (shifted) {
-		const row = findAncestor(event.target as HTMLElement, '.tabela__row--body');
+		const row = findAncestor(event.target as HTMLElement, `.${CSS_TABELA_ROW_BODY}`);
 
 		if (!(row instanceof HTMLElement)) {
 			return;
@@ -245,7 +252,7 @@ function onMouseDown(event: MouseEvent): void {
 		startElement = row;
 		startPosition = getPosition(event)!;
 
-		dragStyling.set();
+		preventSelection.set();
 	}
 }
 
@@ -286,7 +293,7 @@ function onMouseUp(event: MouseEvent): void {
 	if (!event.shiftKey) {
 		shifted = false;
 
-		dragStyling.remove();
+		preventSelection.remove();
 	}
 
 	getPlaceholder().remove();
@@ -296,8 +303,8 @@ function onMouseUp(event: MouseEvent): void {
 	if (row instanceof HTMLElement) {
 		endElement = row;
 
-		const endTable = findAncestor(endElement, '.tabela');
-		const startTable = findAncestor(startElement, '.tabela');
+		const endTable = findAncestor(endElement, '.tabela__table');
+		const startTable = findAncestor(startElement, '.tabela__table');
 
 		if (startTable != null && startTable === endTable) {
 			mapped.get(startTable)?.range(startElement, endElement);