@studiocms/ui 0.4.14 → 0.4.16

package/dist/components/SearchSelect/SearchSelect.astro

@@ -6,91 +6,103 @@ import Input from '../Input/Input.astro';
 import './searchselect.css';
 
 /**
- * An option in the select dropdown
+ * Represents an option in the select component.
  */
-interface Option {
+export interface SearchSelectOption {
 	/**
-	 * The label of the option.
+	 * The label of the option displayed to the user.
 	 */
 	label: string;
 	/**
-	 * The value of the option.
+	 * The value of the option used for form submission.
 	 */
 	value: string;
 	/**
-	 * Whether the option is disabled.
+	 * Whether the option is disabled. Defaults to `false`.
 	 */
 	disabled?: boolean;
 }
 
 /**
- * The props for the search select component.
+ * Base properties shared by both single and multiple select components.
  */
-type NonMultipleProps = {
+export interface SearchSelectBaseProps {
 	/**
-	 * Whether the select accepts multiple options. Defaults to `false`.
+	 * The label of the select field.
 	 */
-	multiple: false;
+	label?: string;
 	/**
-	 * The default value of the select.
+	 * Additional classes to apply to the select component.
 	 */
-	defaultValue: string;
-};
-
-type MultipleProps = {
+	class?: string;
 	/**
-	 * Whether the select accepts multiple options. Defaults to `false`.
+	 * The name of the select field, used for form submission.
 	 */
-	multiple: true;
+	name?: string;
 	/**
-	 * The default value of the select.
+	 * Whether the select field is required. Defaults to `false`.
 	 */
-	defaultValue: string[];
-};
-
-/**
- * The props for the select component.
- */
-type BaseProps = {
+	isRequired?: boolean;
 	/**
-	 * The label of the select.
+	 * The options to display in the select dropdown.
 	 */
-	label?: string;
+	options: SearchSelectOption[];
 	/**
-	 * Additional classes to apply to the select.
+	 * Whether the select field is disabled. Defaults to `false`.
 	 */
-	class?: string;
+	disabled?: boolean;
 	/**
-	 * The name of the select. Required because of the helper.
+	 * Whether the select field should take up the full width of its container. Defaults to `false`.
 	 */
-	name?: string;
+	fullWidth?: boolean;
 	/**
-	 * Whether the select is required. Defaults to `false`.
+	 * The placeholder text to display when no option is selected. Defaults to `Select`.
 	 */
-	isRequired?: boolean;
+	placeholder?: string;
+}
+
+/**
+ * Properties specific to single-select mode.
+ */
+export interface SingleSearchSelectProps extends SearchSelectBaseProps {
 	/**
-	 * The options to display in the select.
+	 * Whether the select accepts multiple options.
 	 */
-	options: Option[];
+	multiple?: false;
 	/**
-	 * Whether the select is disabled. Defaults to `false`.
+	 * The default selected value.
 	 */
-	disabled?: boolean;
+	defaultValue?: string;
 	/**
-	 * Whether the select is full width. Defaults to `false`.
+	 * The maximum number of options that can be selected.
+	 * This property has no effect in single-select mode.
 	 */
-	fullWidth?: boolean;
+	max?: never;
+}
+
+/**
+ * Properties specific to multi-select mode.
+ */
+export interface MultiSearchSelectProps extends SearchSelectBaseProps {
 	/**
-	 * The placeholder of the select. Defaults to `Select`.
+	 * Whether the select accepts multiple options.
 	 */
-	placeholder?: string;
+	multiple: true;
+	/**
+	 * The default selected values.
+	 */
+	defaultValue?: string[];
 	/**
-	 * The maximum number of options that can be selected. Defaults to `undefined`.
+	 * The maximum number of options that can be selected.
 	 */
 	max?: number;
-};
+}
+
+/**
+ * Union type representing all possible select component properties.
+ */
+export type Props = SingleSearchSelectProps | MultiSearchSelectProps;
 
-type Props = BaseProps & (MultipleProps | NonMultipleProps);
 const {
 	label,
 	defaultValue,
@@ -105,7 +117,7 @@ const {
 	max = undefined,
 } = Astro.props;
 
-let selected: Option | (Option | undefined)[] | undefined;
+let selected: SearchSelectOption | (SearchSelectOption | undefined)[] | undefined;
 
 if (multiple && Array.isArray(defaultValue)) {
 	selected = defaultValue.map((x) => options.find((y) => y.value === x));
@@ -136,6 +148,7 @@ const defaultLabel = selected
 				role='combobox'
 				aria-controls={`${name}-dropdown`}
 				aria-expanded="false"
+				tabindex={disabled ? -1 : 0}
 				label={label || ''}
 				isRequired={isRequired || false}
 			/>
@@ -174,7 +187,8 @@ const defaultLabel = selected
 				const isSelected = Array.isArray(selected)
 					? selected.map((y) => y && y.value).includes(x.value)
 					: selected?.value === x.value;
-				(
+					
+				return (
 					<option
 						value={x.value}
 						selected={isSelected}
@@ -195,7 +209,7 @@ const defaultLabel = selected
 		multiple && Array.isArray(selected ?? []) && (		
 			<div class="sui-search-select-badge-container">
 				{
-					((selected ?? []) as Option[]).map((s) => s && 
+					((selected ?? []) as SearchSelectOption[]).map((s) => s && 
 						<Badge class="sui-search-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="x-mark" />
 					)
 				}

package/dist/components/SearchSelect/searchselect.js

@@ -82,12 +82,9 @@ function loadSearchSelects() {
     );
     if (option) {
       option.classList.toggle("selected", forceState ?? !isCurrentlySelected);
-    }
-    const selectOption = container.select?.querySelector(
-      `option[value='${value}']`
-    );
-    if (selectOption) {
-      selectOption.selected = forceState ?? !isCurrentlySelected;
+      if (container && container.select) {
+        container.select.value = option.getAttribute("value");
+      }
     }
     const selectedCountEl = container.querySelector(
       ".sui-search-select-max-span .sui-search-select-select-count"
@@ -117,12 +114,12 @@ function loadSearchSelects() {
   };
   const reconstructOptions = (filteredOptions, state2, container) => {
     container.dropdown.innerHTML = "";
-    let i = 0;
     const selectedValues = state2.selectedOptionsMap[container.dataset.id] || [];
     if (filteredOptions.length === 0) {
       container.dropdown.innerHTML = '<li class="empty-search-results">No results found</li>';
       return;
     }
+    let i = 0;
     for (const option of filteredOptions) {
       const element = document.createElement("li");
       element.classList.add("sui-search-select-option");
@@ -329,6 +326,7 @@ function loadSearchSelects() {
   };
   const selects = document.querySelectorAll(".sui-search-select-label");
   for (const container of selects) {
+    if (container.dataset.initialized === "true") continue;
     const id = container.dataset.id;
     const specialContainer = Object.assign(container, {
       input: container.querySelector("input"),
@@ -365,6 +363,7 @@ function loadSearchSelects() {
     if (state.isMultipleMap[id]) {
       recalculateBadges(state, specialContainer);
     }
+    container.dataset.initialized = "true";
   }
 }
 document.addEventListener("astro:page-load", loadSearchSelects);

package/dist/components/Select/Select.astro

@@ -5,15 +5,15 @@ import Icon from '../Icon/Icon.astro';
 import './select.css';
 
 /**
- * The props for the select component.
+ * Represents an option in the select component.
  */
-interface Option {
+export interface SelectOption {
 	/**
-	 * The label of the option.
+	 * The label of the option displayed to the user.
 	 */
 	label: string;
 	/**
-	 * The value of the option.
+	 * The value of the option used for form submission.
 	 */
 	value: string;
 	/**
@@ -22,71 +22,85 @@ interface Option {
 	disabled?: boolean;
 }
 
-type NonMultipleProps = {
-	/**
-	 * Whether the select accepts multiple options. Defaults to `false`.
-	 */
-	multiple: false;
-	/**
-	 * The default value of the select.
-	 */
-	defaultValue: string;
-};
-
-type MultipleProps = {
-	/**
-	 * Whether the select accepts multiple options. Defaults to `false`.
-	 */
-	multiple: true;
-	/**
-	 * The default value of the select.
-	 */
-	defaultValue: string[];
-};
-
 /**
- * The props for the select component.
+ * Base properties shared by both single and multiple select components.
  */
-type BaseProps = {
+export interface SelectBaseProps {
 	/**
-	 * The label of the select.
+	 * The label of the select field.
 	 */
 	label?: string;
 	/**
-	 * Additional classes to apply to the select.
+	 * Additional classes to apply to the select component.
 	 */
 	class?: string;
 	/**
-	 * The name of the select. Required because of the helper.
+	 * The name of the select field, used for form submission.
 	 */
 	name?: string;
 	/**
-	 * Whether the select is required. Defaults to `false`.
+	 * Whether the select field is required. Defaults to `false`.
 	 */
 	isRequired?: boolean;
 	/**
-	 * The options to display in the select.
+	 * The options to display in the select dropdown.
 	 */
-	options: Option[];
+	options: SelectOption[];
 	/**
-	 * Whether the select is disabled. Defaults to `false`.
+	 * Whether the select field is disabled. Defaults to `false`.
 	 */
 	disabled?: boolean;
 	/**
-	 * Whether the select is full width. Defaults to `false`.
+	 * Whether the select field should take up the full width of its container. Defaults to `false`.
 	 */
 	fullWidth?: boolean;
 	/**
-	 * The placeholder of the select. Defaults to `Select`.
+	 * The placeholder text to display when no option is selected. Defaults to `Select`.
 	 */
 	placeholder?: string;
+}
+
+/**
+ * Properties specific to single-select mode.
+ */
+export interface SingleSelectProps extends SelectBaseProps {
+	/**
+	 * Whether the select accepts multiple options.
+	 */
+	multiple?: false;
 	/**
-	 * The maximum number of options that can be selected. Defaults to `undefined`.
+	 * The default selected value.
+	 */
+	defaultValue?: string;
+	/**
+	 * The maximum number of options that can be selected.
+	 * This property has no effect in single-select mode.
+	 */
+	max?: never;
+}
+
+/**
+ * Properties specific to multi-select mode.
+ */
+export interface MultiSelectProps extends SelectBaseProps {
+	/**
+	 * Whether the select accepts multiple options.
+	 */
+	multiple: true;
+	/**
+	 * The default selected values.
+	 */
+	defaultValue?: string[];
+	/**
+	 * The maximum number of options that can be selected.
 	 */
 	max?: number;
-};
+}
 
-type Props = BaseProps & (MultipleProps | NonMultipleProps);
+/**
+ * Union type representing all possible select component properties.
+ */
+export type Props = SingleSelectProps | MultiSelectProps;
 
 const {
 	label,
@@ -102,7 +116,7 @@ const {
 	max = undefined,
 } = Astro.props;
 
-let selected: Option | (Option | undefined)[] | undefined;
+let selected: SelectOption | (SelectOption | undefined)[] | undefined;
 
 if (multiple && Array.isArray(defaultValue)) {
 	selected = defaultValue.map((x) => options.find((y) => y.value === x));
@@ -139,6 +153,7 @@ const defaultLabel = selected
 			aria-controls={`${name}-dropdown`}
 			aria-expanded="false"
 			id={`${name}-select-btn`}
+			tabindex={disabled ? -1 : 0}
 			type="button"
 			aria-label={placeholder}
 			title={placeholder}
@@ -183,7 +198,8 @@ const defaultLabel = selected
 				const isSelected = Array.isArray(selected)
 					? selected.map((y) => y && y.value).includes(x.value)
 					: selected?.value === x.value;
-				(
+					
+				return (
 					<option
 						value={x.value}
 						selected={isSelected}

package/dist/components/Select/select.js

@@ -188,20 +188,11 @@ function loadSelects() {
     } else {
       if (lastActive) {
         lastActive.classList.remove("selected");
-        const lastSelectOpt = container?.select?.querySelector(
-          `option[value='${lastActive.getAttribute("value")}']`
-        );
-        if (lastSelectOpt) {
-          lastSelectOpt.selected = false;
-        }
       }
       if (option) {
         option.classList.add("selected");
-        const selectOpt = container?.select?.querySelector(
-          `option[value='${option.getAttribute("value")}']`
-        );
-        if (selectOpt) {
-          selectOpt.selected = true;
+        if (container && container.select) {
+          container.select.value = option.getAttribute("value");
         }
         updateLabel(state2, container);
       }
@@ -328,6 +319,7 @@ function loadSelects() {
     }
   });
   for (const container of selects) {
+    if (container.dataset.initialized === "true") continue;
     const id = container.dataset.id;
     const specialContainer = Object.assign(container, {
       button: container.querySelector("button"),
@@ -351,6 +343,7 @@ function loadSelects() {
       });
       handleBadgeOverflow(state, specialContainer);
     }
+    container.dataset.initialized = "true";
   }
 }
 document.addEventListener("astro:page-load", loadSelects);

package/package.json

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