@brandup/ui-dropdown 1.0.39 → 1.0.41

package/package.json

@@ -24,14 +24,14 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.7",
     "@brandup/ui-helpers": "^2.0.7",
-    "@brandup/ui-input": "^1.0.39",
-    "@brandup/ui-kit": "^1.0.39"
+    "@brandup/ui-input": "^1.0.41",
+    "@brandup/ui-kit": "^1.0.41"
   },
   "files": [
     "source",

package/source/dropdown.less

@@ -141,23 +141,7 @@
 				position: relative;
 				overflow-y: scroll;
 				padding-right: 5px;
-				scrollbar-width: 6px;
-			
-				&::-webkit-scrollbar {
-				  	width: 6px;
-				  	height: 5px;
-				  	background: none;
-				}
-			
-				&::-webkit-scrollbar-track {
-				  	border-radius: 3px;
-				  	background-color: transparent;
-				}
-			
-				&::-webkit-scrollbar-thumb {
-				  	background-color: #8696a0;
-				  	border-radius: 3px;
-				}
+				// полоса прокрутки — общая, от .ui-scrollable кита
 			
 				& li {
 					padding: calc(var(--input-padding-lr) / 2) var(--input-padding-lr);

package/source/dropdown.ts

@@ -1,5 +1,6 @@
 import { InputControl } from "@brandup/ui-input";
 import { DOM } from "@brandup/ui";
+import { SCROLLABLE_CLASS } from "@brandup/ui-kit";
 import { detectLanguage, transcriptText } from "./utils/utilities";
 
 import "./dropdown.less"; // стили компонента
@@ -44,14 +45,14 @@ class DropDown extends InputControl<HTMLSelectElement, DropDownEvents> {
 	readonly searchOn: number | boolean;
 
 	constructor(selectElem: HTMLSelectElement) {
-		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";
+		const placeholder = selectElem.dataset.placeholder || "Select";
+		const emptyText = selectElem.dataset.emptytext || "Empty list";
+		const searchPlaceholder = selectElem.dataset.searchPlaceholder || "Search";
+		const searchEmpty = selectElem.dataset.searchEmpty || "Not found";
+		const cancelText = selectElem.dataset.cancel || "Cancel";
 
 		let searchOn: number | boolean = 15;
-		const se = selectElem.getAttribute("data-search-on");
+		const se = selectElem.dataset.searchOn;
 		if (se) {
 			switch (se.toLowerCase()) {
 				case "true":
@@ -80,7 +81,7 @@ class DropDown extends InputControl<HTMLSelectElement, DropDownEvents> {
 		cancelButton.textContent = cancelText;
 
 		const searchInput = DOM.tag("input", { type: "search", maxlength: 50, placeholder: searchPlaceholder });
-		const listElem = DOM.tag("ul");
+		const listElem = DOM.tag("ul", { class: SCROLLABLE_CLASS });
 
 		const popupElem = DOM.tag("div", { class: "popup", tabindex: 0 }, [
 			DOM.tag("div", { class: "content" }, [
@@ -486,19 +487,15 @@ class DropDown extends InputControl<HTMLSelectElement, DropDownEvents> {
 		return (selected && selected.own.firstElementChild?.textContent?.trim()) || null;
 	}
 
+	// Правила проверяет браузер по атрибутам самого select; контрол отражает результат классом.
+	// Обязательность закрывает нативный required — для этого у пустого пункта value должно
+	// быть пустым, как и требует стандарт.
 	override validate(): boolean {
-		const value = this.getValue();
-		let isInvalid = !this.__valueElem.validity.valid;
+		const isValid = super.validate();
 
-		if (this.required && !value) isInvalid = true;
+		this.element.classList.toggle("invalid", !isValid);
 
-		const clearInvalid = () => this.element.classList.remove("invalid");
-
-		if (isInvalid) {
-			this.element.classList.add("invalid");
-		} else clearInvalid();
-
-		return !isInvalid;
+		return isValid;
 	}
 
 	override destroy(): void {