@starwind-ui/core 1.15.1 → 1.15.2

package/dist/src/components/select/Select.astro

@@ -0,0 +1,752 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * The name for the hidden <select> element - used for standard form handling
+   */
+  name?: string;
+  /**
+   * The value of the item that should be selected by default
+   */
+  defaultValue?: string;
+  /**
+   * Whether the select field is required in a form context
+   */
+  required?: boolean;
+
+  children: any;
+};
+
+const { class: className, name, defaultValue, required, ...rest } = Astro.props;
+---
+
+<div
+  class:list={["starwind-select", "relative", className]}
+  data-name={name}
+  data-value={defaultValue}
+  data-required={required}
+  data-slot="select"
+  {...rest}
+>
+  <slot />
+</div>
+
+<script>
+  import type { SelectChangeEvent, SelectEvent } from "./SelectTypes";
+
+  class SelectHandler {
+    private select: HTMLElement;
+    private trigger: HTMLButtonElement | null;
+    private content: HTMLElement | null;
+    private searchInput: HTMLInputElement | null = null;
+    private emptyElement: HTMLElement | null = null;
+    private isOpen: boolean = false;
+    private selectedItem: HTMLElement | null = null;
+    private activeItem: HTMLElement | null = null;
+    private animationDuration = 150;
+    private typeaheadTimerRef: number | null = null;
+    private typeaheadSearch = "";
+    private returnFocusOnClose: boolean = true;
+    private required: boolean = false;
+
+    constructor(select: HTMLElement, selectIdx: number) {
+      this.select = select;
+      this.trigger = select.querySelector(".starwind-select-trigger");
+      this.content = select.querySelector(".starwind-select-content");
+      this.searchInput = select.querySelector('[data-slot="select-search"]');
+      this.emptyElement = select.querySelector('[data-slot="select-empty"]');
+
+      if (!this.trigger || !this.content) return;
+
+      this.required = this.select.getAttribute("data-required") === "true";
+
+      // animationDuration is set with inline styles through passed prop to SelectContent
+      const animationDurationString = this.content.style.animationDuration;
+      if (animationDurationString.endsWith("ms")) {
+        this.animationDuration = parseFloat(animationDurationString);
+      } else if (animationDurationString.endsWith("s")) {
+        // using something like @playform/compress might optimize to use "s" instead of "ms"
+        this.animationDuration = parseFloat(animationDurationString) * 1000;
+      }
+
+      this.init(selectIdx);
+    }
+
+    private init(selectIdx: number) {
+      this.setupAccessibility(selectIdx);
+      this.setupEvents();
+      this.setupSelectField();
+      this.setInitialState();
+    }
+
+    private setupSelectField() {
+      if (!this.trigger || !this.content) return;
+      // build the standard select field
+      const selectField = document.createElement("select");
+      selectField.tabIndex = -1;
+      selectField.setAttribute("aria-hidden", "true");
+      selectField.setAttribute("placeholder", "select");
+      const selectName = this.select.getAttribute("data-name");
+
+      if (this.required) {
+        selectField.required = true;
+      }
+
+      if (selectName) {
+        selectField.name = selectName;
+      }
+
+      // you can comment out this "sr-only" class line below if you want to see the native select in action
+      selectField.classList.add("starwind-sr-only");
+
+      // The first option is a placeholder
+      const placeholderOption = document.createElement("option");
+      placeholderOption.value = "";
+      placeholderOption.textContent = "Select";
+      placeholderOption.disabled = true;
+      placeholderOption.selected = true;
+      selectField.appendChild(placeholderOption);
+
+      // add all options to the select field
+      this.content.querySelectorAll('[role="option"]').forEach((option) => {
+        const optionValue = option.getAttribute("data-value");
+        const optionText = option.textContent;
+        const optionElement = document.createElement("option");
+        optionElement.value = optionValue || "";
+        optionElement.textContent = optionText || "";
+        selectField.appendChild(optionElement);
+      });
+      this.trigger.appendChild(selectField);
+
+      // add this select field right after the trigger
+      this.trigger.parentElement?.insertBefore(selectField, this.trigger.nextSibling);
+
+      // Intercept invalid event to show error on trigger instead of hidden select
+      if (this.required) {
+        selectField.addEventListener("invalid", (e) => {
+          this.showValidationError();
+          e.preventDefault();
+        });
+      }
+
+      this.setSize();
+      this.content.style.width = "var(--starwind-select-trigger-width)";
+    }
+
+    private setupAccessibility(selectIdx: number) {
+      if (!this.trigger || !this.content) return;
+
+      // Generate unique IDs for accessibility
+      this.trigger.id = `starwind-select${selectIdx}-trigger`;
+      this.content.id = `starwind-select${selectIdx}-content`;
+
+      // Set up additional ARIA attributes
+      this.trigger.setAttribute("aria-controls", this.content.id);
+      this.trigger.setAttribute("aria-required", this.required ? "true" : "false");
+      this.content.setAttribute("aria-labelledby", this.trigger.id);
+
+      // If search input exists, add IDs to all items for aria-activedescendant
+      if (this.searchInput) {
+        if (!this.searchInput.id) {
+          this.searchInput.id = `starwind-select${selectIdx}-search`;
+        }
+        // Link search input to the listbox it filters
+        this.searchInput.setAttribute("aria-controls", this.content.id);
+
+        const items = this.content.querySelectorAll('[role="option"]');
+        items.forEach((item, index) => {
+          if (!item.id) {
+            item.id = `starwind-select${selectIdx}-option${index}`;
+          }
+        });
+      }
+    }
+
+    private setupEvents() {
+      if (!this.trigger || !this.content) return;
+
+      // Handle search input if it exists
+      if (this.searchInput) {
+        this.setupSearchInput();
+      }
+
+      // Handle pointerdown
+      this.trigger.addEventListener("pointerdown", (e) => {
+        // prevent implicit pointer capture
+        // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
+        const target = e.target as HTMLElement;
+        if (target.hasPointerCapture(e.pointerId)) {
+          target.releasePointerCapture(e.pointerId);
+        }
+
+        // prevent trigger from stealing focus from the active item after opening.
+        e.preventDefault();
+
+        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+        // but not when the control key is pressed (avoiding MacOS right click); also not for touch
+        // devices because that would open the menu on scroll. (pen devices behave as touch on iOS).
+        if (e.button === 0 && e.ctrlKey === false && e.pointerType === "mouse") {
+          this.returnFocusOnClose = true;
+          this.toggleSelect();
+        }
+      });
+
+      // Handle click event for mobile devices
+      this.trigger.addEventListener("click", (e) => {
+        if (window.matchMedia("(pointer: coarse)").matches) {
+          e.preventDefault();
+          this.returnFocusOnClose = true;
+          this.toggleSelect();
+        }
+      });
+
+      // add enter or space key to select trigger to toggle select
+      this.trigger.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.returnFocusOnClose = true;
+          this.toggleSelect();
+        }
+      });
+
+      // Handle keyboard navigation inside select content
+      this.content.addEventListener("keydown", (e) => {
+        // Check if the event originated from the search input
+        const isFromSearchInput = e.target === this.searchInput;
+
+        if (e.key === "Enter" || e.key === " ") {
+          // Only handle selection if not typing in search input
+          if (!isFromSearchInput) {
+            e.preventDefault();
+            // set element based on current focused element
+            const activeElement = document.activeElement;
+            this.returnFocusOnClose = true;
+            this.handleSelection(activeElement as HTMLElement);
+          }
+          // If from search input, don't handle it here - let the input handle it naturally
+        } else if (e.key === "Escape" && this.isOpen) {
+          this.returnFocusOnClose = true;
+          this.closeSelect();
+        }
+
+        // add key navigation for accessibility
+        // "Home" goes to first element
+        // "End" goes to last element
+        // "ArrowUp" goes to previous element
+        // "ArrowDown" goes to next element
+        else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+          this.handleNavigationKeys(e);
+          e.preventDefault();
+        } else {
+          const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
+
+          // select should not be navigated using tab key so we prevent it
+          if (e.key === "Tab") e.preventDefault();
+
+          if (!isModifierKey && e.key.length === 1 && !this.searchInput) {
+            this.handleTypeahead(e.key);
+          }
+        }
+      });
+
+      // Handle hover on select items
+      this.content.addEventListener("mouseover", (e) => {
+        const target = e.target as HTMLElement;
+        const option = target.closest('[role="option"]');
+        if (option && option instanceof HTMLElement && this.isOpen === true) {
+          this.setActiveItem(option);
+        }
+      });
+
+      // handle pointerdown outside select content to close
+      document.addEventListener("pointerdown", (e) => {
+        // only close if not a mouse pointer
+        if (!window.matchMedia("(pointer: coarse)").matches) {
+          if (
+            !(
+              this.trigger?.contains(e.target as Node) || this.content?.contains(e.target as Node)
+            ) &&
+            this.isOpen
+          ) {
+            this.returnFocusOnClose = false;
+            this.closeSelect();
+          }
+        }
+      });
+
+      // Handle click outside select content to close
+      document.addEventListener("click", (e) => {
+        if (
+          !(this.trigger?.contains(e.target as Node) || this.content?.contains(e.target as Node)) &&
+          this.isOpen
+        ) {
+          this.returnFocusOnClose = false;
+          this.closeSelect();
+        }
+      });
+
+      // Handle selection of items
+      this.content?.addEventListener("click", (e) => {
+        const item = (e.target as HTMLElement).closest("[role='option']");
+        if (item instanceof HTMLElement) {
+          this.returnFocusOnClose = true;
+          this.handleSelection(item);
+        }
+      });
+
+      // passive resize listener to call setSize()
+      window.addEventListener("resize", () => this.setSize(), { passive: true });
+
+      // Listen for programmatic selection events
+      document.addEventListener("starwind-select:select", (e: Event) => {
+        const selectEvent = e as SelectEvent;
+        const selectId = selectEvent.detail.selectId;
+        const selectName = selectEvent.detail.selectName;
+        const selectValue = selectEvent.detail.value;
+
+        // Check if this event is for this select
+        if (
+          (selectId && this.select.id === selectId) ||
+          (selectName && this.select.getAttribute("data-name") === selectName)
+        ) {
+          this.programmaticallySelect(selectValue);
+        }
+      });
+    }
+
+    private setActiveItem(item: HTMLElement | null) {
+      if (!this.content) return;
+
+      // Remove active state from previous item
+      if (this.activeItem) {
+        this.activeItem.removeAttribute("data-active");
+      }
+
+      // Set new active item
+      this.activeItem = item;
+      if (item) {
+        item.setAttribute("data-active", "true");
+
+        // Scroll item into view if needed
+        item.scrollIntoView({ block: "nearest" });
+
+        // For search mode, set aria-activedescendant for assistive technologies
+        if (this.searchInput) {
+          // Item should already have an ID from setupAccessibility
+          this.searchInput.setAttribute("aria-activedescendant", item.id);
+        } else {
+          // For non-search mode, set focus for keyboard accessibility
+          item.focus();
+        }
+      } else if (this.searchInput) {
+        // Clear aria-activedescendant when no item is active
+        this.searchInput.removeAttribute("aria-activedescendant");
+      }
+    }
+
+    private findNavigableItem(
+      items: NodeListOf<Element>,
+      startIndex: number,
+      direction: "forward" | "backward",
+    ): HTMLElement | null {
+      const step = direction === "forward" ? 1 : -1;
+      const end = direction === "forward" ? items.length : -1;
+
+      for (let i = startIndex; i !== end; i += step) {
+        const item = items[i] as HTMLElement;
+        if (
+          item.getAttribute("data-disabled") !== "true" &&
+          item.getAttribute("data-filtered") !== "true"
+        ) {
+          return item;
+        }
+      }
+      return null;
+    }
+
+    private handleNavigationKeys(e: KeyboardEvent) {
+      if (!this.content) return;
+      const items = this.content.querySelectorAll('[role="option"]');
+      const currentIndex = Array.from(items).indexOf(this.activeItem as HTMLElement);
+
+      let targetItem: HTMLElement | null = null;
+
+      switch (e.key) {
+        case "Home":
+          targetItem = this.findNavigableItem(items, 0, "forward");
+          break;
+
+        case "End":
+          targetItem = this.findNavigableItem(items, items.length - 1, "backward");
+          break;
+
+        case "ArrowUp":
+          if (currentIndex > 0) {
+            targetItem = this.findNavigableItem(items, currentIndex - 1, "backward");
+          }
+          break;
+
+        case "ArrowDown":
+          if (currentIndex < items.length - 1) {
+            targetItem = this.findNavigableItem(items, currentIndex + 1, "forward");
+          }
+          break;
+      }
+
+      if (targetItem) {
+        this.setActiveItem(targetItem);
+      }
+    }
+
+    private setupSearchInput() {
+      if (!this.searchInput || !this.content) return;
+
+      this.searchInput.addEventListener("input", (e) => {
+        const target = e.target as HTMLInputElement;
+        const searchValue = target.value.toLowerCase().trim();
+        this.filterItems(searchValue);
+      });
+
+      // Handle keyboard navigation from search input
+      this.searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          this.returnFocusOnClose = true;
+          this.closeSelect();
+        }
+        // Allow arrow keys to navigate to items
+        else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.handleNavigationKeys(e);
+        }
+        // Handle Enter to select the active or first visible item
+        else if (e.key === "Enter") {
+          e.preventDefault();
+          const itemToSelect = this.activeItem || this.getFirstVisibleItem();
+          if (itemToSelect) {
+            this.returnFocusOnClose = true;
+            this.handleSelection(itemToSelect);
+          }
+        }
+        // Prevent space from scrolling the page, but allow it to be typed
+        else if (e.key === " ") {
+          e.stopPropagation();
+        }
+      });
+    }
+
+    private getFirstVisibleItem(): HTMLElement | null {
+      if (!this.content) return null;
+
+      const items = this.content.querySelectorAll('[role="option"]');
+      for (const item of items) {
+        if (
+          item.getAttribute("data-disabled") !== "true" &&
+          item.getAttribute("data-filtered") !== "true"
+        ) {
+          return item as HTMLElement;
+        }
+      }
+      return null;
+    }
+
+    private filterItems(searchValue: string) {
+      if (!this.content) return;
+
+      const items = this.content.querySelectorAll('[role="option"]');
+      let visibleCount = 0;
+      let firstVisibleItem: HTMLElement | null = null;
+
+      items.forEach((item) => {
+        const itemText = item.textContent?.toLowerCase().trim() || "";
+        const matches = itemText.includes(searchValue);
+
+        if (matches || searchValue === "") {
+          item.classList.remove("starwind-sr-only");
+          item.removeAttribute("data-filtered");
+          visibleCount++;
+          if (!firstVisibleItem) {
+            firstVisibleItem = item as HTMLElement;
+          }
+        } else {
+          item.classList.add("starwind-sr-only");
+          item.setAttribute("data-filtered", "true");
+        }
+      });
+
+      // Update active item to first visible item after filtering
+      if (this.searchInput && firstVisibleItem) {
+        this.setActiveItem(firstVisibleItem);
+      } else if (this.searchInput && visibleCount === 0) {
+        this.setActiveItem(null);
+      }
+
+      // Show/hide empty message
+      if (this.emptyElement) {
+        if (visibleCount === 0 && searchValue !== "") {
+          this.emptyElement.classList.remove("hidden");
+        } else {
+          this.emptyElement.classList.add("hidden");
+        }
+      }
+    }
+
+    private handleTypeahead(key: string) {
+      if (!this.content) return;
+      const search = this.typeaheadSearch + key;
+      const items = this.content.querySelectorAll('[role="option"]');
+
+      // find and set active the first matching option
+      const matches = Array.from(items).filter((item) =>
+        item.textContent?.toLowerCase().trim().startsWith(search.toLowerCase()),
+      ) as HTMLElement[];
+      if (matches.length > 0) {
+        this.setActiveItem(matches[0]);
+      }
+
+      // update the typeahead search and reset the timer
+      this.typeaheadSearch = search;
+      if (this.typeaheadTimerRef) {
+        window.clearTimeout(this.typeaheadTimerRef);
+      }
+
+      // set a timer to clear the search after 1 second
+      this.typeaheadTimerRef = window.setTimeout(() => {
+        this.typeaheadSearch = "";
+        this.typeaheadTimerRef = null;
+      }, 1000);
+    }
+
+    private setSize() {
+      if (!this.trigger || !this.content) return;
+      this.content.style.setProperty(
+        "--starwind-select-content-width",
+        `${this.content.offsetWidth}px`,
+      );
+
+      this.content.style.setProperty(
+        "--starwind-select-trigger-width",
+        `${this.trigger.offsetWidth}px`,
+      );
+    }
+
+    private toggleSelect() {
+      if (this.isOpen) {
+        this.closeSelect();
+      } else {
+        this.openSelect();
+      }
+    }
+
+    private openSelect() {
+      if (!this.content || !this.trigger || this.trigger.disabled) return;
+
+      this.isOpen = true;
+      this.content.setAttribute("data-state", "open");
+      this.trigger.setAttribute("aria-expanded", "true");
+      this.content.style.removeProperty("display");
+
+      // If search input exists, focus it and clear any previous search
+      if (this.searchInput) {
+        this.searchInput.value = "";
+        this.filterItems("");
+
+        // Set the selected item or first item as active
+        const initialItem = this.selectedItem || this.getFirstVisibleItem();
+        if (initialItem) {
+          this.setActiveItem(initialItem);
+        }
+
+        requestAnimationFrame(() => {
+          this.searchInput?.focus();
+        });
+      } else {
+        // set active on the current selected item
+        if (this.selectedItem) {
+          this.setActiveItem(this.selectedItem);
+        } else {
+          // if no item is selected, set active on the first item
+          const firstItem = this.content.querySelector('[role="option"]') as HTMLElement;
+          if (firstItem) {
+            this.setActiveItem(firstItem);
+          }
+        }
+      }
+    }
+
+    private closeSelect() {
+      if (!this.content || !this.trigger) return;
+
+      this.isOpen = false;
+      this.content.setAttribute("data-state", "closed");
+
+      // Remove focus from any currently focused element
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement) {
+        activeElement.blur();
+      }
+
+      // Set focus on trigger if returnFocusOnClose is true
+      if (this.returnFocusOnClose) {
+        requestAnimationFrame(() => {
+          if (!this.trigger) return;
+          this.trigger.focus();
+        });
+      }
+
+      // give the content time to animate before hiding
+      setTimeout(() => {
+        if (!this.content) return;
+        this.content.style.display = "none";
+
+        // Clear search and show all items after animation completes
+        if (this.searchInput) {
+          this.searchInput.value = "";
+          this.filterItems("");
+          this.setActiveItem(null);
+        }
+      }, this.animationDuration);
+
+      this.trigger.setAttribute("aria-expanded", "false");
+    }
+
+    private handleSelection(item: HTMLElement) {
+      if (!this.trigger) return;
+
+      // Clear any validation error when a selection is made
+      this.clearValidationError();
+
+      // update the hidden select field
+      const selectField = this.select.querySelector("select");
+      if (selectField) {
+        const newValue = item.getAttribute("data-value") || "";
+        selectField.value = newValue;
+
+        // Dispatch custom event with the new value
+        const event = new CustomEvent<SelectChangeEvent["detail"]>("starwind-select:change", {
+          detail: { value: newValue, selectId: this.select.id, label: item.textContent || "" },
+          bubbles: true,
+          cancelable: true,
+        });
+
+        selectField.dispatchEvent(event);
+      }
+
+      // Update trigger content
+      const triggerSpan = this.trigger.firstElementChild as HTMLSpanElement;
+      if (triggerSpan) {
+        triggerSpan.textContent = item.textContent;
+      }
+
+      // Update selected states after select finishes closing
+      setTimeout(() => {
+        if (this.selectedItem) {
+          this.selectedItem.setAttribute("aria-selected", "false");
+        }
+        item.setAttribute("aria-selected", "true");
+        this.selectedItem = item;
+      }, this.animationDuration);
+
+      // Close the select
+      this.closeSelect();
+    }
+
+    /**
+     * Sets the initial state based on the default value attribute
+     */
+    private setInitialState(): void {
+      const defaultValue = this.select.dataset.value;
+      if (defaultValue) {
+        const item = this.content?.querySelector(`[data-value="${defaultValue}"]`);
+
+        if (item && item instanceof HTMLElement) {
+          this.returnFocusOnClose = false;
+          this.handleSelection(item);
+          this.selectedItem = item;
+        }
+      }
+    }
+
+    /**
+     * Programmatically selects an option by value
+     */
+    private programmaticallySelect(value: string): void {
+      if (!this.content) return;
+
+      // Skip if already selected (prevents infinite loops with synced selects)
+      if (this.selectedItem?.getAttribute("data-value") === value) return;
+
+      const item = this.content.querySelector(`[data-value="${value}"]`);
+      if (item instanceof HTMLElement) {
+        this.returnFocusOnClose = false;
+
+        // Update aria-selected attributes immediately
+        if (this.selectedItem) {
+          this.selectedItem.setAttribute("aria-selected", "false");
+        }
+        item.setAttribute("aria-selected", "true");
+
+        // Then call handleSelection which will update the rest
+        this.handleSelection(item);
+      }
+    }
+
+    /**
+     * Shows validation error on the trigger
+     */
+    private showValidationError(): void {
+      if (!this.trigger) return;
+
+      // Add error state to trigger
+      this.trigger.setAttribute("aria-invalid", "true");
+
+      // scroll trigger into view
+      this.trigger.scrollIntoView({ behavior: "auto", block: "center" });
+
+      // Focus the trigger so user knows where the error is
+      this.trigger.focus();
+    }
+
+    /**
+     * Clears validation error from the trigger
+     */
+    private clearValidationError(): void {
+      if (!this.trigger) return;
+
+      this.trigger.setAttribute("aria-invalid", "false");
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const selectInstances = new WeakMap<HTMLElement, SelectHandler>();
+  let selectCounter = 0;
+
+  // Initialize selects
+  const initSelects = () => {
+    document.querySelectorAll(".starwind-select").forEach((select) => {
+      if (select instanceof HTMLElement && !selectInstances.has(select)) {
+        selectInstances.set(select, new SelectHandler(select, selectCounter++));
+      }
+    });
+  };
+
+  initSelects();
+  document.addEventListener("astro:after-swap", initSelects);
+  document.addEventListener("starwind:init", initSelects);
+</script>
+
+<style is:global>
+  .starwind-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+</style>