@brandup/ui-dropdown 1.0.25 → 1.0.28

package/README.md

@@ -1,21 +1,94 @@
-# brandup-ui-dropdown
+# @brandup/ui-dropdown
 
-[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=master)]()
+[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=main)](https://dev.azure.com/brandup/BrandUp%20Core/_build/latest?definitionId=81&branchName=main)
 
-## Installation
+Компонент выпадающего списка, заменяющий стандартный `<select>`. Поддерживает поиск с транслитерацией (EN ↔ RU), адаптивный режим для планшетов и валидацию через форму.
 
-Install NPM package [@brandup/ui](https://www.npmjs.com/package/@brandup/ui-dropdown).
+## Установка
 
 ```
-npm i @brandup/ui-dropdown@latest
+npm i @brandup/ui-dropdown
 ```
 
-## DropDown
+## Использование
 
-`DropDown` - это классовый компонент, который расширяет возможности стандартных элементов `select`.
-Наследуется от `InputControl`.
+```html
+<select id="city" data-placeholder="Выберите город" data-search-on="5">
+    <option value="">— не выбрано —</option>
+    <option value="msk">Москва</option>
+    <option value="spb">Санкт-Петербург</option>
+</select>
+```
+
+```typescript
+import DropDown from "@brandup/ui-dropdown";
+import { CHANGE_EVENT, ChangeEventData } from "@brandup/ui-dropdown";
+
+const selectElem = document.getElementById("city") as HTMLSelectElement;
+const dropdown = new DropDown(selectElem);
 
-```JS
-const dropDownElem = document.getElementById("name");
-const dropdown = new DropDown(dropDownElem);
+dropdown.on(CHANGE_EVENT, (data: ChangeEventData) => {
+    console.log(data.value, data.title, data.index);
+});
 ```
+
+## Data-атрибуты
+
+| Атрибут | По умолчанию | Описание |
+|---|---|---|
+| `data-placeholder` | `"Select"` | Текст при отсутствии выбранного значения |
+| `data-emptytext` | `"Empty list"` | Текст при пустом списке опций |
+| `data-search-placeholder` | `"Search"` | Плейсхолдер строки поиска |
+| `data-search-empty` | `"Not found"` | Текст при отсутствии результатов поиска |
+| `data-cancel` | `"Cancel"` | Текст кнопки закрытия (адаптивный режим) |
+| `data-search-on` | `15` | Порог отображения поиска: число (минимальное кол-во опций), `"true"` — всегда, `"false"` — никогда |
+
+## API
+
+### Методы (унаследованы от InputControl)
+
+| Метод | Описание |
+|---|---|
+| `validate(): boolean` | Проверяет значение через нативный `checkValidity()` |
+| `focus(): void` | Устанавливает фокус |
+| `destroy(): void` | Восстанавливает исходный `<select>` и освобождает ресурсы |
+
+### Свойства
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `placeholder` | `string` | Текст-заглушка |
+| `emptyText` | `string` | Текст при пустом списке |
+| `searchOn` | `number \| boolean` | Настройка отображения строки поиска |
+
+### Событие dropdown-change
+
+Генерируется при выборе значения из списка.
+
+```typescript
+import { CHANGE_EVENT, ChangeEventData } from "@brandup/ui-dropdown";
+
+dropdown.on(CHANGE_EVENT, (data: ChangeEventData) => {
+    console.log(data.value);  // значение выбранного <option>
+    console.log(data.title);  // текст выбранного <option>
+    console.log(data.index);  // индекс выбранного элемента в списке
+});
+```
+
+## Поиск и транслитерация
+
+Когда количество опций превышает порог `data-search-on`, в попапе отображается строка поиска. Поиск выполняется по тексту опций и поддерживает **автоматическую транслитерацию**:
+
+- Ввод на русской раскладке → поиск по английскому тексту
+- Ввод на английской раскладке → поиск по русскому тексту
+
+```typescript
+import { detectLanguage, transcriptText } from "@brandup/ui-dropdown";
+
+const lang = detectLanguage("hello"); // "english"
+const variants = transcriptText("руку"); // { english: "reue" }
+```
+
+## Адаптивный режим
+
+На экранах шириной менее `1030px` попап открывается в полноэкранном режиме с кнопкой «Отмена».

package/package.json

@@ -11,25 +11,24 @@
     "name": "Dmitry Kovyazin",
     "email": "it@brandup.online"
   },
-  "homepage": "https://github.com/brandup-online/brandup-ui/npm/brandup-ui-dropdown",
+  "homepage": "https://github.com/brandup-online/brandup-ui-kit/npm/brandup-ui-dropdown",
   "repository": {
     "type": "git",
-    "url": "https://github.com/brandup-online/brandup-ui.git"
+    "url": "https://github.com/brandup-online/brandup-ui-kit.git"
   },
   "bugs": {
-    "url": "https://github.com/brandup-online/brandup-ui/issues",
+    "url": "https://github.com/brandup-online/brandup-ui-kit/issues",
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.25",
+  "version": "1.0.28",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
-    "@brandup/ui": "^1.0.41",
-    "@brandup/ui-dom": "^1.0.41",
-    "@brandup/ui-helpers": "^1.0.41",
-    "@brandup/ui-input": "^1.0.25",
-    "@brandup/ui-kit": "^1.0.25"
+    "@brandup/ui": "^2.0.2",
+    "@brandup/ui-helpers": "^2.0.2",
+    "@brandup/ui-input": "^1.0.28",
+    "@brandup/ui-kit": "^1.0.28"
   },
   "files": [
     "source",

package/source/dropdown.ts

@@ -1,5 +1,5 @@
 import { InputControl } from "@brandup/ui-input";
-import { DOM } from "@brandup/ui-dom";
+import { DOM } from "@brandup/ui";
 import { detectLanguage, transcriptText } from "./utils/utilities";
 
 import "./dropdown.less"; // стили компонента
@@ -17,7 +17,15 @@ export const CHANGE_EVENT = "dropdown-change";
 const TABLET_WIDTH = 1030;
 const BODY_EXPANDED = "ui-dropdown-opened";
 
-class DropDown extends InputControl<HTMLSelectElement> {
+// Метаданные транслитерации, привязанные к <li>-элементам. WeakMap не мешает GC очищать удалённые li,
+// в отличие от прежнего `(elem as any)['wsdd_transcript'] = ...` (грязно и без типов).
+const itemTranscripts = new WeakMap<Element, ReturnType<typeof transcriptText>>();
+
+type DropDownEvents = {
+	[CHANGE_EVENT]: (data: ChangeEventData) => void;
+};
+
+class DropDown extends InputControl<HTMLSelectElement, DropDownEvents> {
 	private __container: HTMLElement;
 	private __popupElem: HTMLElement;
 	private __listElem: HTMLElement;
@@ -25,77 +33,111 @@ class DropDown extends InputControl<HTMLSelectElement> {
 	private __emptyElem: HTMLElement;
 	private __searchInput: HTMLInputElement;
 	private __closePopupFunc: (e: MouseEvent) => void;
-	private __invalidTimeout?: number;
+	private __reposAbort?: AbortController;
 	private __hasEmptyValue: boolean = false;
 
 	readonly placeholder: string;
 	readonly emptyText: string;
 	readonly searchPlaceholder: string;
 	readonly searchEmpty: string;
-	readonly searchOn: number | boolean = 15;
-
-	get typeName(): string { return "BrandUp.DropDown"; }
+	readonly cancelText: string;
+	readonly searchOn: number | boolean;
 
 	constructor(selectElem: HTMLSelectElement) {
-		super(selectElem);
+		selectElem.classList.add(INPUT_CLASS);
 
-		this.__valueElem.classList.add(INPUT_CLASS);
+		const placeholder = selectElem.getAttribute("data-placeholder") || "Select";
+		const emptyText = selectElem.getAttribute("data-emptytext") || "Empty list";
+		const searchPlaceholder = selectElem.getAttribute("data-search-placeholder") || "Search";
+		const searchEmpty = selectElem.getAttribute("data-search-empty") || "Not found";
+		const cancelText = selectElem.getAttribute("data-cancel") || "Cancel";
 
-		this.placeholder = this.__valueElem.getAttribute("data-placeholder") || "Select";
-		this.emptyText = this.__valueElem.getAttribute("data-emptytext") || "Empty list";
-		this.searchPlaceholder = this.__valueElem.getAttribute("data-search-placeholder") || "Search";
-		this.searchEmpty = this.__valueElem.getAttribute("data-search-empty") || "Not found";
-
-		const se = this.__valueElem.getAttribute("data-search-on");
+		let searchOn: number | boolean = 15;
+		const se = selectElem.getAttribute("data-search-on");
 		if (se) {
 			switch (se.toLowerCase()) {
 				case "true":
-					this.searchOn = true;
+					searchOn = true;
 					break;
 				case "false":
-					this.searchOn = false;
+					searchOn = false;
+					break;
 				default:
-					this.searchOn = parseInt(se);
+					searchOn = parseInt(se);
 					break;
 			}
 		}
 
-		// __renderUI
-		this.__container = DOM.tag("div", { class: [ROOT_CLASS].concat(Array.from(this.__valueElem.classList)) }, [
-			DOM.tag("button", { class: "view", command: "open-popup" }, [this.__textElem = DOM.tag("span", null, this.placeholder ?? ''), arrowBottomIcon]),
-			this.__popupElem = DOM.tag("div", { class: "popup", tabindex: 0 }, [
-				DOM.tag("div", "content", [
-					DOM.tag("div", "header", [
-						DOM.tag("span", null, this.placeholder ?? ''),
-						DOM.tag("button", { command: "close-popup" }, closeIcon)]
-					),
-					DOM.tag("div", { class: "search" }, [
-						searchIcon,
-						this.__searchInput = <HTMLInputElement>DOM.tag("input", { type: "search", maxlength: 50, placeholder: this.searchPlaceholder })
-					]),
-					this.__listElem = DOM.tag("ul"),
-					this.__emptyElem = DOM.tag("div", { class: "empty" }, this.emptyText),
-					DOM.tag("button", { class: "cancel", command: "close-popup" }, "Отмена")
-				])
-			])
+		// текст из option/data-* атрибутов вставляем через textContent, чтобы не получить XSS через DOM.tag
+		const textElem = DOM.tag("span", null);
+		textElem.textContent = placeholder;
+
+		const headerLabel = DOM.tag("span", null);
+		headerLabel.textContent = placeholder;
+
+		const emptyElem = DOM.tag("div", { class: "empty" });
+		emptyElem.textContent = emptyText;
+
+		const cancelButton = DOM.tag("button", { class: "cancel", command: "close-popup" });
+		cancelButton.textContent = cancelText;
+
+		const searchInput = DOM.tag("input", { type: "search", maxlength: 50, placeholder: searchPlaceholder });
+		const listElem = DOM.tag("ul");
+
+		const popupElem = DOM.tag("div", { class: "popup", tabindex: 0 }, [
+			DOM.tag("div", { class: "content" }, [
+				DOM.tag("div", { class: "header" }, [
+					headerLabel,
+					DOM.tag("button", { command: "close-popup" }, closeIcon),
+				]),
+				DOM.tag("div", { class: "search" }, [searchIcon, searchInput]),
+				listElem,
+				emptyElem,
+				cancelButton,
+			]),
 		]);
 
-		this.__container.classList.remove(INPUT_CLASS);
+		const container = DOM.tag("div", { class: [ROOT_CLASS].concat(Array.from(selectElem.classList)) }, [
+			DOM.tag("button", { class: "view", command: "open-popup" }, [textElem, arrowBottomIcon]),
+			popupElem,
+		]);
 
-		this.setElement(this.__container);
+		container.classList.remove(INPUT_CLASS);
 
-		if (this.__valueElem.nextElementSibling) {
-			const nextElem = <HTMLElement>this.__valueElem.nextElementSibling;
+		if (selectElem.nextElementSibling) {
+			const nextElem = selectElem.nextElementSibling as HTMLElement;
 			if (nextElem.classList.contains(MINIATURE_CLASS)) nextElem.remove();
 		}
 
-		this.__valueElem.insertAdjacentElement("beforebegin", this.__container);
-		this.__container.insertAdjacentElement("beforeend", this.__valueElem);
+		selectElem.insertAdjacentElement("beforebegin", container);
+		container.insertAdjacentElement("beforeend", selectElem);
+
+		super("BrandUp.DropDown", container, selectElem);
+
+		this.placeholder = placeholder;
+		this.emptyText = emptyText;
+		this.searchPlaceholder = searchPlaceholder;
+		this.searchEmpty = searchEmpty;
+		this.cancelText = cancelText;
+		this.searchOn = searchOn;
+
+		this.__container = container;
+		this.__popupElem = popupElem;
+		this.__listElem = listElem;
+		this.__textElem = textElem;
+		this.__emptyElem = emptyElem;
+		this.__searchInput = searchInput;
 
 		this.__closePopupFunc = (e: MouseEvent) => {
-			const t = <HTMLElement>e.target;
+			const t = e.target as HTMLElement;
 			const dd = t.closest(`.${ROOT_CLASS}`);
-			if (!dd || (dd === this.__container && !t.closest("li[data-index]") && t !== this.__searchInput && !t.closest(".search"))) {
+			if (
+				!dd ||
+				(dd === this.__container &&
+					!t.closest("li[data-index]") &&
+					t !== this.__searchInput &&
+					!t.closest(".search"))
+			) {
 				this.__closePopup();
 				this.__clearSearch();
 			}
@@ -110,20 +152,18 @@ class DropDown extends InputControl<HTMLSelectElement> {
 		const optionsCount = this.__valueElem.options.length;
 		const selectedIndex = this.__valueElem.selectedIndex;
 
-		if (!optionsCount)
-			this.__textElem.innerText = this.placeholder;
+		if (!optionsCount) this.__textElem.innerText = this.placeholder;
 
 		if (!optionsCount) {
-			this.element?.classList.add("empty");
+			this.element.classList.add("empty");
 			return;
 		}
 
 		// определяем можно ли делать поиск по элементам в списке
-		let isSearchable = false;
-		if (this.searchOn === true || optionsCount >= <number>this.searchOn) {
-			this.element?.classList.add("searchable");
-			isSearchable = true;
-		}
+		// явная проверка типа: для false `optionsCount >= false` коэрсится в `>= 0` и всегда true
+		const isSearchable =
+			this.searchOn === true || (typeof this.searchOn === "number" && optionsCount >= this.searchOn);
+		if (isSearchable) this.element.classList.add("searchable");
 
 		// вставляем элементы меню в фрагмент, чтобы не нагружать процессор
 		const popupItemsFragment = document.createDocumentFragment();
@@ -131,8 +171,7 @@ class DropDown extends InputControl<HTMLSelectElement> {
 		let elemCount = 0;
 		for (let i = 0; i < optionsCount; i++) {
 			const optionElem = this.__valueElem.options.item(i);
-			if (!optionElem)
-				continue;
+			if (!optionElem) continue;
 
 			const itemText = optionElem.textContent?.trim() || "";
 			const itemValue = optionElem.value;
@@ -144,25 +183,18 @@ class DropDown extends InputControl<HTMLSelectElement> {
 				continue;
 			}
 
-			let itemElem = DOM.tag("li", { command: "select", dataset: { value: itemValue, index: i.toString() } }, [
-				DOM.tag("span", { tabindex: "0" }, itemText),
-				checkIcon
-			]
-			);
+			const itemSpan = DOM.tag("span", { tabindex: "0" });
+			itemSpan.textContent = itemText; // безопасно: textContent не парсит HTML
 
-			const transcript = (<any>itemElem)['wsdd_transcript'] = transcriptText(itemText);
-
-			const isSelected = selectedIndex === i;
-			if (isSelected)
-				itemElem.classList.add("hasvalue");
+			const itemElem = DOM.tag("li", { command: "select", dataset: { value: itemValue, index: i.toString() } }, [
+				itemSpan,
+				checkIcon,
+			]);
 
-			if (isSearchable) {
-				// дублируем быстрый элемент в общем списке, чтобы находить его при поиске
+			itemTranscripts.set(itemElem, transcriptText(itemText));
 
-				itemElem = itemElem.cloneNode(true) as HTMLLIElement;
-				(<any>itemElem)['wsdd_transcript'] = transcript;
-				popupItemsFragment.append(itemElem);
-			}
+			const isSelected = selectedIndex === i;
+			if (isSelected) itemElem.classList.add("hasvalue");
 
 			popupItemsFragment.append(itemElem);
 
@@ -174,8 +206,7 @@ class DropDown extends InputControl<HTMLSelectElement> {
 			elemCount++;
 		}
 
-		if (this.__hasEmptyValue && !elemCount)
-			this.element?.classList.add("empty");
+		if (this.__hasEmptyValue && !elemCount) this.element.classList.add("empty");
 
 		this.__listElem.append(popupItemsFragment);
 	}
@@ -184,10 +215,7 @@ class DropDown extends InputControl<HTMLSelectElement> {
 		this.registerCommand("open-popup", () => this.__togglePopup());
 		this.registerCommand("close-popup", () => this.__closePopup());
 
-		this.registerCommand("select", context => {
-			if (!this.element)
-				return;
-
+		this.registerCommand("select", (context) => {
 			const newIndex = context.target.dataset.index;
 
 			this.element.classList.remove("invalid");
@@ -195,13 +223,12 @@ class DropDown extends InputControl<HTMLSelectElement> {
 			this.__closePopup();
 
 			const currentSelect = this.__getSelectedElem();
-			if (currentSelect && newIndex === currentSelect.own.dataset.index)
-				return; // если выбор остался таким же
+			if (currentSelect && newIndex === currentSelect.own.dataset.index) return; // если выбор остался таким же
 
-			DOM.removeClass(this.element, '.hasvalue', 'hasvalue');
+			DOM.removeClass(this.element, ".hasvalue", "hasvalue");
 
 			if (currentSelect && currentSelect.own.closest(`.${ROOT_CLASS}`))
-				this.__textElem.innerText = this.placeholder ?? '';
+				this.__textElem.innerText = this.placeholder ?? "";
 
 			// делаем новый выбор
 			this.__valueElem.value = context.target.dataset.value || "";
@@ -239,8 +266,7 @@ class DropDown extends InputControl<HTMLSelectElement> {
 					if (isSpan) {
 						// Если есть предыдущий элемент, то переводим фокус на него
 						const prevItemElem = target.parentElement?.previousElementSibling;
-						if (prevItemElem)
-							(<HTMLElement>prevItemElem.firstElementChild).focus();
+						if (prevItemElem) (<HTMLElement>prevItemElem.firstElementChild).focus();
 
 						e.preventDefault();
 					}
@@ -250,8 +276,7 @@ class DropDown extends InputControl<HTMLSelectElement> {
 					if (isSpan) {
 						// Если есть следующий элемент, то переводим фокус на него
 						const nextItemElem = target.parentElement?.nextElementSibling;
-						if (nextItemElem)
-							(<HTMLElement>nextItemElem.firstElementChild).focus();
+						if (nextItemElem) (<HTMLElement>nextItemElem.firstElementChild).focus();
 
 						e.preventDefault();
 					}
@@ -264,22 +289,22 @@ class DropDown extends InputControl<HTMLSelectElement> {
 					break;
 				}
 				case "Tab": {
-					if (target == this.__popupElem && this.element?.classList.contains("empty")) {
+					if (target == this.__popupElem && this.element.classList.contains("empty")) {
 						// если список пустой, то фокус уйдёт от компанента на следующий и нужно закрыть popup
 						this.__closePopup();
-					}
-					else if (target == this.__searchInput && this.__listElem.classList.contains("notfound")) {
+					} else if (target == this.__searchInput && this.__listElem.classList.contains("notfound")) {
 						// если не найдено, то фокус уйдёт от компанента на следующий и нужно закрыть popup
 						this.__closePopup();
-					}
-					else if (isSpan && !target.parentElement?.nextElementSibling) {
+					} else if (isSpan && !target.parentElement?.nextElementSibling) {
 						// если фокус на последнем элементе списка, то фокус уйдёт от компанента на следующий и нужно закрыть popup
 						this.__closePopup();
 					}
 					break;
 				}
-				case "Enter": { // так как теперь мы обрабатываем не <a>
-					target.click();
+				case "Enter": {
+					// так как теперь мы обрабатываем не <a>
+					e.preventDefault(); // чтобы Enter в поле поиска не сабмитил форму, в которой может находиться dropdown
+					if (isSpan) target.click();
 					this.__closePopup();
 					break;
 				}
@@ -296,21 +321,25 @@ class DropDown extends InputControl<HTMLSelectElement> {
 			dropdown: this,
 			index: this.getSelectedIndex(),
 			value: this.getValue(),
-			title: this.getSelectedTitle()
+			title: this.getSelectedTitle(),
 		});
 	}
 
 	private __togglePopup() {
-		if (this.element?.classList.contains("disabled"))
-			return;
+		if (this.element.classList.contains("disabled")) return;
 
-		if (!this.element?.classList.toggle("expanded"))
+		if (this.element.classList.contains("expanded")) {
+			// уже открыт — закрываем чисто, чтобы и body-класс, и mouseup-листенер ушли
+			this.__closePopup();
 			return;
+		}
+
+		this.element.classList.add("expanded");
 
 		// закрываем все открытые попапы, кроме текущего
-		document.querySelectorAll('.ui-dropdown.expanded').forEach((dropdown) => {
+		document.querySelectorAll(".ui-dropdown.expanded").forEach((dropdown) => {
 			if (dropdown !== this.element) {
-				dropdown.classList.remove('expanded');
+				dropdown.classList.remove("expanded");
 			}
 		});
 
@@ -318,17 +347,25 @@ class DropDown extends InputControl<HTMLSelectElement> {
 
 		this.__positionPopup();
 
+		// пока popup открыт, перепозиционируем при изменении окна/скролле страницы
+		this.__reposAbort = new AbortController();
+		const reposition = () => this.__positionPopup();
+		window.addEventListener("resize", reposition, { signal: this.__reposAbort.signal });
+		window.addEventListener("scroll", reposition, {
+			signal: this.__reposAbort.signal,
+			passive: true,
+			capture: true,
+		});
+
 		document.body.classList.add(BODY_EXPANDED);
 
-		let top = 0;
 		const selectedElem = this.__getSelectedElem();
 		const itemHeight = selectedElem?.own?.clientHeight || 0;
 		const itemTop = selectedElem?.own?.offsetTop || 0;
 
-		top = itemTop - this.__listElem.clientHeight / 2 + itemHeight;
+		const top = itemTop - this.__listElem.clientHeight / 2 + itemHeight;
 
-		if (top !== null)
-			this.__listElem.scrollTo({ left: 0, top: top, behavior: 'instant' });
+		this.__listElem.scrollTo({ left: 0, top: top, behavior: "instant" });
 
 		document.body.addEventListener("mouseup", this.__closePopupFunc);
 	}
@@ -336,8 +373,7 @@ class DropDown extends InputControl<HTMLSelectElement> {
 	private __positionPopup() {
 		this.__popupElem.classList.remove("top", "right");
 
-		if (document.body.clientWidth <= TABLET_WIDTH)
-			return;
+		if (document.body.clientWidth <= TABLET_WIDTH) return;
 
 		const bodyHeight = document.body.clientHeight;
 		const popupRect = this.__popupElem.getBoundingClientRect();
@@ -353,8 +389,10 @@ class DropDown extends InputControl<HTMLSelectElement> {
 
 	private __closePopup() {
 		document.body.classList.remove(BODY_EXPANDED);
-		this.element?.classList.remove("expanded");
+		this.element.classList.remove("expanded");
 		document.body.removeEventListener("mouseup", this.__closePopupFunc);
+		this.__reposAbort?.abort();
+		this.__reposAbort = undefined;
 	}
 
 	private __search(query: string) {
@@ -368,19 +406,16 @@ class DropDown extends InputControl<HTMLSelectElement> {
 		this.__listElem.classList.add("result");
 		const items = DOM.queryElements(this.__listElem, "li span");
 
-
 		let findedCount = 0;
-		items.forEach(it => {
+		items.forEach((it) => {
 			const item = it.parentElement;
-			if (!item)
-				return;
+			if (!item) return;
 
-			if (it.innerText.toLowerCase().startsWith(query)) {
+			// textContent надёжнее: innerText в браузерах может возвращать пусто/неожиданное для скрытых элементов
+			if ((it.textContent ?? "").toLowerCase().startsWith(query)) {
 				item.classList.add("ok");
 				findedCount++;
-			}
-			else
-				item.classList.remove("ok");
+			} else item.classList.remove("ok");
 		});
 
 		if (!findedCount) {
@@ -391,16 +426,12 @@ class DropDown extends InputControl<HTMLSelectElement> {
 			if (queryLang) {
 				for (let i = 0; i < this.__listElem.children.length; i++) {
 					const item = this.__listElem.children.item(i);
-					if (!item)
-						continue;
-					const transcript = (<any>item)['wsdd_transcript'];
+					if (!item) continue;
+					const transcript = itemTranscripts.get(item);
 					if (transcript && transcript[queryLang] && transcript[queryLang].startsWith(query)) {
-
 						item.classList.add("ok");
 						findedCount++;
-					}
-					else
-						item.classList.remove("ok");
+					} else item.classList.remove("ok");
 				}
 			}
 		}
@@ -408,33 +439,24 @@ class DropDown extends InputControl<HTMLSelectElement> {
 		if (findedCount > 0) {
 			this.__emptyElem.innerText = this.emptyText;
 			this.__listElem.classList.remove("notfound");
-		}
-		else {
+		} else {
 			this.__emptyElem.innerText = this.searchEmpty;
 			this.__listElem.classList.add("notfound");
 		}
 	}
 
 	private __clearSearch() {
-		if (!this.__listElem.classList.contains("result"))
-			return;
+		if (!this.__listElem.classList.contains("result")) return;
 
 		this.__emptyElem.innerText = this.emptyText;
 		this.__listElem.classList.remove("result", "notfound");
 		DOM.removeClass(this.__listElem, "li.ok", "ok");
-		this.__searchInput.value = '';
+		this.__searchInput.value = "";
 	}
 
 	private __getElems(selector: string): { own: HTMLElement } | null {
-		if (!this.element)
-			return null;
-
-		const elems = DOM.queryElements(this.element, selector);
-		if (elems.length === 2)
-			return { own: elems.item(0) };
-		else if (elems.length === 1)
-			return { own: elems.item(0) };
-		return null;
+		const elem = DOM.queryElement<HTMLElement>(this.element, selector);
+		return elem ? { own: elem } : null;
 	}
 
 	private __getElemsByIndex(index: number) {
@@ -459,21 +481,16 @@ class DropDown extends InputControl<HTMLSelectElement> {
 	}
 
 	override validate(): boolean {
-		window.clearTimeout(this.__invalidTimeout);
-
-		let value = this.getValue();
+		const value = this.getValue();
 		let isInvalid = !this.__valueElem.validity.valid;
 
-		if (this.required && !value)
-			isInvalid = true;
+		if (this.required && !value) isInvalid = true;
 
-		const clearInvalid = () => this.element?.classList.remove("invalid");
+		const clearInvalid = () => this.element.classList.remove("invalid");
 
 		if (isInvalid) {
-			this.element?.classList.add("invalid");
-		}
-		else
-			clearInvalid();
+			this.element.classList.add("invalid");
+		} else clearInvalid();
 
 		return !isInvalid;
 	}
@@ -481,8 +498,8 @@ class DropDown extends InputControl<HTMLSelectElement> {
 	override destroy(): void {
 		this.__closePopup();
 
-		this.element?.insertAdjacentElement("afterend", this.__valueElem);
-		this.element?.remove();
+		this.element.insertAdjacentElement("afterend", this.__valueElem);
+		this.element.remove();
 
 		super.destroy();
 	}
@@ -495,4 +512,4 @@ export interface ChangeEventData {
 	title: string | null;
 }
 
-export default DropDown;
+export default DropDown;

package/source/index.ts

@@ -1,2 +1,2 @@
-export { default } from './dropdown';
-export * from './utils/utilities';
+export { default } from "./dropdown";
+export * from "./utils/utilities";

package/source/typings/less.d.ts

@@ -0,0 +1 @@
+declare module "*.less";

package/source/typings/svg.d.ts

@@ -1,4 +1,4 @@
 declare module "*.svg" {
-    const content: any;
-    export default content;
-}
+	const content: any;
+	export default content;
+}

package/source/utils/utilities.ts

@@ -1,8 +1,8 @@
-const REGEX_CHAR = /\p{L}/u
+const REGEX_CHAR = /\p{L}/u;
 
 const languages: { [keys in Language]: string } = {
-    english: "qwertyuiopasdfghjklzxcvbnm",
-    russian: "йцукенгшщзхъфывапролджэячсмитьбю",
+	english: "qwertyuiopasdfghjklzxcvbnm",
+	russian: "йцукенгшщзхъфывапролджэячсмитьбю",
 };
 
 // prettier-ignore
@@ -22,51 +22,48 @@ const russian_english_dict: ICharMap = {
 };
 
 interface ICharMap {
-    [keys: string]: string;
+	[keys: string]: string;
 }
 
 type ITranscriptMap = {
-    // {целевой язык: {язык ввода: словарь}}
-    [keys in Language]: { [keys: string]: ICharMap };
+	// {целевой язык: {язык ввода: словарь}}
+	[keys in Language]: { [keys: string]: ICharMap };
 };
 
 const dictionariesMap: ITranscriptMap = {
-    russian: { english: russian_english_dict },
-    english: { russian: english_russian_dict },
+	russian: { english: russian_english_dict },
+	english: { russian: english_russian_dict },
 };
 
 export type Language = "english" | "russian";
 
 export const detectLanguage = (text: string) => {
-    if (!text)
-        return null;
+	if (!text) return null;
 
-    const match = text.match(REGEX_CHAR);
-    if (!match)
-        return null;
+	const match = text.match(REGEX_CHAR);
+	if (!match) return null;
 
-    const firstChar = match[0].toLocaleLowerCase();
-    for (const lang in languages) {
-        if (languages[<Language>lang].includes(firstChar))
-            return lang as Language;
-    }
+	const firstChar = match[0].toLocaleLowerCase();
+	for (const lang in languages) {
+		if (languages[<Language>lang].includes(firstChar)) return lang as Language;
+	}
 
-    return null;
+	return null;
 };
 
 export const transcriptText = (text: string) => {
-    const transcriptVariants: { [keys: string]: string; } = {};
+	const transcriptVariants: { [keys: string]: string } = {};
 
-    const textLanguage = detectLanguage(text);
-    if (textLanguage) {
-        const textArr: string[] = Array.from(text.toLowerCase());
-        for (const lang in dictionariesMap[textLanguage]) {
-            const langVariant = dictionariesMap[textLanguage][lang];
+	const textLanguage = detectLanguage(text);
+	if (textLanguage) {
+		const textArr: string[] = Array.from(text.toLowerCase());
+		for (const lang in dictionariesMap[textLanguage]) {
+			const langVariant = dictionariesMap[textLanguage][lang];
 
-            const transcript = textArr.reduce((prev, current) => prev + (langVariant[current] || current), "");
-            transcriptVariants[lang] = transcript;
-        }
-    }
+			const transcript = textArr.reduce((prev, current) => prev + (langVariant[current] || current), "");
+			transcriptVariants[lang] = transcript;
+		}
+	}
 
-    return transcriptVariants;
-};
+	return transcriptVariants;
+};