@starwind-ui/core 1.14.0 → 1.15.1

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

@@ -1,751 +0,0 @@
----
-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) {
-            // 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>