basecoat/src/js/select.js

(() => {
  const states = new WeakMap();

  const getElements = (root) => {
    const trigger = root.querySelector(':scope > button');
    const selectedLabel = trigger?.querySelector(':scope > span') || null;
    const popover = root.querySelector(':scope > [data-popover]');
    const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
    const input = root.querySelector(':scope > input[type="hidden"]');
    return { trigger, selectedLabel, popover, listbox, input };
  };

  const getValue = (option) => option.dataset.value ?? option.textContent.trim();
  const isDisabled = (option) => option.getAttribute('aria-disabled') === 'true';

  const getOptions = (listbox) => {
    const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
    return {
      allOptions,
      options: allOptions.filter(option => !isDisabled(option)),
    };
  };

  const scrollOptionIntoListbox = (state, option) => {
    const optionRect = option.getBoundingClientRect();
    const listboxRect = state.listbox.getBoundingClientRect();

    if (optionRect.top < listboxRect.top) {
      state.listbox.scrollTop -= listboxRect.top - optionRect.top;
    } else if (optionRect.bottom > listboxRect.bottom) {
      state.listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
    }
  };

  const setActiveOption = (state, index) => {
    if (state.activeIndex > -1 && state.options[state.activeIndex]) {
      state.options[state.activeIndex].classList.remove('active');
    }

    state.activeIndex = index;

    if (state.activeIndex > -1) {
      const activeOption = state.options[state.activeIndex];
      activeOption.classList.add('active');
      if (activeOption.id) {
        state.trigger.setAttribute('aria-activedescendant', activeOption.id);
      } else {
        state.trigger.removeAttribute('aria-activedescendant');
      }
    } else {
      state.trigger.removeAttribute('aria-activedescendant');
    }
  };

  const updateValue = (root, optionOrOptions, triggerEvent = true) => {
    const state = states.get(root);
    let value;

    if (state.isMultiple) {
      const selected = Array.isArray(optionOrOptions) ? optionOrOptions : [];
      state.selectedOptions.clear();
      selected.forEach(option => state.selectedOptions.add(option));

      const selectedInOrder = state.options.filter(option => state.selectedOptions.has(option));
      if (selectedInOrder.length === 0) {
        state.selectedLabel.textContent = state.placeholder;
        state.selectedLabel.classList.add('text-muted-foreground');
      } else {
        state.selectedLabel.textContent = selectedInOrder.map(option => option.dataset.label || option.textContent.trim()).join(', ');
        state.selectedLabel.classList.remove('text-muted-foreground');
      }

      value = selectedInOrder.map(getValue);
      state.input.value = JSON.stringify(value);
    } else {
      const option = optionOrOptions;
      if (!option) return;
      state.selectedLabel.innerHTML = option.innerHTML;
      value = getValue(option);
      state.input.value = value;
    }

    state.options.forEach(option => {
      const isSelected = state.isMultiple ? state.selectedOptions.has(option) : option === optionOrOptions;
      if (isSelected) {
        option.setAttribute('aria-selected', 'true');
      } else {
        option.removeAttribute('aria-selected');
      }
    });

    if (triggerEvent) {
      root.dispatchEvent(new CustomEvent('change', {
        detail: { value },
        bubbles: true,
      }));
    }
  };

  const closePopover = (state, focusOnTrigger = true) => {
    if (state.popover.getAttribute('aria-hidden') === 'true') return;
    if (focusOnTrigger) state.trigger.focus();
    state.popover.setAttribute('aria-hidden', 'true');
    state.trigger.setAttribute('aria-expanded', 'false');
    setActiveOption(state, -1);
  };

  const refreshSelect = (root) => {
    const state = states.get(root);
    if (!state) return;

    const elements = getElements(root);
    if (!elements.trigger || !elements.selectedLabel || !elements.popover || !elements.listbox || !elements.input) {
      const missing = [];
      if (!elements.trigger) missing.push('trigger');
      if (!elements.selectedLabel) missing.push('selected label');
      if (!elements.popover) missing.push('popover');
      if (!elements.listbox) missing.push('listbox');
      if (!elements.input) missing.push('input');
      console.error(`Select component refresh failed. Missing element(s): ${missing.join(', ')}`, root);
      return;
    }

    const previousValue = elements.input.value;
    Object.assign(state, elements, getOptions(elements.listbox));
    state.visibleOptions = [...state.options];
    state.isMultiple = state.listbox.getAttribute('aria-multiselectable') === 'true';
    state.placeholder = state.isMultiple ? (root.dataset.placeholder || '') : null;
    state.closeOnSelect = root.dataset.closeOnSelect === 'true';

    if (state.isMultiple) {
      if (!state.selectedOptions) state.selectedOptions = new Set();
      let values = [];
      try {
        const parsed = JSON.parse(previousValue || '[]');
        values = Array.isArray(parsed) ? parsed : [];
      } catch (_) {
        values = [];
      }
      const selected = values.length
        ? values.map(value => state.options.find(option => getValue(option) === value)).filter(Boolean)
        : state.options.filter(option => option.getAttribute('aria-selected') === 'true');
      updateValue(root, selected, false);
    } else {
      const selected = state.options.find(option => getValue(option) === previousValue)
        || state.options.find(option => option.getAttribute('aria-selected') === 'true');
      state.options.forEach(option => option.removeAttribute('aria-selected'));
      if (selected) updateValue(root, selected, false);
    }

    const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
    setActiveOption(state, selectedOption ? state.options.indexOf(selectedOption) : -1);
  };

  const toggleMultipleValue = (root, option) => {
    const state = states.get(root);
    if (state.selectedOptions.has(option)) {
      state.selectedOptions.delete(option);
    } else {
      state.selectedOptions.add(option);
    }
    updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
  };

  const selectValue = (root, value) => {
    const state = states.get(root);
    if (state.isMultiple) {
      const option = state.options.find(opt => getValue(opt) === value && !state.selectedOptions.has(opt));
      if (!option) return;
      state.selectedOptions.add(option);
      updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
    } else {
      const option = state.options.find(opt => getValue(opt) === value);
      if (!option) return;
      if (state.input.value !== value) updateValue(root, option);
      closePopover(state);
    }
  };

  const deselectValue = (root, value) => {
    const state = states.get(root);
    if (!state.isMultiple) return;
    const option = state.options.find(opt => getValue(opt) === value && state.selectedOptions.has(opt));
    if (!option) return;
    state.selectedOptions.delete(option);
    updateValue(root, state.options.filter(opt => state.selectedOptions.has(opt)));
  };

  const handleKeyNavigation = (event, root) => {
    const state = states.get(root);
    const isPopoverOpen = state.popover.getAttribute('aria-hidden') === 'false';

    if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape'].includes(event.key)) return;

    if (!isPopoverOpen) {
      if (event.key !== 'Enter' && event.key !== 'Escape') {
        event.preventDefault();
        root.open();
      }
      return;
    }

    event.preventDefault();

    if (event.key === 'Escape') {
      root.close();
      return;
    }

    if (event.key === 'Enter') {
      if (state.activeIndex > -1) {
        const option = state.options[state.activeIndex];
        if (state.isMultiple) {
          toggleMultipleValue(root, option);
          if (state.closeOnSelect) root.close();
        } else {
          if (state.input.value !== getValue(option)) updateValue(root, option);
          root.close();
        }
      }
      return;
    }

    if (state.visibleOptions.length === 0) return;

    const currentVisibleIndex = state.activeIndex > -1 ? state.visibleOptions.indexOf(state.options[state.activeIndex]) : -1;
    let nextVisibleIndex = currentVisibleIndex;

    if (event.key === 'ArrowDown' && currentVisibleIndex < state.visibleOptions.length - 1) nextVisibleIndex = currentVisibleIndex + 1;
    if (event.key === 'ArrowUp') nextVisibleIndex = currentVisibleIndex > 0 ? currentVisibleIndex - 1 : 0;
    if (event.key === 'Home') nextVisibleIndex = 0;
    if (event.key === 'End') nextVisibleIndex = state.visibleOptions.length - 1;

    if (nextVisibleIndex !== currentVisibleIndex) {
      const newActiveOption = state.visibleOptions[nextVisibleIndex];
      setActiveOption(state, state.options.indexOf(newActiveOption));
      scrollOptionIntoListbox(state, newActiveOption);
    }
  };

  const initSelect = (root) => {
    if (root.dataset.selectInitialized) return;

    const state = { activeIndex: -1, selectedOptions: null, options: [], allOptions: [], visibleOptions: [] };
    states.set(root, state);
    root.refresh = () => refreshSelect(root);

    refreshSelect(root);
    if (!state.trigger || !state.selectedLabel || !state.popover || !state.listbox || !state.input) {
      states.delete(root);
      return;
    }

    root.open = () => {
      document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
      root.refresh();
      state.popover.setAttribute('aria-hidden', 'false');
      state.trigger.setAttribute('aria-expanded', 'true');

      const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
      if (selectedOption) {
        setActiveOption(state, state.options.indexOf(selectedOption));
        scrollOptionIntoListbox(state, selectedOption);
      }
    };
    root.close = (focusOnTrigger = true) => closePopover(state, focusOnTrigger);
    root.togglePopover = () => state.trigger.getAttribute('aria-expanded') === 'true' ? root.close() : root.open();

    state.trigger.addEventListener('keydown', (event) => handleKeyNavigation(event, root));
    state.trigger.addEventListener('click', root.togglePopover);

    state.listbox.addEventListener('mousemove', (event) => {
      const option = event.target.closest('[role="option"]');
      if (option && state.visibleOptions.includes(option)) {
        const index = state.options.indexOf(option);
        if (index !== state.activeIndex) setActiveOption(state, index);
      }
    });

    state.listbox.addEventListener('mouseleave', () => {
      const selectedOption = state.listbox.querySelector('[role="option"][aria-selected="true"]');
      setActiveOption(state, selectedOption ? state.options.indexOf(selectedOption) : -1);
    });

    state.listbox.addEventListener('click', (event) => {
      const clickedOption = event.target.closest('[role="option"]');
      if (!clickedOption) return;

      const option = state.options.find(opt => opt === clickedOption);
      if (!option) return;

      if (state.isMultiple) {
        toggleMultipleValue(root, option);
        if (state.closeOnSelect) {
          root.close();
        } else {
          setActiveOption(state, state.options.indexOf(option));
          state.trigger.focus();
        }
      } else {
        if (state.input.value !== getValue(option)) updateValue(root, option);
        root.close();
      }
    });

    document.addEventListener('click', (event) => {
      if (!root.contains(event.target)) root.close(false);
    });

    document.addEventListener('basecoat:popover', (event) => {
      if (event.detail.source !== root) root.close(false);
    });

    Object.defineProperty(root, 'value', {
      configurable: true,
      get: () => state.isMultiple ? state.options.filter(option => state.selectedOptions.has(option)).map(getValue) : state.input.value,
      set: (value) => {
        if (state.isMultiple) {
          const values = Array.isArray(value) ? value : (value != null ? [value] : []);
          updateValue(root, values.map(v => state.options.find(option => getValue(option) === v)).filter(Boolean));
        } else {
          const option = state.options.find(opt => getValue(opt) === value);
          if (option) {
            updateValue(root, option);
            root.close();
          }
        }
      },
    });

    root.select = (value) => selectValue(root, value);
    root.selectByValue = root.select;
    if (state.isMultiple) {
      root.deselect = (value) => deselectValue(root, value);
      root.toggle = (value) => {
        const option = state.options.find(opt => getValue(opt) === value);
        if (option) toggleMultipleValue(root, option);
      };
      root.selectAll = () => updateValue(root, state.options);
      root.selectNone = () => updateValue(root, []);
    }

    state.popover.setAttribute('aria-hidden', 'true');
    state.trigger.setAttribute('aria-expanded', 'false');
    root.dataset.selectInitialized = 'true';
    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
  };

  if (window.basecoat) {
    window.basecoat.register('select', {
      selector: 'div.select:not([data-select-initialized])',
      init: initSelect,
      refresh: refreshSelect,
    });
  }
})();