@oscarpalmer/tabela 0.13.0 → 0.14.0

package/dist/components/{body.component.mjs → body.component.js}

@@ -1,8 +1,6 @@
-import { CSS_TABELA_FAKER, CSS_TABELA_ROWGROUP_BODY } from "../models/style.model.mjs";
-import { createElement, createRowGroup } from "../helpers/dom.helpers.mjs";
-//#region src/components/body.component.ts
+import { createElement, createRowGroup } from "../helpers/dom.helpers.js";
 function createFaker() {
-	return createElement("div", { className: CSS_TABELA_FAKER });
+	return createElement("div", { className: "tabela__faker" }, {}, {});
 }
 var BodyComponent = class {
 	elements = {
@@ -12,7 +10,7 @@ var BodyComponent = class {
 	constructor() {
 		const group = createRowGroup(false);
 		this.elements.group = group;
-		group.className += ` ${CSS_TABELA_ROWGROUP_BODY}`;
+		group.className += " tabela__rowgroup--body";
 		group.tabIndex = 0;
 		group.setAttribute("data-event", "body");
 		group.append(this.elements.faker);
@@ -22,5 +20,4 @@ var BodyComponent = class {
 		this.elements.group = void 0;
 	}
 };
-//#endregion
 export { BodyComponent };

package/dist/components/{column.component.mjs → column.component.js}

@@ -1,6 +1,4 @@
-import { CSS_TABELA_HEADING, CSS_TABELA_HEADING_CONTENT, CSS_TABELA_HEADING_SORTER } from "../models/style.model.mjs";
-import { createElement } from "../helpers/dom.helpers.mjs";
-//#region src/components/column.component.ts
+import { createElement } from "../helpers/dom.helpers.js";
 var ColumnComponent = class {
 	elements;
 	options;
@@ -22,17 +20,17 @@ var ColumnComponent = class {
 };
 function createHeading(field, title, width) {
 	const wrapper = createElement("div", {
-		className: CSS_TABELA_HEADING,
+		className: "tabela__heading",
 		role: "columnheader"
 	}, {
 		"data-event": "heading",
 		"data-field": field
 	}, { width: `${width}px` });
 	const content = createElement("div", {
-		className: CSS_TABELA_HEADING_CONTENT,
+		className: "tabela__heading__content",
 		textContent: title
-	});
-	const sorter = createElement("div", { className: CSS_TABELA_HEADING_SORTER });
+	}, {}, {});
+	const sorter = createElement("div", { className: "tabela__heading__sorter" }, {}, {});
 	wrapper.append(content, sorter);
 	return {
 		content,
@@ -40,5 +38,4 @@ function createHeading(field, title, width) {
 		wrapper
 	};
 }
-//#endregion
 export { ColumnComponent };

package/dist/components/{footer.component.mjs → footer.component.js}

@@ -1,6 +1,4 @@
-import { CSS_TABELA_CELL_FOOTER, CSS_TABELA_ROWGROUP_FOOTER, CSS_TABELA_ROW_FOOTER } from "../models/style.model.mjs";
-import { createCell, createRowGroup } from "../helpers/dom.helpers.mjs";
-//#region src/components/footer.component.ts
+import { createCell, createRowGroup } from "../helpers/dom.helpers.js";
 var FooterComponent = class {
 	elements;
 	constructor() {
@@ -10,8 +8,8 @@ var FooterComponent = class {
 			row,
 			cells: []
 		};
-		group.className += ` ${CSS_TABELA_ROWGROUP_FOOTER}`;
-		row.className += ` ${CSS_TABELA_ROW_FOOTER}`;
+		group.className += " tabela__rowgroup--footer";
+		row.className += " tabela__row--footer";
 	}
 	destroy() {
 		this.elements.cells.length = 0;
@@ -25,12 +23,11 @@ var FooterComponent = class {
 		elements.row.innerHTML = "";
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
-			cell.className += ` ${CSS_TABELA_CELL_FOOTER}`;
+			cell.className += " tabela__cell--footer";
 			cell.innerHTML = "&nbsp;";
 			elements.cells.push(cell);
 			elements.row.append(cell);
 		}
 	}
 };
-//#endregion
 export { FooterComponent };

package/dist/components/group.component.js

@@ -0,0 +1,28 @@
+import { createElement } from "../helpers/dom.helpers.js";
+var GroupComponent = class {
+	element;
+	expanded = true;
+	filtered = 0;
+	selected = 0;
+	total = 0;
+	constructor(key, label, value) {
+		this.key = key;
+		this.label = label;
+		this.value = value;
+	}
+};
+function renderGroup(state, component) {
+	component.element ??= createElement("div", {
+		className: "tabela__row tabela__row--group",
+		innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
+	<button class="tabela__button tabela__button--group" data-event="group" data-key="${component.key}" type="button">
+		<span aria-hidden="true"></span>
+		<span>Open/close</span>
+	</button>
+	<p>${component.label}</p>
+</div>`,
+		role: "row"
+	}, {}, { height: `${state.options.rowHeight}px` });
+}
+function updateGroup(state, component) {}
+export { GroupComponent, renderGroup, updateGroup };

package/dist/components/{header.component.mjs → header.component.js}

@@ -1,6 +1,4 @@
-import { CSS_TABELA_ROWGROUP_HEADER, CSS_TABELA_ROW_HEADER } from "../models/style.model.mjs";
-import { createRowGroup } from "../helpers/dom.helpers.mjs";
-//#region src/components/header.component.ts
+import { createRowGroup } from "../helpers/dom.helpers.js";
 var HeaderComponent = class {
 	elements;
 	constructor() {
@@ -9,8 +7,8 @@ var HeaderComponent = class {
 			group,
 			row
 		};
-		group.className += ` ${CSS_TABELA_ROWGROUP_HEADER}`;
-		row.className += ` ${CSS_TABELA_ROW_HEADER}`;
+		group.className += " tabela__rowgroup--header";
+		row.className += " tabela__row--header";
 	}
 	destroy() {
 		this.elements.group = void 0;
@@ -21,5 +19,4 @@ var HeaderComponent = class {
 		this.elements.row.append(...columns.map((column) => column.elements.wrapper));
 	}
 };
-//#endregion
 export { HeaderComponent };

package/dist/components/{row.component.mjs → row.component.js}

@@ -1,8 +1,5 @@
-import { CSS_TABELA_ROW_BODY, CSS_TABELA_ROW_SELECTED } from "../models/style.model.mjs";
-import { createCell, createRow } from "../helpers/dom.helpers.mjs";
+import { createCell, createRow } from "../helpers/dom.helpers.js";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
-import { getValue } from "@oscarpalmer/atoms/value/handle";
-//#region src/components/row.component.ts
 function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
@@ -23,20 +20,20 @@ function renderRow(state, row) {
 		"data-active": String(state.managers.navigation.active === row.key),
 		"data-event": "row",
 		"data-key": key,
-		id: `tabela_${state.id}_${key}`
+		id: `tabela_${state.id}_row_${key}`
 	});
-	element.classList.add(CSS_TABELA_ROW_BODY);
-	if (selected) element.classList.add(CSS_TABELA_ROW_SELECTED);
-	else element.classList.remove(CSS_TABELA_ROW_SELECTED);
+	element.classList.add("tabela__row--body");
+	if (selected) element.classList.add("tabela__row--selected");
+	else element.classList.remove("tabela__row--selected");
 	const columns = state.managers.column.items;
 	const { length } = columns;
-	const data = state.managers.data.state.values.mapped.get(row.key);
+	const data = state.managers.data.values.objects.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
 		state.managers.render.pool.cells[options.field] ??= [];
 		const cell = state.managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
-		cell.textContent = String(getValue(data, options.field));
+		cell.textContent = String(data[options.field]);
 		row.cells[options.field] = cell;
 		element.append(cell);
 	}
@@ -48,5 +45,4 @@ var RowComponent = class {
 		this.key = key;
 	}
 };
-//#endregion
 export { RowComponent, removeRow, renderRow };

package/dist/helpers/{dom.helpers.mjs → dom.helpers.js}

@@ -1,29 +1,26 @@
-import { CSS_TABELA_CELL, CSS_TABELA_CELL_BODY, CSS_TABELA_ROW, CSS_TABELA_ROWGROUP } from "../models/style.model.mjs";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
 import { setStyles } from "@oscarpalmer/toretto/style";
-//#region src/helpers/dom.helpers.ts
 function createCell(width, body) {
 	const cell = createElement("div", {
-		className: CSS_TABELA_CELL,
+		className: "tabela__cell",
 		role: "cell"
 	}, {}, { width: `${width}px` });
-	if (body ?? true) cell.classList.add(CSS_TABELA_CELL_BODY);
+	if (body ?? true) cell.classList.add("tabela__cell--body");
 	return cell;
 }
 function createElement(tagName, properties, attributes, style) {
 	const element = document.createElement(tagName);
-	const props = properties ?? {};
-	const keys = Object.keys(props);
-	for (const key of keys) element[key] = props[key];
-	setAttributes(element, attributes ?? {});
-	setStyles(element, style ?? {});
+	const keys = Object.keys(properties);
+	for (const key of keys) element[key] = properties[key];
+	setAttributes(element, attributes);
+	setStyles(element, style);
 	return element;
 }
 function createRowGroup(withRow) {
 	const group = createElement("div", {
-		className: CSS_TABELA_ROWGROUP,
+		className: "tabela__rowgroup",
 		role: "rowgroup"
-	});
+	}, {}, {});
 	if (!(withRow ?? true)) return group;
 	const row = createRow();
 	group.append(row);
@@ -34,9 +31,8 @@ function createRowGroup(withRow) {
 }
 function createRow() {
 	return createElement("div", {
-		className: CSS_TABELA_ROW,
+		className: "tabela__row",
 		role: "row"
 	}, {}, { height: "32px" });
 }
-//#endregion
 export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/{misc.helpers.mjs → misc.helpers.js}

@@ -1,9 +1,7 @@
-//#region src/helpers/misc.helpers.ts
 function getKey(value) {
 	if (typeof value === "number") return value;
 	if (typeof value !== "string") return;
 	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
 }
-const integerExpression = /^\d+$/;
-//#endregion
+var integerExpression = /^\d+$/;
 export { getKey };

package/dist/helpers/style.helper.js

@@ -0,0 +1,6 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+const dragStyling = toggleStyles(document.body, {
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+export { dragStyling };

package/dist/{index.mjs → index.js}

@@ -1,7 +1,5 @@
-import { Tabela } from "./tabela.mjs";
-//#region src/index.ts
+import { Tabela } from "./tabela.js";
 function tabela(element, options) {
 	return new Tabela(element, options);
 }
-//#endregion
 export { tabela };

package/dist/managers/{column.manager.mjs → column.manager.js}

@@ -1,5 +1,4 @@
-import { ColumnComponent } from "../components/column.component.mjs";
-//#region src/managers/column.manager.ts
+import { ColumnComponent } from "../components/column.component.js";
 var ColumnManager = class {
 	items = [];
 	constructor(state) {
@@ -12,9 +11,6 @@ var ColumnManager = class {
 		this.items = void 0;
 		this.state = void 0;
 	}
-	get(field) {
-		return this.items.find((item) => item.options.field === field);
-	}
 	remove(value) {
 		const { items, state } = this;
 		const { components, managers } = state;
@@ -40,5 +36,4 @@ var ColumnManager = class {
 		footer.update(items);
 	}
 };
-//#endregion
 export { ColumnManager };

package/dist/managers/data.manager.js

@@ -0,0 +1,181 @@
+import { GroupComponent } from "../components/group.component.js";
+import { sortWithGroups } from "./sort.manager.js";
+import { 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";
+var DataManager = class {
+	handlers = Object.freeze({
+		add: (data) => void this.add(data, true),
+		clear: () => void this.clear(),
+		get: (active) => this.get(active),
+		remove: (items) => void this.remove(items, true),
+		synchronize: (data, remove) => void this.synchronize(data, remove),
+		update: (data) => void this.update(data)
+	});
+	values = {
+		keys: { original: [] },
+		objects: {
+			mapped: /* @__PURE__ */ new Map(),
+			array: []
+		}
+	};
+	get keys() {
+		return this.values.keys.active ?? this.values.keys.original;
+	}
+	get size() {
+		return this.keys.length;
+	}
+	constructor(state) {
+		this.state = state;
+	}
+	async add(data, render) {
+		const { state, values } = this;
+		const { length } = data;
+		const updates = [];
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = item[state.key];
+			if (values.objects.mapped.has(key)) {
+				updates.push(item);
+				continue;
+			}
+			values.objects.array.push(item);
+			values.objects.mapped.set(key, item);
+			if (!state.managers.group.enabled) continue;
+			const groupKey = item[state.managers.group.field];
+			let group = state.managers.group.get(groupKey);
+			if (group == null) {
+				group = new GroupComponent(String(groupKey), String(groupKey), groupKey);
+				values.objects.array.push(group);
+				state.managers.group.add(group);
+			}
+			if (!group.expanded) state.managers.group.collapsed.add(key);
+			group.total += 1;
+		}
+		if (updates.length > 0) this.update(updates);
+		else if (render) this.render();
+	}
+	clear() {
+		if (this.values.objects.array.length > 0) this.set([]);
+	}
+	destroy() {
+		const { values } = this;
+		values.objects.mapped.clear();
+		values.keys.active = void 0;
+		values.keys.original.length = 0;
+		values.objects.array.length = 0;
+		this.handlers = void 0;
+		this.state = void 0;
+		this.values = void 0;
+	}
+	get(active) {
+		const { values } = this;
+		return active ?? false ? select(values.keys.active ?? [], (key) => !(key instanceof GroupComponent), (key) => values.objects.mapped.get(key)) : values.objects.array.filter((item) => !(item instanceof GroupComponent));
+	}
+	getIndex(key) {
+		return this.keys.indexOf(key);
+	}
+	async remove(items, render) {
+		const { state, values } = this;
+		const keys = items.map((value) => isPlainObject(value) ? value[state.key] : value).filter((key) => values.objects.mapped.has(key));
+		const { length } = keys;
+		if (length === 0) return;
+		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
+			const key = keys[keyIndex];
+			values.objects.mapped.delete(key);
+			const arrayIndex = values.objects.array.findIndex((item) => !(item instanceof GroupComponent) && item[state.key] === key);
+			let item;
+			if (arrayIndex > -1) [item] = values.objects.array.splice(arrayIndex, 1);
+			values.keys.original.splice(values.keys.original.indexOf(key), 1);
+			state.managers.row.remove(key);
+			if (!state.managers.group.enabled || item == null) continue;
+			state.managers.group.collapsed.delete(key);
+			const groupKey = item[state.managers.group.field];
+			const group = state.managers.group.get(groupKey);
+			if (group == null) continue;
+			group.total -= 1;
+			if (group.total > 0) continue;
+			const groupIndex = values.objects.array.findIndex((item) => item instanceof GroupComponent && item.value === groupKey);
+			if (groupIndex > -1) values.objects.array.splice(groupIndex, 1);
+			state.managers.group.remove(group);
+		}
+		if (render) this.render();
+	}
+	render() {
+		const { state, values } = this;
+		if (state.managers.group.enabled) sortWithGroups(state, values.objects.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		else sort(values.objects.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		values.keys.original = values.objects.array.map((item) => item instanceof GroupComponent ? item : item[state.key]);
+		values.objects.mapped = toMap(values.objects.array.filter((item) => !(item instanceof GroupComponent)), (item) => 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, values } = this;
+		const array = data.slice();
+		if (state.managers.group.enabled) {
+			const grouped = toRecord.arrays(data, state.managers.group.field);
+			const entries = Object.entries(grouped);
+			const { length } = entries;
+			const groups = [];
+			for (let index = 0; index < length; index += 1) {
+				const [value, items] = entries[index];
+				const key = String(value);
+				const group = new GroupComponent(key, key, value);
+				group.total = items.length;
+				groups.push(group);
+				array.push(group);
+			}
+			state.managers.group.set(groups);
+		}
+		values.objects.array = array;
+		this.render();
+	}
+	async synchronize(data, remove) {
+		const { state, values } = this;
+		const add = [];
+		const updated = [];
+		const keys = /* @__PURE__ */ new Set([]);
+		const { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const object = data[index];
+			const key = object[state.key];
+			if (values.objects.mapped.has(key)) updated.push(object);
+			else add.push(object);
+			keys.add(key);
+		}
+		if (keys.size === 0) return;
+		if (remove ?? false) {
+			const toRemove = values.keys.original.filter((key) => !(key instanceof GroupComponent) && !keys.has(key));
+			if (toRemove.length > 0) await this.remove(toRemove, false);
+		}
+		await this.update(updated);
+		if (add.length > 0) await this.add(add, false);
+		if (add.length > 0 || (remove ?? false)) this.render();
+	}
+	async update(data) {
+		const { state, values } = this;
+		const { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const object = data[index];
+			const key = object[state.key];
+			const value = values.objects.mapped.get(key);
+			if (value != null) {
+				values.objects.mapped.set(key, {
+					...value,
+					...object
+				});
+				state.managers.row.update(key);
+			}
+		}
+	}
+};
+export { DataManager };

package/dist/managers/{event.manager.mjs → event.manager.js}

@@ -1,6 +1,5 @@
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-//#region src/managers/event.manager.ts
 var EventManager = class {
 	constructor(state) {
 		this.state = state;
@@ -18,7 +17,7 @@ var EventManager = class {
 };
 function onClick(event) {
 	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela__table");
+	const table = findAncestor(event, ".tabela");
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
 	const manager = mapped.get(table);
 	if (manager == null) return;
@@ -37,18 +36,18 @@ function onClick(event) {
 }
 function onKeydown(event) {
 	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela__table");
+	const table = findAncestor(event, ".tabela");
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
 	const manager = mapped.get(table);
 	if (manager == null) return;
-	if (event.key === " ") {
-		event.preventDefault();
-		return;
+	switch (target?.getAttribute("data-event")) {
+		case "body":
+			manager.state.managers.navigation.handle(event);
+			break;
+		default: break;
 	}
-	manager.state.managers.navigation.handle(event);
 }
-const mapped = /* @__PURE__ */ new WeakMap();
+var mapped = /* @__PURE__ */ new WeakMap();
 on(document, "click", onClick);
 on(document, "keydown", onKeydown, { passive: false });
-//#endregion
 export { EventManager };

package/dist/managers/{filter.manager.mjs → filter.manager.js}

@@ -1,9 +1,8 @@
-import { GroupComponent } from "../components/group.component.mjs";
-import { getString } from "@oscarpalmer/atoms/string";
+import { GroupComponent } from "../components/group.component.js";
 import { getNumber } from "@oscarpalmer/atoms/number";
+import { getString } from "@oscarpalmer/atoms/string";
 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 = Object.freeze({
 		add: (item) => this.add(item),
@@ -17,7 +16,7 @@ var FilterManager = class {
 	}
 	add(item) {
 		if (this.items[item.field] == null) this.items[item.field] = [];
-		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) > -1) return;
+		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) !== -1) return;
 		this.items[item.field].push(item);
 		this.filter();
 	}
@@ -36,14 +35,14 @@ var FilterManager = class {
 		const { state } = this;
 		const filtered = [];
 		const filters = Object.entries(this.items);
-		const itemsLength = state.managers.data.state.items.original.length;
-		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
-			const item = state.managers.data.state.items.original[itemIndex];
-			if (item instanceof GroupComponent) {
-				filtered.push(item);
+		const keysLength = state.managers.data.values.keys.original.length;
+		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
+			const key = state.managers.data.values.keys.original[keyIndex];
+			if (key instanceof GroupComponent) {
+				filtered.push(key);
 				continue;
 			}
-			const row = state.managers.data.state.values.mapped.get(item);
+			const row = state.managers.data.values.objects.mapped.get(key);
 			if (row == null) continue;
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
 				const [field, items] = filters[filterIndex];
@@ -54,23 +53,16 @@ var FilterManager = class {
 				}
 				continue rowLoop;
 			}
-			filtered.push(item);
+			filtered.push(key);
 		}
-		state.managers.data.state.items.active = filtered;
+		state.managers.data.values.keys.active = filtered;
 		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
 		else state.managers.render.update(true, true);
 	}
 	remove(value) {
 		if (typeof value === "string") {
 			if (this.items[value] == null) return;
-			const keyed = {};
-			const filters = Object.keys(this.items);
-			const { length } = filters;
-			for (let index = 0; index < length; index += 1) {
-				const field = filters[index];
-				if (field !== value) keyed[field] = this.items[field];
-			}
-			this.items = keyed;
+			this.items = {};
 		} else {
 			const { field } = value;
 			if (this.items[field] == null) return;
@@ -90,7 +82,7 @@ var FilterManager = class {
 		this.filter();
 	}
 };
-const comparators = {
+var comparators = {
 	contains: (row, filter) => includes(getString(row), getString(filter), true),
 	"ends-with": (row, filter) => endsWith(getString(row), getString(filter), true),
 	equals: (row, filter) => equalizer(row, filter),
@@ -102,6 +94,5 @@ const comparators = {
 	"not-equals": (row, filter) => !equalizer(row, filter),
 	"starts-with": (row, filter) => startsWith(getString(row), getString(filter), true)
 };
-const equalizer = equal.initialize({ ignoreCase: true });
-//#endregion
+var equalizer = equal.initialize({ ignoreCase: true });
 export { FilterManager };

package/dist/managers/group.manager.js

@@ -0,0 +1,46 @@
+import { sort } from "@oscarpalmer/atoms/array";
+import { toRecord } from "@oscarpalmer/atoms/array/to-record";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+var GroupManager = class {
+	collapsed = /* @__PURE__ */ new Set();
+	enabled = false;
+	field;
+	items = [];
+	order = {};
+	constructor(state) {
+		this.state = state;
+		if (isNullableOrWhitespace(state.options.grouping)) return;
+		this.enabled = true;
+		this.field = state.options.grouping;
+	}
+	add(group) {
+		this.set([...this.items, group]);
+	}
+	get(value) {
+		return this.items.find((item) => item.value === value);
+	}
+	handle(button) {
+		const key = button.dataset.key;
+		const group = this.get(key);
+		if (group == null) return;
+		const { collapsed, items, state } = this;
+		group.expanded = !group.expanded;
+		const index = items.indexOf(group);
+		let first = state.managers.data.values.keys.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;
+		for (; first <= last; first += 1) {
+			const key = state.managers.data.values.keys.original[first];
+			if (group.expanded) collapsed.delete(key);
+			else collapsed.add(key);
+		}
+		state.managers.render.update(true, true);
+	}
+	remove(group) {
+		this.set(this.items.filter((item) => item !== group));
+	}
+	set(items) {
+		this.items = sort(items, (item) => item.label);
+		this.order = toRecord(items, "value", (_, index) => index);
+	}
+};
+export { GroupManager };