@studiocms/ui 0.4.12 → 0.4.13

package/dist/components/SearchSelect/searchselect.js

@@ -1,169 +1,370 @@
 function loadSearchSelects() {
-  const allSearchSelects = document.querySelectorAll(".sui-search-select-label");
-  for (const container of allSearchSelects) {
-    let hideOnClickOutside2 = function(element) {
-      const outsideClickListener = (event) => {
-        if (!element.contains(event.target) && isVisible(element) && active === true) {
-          dropdown.classList.remove("active", "above");
-          active = false;
-        }
-      };
-      document.addEventListener("click", outsideClickListener);
-    }, constructOptionsBasedOnOptions2 = function(options2) {
-      dropdown.innerHTML = "";
-      if (options2.length === 0) {
-        const element = document.createElement("li");
-        element.classList.add("empty-search-results");
-        element.textContent = "No results found.";
-        dropdown.appendChild(element);
+  const CONSTANTS = {
+    OPTION_HEIGHT: 36,
+    BORDER_SIZE: 2,
+    MARGIN: 4,
+    BADGE_PADDING: 80
+  };
+  const getDropdownPosition = (input, optionsCount) => {
+    const rect = input.getBoundingClientRect();
+    const dropdownHeight = optionsCount * CONSTANTS.OPTION_HEIGHT + CONSTANTS.BORDER_SIZE + CONSTANTS.MARGIN;
+    const customRect = {
+      top: rect.bottom + CONSTANTS.MARGIN,
+      bottom: rect.bottom + CONSTANTS.MARGIN + dropdownHeight,
+      left: rect.left,
+      right: rect.right,
+      width: rect.width,
+      x: rect.x,
+      y: rect.y + rect.height + CONSTANTS.MARGIN,
+      height: dropdownHeight
+    };
+    return {
+      isAbove: customRect.top >= 0 && customRect.left >= 0 && customRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && customRect.right <= (window.innerWidth || document.documentElement.clientWidth),
+      customRect
+    };
+  };
+  const createSelectBadge = (value, label) => {
+    const badge = document.createElement("span");
+    badge.classList.add("sui-badge", "primary", "sm", "default", "full", "sui-search-select-badge");
+    badge.setAttribute("data-value", value);
+    badge.innerHTML = `${label} <svg style='min-width: 8px' xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' role="button" tabindex="0"><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 18L18 6M6 6l12 12'></path></svg>`;
+    return badge;
+  };
+  const recalculateBadges = (state2, container) => {
+    const badgeContainer = container.querySelector(".sui-search-select-badge-container");
+    if (!badgeContainer || !container.input) return;
+    badgeContainer.innerHTML = "";
+    const selectedValues = state2.selectedOptionsMap[container.dataset.id] || [];
+    const allOptions = state2.optionsMap[container.dataset.id] || [];
+    if (selectedValues.length === 0) {
+      container.input.placeholder = state2.placeholderMap[container.dataset.id] ?? "";
+      return;
+    }
+    for (const value of selectedValues.sort((a, b) => {
+      const numA = Number.parseInt(a.match(/\d+/)?.[0] || "0");
+      const numB = Number.parseInt(b.match(/\d+/)?.[0] || "0");
+      return numA - numB;
+    })) {
+      const option = allOptions.find((opt) => opt.value === value);
+      if (option) {
+        const newBadge = createSelectBadge(value, option.label);
+        badgeContainer.appendChild(newBadge);
       }
-      let i = 0;
-      for (const option of options2) {
-        const element = document.createElement("li");
-        element.classList.add(
-          ...[
-            "sui-search-select-option",
-            option.disabled && "disabled",
-            focusIndex === i && "focused"
-          ].filter((x) => typeof x === "string")
-        );
-        element.role = "option";
-        element.value = Number.parseInt(option.value);
-        element.id = "";
-        element.dataset.optionIndex = i.toString();
-        element.dataset.value = option.value;
-        element.textContent = option.label;
-        element.addEventListener("click", (e) => handleSelection(e, element));
-        dropdown.appendChild(element);
-        i++;
+    }
+  };
+  const updateLabel = (isMultiple, state2, container) => {
+    const selectedInput = container?.input;
+    if (isMultiple) {
+      recalculateBadges(state2, container);
+      if (selectedInput) {
+        selectedInput.placeholder = state2.placeholderMap[container.dataset.id] ?? "";
       }
-      optionElements = container.querySelectorAll("li");
-    };
-    var hideOnClickOutside = hideOnClickOutside2, constructOptionsBasedOnOptions = constructOptionsBasedOnOptions2;
-    const hiddenSelect = container.querySelector("select");
-    const searchWrapper = container.querySelector(".sui-search-input-wrapper");
-    const searchInput = searchWrapper.querySelector("input");
-    const dropdown = container.querySelector(".sui-search-select-dropdown");
-    let optionElements = container.querySelectorAll("li");
-    let active = false;
-    const options = JSON.parse(container.dataset.options);
-    const id = container.dataset.id;
-    let filteredOptions = options;
-    searchWrapper.addEventListener("click", () => {
-      const { bottom, left, right, width, x, y, height } = searchWrapper.getBoundingClientRect();
-      const optionHeight = 36;
-      const totalBorderSize = 2;
-      const margin = 4;
-      const dropdownHeight = options.length * optionHeight + totalBorderSize + margin;
-      const CustomRect = {
-        top: bottom + margin,
-        left,
-        right,
-        bottom: bottom + margin + dropdownHeight,
-        width,
-        height: dropdownHeight,
-        x,
-        y: y + height + margin
-      };
-      if (active) {
-        searchInput.ariaExpanded = "false";
-        dropdown.classList.remove("active", "above");
-        active = false;
-        return;
+    } else {
+      const selected = container.querySelector(
+        ".sui-search-select-option.selected"
+      );
+      if (selected && selectedInput) {
+        selectedInput.placeholder = selected.innerText.trim();
       }
-      active = true;
-      searchInput.ariaExpanded = "true";
-      if (CustomRect.top >= 0 && CustomRect.left >= 0 && CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
-        dropdown.classList.add("active");
+    }
+  };
+  const updateOptionSelection = (value, container, state2, forceState) => {
+    const currentSelected = state2.selectedOptionsMap[container.dataset.id] || [];
+    const isCurrentlySelected = currentSelected.includes(value);
+    const max = Number.parseInt(container.dataset.multipleMax);
+    if (!isCurrentlySelected && !Number.isNaN(max) && currentSelected.length >= max) {
+      return false;
+    }
+    const newSelected = isCurrentlySelected ? currentSelected.filter((v) => v !== value) : [...currentSelected, value];
+    state2.selectedOptionsMap[container.dataset.id] = newSelected;
+    const option = container.dropdown?.querySelector(
+      `.sui-search-select-option[data-value='${value}']`
+    );
+    if (option) {
+      option.classList.toggle("selected", forceState ?? !isCurrentlySelected);
+    }
+    const selectOption = container.select?.querySelector(
+      `option[value='${value}']`
+    );
+    if (selectOption) {
+      selectOption.selected = forceState ?? !isCurrentlySelected;
+    }
+    const selectedCountEl = container.querySelector(
+      ".sui-search-select-max-span .sui-search-select-select-count"
+    );
+    if (selectedCountEl) {
+      selectedCountEl.innerText = String(newSelected.length);
+    }
+    return true;
+  };
+  const toggleMultiOption = (id, container, state2) => {
+    const success = updateOptionSelection(id, container, state2);
+    if (success) {
+      recalculateBadges(state2, container);
+    }
+  };
+  const recomputeOptions = (state2, container) => {
+    const optionElements = container?.dropdown?.querySelectorAll(
+      ".sui-search-select-option"
+    );
+    for (const entry of optionElements) {
+      if (Number.parseInt(entry.dataset.optionIndex) === state2.focusIndex) {
+        entry.classList.add("focused");
       } else {
-        dropdown.classList.add("active", "above");
+        entry.classList.remove("focused");
       }
-    });
-    const handleSelection = (e, option) => {
-      e.stopImmediatePropagation();
-      if (option.id === `${id}-selected` || !id) return;
-      const currentlySelected = document.getElementById(`${id}-selected`);
-      if (currentlySelected) {
-        currentlySelected.classList.remove("selected");
-        currentlySelected.id = "";
+    }
+  };
+  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;
+    }
+    for (const option of filteredOptions) {
+      const element = document.createElement("li");
+      element.classList.add("sui-search-select-option");
+      if (option.disabled) {
+        element.classList.add("disabled");
       }
-      option.id = `${id}-selected`;
-      option.classList.add("selected");
-      const index = options.findIndex((x) => x.value === option.dataset.value);
-      focusIndex = index;
-      const opt = options[index];
-      hiddenSelect.value = opt.value;
-      searchInput.placeholder = opt.label;
-      dropdown.classList.remove("active", "above");
-      searchInput.value = "";
-      filteredOptions = options;
-      constructOptionsBasedOnOptions2(options);
-      active = false;
-    };
-    for (const option of optionElements) {
-      option.addEventListener("click", (e) => handleSelection(e, option));
+      if (selectedValues.includes(option.value)) {
+        element.classList.add("selected");
+      }
+      element.role = "option";
+      element.dataset.optionIndex = i.toString();
+      element.dataset.value = option.value;
+      element.textContent = option.label;
+      container.dropdown?.appendChild(element);
+      i++;
     }
-    window.addEventListener("scroll", () => {
-      dropdown.classList.remove("active", "above");
-      active = false;
-    });
-    hideOnClickOutside2(container);
-    const isVisible = (elem) => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
-    let focusIndex = 0;
-    const recomputeOptions = () => {
-      for (const entry of optionElements) {
-        if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
-          entry.classList.add("focused");
-        } else {
-          entry.classList.remove("focused");
-        }
+  };
+  const getInteractiveOptions = (container) => {
+    const allOptions = container?.dropdown?.querySelectorAll(
+      ".sui-search-select-option"
+    );
+    return Array.from(allOptions).filter(
+      (option) => !option.classList.contains("hidden") && !option.classList.contains("disabled") && !option.hasAttribute("disabled")
+    );
+  };
+  const handleContainerMouseDown = (e, state2, container) => {
+    const target = e.target;
+    if (!target.closest("input")) {
+      e.preventDefault();
+    }
+    state2.isSelectingOption = true;
+    setTimeout(() => {
+      state2.isSelectingOption = false;
+    }, 0);
+    if (target.closest(".sui-search-select-badge svg")) {
+      const value = target.closest(".sui-search-select-badge")?.getAttribute("data-value");
+      const success = updateOptionSelection(value, container, state2);
+      if (success) {
+        recalculateBadges(state2, container);
       }
-    };
-    searchInput.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        active = false;
-        dropdown.classList.remove("active", "above");
-        searchInput.blur();
-        return;
+      return;
+    }
+    const opt = target.closest(".sui-search-select-option");
+    if (!opt?.dataset.value) return;
+    if (opt.classList.contains("disabled") || opt.hasAttribute("disabled")) {
+      container.input?.focus();
+      return;
+    }
+    const isMultiple = state2.isMultipleMap[container.dataset.id];
+    if (isMultiple) {
+      const success = updateOptionSelection(opt.dataset.value, container, state2);
+      if (success) {
+        updateLabel(true, state2, container);
+        recalculateBadges(state2, container);
       }
-      if (e.key === "ArrowUp" && focusIndex > 0) {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        focusIndex--;
-        recomputeOptions();
-        return;
+    } else {
+      const currentSelected = state2.selectedOptionsMap[container.dataset.id] || [];
+      for (const value of currentSelected) {
+        updateOptionSelection(value, container, state2, false);
       }
-      if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter((x) => !x.disabled).length) {
+      updateOptionSelection(opt.dataset.value, container, state2, true);
+      updateLabel(false, state2, container);
+      container.dropdown?.classList.remove("active", "above");
+      container.input?.blur();
+      container.input.value = "";
+    }
+  };
+  const handleSelectKeyDown = (e, state2, container) => {
+    const focusedElement = document.activeElement;
+    if (e.key === "Escape" || e.key === "Tab") {
+      container.input?.blur();
+      container.dropdown?.classList.remove("active", "above");
+      return;
+    }
+    if ((e.key === "Enter" || e.key === " ") && focusedElement?.tagName.toLowerCase() === "svg") {
+      const badgeElement = focusedElement?.closest(".sui-search-select-badge");
+      if (badgeElement && state2.isMultipleMap[container?.dataset.id]) {
+        const badgeValue = badgeElement.getAttribute("data-value");
+        let nextBadge = badgeElement.previousElementSibling;
+        if (!nextBadge) {
+          nextBadge = badgeElement.nextElementSibling;
+        }
+        const nextBadgeValue = nextBadge?.getAttribute("data-value");
+        toggleMultiOption(badgeValue, container, state2);
+        recalculateBadges(state2, container);
+        setTimeout(() => {
+          if (nextBadgeValue) {
+            const badgeToFocus = container?.querySelector(
+              `.sui-search-select-badge[data-value="${nextBadgeValue}"] svg`
+            );
+            if (badgeToFocus) {
+              badgeToFocus.focus();
+            }
+          }
+        }, 0);
         e.preventDefault();
         e.stopImmediatePropagation();
-        focusIndex++;
-        recomputeOptions();
         return;
       }
-      if (e.key === "Enter") {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        for (const entry of optionElements) {
-          if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
-            entry.click();
+    }
+    const interactiveOptions = getInteractiveOptions(container);
+    const currentInteractiveIndex = interactiveOptions.findIndex(
+      (option) => option.classList.contains("focused")
+    );
+    if (e.key === "ArrowUp" && currentInteractiveIndex > 0) {
+      state2.focusIndex = Array.from(
+        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      ).indexOf(interactiveOptions[currentInteractiveIndex - 1]);
+      recomputeOptions(state2, container);
+      return;
+    }
+    if (e.key === "ArrowDown" && currentInteractiveIndex < interactiveOptions.length - 1) {
+      state2.focusIndex = Array.from(
+        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      ).indexOf(interactiveOptions[currentInteractiveIndex + 1]);
+      recomputeOptions(state2, container);
+      return;
+    }
+    if (e.key === "PageUp") {
+      state2.focusIndex = Array.from(
+        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      ).indexOf(interactiveOptions[0]);
+      recomputeOptions(state2, container);
+      return;
+    }
+    if (e.key === "PageDown") {
+      state2.focusIndex = Array.from(
+        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      ).indexOf(interactiveOptions[interactiveOptions.length - 1]);
+      recomputeOptions(state2, container);
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const optionElements = container?.dropdown?.querySelectorAll(
+        ".sui-search-select-option"
+      );
+      const focusedOption = Array.from(optionElements).find(
+        (entry) => Number.parseInt(entry.dataset.optionIndex) === state2.focusIndex
+      );
+      if (focusedOption && !focusedOption.classList.contains("disabled") && !focusedOption.hasAttribute("disabled")) {
+        const value = focusedOption.dataset.value;
+        if (!value) return;
+        const isMultiple = state2.isMultipleMap[container.dataset.id];
+        if (isMultiple) {
+          const success = updateOptionSelection(value, container, state2);
+          if (success) {
+            updateLabel(true, state2, container);
+            recalculateBadges(state2, container);
           }
+        } else {
+          const currentSelected = state2.selectedOptionsMap[container.dataset.id] || [];
+          for (const existingValue of currentSelected) {
+            updateOptionSelection(existingValue, container, state2, false);
+          }
+          updateOptionSelection(value, container, state2, true);
+          updateLabel(false, state2, container);
+          container.dropdown?.classList.remove("active", "above");
+          container.input.value = "";
         }
-        return;
       }
-    });
-    searchInput.addEventListener("keyup", (e) => {
-      if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
-      if (searchInput.value.trim().length === 0) {
-        constructOptionsBasedOnOptions2(options);
-        filteredOptions = options;
-        return;
+      return;
+    }
+  };
+  const handleInputKeyup = (e, state2, container) => {
+    if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+    const value = container.input.value.trim().toLowerCase();
+    const allOptions = state2.optionsMap[container.dataset.id];
+    if (value.length === 0) {
+      reconstructOptions(allOptions, state2, container);
+      return;
+    }
+    const filteredOptions = allOptions?.filter((option) => option.label.toLowerCase().includes(value)) ?? [];
+    state2.focusIndex = 0;
+    reconstructOptions(filteredOptions, state2, container);
+  };
+  const handleContainerFocusOut = (state2, container) => {
+    if (state2.isSelectingOption) return;
+    container.input.value = "";
+    reconstructOptions(state2.optionsMap[container.dataset.id] ?? [], state2, container);
+    container.dropdown?.classList.remove("active", "above");
+  };
+  const handleContainerFocusIn = (state2, container) => {
+    const allDropdowns = document.querySelectorAll(".sui-search-select-dropdown");
+    for (const dropdown of allDropdowns) {
+      if (dropdown !== container.dropdown) {
+        dropdown.classList.remove("active", "above");
       }
-      filteredOptions = options.filter((x) => x.label.includes(searchInput.value));
-      focusIndex = 0;
-      constructOptionsBasedOnOptions2(filteredOptions);
+    }
+    const { isAbove } = getDropdownPosition(
+      container.input,
+      state2.optionsMap[container.dataset.id]?.length ?? 0
+    );
+    container.dropdown?.classList.add("active", ...isAbove ? [] : ["above"]);
+  };
+  const state = {
+    optionsMap: {},
+    isMultipleMap: {},
+    placeholderMap: {},
+    selectedOptionsMap: {},
+    focusIndex: 0,
+    isSelectingOption: false
+  };
+  const selects = document.querySelectorAll(".sui-search-select-label");
+  for (const container of selects) {
+    const id = container.dataset.id;
+    const specialContainer = Object.assign(container, {
+      input: container.querySelector("input"),
+      dropdown: container.querySelector(".sui-search-select-dropdown"),
+      select: container.querySelector("select")
     });
+    const selectedOptions = Array.from(
+      specialContainer.dropdown?.querySelectorAll(".sui-search-select-option.selected") ?? []
+    );
+    state.placeholderMap[id] = specialContainer.input?.placeholder ?? "";
+    state.optionsMap[id] = JSON.parse(container.dataset.options ?? "{}");
+    state.isMultipleMap[id] = container.dataset.multiple === "true";
+    state.selectedOptionsMap[id] = selectedOptions.map((x) => x.getAttribute("data-value") ?? "");
+    specialContainer.input?.addEventListener(
+      "focusin",
+      () => handleContainerFocusIn(state, specialContainer)
+    );
+    specialContainer.addEventListener(
+      "focusout",
+      () => handleContainerFocusOut(state, specialContainer)
+    );
+    specialContainer.addEventListener(
+      "keydown",
+      (e) => handleSelectKeyDown(e, state, specialContainer)
+    );
+    specialContainer.input?.addEventListener(
+      "keyup",
+      (e) => handleInputKeyup(e, state, specialContainer)
+    );
+    specialContainer.addEventListener(
+      "mousedown",
+      (e) => handleContainerMouseDown(e, state, specialContainer)
+    );
+    if (state.isMultipleMap[id]) {
+      recalculateBadges(state, specialContainer);
+    }
   }
 }
 document.addEventListener("astro:page-load", loadSearchSelects);