@studiocms/ui 0.4.16 → 0.4.17

package/dist/components/SearchSelect/SearchSelect.astro

@@ -154,31 +154,33 @@ const defaultLabel = selected
 			/>
 			<Icon name="chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
 		</div>
-		<ul class="sui-search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
-			{
-				options.map((x, i) => {
-					const isSelected = Array.isArray(selected)
-						? selected.map((y) => y && y.value).includes(x.value)
-						: selected?.value === x.value;
-					return (
-						<li
-							class="sui-search-select-option"
-							role="option"
-							value={x.value}
-							class:list={[
-								isSelected && `selected`,
-								x.disabled && "disabled"
-							]}
-							id={isSelected ? `${name}-selected` : ""}
-							data-option-index={i}
-							data-value={x.value}
-						>
-							{x.label}
-						</li>
-					)
-				})
-			}
-		</ul>
+		<div class="sui-search-select-dropdown">
+			<ul class="sui-search-select-dropdown-list" role="listbox" id={`${name}-dropdown`}>
+				{
+					options.map((x, i) => {
+						const isSelected = Array.isArray(selected)
+							? selected.map((y) => y && y.value).includes(x.value)
+							: selected?.value === x.value;
+						return (
+							<li
+								class="sui-search-select-option"
+								role="option"
+								value={x.value}
+								class:list={[
+									isSelected && `selected`,
+									x.disabled && "disabled"
+								]}
+								id={isSelected ? `${name}-selected` : ""}
+								data-option-index={i}
+								data-value={x.value}
+							>
+								{x.label}
+							</li>
+						)
+					})
+				}
+			</ul>
+		</div>
 	</div>
 	<select class="sui-hidden-search-select" id={name} name={name} required={isRequired} multiple={multiple ? "" : undefined} hidden tabindex="-1">
 		<option value={""}> Select </option>

package/dist/components/SearchSelect/searchselect.css

@@ -32,19 +32,25 @@
 .sui-search-select-dropdown {
   position: absolute;
   width: 100%;
-  border: 1px solid hsl(var(--border));
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex-direction: column;
-  border-radius: var(--radius-md);
-  background-color: hsl(var(--background-step-2));
-  overflow: hidden;
   top: calc(100% + 0.25rem);
   left: 0;
   display: none;
+  max-height: 300px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  background-color: hsl(var(--background-step-2));
   z-index: 90;
   box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  overflow: hidden;
+}
+.sui-search-select-dropdown-list {
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-color: hsl(var(--border)) hsl(var(--background-step-2));
 }
 .sui-search-select-dropdown.above {
   top: auto;
@@ -105,7 +111,6 @@
   position: absolute;
   bottom: .675rem;
   right: .675rem;
-  pointer-events: none;
 }
 .sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
   display: flex;

package/dist/components/SearchSelect/searchselect.js

@@ -82,7 +82,7 @@ function loadSearchSelects() {
     );
     if (option) {
       option.classList.toggle("selected", forceState ?? !isCurrentlySelected);
-      if (container && container.select) {
+      if (container?.select) {
         container.select.value = option.getAttribute("value");
       }
     }
@@ -150,6 +150,26 @@ function loadSearchSelects() {
     if (!target.closest("input")) {
       e.preventDefault();
     }
+    if (container.input?.value.length === 0) {
+      reconstructOptions(state2.optionsMap[container.dataset.id] ?? [], state2, container);
+    }
+    if (target.closest(".sui-search-select-indicator")) {
+      if (container.dropdown?.parentElement?.classList.contains("active")) {
+        container.dropdown?.parentElement?.classList.remove("active", "above");
+        container.input?.blur();
+        container.input.value = "";
+      } else {
+        container.dropdown?.parentElement?.classList.add("active");
+        container.input?.focus();
+        container.input.value = "";
+      }
+      return;
+    }
+    if (target.closest(".sui-search-select-badge-container")) {
+      container.dropdown?.parentElement?.classList.remove("active", "above");
+      container.input?.blur();
+      container.input.value = "";
+    }
     state2.isSelectingOption = true;
     setTimeout(() => {
       state2.isSelectingOption = false;
@@ -182,7 +202,7 @@ function loadSearchSelects() {
       }
       updateOptionSelection(opt.dataset.value, container, state2, true);
       updateLabel(false, state2, container);
-      container.dropdown?.classList.remove("active", "above");
+      container.dropdown?.parentElement?.classList.remove("active", "above");
       container.input?.blur();
       container.input.value = "";
     }
@@ -191,7 +211,7 @@ function loadSearchSelects() {
     const focusedElement = document.activeElement;
     if (e.key === "Escape" || e.key === "Tab") {
       container.input?.blur();
-      container.dropdown?.classList.remove("active", "above");
+      container.dropdown?.parentElement?.classList.remove("active", "above");
       return;
     }
     if ((e.key === "Enter" || e.key === " ") && focusedElement?.tagName.toLowerCase() === "svg") {
@@ -278,7 +298,7 @@ function loadSearchSelects() {
           }
           updateOptionSelection(value, container, state2, true);
           updateLabel(false, state2, container);
-          container.dropdown?.classList.remove("active", "above");
+          container.dropdown?.parentElement?.classList.remove("active", "above");
           container.input.value = "";
         }
       }
@@ -301,20 +321,20 @@ function loadSearchSelects() {
     if (state2.isSelectingOption) return;
     container.input.value = "";
     reconstructOptions(state2.optionsMap[container.dataset.id] ?? [], state2, container);
-    container.dropdown?.classList.remove("active", "above");
+    container.dropdown?.parentElement?.classList.remove("active", "above");
   };
   const handleContainerFocusIn = (state2, container) => {
-    const allDropdowns = document.querySelectorAll(".sui-search-select-dropdown");
+    const allDropdowns = document.querySelectorAll(".sui-search-select-dropdown-list");
     for (const dropdown of allDropdowns) {
       if (dropdown !== container.dropdown) {
-        dropdown.classList.remove("active", "above");
+        dropdown.parentElement?.classList.remove("active", "above");
       }
     }
     const { isAbove } = getDropdownPosition(
       container.input,
       state2.optionsMap[container.dataset.id]?.length ?? 0
     );
-    container.dropdown?.classList.add("active", ...isAbove ? [] : ["above"]);
+    container.dropdown?.parentElement?.classList.add("active", ...isAbove ? [] : ["above"]);
   };
   const state = {
     optionsMap: {},
@@ -330,7 +350,7 @@ function loadSearchSelects() {
     const id = container.dataset.id;
     const specialContainer = Object.assign(container, {
       input: container.querySelector("input"),
-      dropdown: container.querySelector(".sui-search-select-dropdown"),
+      dropdown: container.querySelector(".sui-search-select-dropdown-list"),
       select: container.querySelector("select")
     });
     const selectedOptions = Array.from(

package/dist/components/Select/Select.astro

@@ -166,30 +166,32 @@ const defaultLabel = selected
 			</span>
 			<Icon name="chevron-up-down" width={24} height={24} class="sui-select-chevron" />
 		</button>
-		<ul class="sui-select-dropdown" role="listbox" id={`${name}-dropdown`}>
-			{
-				options.map((x, i) => {
-					const isSelected = Array.isArray(selected)
-						? selected.map((y) => y && y.value).includes(x.value)
-						: selected?.value === x.value;
-					return (
-						<li
-							class="sui-select-option"
-							role="option"
-							value={x.value}
-							class:list={[
-								isSelected && `selected`,
-								x.disabled && "disabled",
-							]}
-							id={isSelected ? `${name}-selected` : ""}
-							data-option-index={i}
-						>
-							{x.label}
-						</li>
-					)
-				})
-			}
-		</ul>
+		<div class="sui-select-dropdown">
+			<ul class="sui-select-dropdown-list" role="listbox" id={`${name}-dropdown`}>
+				{
+					options.map((x, i) => {
+						const isSelected = Array.isArray(selected)
+							? selected.map((y) => y && y.value).includes(x.value)
+							: selected?.value === x.value;
+						return (
+							<li
+								class="sui-select-option"
+								role="option"
+								value={x.value}
+								class:list={[
+									isSelected && `selected`,
+									x.disabled && "disabled",
+								]}
+								id={isSelected ? `${name}-selected` : ""}
+								data-option-index={i}
+							>
+								{x.label}
+							</li>
+						)
+					})
+				}
+			</ul>
+		</div>
 	</div>
 	<select class="sui-hidden-select" id={name} name={name} required={isRequired} multiple={multiple ? "" : undefined} hidden tabindex="-1">
 		<option value={""}> Select </option>

package/dist/components/Select/select.css

@@ -70,19 +70,25 @@
 .sui-select-dropdown {
   position: absolute;
   width: 100%;
-  border: 1px solid hsl(var(--border));
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  flex-direction: column;
-  border-radius: var(--radius-md);
-  background-color: hsl(var(--background-step-2));
-  overflow: hidden;
   top: calc(100% + 0.25rem);
   left: 0;
   display: none;
+  max-height: 300px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  background-color: hsl(var(--background-step-2));
   z-index: 90;
   box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+  overflow: hidden;
+}
+.sui-select-dropdown-list {
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-color: hsl(var(--border)) hsl(var(--background-step-2));
 }
 .sui-select-dropdown.active {
   display: flex;

package/dist/components/Select/select.js

@@ -191,7 +191,7 @@ function loadSelects() {
       }
       if (option) {
         option.classList.add("selected");
-        if (container && container.select) {
+        if (container?.select) {
           container.select.value = option.getAttribute("value");
         }
         updateLabel(state2, container);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",