@oscarpalmer/tabela 0.14.0 → 0.15.0

package/dist/managers/data.manager.mjs

@@ -0,0 +1,256 @@
+import { EVENT_DATA_ADD, EVENT_DATA_CLEAR, EVENT_DATA_REMOVE, EVENT_DATA_SYNCHRONIZE, EVENT_DATA_UPDATE, EVENT_GROUP_ADD, EVENT_GROUP_REMOVE, EVENT_GROUP_UPDATE } from "../models/event.model.mjs";
+import { GroupComponent, updateGroup } from "../components/group.component.mjs";
+import { getGroup, isGroupKey } from "../helpers/misc.helpers.mjs";
+import { SORT_ASCENDING } from "../models/sort.model.mjs";
+import { sortWithGroups } from "./sort.manager.mjs";
+import { chunk, select, sort } from "@oscarpalmer/atoms/array";
+import { toMap } from "@oscarpalmer/atoms/array/to-map";
+import { toRecord } from "@oscarpalmer/atoms/array/to-record";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { delay } from "@oscarpalmer/atoms/promise/delay";
+import { getValue } from "@oscarpalmer/atoms/value/handle";
+//#region src/managers/data.manager.ts
+var DataManager = class {
+	handlers = {
+		add: (data) => this.add(data, true),
+		clear: () => this.clear(),
+		get: (active) => this.get(active),
+		remove: (items) => this.remove(items, true),
+		synchronize: (data, remove) => this.synchronize(data, remove === true),
+		update: (data) => this.update(data, true)
+	};
+	state;
+	get keys() {
+		return this.state.keys.active ?? this.state.keys.original;
+	}
+	get size() {
+		return this.keys.length;
+	}
+	constructor(state) {
+		this.state = {
+			...state,
+			keys: { original: [] },
+			values: {
+				array: [],
+				mapped: /* @__PURE__ */ new Map()
+			}
+		};
+	}
+	async add(data, render) {
+		const { state } = this;
+		const addedData = [];
+		const updatedData = [];
+		const addedGroups = [];
+		const updatedGroups = [];
+		let groupColumn;
+		let { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = getValue(item, state.key);
+			if (state.values.mapped.has(key)) {
+				updatedData.push(item);
+				continue;
+			}
+			addedData.push(item);
+			state.values.array.push(item);
+			state.values.mapped.set(key, item);
+			if (!state.managers.group.enabled) continue;
+			const groupValue = getValue(item, state.managers.group.key);
+			let group = state.managers.group.getForValue(groupValue);
+			if (group == null) {
+				groupColumn ??= state.managers.column.get(state.managers.group.key);
+				group = new GroupComponent(`${groupColumn?.options.label ?? state.managers.group.key}: ${groupValue}`, groupValue);
+				state.values.array.push(group.key);
+				state.managers.group.add(group, false);
+				addedGroups.push(group);
+			} else if (!addedGroups.includes(group) && !updatedGroups.includes(group)) updatedGroups.push(group);
+			if (!group.expanded) state.managers.group.collapsed.add(key);
+			group.total += 1;
+		}
+		length = addedGroups.length;
+		if (length > 0) {
+			state.managers.event.emit(EVENT_GROUP_ADD, addedGroups.map(getGroup));
+			for (let index = 0; index < length; index += 1) updateGroup(state, addedGroups[index], false);
+		}
+		length = updatedGroups.length;
+		if (length > 0) {
+			for (let index = 0; index < length; index += 1) updateGroup(state, updatedGroups[index], false);
+			state.managers.event.emit(EVENT_GROUP_UPDATE, updatedGroups.map(getGroup));
+		}
+		await this.update(updatedData, addedData.length === 0);
+		if (addedData.length === 0) return;
+		state.managers.event.emit(EVENT_DATA_ADD, addedData);
+		if (render) this.render();
+	}
+	async clear() {
+		if (this.state.values.array.length > 0) return this.removeItems([], true, true).then(() => void 0);
+	}
+	destroy() {
+		const { state } = this;
+		state.values.mapped.clear();
+		state.keys.active = void 0;
+		state.keys.original.length = 0;
+		state.values.array.length = 0;
+		this.handlers = void 0;
+		this.state = void 0;
+	}
+	get(active) {
+		const { state } = this;
+		return (active ?? false) && state.keys.active != null ? select(state.keys.active, (key) => !isGroupKey(key), (key) => state.values.mapped.get(key)) : state.values.array.filter((item) => !isGroupKey(item));
+	}
+	getIndex(item) {
+		return this.keys.indexOf(item);
+	}
+	async remove(items, render) {
+		const { state } = this;
+		const keys = items.map((value) => isPlainObject(value) ? getValue(value, state.key) : value).filter((key) => !isGroupKey(key));
+		const { length } = keys;
+		return length === 0 ? render ? void 0 : [] : this.removeItems(keys, false, render);
+	}
+	async removeItems(keys, clear, render) {
+		const { state } = this;
+		if (clear) {
+			state.keys.active = void 0;
+			state.keys.original = [];
+			state.values.array = [];
+			state.values.mapped.clear();
+			state.managers.row.clear();
+			if (state.managers.group.enabled) state.managers.group.clear();
+			state.managers.event.emit(EVENT_DATA_CLEAR);
+			this.render();
+			return render ? void 0 : [];
+		}
+		const removedGroups = [];
+		const updatedGroups = [];
+		const removedData = [];
+		const chunked = chunk(keys);
+		const chunkedLength = chunked.length;
+		for (let chunkedIndex = 0; chunkedIndex < chunkedLength; chunkedIndex += 1) {
+			const chunk = chunked[chunkedIndex];
+			const chunkLength = chunk.length;
+			for (let keyIndex = 0; keyIndex < chunkLength; keyIndex += 1) {
+				const key = chunk[keyIndex];
+				const dataIndex = state.keys.original.indexOf(key);
+				let dataValue;
+				[dataValue] = state.values.array.splice(dataIndex, 1);
+				removedData.push(dataValue);
+				state.keys.original.splice(dataIndex, 1);
+				state.managers.row.remove(key);
+				state.values.mapped.delete(key);
+				if (!state.managers.group.enabled || isGroupKey(key)) continue;
+				state.managers.group.collapsed.delete(key);
+				const groupValue = getValue(dataValue, state.managers.group.key);
+				const group = state.managers.group.getForValue(groupValue);
+				if (group == null) continue;
+				group.total -= 1;
+				if (group.total > 0) {
+					updatedGroups.push(group);
+					continue;
+				}
+				let groupIndex = updatedGroups.indexOf(group);
+				if (groupIndex > -1) updatedGroups.splice(groupIndex, 1);
+				groupIndex = state.values.array.indexOf(group.key);
+				if (groupIndex > -1) {
+					state.keys.original.splice(groupIndex, 1);
+					state.values.array.splice(groupIndex, 1);
+				}
+				removedGroups.push(group);
+				state.managers.group.remove(group, false);
+				if (keys.length >= 1e4) await delay(25);
+			}
+		}
+		let { length } = updatedGroups;
+		if (length > 0) {
+			for (let index = 0; index < length; index += 1) updateGroup(state, updatedGroups[index], false);
+			state.managers.event.emit(EVENT_GROUP_UPDATE, updatedGroups.map(getGroup));
+		}
+		length = removedGroups.length;
+		if (length > 0) state.managers.event.emit(EVENT_GROUP_REMOVE, removedGroups.map(getGroup));
+		state.managers.event.emit(EVENT_DATA_REMOVE, removedData);
+		if (render) this.render();
+		return render ? void 0 : removedData;
+	}
+	render() {
+		const { state } = this;
+		if (state.managers.group.enabled) sortWithGroups(state, state.values.array, [{
+			direction: SORT_ASCENDING,
+			key: state.key
+		}]);
+		else sort(state.values.array, [{
+			direction: SORT_ASCENDING,
+			key: state.key
+		}]);
+		state.keys.active = void 0;
+		state.keys.original = state.values.array.map((item) => typeof item === "string" ? item : getValue(item, state.key));
+		state.values.mapped = toMap(state.values.array.filter((item) => !isGroupKey(item)), (item) => getValue(item, state.key));
+		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);
+	}
+	set(data) {
+		const { state } = this;
+		const array = data.slice();
+		if (state.managers.group.enabled) {
+			const column = state.managers.column.get(state.managers.group.key);
+			const grouped = toRecord.arrays(data, state.managers.group.key);
+			const entries = Object.entries(grouped);
+			const { length } = entries;
+			const groups = [];
+			for (let index = 0; index < length; index += 1) {
+				const [value, items] = entries[index];
+				const group = new GroupComponent(`${column?.options.label ?? state.managers.group.key}: ${value}`, value);
+				group.total = items.length;
+				groups.push(group);
+				array.push(group.key);
+			}
+			state.managers.group.set(groups);
+		}
+		state.values.array = array;
+		this.render();
+	}
+	async synchronize(data, remove) {
+		const { state } = this;
+		const added = [];
+		const updated = [];
+		const keys = /* @__PURE__ */ new Set([]);
+		const { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const object = data[index];
+			const key = getValue(object, state.key);
+			if (state.values.mapped.has(key)) updated.push(object);
+			else added.push(object);
+			keys.add(key);
+		}
+		if (keys.size === 0) return;
+		let removed = [];
+		if (remove) {
+			const toRemove = state.keys.original.filter((key) => !isGroupKey(key) && !keys.has(key));
+			if (toRemove.length > 0) removed = await this.remove(toRemove, false);
+		}
+		await this.update(updated, added.length === 0);
+		await this.add(added, false);
+		state.managers.event.emit(EVENT_DATA_SYNCHRONIZE, {
+			added,
+			removed,
+			updated
+		});
+		if (added.length > 0 || remove) this.render();
+	}
+	async update(data, render) {
+		const { state } = this;
+		const { length } = data;
+		const updated = [];
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = getValue(item, state.key);
+			const existing = state.keys.original.indexOf(key);
+			if (existing === -1) continue;
+			Object.assign(state.values.array[existing], item);
+			updated.push(state.values.array[existing]);
+			if (render && state.managers.render.visible.keys.has(key)) state.managers.row.update(key);
+		}
+		if (updated.length > 0) state.managers.event.emit(EVENT_DATA_UPDATE, updated);
+	}
+};
+//#endregion
+export { DataManager };

package/dist/managers/event.manager.d.mts

@@ -0,0 +1,18 @@
+import { EventMap, EventName, Events, TabelaEvents } from "../models/event.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/event.manager.d.ts
+declare class EventManager {
+  state: State;
+  events: Events;
+  handlers: TabelaEvents;
+  constructor(state: State);
+  emit<Name extends EventName>(name: Name, ...parameters: Parameters<EventMap[Name]>): void;
+  destroy(): void;
+  onSort(event: MouseEvent, target: HTMLElement): void;
+  subscribe(name: string, callback: GenericCallback): void;
+  unsubscribe(name: string, callback: GenericCallback): void;
+}
+//#endregion
+export { EventManager };

package/dist/managers/event.manager.mjs

@@ -0,0 +1,79 @@
+import { ATTRIBUTE_DATA_EVENT, ATTRIBUTE_DATA_KEY, ATTRIBUTE_DATA_SORT_DIRECTION } from "../models/dom.model.mjs";
+import { CSS_TABLE } from "../models/style.model.mjs";
+import { EVENT_GROUP, EVENT_HEADING } from "../models/event.model.mjs";
+import { isEvent } from "../helpers/misc.helpers.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/managers/event.manager.ts
+var EventManager = class {
+	events = {};
+	handlers = {
+		subscribe: (name, callback) => this.subscribe(name, callback),
+		unsubscribe: (name, callback) => this.unsubscribe(name, callback)
+	};
+	constructor(state) {
+		this.state = state;
+		mapped.set(state.element, this);
+	}
+	emit(name, ...parameters) {
+		if (this.events[name] == null) return;
+		const handlers = [...this.events[name]];
+		const { length } = handlers;
+		for (let index = 0; index < length; index += 1) handlers[index](...parameters);
+	}
+	destroy() {
+		mapped.delete(this.state.element);
+		this.state = void 0;
+	}
+	onSort(event, target) {
+		const direction = target.getAttribute(ATTRIBUTE_DATA_SORT_DIRECTION);
+		const key = target.getAttribute(ATTRIBUTE_DATA_KEY);
+		if (key != null) this.state.managers.sort.toggle(event, key, direction);
+	}
+	subscribe(name, callback) {
+		if (!isEvent(name) || typeof callback !== "function") return;
+		this.events[name] ??= /* @__PURE__ */ new Set();
+		this.events[name].add(callback);
+	}
+	unsubscribe(name, callback) {
+		if (isEvent(name) && typeof callback === "function") this.events[name]?.delete(callback);
+	}
+};
+function onClick(event) {
+	const target = findAncestor(event, eventAttribute);
+	const table = findAncestor(event, tableClassName);
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped.get(table);
+	if (manager == null) return;
+	switch (target?.getAttribute(ATTRIBUTE_DATA_EVENT)) {
+		case EVENT_GROUP:
+			manager.state.managers.group.handle(target);
+			break;
+		case EVENT_HEADING:
+			manager.onSort(event, target);
+			break;
+		case "row":
+			manager.state.managers.selection.handle(event, target);
+			break;
+		default: break;
+	}
+}
+function onKeydown(event) {
+	const target = findAncestor(event, eventAttribute);
+	const table = findAncestor(event, tableClassName);
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped.get(table);
+	if (manager == null) return;
+	if (event.key === " ") {
+		event.preventDefault();
+		return;
+	}
+	manager.state.managers.navigation.handle(event);
+}
+const eventAttribute = `[${ATTRIBUTE_DATA_EVENT}]`;
+const mapped = /* @__PURE__ */ new WeakMap();
+const tableClassName = `.${CSS_TABLE}`;
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
+//#endregion
+export { EventManager };

package/dist/managers/filter.manager.d.mts

@@ -0,0 +1,18 @@
+import { TabelaFilter, TabelaFilterItem } from "../models/filter.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/managers/filter.manager.d.ts
+declare class FilterManager {
+  state: State;
+  handlers: TabelaFilter;
+  items: Record<string, TabelaFilterItem[]>;
+  constructor(state: State);
+  add(item: TabelaFilterItem): void;
+  clear(): void;
+  destroy(): void;
+  filter(): void;
+  remove(value: string | TabelaFilterItem): void;
+  set(items: TabelaFilterItem[]): void;
+}
+//#endregion
+export { FilterManager };

package/dist/managers/filter.manager.mjs

@@ -0,0 +1,115 @@
+import { isGroupKey } from "../helpers/misc.helpers.mjs";
+import { FILTER_CONTAINS, FILTER_ENDS_WITH, FILTER_EQUALS, FILTER_GREATER_THAN, FILTER_GREATER_THAN_OR_EQUAL, FILTER_LESS_THAN, FILTER_LESS_THAN_OR_EQUAL, FILTER_NOT_CONTAINS, FILTER_NOT_EQUALS, FILTER_STARTS_WITH } from "../models/filter.model.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
+import { getNumber } from "@oscarpalmer/atoms/number";
+import { endsWith, includes, startsWith } from "@oscarpalmer/atoms/string/match";
+import { equal } from "@oscarpalmer/atoms/value/equal";
+//#region src/managers/filter.manager.ts
+var FilterManager = class {
+	handlers = {
+		add: (item) => this.add(item),
+		clear: () => this.clear(),
+		remove: (value) => this.remove(value),
+		set: (items) => this.set(items)
+	};
+	items = {};
+	constructor(state) {
+		this.state = state;
+	}
+	add(item) {
+		const { items, state } = this;
+		if (items[item.key] == null) items[item.key] = [];
+		else if (items[item.key].findIndex((existing) => equal(existing, item)) > -1) return;
+		items[item.key].push(item);
+		state.managers.event.emit("filter:add", [item]);
+		this.filter();
+	}
+	clear() {
+		if (Object.keys(this.items).length === 0) return;
+		this.items = {};
+		this.state.managers.event.emit("filter:clear");
+		this.filter();
+	}
+	destroy() {
+		this.handlers = void 0;
+		this.items = void 0;
+		this.state = void 0;
+	}
+	filter() {
+		const { state } = this;
+		const filtered = [];
+		const filters = Object.entries(this.items);
+		const itemsLength = state.managers.data.state.keys.original.length;
+		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = state.managers.data.state.keys.original[itemIndex];
+			if (isGroupKey(item)) {
+				filtered.push(item);
+				continue;
+			}
+			const row = state.managers.data.state.values.mapped.get(item);
+			if (row == null) continue;
+			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
+				const [key, items] = filters[filterIndex];
+				const value = row[key];
+				for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
+					const filter = items[itemIndex];
+					if (comparators[filter.comparison](value, filter.value)) continue filterLoop;
+				}
+				continue rowLoop;
+			}
+			filtered.push(item);
+		}
+		state.managers.data.state.keys.active = filtered;
+		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
+		else state.managers.render.update(true, true);
+	}
+	remove(value) {
+		const removed = [];
+		if (typeof value === "string") {
+			if (this.items[value] == null) return;
+			const keyed = {};
+			const keys = Object.keys(this.items);
+			const { length } = keys;
+			for (let index = 0; index < length; index += 1) {
+				const key = keys[index];
+				if (key === value) removed.push(...this.items[key]);
+				else keyed[key] = this.items[key];
+			}
+			this.items = keyed;
+		} else {
+			const { key } = value;
+			if (this.items[key] == null) return;
+			const index = this.items[key].findIndex((item) => equal(item, value));
+			if (index === -1) return;
+			removed.push(this.items[key][index]);
+		}
+		this.state.managers.event.emit("filter:remove", removed);
+		this.filter();
+	}
+	set(items) {
+		const keyed = {};
+		const { length } = items;
+		for (let index = 0; index < length; index += 1) {
+			const item = items[index];
+			keyed[item.key] ??= [];
+			keyed[item.key].push(item);
+		}
+		this.items = keyed;
+		this.filter();
+	}
+};
+const comparators = {
+	[FILTER_CONTAINS]: (row, filter) => includes(getString(row), getString(filter), true),
+	[FILTER_ENDS_WITH]: (row, filter) => endsWith(getString(row), getString(filter), true),
+	[FILTER_EQUALS]: (row, filter) => equalizer(row, filter),
+	[FILTER_GREATER_THAN]: (row, filter) => getNumber(row) > getNumber(filter),
+	[FILTER_GREATER_THAN_OR_EQUAL]: (row, filter) => getNumber(row) >= getNumber(filter),
+	[FILTER_LESS_THAN]: (row, filter) => getNumber(row) < getNumber(filter),
+	[FILTER_LESS_THAN_OR_EQUAL]: (row, filter) => getNumber(row) <= getNumber(filter),
+	[FILTER_NOT_CONTAINS]: (row, filter) => !includes(getString(row), getString(filter), true),
+	[FILTER_NOT_EQUALS]: (row, filter) => !equalizer(row, filter),
+	[FILTER_STARTS_WITH]: (row, filter) => startsWith(getString(row), getString(filter), true)
+};
+const equalizer = equal.initialize({ ignoreCase: true });
+//#endregion
+export { FilterManager };

package/dist/managers/group.manager.d.mts

@@ -0,0 +1,27 @@
+import { TabelaGroupHandlers } from "../models/group.model.mjs";
+import { GroupComponent } from "../components/group.component.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/group.manager.d.ts
+declare class GroupManager {
+  state: State;
+  collapsed: Set<Key>;
+  enabled: boolean;
+  key: string;
+  handlers: TabelaGroupHandlers;
+  items: GroupComponent[];
+  mapped: Map<string, GroupComponent>;
+  order: Record<never, number>;
+  constructor(state: State);
+  add(group: GroupComponent, emit: boolean): void;
+  clear(): void;
+  destroy(): void;
+  getForKey(key: string): GroupComponent | undefined;
+  getForValue(value: unknown): GroupComponent | undefined;
+  handle(button: HTMLElement): void;
+  remove(group: GroupComponent, update: boolean): void;
+  set(items: GroupComponent[]): void;
+}
+//#endregion
+export { GroupManager };

package/dist/managers/group.manager.mjs

@@ -0,0 +1,93 @@
+import { EVENT_GROUP_ADD, EVENT_GROUP_CLEAR, EVENT_GROUP_REMOVE, EVENT_GROUP_TOGGLE } from "../models/event.model.mjs";
+import { removeGroup } from "../components/group.component.mjs";
+import { getGroup } from "../helpers/misc.helpers.mjs";
+import { sort } from "@oscarpalmer/atoms/array";
+import { toMap } from "@oscarpalmer/atoms/array/to-map";
+import { toRecord } from "@oscarpalmer/atoms/array/to-record";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getString } from "@oscarpalmer/atoms/string";
+import { compare } from "@oscarpalmer/atoms/value/compare";
+//#region src/managers/group.manager.ts
+var GroupManager = class {
+	collapsed = /* @__PURE__ */ new Set();
+	enabled = false;
+	key;
+	handlers = { set: (group) => {
+		if (group === this.key) return;
+		this.enabled = !isNullableOrWhitespace(group);
+		this.key = group ?? "";
+		this.state.managers.data.set(this.state.managers.data.get());
+	} };
+	items = [];
+	mapped = /* @__PURE__ */ new Map();
+	order = {};
+	constructor(state) {
+		this.state = state;
+		if (isNullableOrWhitespace(state.options.grouping)) return;
+		this.enabled = true;
+		this.key = state.options.grouping;
+	}
+	add(group, emit) {
+		this.set([...this.items, group]);
+		if (emit) this.state.managers.event.emit(EVENT_GROUP_ADD, [getGroup(group)]);
+	}
+	clear() {
+		if (this.items.length === 0) return;
+		const groups = this.items.splice(0);
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) this.remove(groups[index], false);
+		this.collapsed.clear();
+		this.set([]);
+		this.state.managers.event.emit(EVENT_GROUP_CLEAR);
+	}
+	destroy() {
+		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 = void 0;
+		this.state = void 0;
+	}
+	getForKey(key) {
+		return this.mapped.get(key);
+	}
+	getForValue(value) {
+		const asString = getString(value);
+		return this.items.find((item) => item.value.stringified === asString);
+	}
+	handle(button) {
+		const key = button.dataset.key?.replace(`${this.state.prefix}_`, "");
+		const group = this.getForKey(key ?? "");
+		if (group == null) return;
+		const { collapsed, items, state } = this;
+		group.expanded = !group.expanded;
+		const index = items.indexOf(group);
+		let first = state.managers.data.state.keys.original.indexOf(group.key) + 1;
+		const last = items[index + 1] == null ? state.managers.data.state.keys.original.length - 1 : state.managers.data.state.keys.original.indexOf(items[index + 1].key) - 1;
+		for (; first <= last; first += 1) {
+			const key = state.managers.data.state.keys.original[first];
+			if (group.expanded) collapsed.delete(key);
+			else collapsed.add(key);
+		}
+		state.managers.event.emit(EVENT_GROUP_TOGGLE, {
+			collapsed: group.expanded ? [] : [getGroup(group)],
+			expanded: group.expanded ? [getGroup(group)] : []
+		});
+		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, update) {
+		removeGroup(group);
+		if (!update) return;
+		this.set(this.items.filter((item) => item !== group));
+		this.state.managers.event.emit(EVENT_GROUP_REMOVE, [getGroup(group)]);
+	}
+	set(items) {
+		this.items = sort(items, (first, second) => compare(first.label, second.label));
+		this.mapped = toMap(items, (group) => group.key);
+		this.order = toRecord(items, (group) => group.value.stringified, (_, index) => index);
+	}
+};
+//#endregion
+export { GroupManager };

package/dist/managers/navigation.manager.d.mts

@@ -0,0 +1,15 @@
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/navigation.manager.d.ts
+declare class NavigationManager {
+  state: State;
+  active: Key | undefined;
+  constructor(state: State);
+  destroy(): void;
+  handle(event: KeyboardEvent): void;
+  setActive(item: Key | undefined, scroll?: boolean): void;
+}
+declare const attributeDataActiveTrue = "[data-active=\"true\"]";
+//#endregion
+export { NavigationManager, attributeDataActiveTrue };