slim-select 4.0.2 → 4.0.4

package/README.md

@@ -41,7 +41,7 @@ Full docs, live demos, and copy-paste examples: **[slimselectjs.com](https://sli
 
 **Built to ship**
 
-- Zero runtime dependencies
+- Zero dependencies
 - ~66KB JS (~16KB gzip) · ~12KB CSS (~2KB gzip)
 - TypeScript types included
 - WCAG 2.1 Level AA accessibility (ARIA, keyboard, screen reader support)
@@ -227,7 +227,11 @@ new SlimSelect({
     afterChange: (newVal: Option[]) => void,
     beforeOpen: () => void,
     afterOpen: () => void,
-    beforeClose: () => void,
+    // Return false to cancel close. info.source is why close was requested
+    // ('select' | 'deselect' | 'outside' | 'toggle' | 'escape' | 'tab' | 'modal' | 'api').
+    // info.selectionChanged is true when the selection is changing in this action.
+    // info.option is the clicked option when source is 'select' (undefined otherwise).
+    beforeClose: (info: CloseInfo) => boolean | void,
     afterClose: () => void,
     error: (err: Error) => void
   }

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import { default as CssClasses } from './classes';
 import { default as Lifecycle } from './lifecycle';
-import { default as Render } from './render';
+import { default as Render, CloseInfo } from './render';
 import { default as Select } from './select';
 import { default as Settings, MODAL_MOBILE_BREAKPOINT } from './settings';
 import { default as Store, Option, Optgroup } from './store';
 import { default as SyncCoordinator } from './sync';
 export { Settings, Option, Optgroup, MODAL_MOBILE_BREAKPOINT };
 export type { ModalSetting } from './settings';
-export type { Main, Content, Search } from './render';
+export type { Main, Content, Search, CloseInfo, CloseSource } from './render';
 export interface Config {
     select: string | Element;
     data?: (Partial<Option> | Partial<Optgroup>)[];
@@ -23,7 +23,7 @@ export interface Events {
     afterChange?: (newVal: Option[]) => void;
     beforeOpen?: () => void;
     afterOpen?: () => void;
-    beforeClose?: () => void;
+    beforeClose?: (info: CloseInfo) => boolean | void;
     afterClose?: () => void;
     error?: (err: Error) => void;
 }
@@ -49,7 +49,9 @@ export default class SlimSelect {
     setSelected(values: string | string[], runAfterChange?: boolean): void;
     addOption(option: Partial<Option>): void;
     open(): void;
-    close(eventType?: string | null): void;
+    close(info?: CloseInfo): void;
+    /** Sync close — invoked by lifecycle after beforeClose approves. */
+    private applyClose;
     search(value: string): void;
     private clearSearch;
     private runLocalSearch;

package/dist/lifecycle.d.ts

@@ -1,21 +1,12 @@
-/**
- * Open/close state machine for SlimSelect.
- *
- * Replaces scattered openTimeout/closeTimeout in index.ts with a single flow:
- *   closed → opening → open → closing → closed
- *
- * Maps to settings consumers expect:
- *   - isOpen: true during opening + open
- *   - isFullOpen: true only in open state (after animation / afterOpen)
- *
- * Lifecycle waits for render.waitForAnimation() before firing afterOpen/afterClose.
- * When no animation waiter is provided, falls back to settings.timeoutDelay.
- */
+import { CloseInfo } from './render';
 export type LifecycleState = 'closed' | 'opening' | 'open' | 'closing';
 export interface LifecycleHandlers {
     beforeOpen?: () => void;
     afterOpen?: () => void;
-    beforeClose?: () => void;
+    /** Return false to cancel close before any DOM changes. */
+    beforeClose?: (info: CloseInfo) => boolean | void;
+    /** Sync close work — render, focus, settings. Runs after beforeClose approves. */
+    onClose?: (info: CloseInfo) => void;
     afterClose?: () => void;
     /** Fires when fully open — used to attach document click-outside listener. */
     onOpenReady?: () => void;
@@ -41,7 +32,7 @@ export default class Lifecycle {
     get isOpen(): boolean;
     get isFullOpen(): boolean;
     requestOpen(): Promise<void>;
-    requestClose(): Promise<void>;
+    requestClose(info?: CloseInfo): Promise<boolean>;
     /** Cancel timers and resolve waiting phases — called when open/close race each other. */
     cancelPending(): void;
     destroy(): void;

package/dist/react/index.js

@@ -335,11 +335,14 @@ var N = class {
 		}
 		this.state = "open", this.handlers.afterOpen && this.handlers.afterOpen(), this.handlers.onOpenReady && this.handlers.onOpenReady();
 	}
-	async requestClose() {
-		if (this.state === "closed" || this.state === "closing") return;
+	async requestClose(e = {
+		source: "api",
+		selectionChanged: !1
+	}) {
+		if (this.state === "closed" || this.state === "closing" || this.handlers.beforeClose && this.handlers.beforeClose(e) === !1) return !1;
 		this.cancelPending();
-		let e = ++this.generation;
-		this.handlers.beforeClose && this.handlers.beforeClose(), this.state = "closing", await this.waitForPhase("close", e), e === this.generation && (this.state = "closed", this.handlers.afterClose && this.handlers.afterClose(), this.handlers.onCloseReady && this.handlers.onCloseReady());
+		let t = ++this.generation;
+		return this.handlers.onClose && this.handlers.onClose(e), this.state = "closing", await this.waitForPhase("close", t), t === this.generation ? (this.state = "closed", this.handlers.afterClose && this.handlers.afterClose(), this.handlers.onCloseReady && this.handlers.onCloseReady(), !0) : !1;
 	}
 	cancelPending() {
 		this.generation++, this.animationAbort?.abort(), this.animationAbort = null, this.pendingTimer &&= (clearTimeout(this.pendingTimer), null);
@@ -598,6 +601,24 @@ var N = class {
 	constructor(e, t, n, r) {
 		this.store = n, this.settings = e, this.classes = t, this.callbacks = r, this.lastSelectedOption = null, this.lastRenderedOptions = [], this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto"), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main), this.settings.modal !== "off" && !this.settings.alwaysOpen && (this.modalElements = this.createModalElements(), document.body.appendChild(this.modalElements.overlay));
 	}
+	requestClose(e, t) {
+		this.callbacks.close({
+			source: e,
+			option: t?.option,
+			selectionChanged: t?.selectionChanged ?? !1
+		});
+	}
+	selectionChanged(e, t) {
+		if (e.length !== t.length) return !0;
+		let n = e.map((e) => e.id).sort(), r = t.map((e) => e.id).sort();
+		return n.some((e, t) => e !== r[t]);
+	}
+	closeOnSingleSelectReclick(e) {
+		this.settings.closeOnSelect && this.requestClose("select", {
+			option: e,
+			selectionChanged: !1
+		});
+	}
 	addClasses(e, t) {
 		if (!t || t.trim() === "") return;
 		let n = t.split(" ").filter((e) => e.trim() !== "");
@@ -643,13 +664,13 @@ var N = class {
 		this.settings.modalTitle ? (n = document.createElement("div"), this.addClasses(n, this.classes.modalTitle), n.id = `${this.settings.id}-modal-title`, n.textContent = this.settings.modalTitle, t.setAttribute("aria-labelledby", n.id)) : t.setAttribute("aria-label", this.settings.ariaLabel);
 		let r = document.createElement("button");
 		r.type = "button", this.addClasses(r, this.classes.modalClose), r.setAttribute("aria-label", "Close"), r.onclick = (e) => {
-			e.stopPropagation(), this.callbacks.close();
+			e.stopPropagation(), this.requestClose("modal");
 		};
 		let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 		i.setAttribute("viewBox", "0 0 100 100");
 		let a = document.createElementNS("http://www.w3.org/2000/svg", "path");
 		return a.setAttribute("d", this.classes.deselectPath), i.appendChild(a), r.appendChild(i), e.onclick = (t) => {
-			t.target === e && this.callbacks.close();
+			t.target === e && this.requestClose("modal");
 		}, n && t.appendChild(n), e.appendChild(t), {
 			overlay: e,
 			dialog: t,
@@ -672,7 +693,7 @@ var N = class {
 		this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto");
 	}
 	finalizeModalClose() {
-		this.modalElements && this.content.main.parentElement === this.modalElements.dialog && (this.addClasses(this.modalElements.overlay, this.classes.hide), this.removeClasses(this.modalElements.overlay, this.classes.contentOpen), this.removeClasses(this.content.main, this.classes.modalContent), this.restoreContentOffscreen(), this.unlockBodyScroll());
+		this.modalElements && this.content.main.parentElement === this.modalElements.dialog && (this.addClasses(this.modalElements.overlay, this.classes.hide), this.removeClasses(this.modalElements.overlay, this.classes.contentOpen), this.removeClasses(this.content.main, this.classes.modalContent), this.modalElements.closeButton.remove(), this.restoreContentOffscreen(), this.unlockBodyScroll());
 	}
 	waitForAnimation(e, t) {
 		let n = d(this.content.main, this.settings.timeoutDelay);
@@ -700,17 +721,17 @@ var N = class {
 			switch (e.key) {
 				case "ArrowUp":
 				case "ArrowDown": return this.callbacks.open(), e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
-				case "Tab": return this.callbacks.close(), !0;
+				case "Tab": return this.requestClose("tab"), !0;
 				case "Enter":
 				case " ":
 					this.callbacks.open();
 					let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
 					return t && t.click(), !1;
-				case "Escape": return this.callbacks.close(), !1;
+				case "Escape": return this.requestClose("escape"), !1;
 			}
 			return e.key.length === 1 && this.callbacks.open(), !0;
 		}, e.onclick = (e) => {
-			this.settings.disabled || (this.settings.isOpen ? this.callbacks.close() : this.callbacks.open());
+			this.settings.disabled || (this.settings.isOpen ? this.requestClose("toggle") : this.callbacks.open());
 		};
 		let t = document.createElement("div");
 		this.addClasses(t, this.classes.values), e.appendChild(t);
@@ -732,7 +753,7 @@ var N = class {
 					let e = this.store.getFirstOption(), t = e ? e.id : "";
 					this.callbacks.setSelected(t, !1);
 				}
-				this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
+				this.settings.closeOnSelect && this.requestClose("deselect", { selectionChanged: !0 }), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
 			}
 		}, n.onkeydown = (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n.click());
@@ -852,7 +873,7 @@ var N = class {
 						if (t instanceof I) for (let n of t.options) n.id && e.push(n.id);
 						t instanceof F && e.push(t.id);
 					}
-					this.callbacks.setSelected(e, !1), this.settings.closeOnSelect && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(i), this.updateDeselectAll(), this.updateMultipleValueDeleteVisibility();
+					this.callbacks.setSelected(e, !1), this.settings.closeOnSelect && this.requestClose("deselect", { selectionChanged: !0 }), this.callbacks.afterChange && this.callbacks.afterChange(i), this.updateDeselectAll(), this.updateMultipleValueDeleteVisibility();
 				}
 			};
 			let r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -930,8 +951,8 @@ var N = class {
 			switch (e.key) {
 				case "ArrowUp":
 				case "ArrowDown": return e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), !1;
-				case "Tab": return this.callbacks.close(), !0;
-				case "Escape": return this.callbacks.close(), !1;
+				case "Tab": return this.requestClose("tab"), !0;
+				case "Escape": return this.requestClose("escape"), !1;
 				case "Enter":
 					let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
 					return t ? (t.click(), !1) : this.callbacks.addable ? (n.click(), !1) : !0;
@@ -958,7 +979,7 @@ var N = class {
 					if (this.callbacks.search(""), this.settings.closeOnSelect) {
 						let e = u(this.content.main);
 						setTimeout(() => {
-							this.callbacks.close();
+							this.requestClose("select", { selectionChanged: !0 });
 						}, e);
 					}
 				}, r = this.callbacks.addable(t);
@@ -1241,23 +1262,35 @@ var N = class {
 			t.classList.add(e);
 		}), e.style && (t.style.cssText = e.style), this.setOptionElementContent(t, e, this.content.search.input.value), e.display || this.addClasses(t, this.classes.hide), e.disabled && this.addClasses(t, this.classes.disabled), e.selected && this.settings.hideSelected && this.addClasses(t, this.classes.hide), e.selected ? (this.addClasses(t, this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (this.removeClasses(t, this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (t) => {
 			t.preventDefault(), t.stopPropagation();
-			let n = this.store.getSelected(), r = t.currentTarget, i = String(r.dataset.id), a = t.ctrlKey || t.metaKey;
-			if (e.disabled || !this.settings.isMultiple && e.selected && !this.settings.allowDeselect || e.selected && e.mandatory || this.settings.isMultiple && this.settings.maxSelected <= n.length && !e.selected || this.settings.isMultiple && this.settings.minSelected >= n.length && e.selected && !a) return;
-			let o = !1, s = this.store.getSelectedOptions(), c = [];
+			let n = this.store.getSelected(), r = t.currentTarget, i = String(r.dataset.id), a = this.store.getOptionByID(i) ?? e, o = n.includes(i), s = t.ctrlKey || t.metaKey;
+			if (e.disabled) return;
+			if (!this.settings.isMultiple && o && !this.settings.allowDeselect) {
+				this.closeOnSingleSelectReclick(a);
+				return;
+			}
+			if (o && a.mandatory) {
+				this.closeOnSingleSelectReclick(a);
+				return;
+			}
+			if (this.settings.isMultiple && this.settings.maxSelected <= n.length && !o || this.settings.isMultiple && this.settings.minSelected >= n.length && o && !s) return;
+			let c = !1, l = this.store.getSelectedOptions(), u = [];
 			if (this.settings.isMultiple) {
-				let n = s.some((e) => e.id === i);
+				let n = l.some((e) => e.id === i);
 				if (t.shiftKey && this.lastSelectedOption) {
 					let t = this.lastRenderedOptions, n = t.findIndex((e) => e.id === this.lastSelectedOption.id), r = t.findIndex((t) => t.id === e.id);
 					if (n >= 0 && r >= 0) {
-						let e = Math.min(n, r), i = Math.max(n, r), a = t.slice(e, i + 1).filter((e) => !s.find((t) => t.id === e.id));
-						c = s.length + a.length <= this.settings.maxSelected ? s.concat(a) : s;
-					} else c = s;
-				} else c = n ? s.filter((e) => e.id !== i) : s.concat(e), this.lastSelectedOption = e;
+						let e = Math.min(n, r), i = Math.max(n, r), a = t.slice(e, i + 1).filter((e) => !l.find((t) => t.id === e.id));
+						u = l.length + a.length <= this.settings.maxSelected ? l.concat(a) : l;
+					} else u = l;
+				} else u = n ? l.filter((e) => e.id !== i) : l.concat(a), this.lastSelectedOption = a;
 			}
-			if (this.settings.isMultiple || (c = e.selected ? [] : [e]), this.callbacks.beforeChange || (o = !0), this.callbacks.beforeChange && (o = this.callbacks.beforeChange(c, s) !== !1), o) {
-				this.store.getOptionByID(i) || this.callbacks.addOption(e), this.callbacks.setSelected(c.map((e) => e.id), !1);
+			if (this.settings.isMultiple || (u = o ? [] : [a]), this.callbacks.beforeChange || (c = !0), this.callbacks.beforeChange && (c = this.callbacks.beforeChange(u, l) !== !1), c) {
+				this.store.getOptionByID(i) || this.callbacks.addOption(e), this.callbacks.setSelected(u.map((e) => e.id), !1);
 				let n = t.ctrlKey || t.metaKey || t.shiftKey;
-				this.settings.closeOnSelect && !(this.settings.isMultiple && n) && this.callbacks.close(), this.callbacks.afterChange && this.callbacks.afterChange(c);
+				this.settings.closeOnSelect && !(this.settings.isMultiple && n) && this.requestClose("select", {
+					option: a,
+					selectionChanged: this.selectionChanged(l, u)
+				}), this.callbacks.afterChange && this.callbacks.afterChange(u);
 			}
 		}), t;
 	}
@@ -1762,7 +1795,6 @@ var U = class {
 		let t = [
 			"beforeOpen",
 			"afterOpen",
-			"beforeClose",
 			"afterClose"
 		];
 		for (let n in e.events) e.events.hasOwnProperty(n) && (t.indexOf(n) === -1 ? this.events[n] = e.events[n] : this.events[n] = S(e.events[n], 100));
@@ -1771,7 +1803,10 @@ var U = class {
 		}, this.select.onDisabledChange = (e) => {
 			e ? this.disable() : this.enable();
 		}, this.select.onLabelClick = () => {
-			this.settings.disabled || (this.settings.isOpen ? this.close() : this.open());
+			this.settings.disabled || (this.settings.isOpen ? this.close({
+				source: "toggle",
+				selectionChanged: !1
+			}) : this.open());
 		};
 		let n = e.data ? e.data : this.select.getData();
 		this.store = new L(this.settings.isMultiple ? "multiple" : "single", n), e.data && this.select.updateOptions(this.store.getData());
@@ -1819,7 +1854,8 @@ var U = class {
 		}, this.lifecycle = new P({
 			beforeOpen: this.events.beforeOpen,
 			afterOpen: this.events.afterOpen,
-			beforeClose: this.events.beforeClose,
+			beforeClose: (e) => this.events.beforeClose?.(e),
+			onClose: (e) => this.applyClose(e),
 			afterClose: () => {
 				this.render.clearDirectionClasses(), this.render.finalizeModalClose(), this.events.afterClose && this.events.afterClose();
 			},
@@ -1837,7 +1873,10 @@ var U = class {
 				!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
 			},
 			onVisibilityChange: () => {
-				document.hidden && this.close();
+				document.hidden && this.close({
+					source: "api",
+					selectionChanged: !1
+				});
 			}
 		}), this.render.renderValues(), this.render.renderOptions(this.store.getData(!1));
 		let i = this.selectEl.getAttribute("aria-label"), a = this.selectEl.getAttribute("aria-labelledby");
@@ -1892,10 +1931,18 @@ var U = class {
 		let e = this.render.content.search.input.value.trim();
 		e !== "" && this.search(e);
 	}
-	close(e = null) {
-		!this.settings.isOpen || this.settings.alwaysOpen || (this.lifecycle.cancelPending(), this.render.close(), !this.settings.keepSearch && this.render.content.search.input.value !== "" && (this.sync.flush(), this.search("")), this.render.mainFocus(e), this.settings.isOpen = !1, this.settings.isFullOpen = !1, this.lifecycle.requestClose().then(() => {
-			this.settings.isOpen || (this.settings.isOpen = this.lifecycle.isOpen, this.settings.isFullOpen = this.lifecycle.isFullOpen);
-		}), this.render.stopPositionTracking());
+	close(e = {
+		source: "api",
+		selectionChanged: !1
+	}) {
+		!this.settings.isOpen || this.settings.alwaysOpen || this.lifecycle.requestClose(e).then((e) => {
+			e && (this.settings.isOpen || (this.settings.isOpen = this.lifecycle.isOpen, this.settings.isFullOpen = this.lifecycle.isFullOpen));
+		});
+	}
+	applyClose(e) {
+		this.render.close(), !this.settings.keepSearch && this.render.content.search.input.value !== "" && (this.sync.flush(), this.search(""));
+		let t = e.source === "outside" || e.source === "toggle";
+		this.render.mainFocus(t ? "click" : null), this.settings.isOpen = !1, this.settings.isFullOpen = !1, this.render.stopPositionTracking();
 	}
 	search(e) {
 		let t = e.trim();
@@ -1957,7 +2004,10 @@ var U = class {
 		this.lifecycle.destroy(), this.render.stopPositionTracking(), this.globalEvents.detach({ listenScroll: this.settings.openPosition === "auto" }), this.store.setData([]), this.render.destroy(), this.select.destroy(), delete this.selectEl.slim;
 	}
 	documentClick(e) {
-		this.settings.isOpen && e.target && !x(e.target, this.settings.id) && this.close(e.type);
+		this.settings.isOpen && e.target && !x(e.target, this.settings.id) && this.close({
+			source: "outside",
+			selectionChanged: !1
+		});
 	}
 }, G = e(({ data: e, settings: o, events: s, cssClasses: c, value: l, onChange: u, multiple: d }, f) => {
 	let p = r(null), m = r(null), h = r(!0), g = r(l), _ = r(null), v = r(u), y = r(s), b = r(d), x = r(l), [S, C] = i(!1);