@superleapai/flow-ui 1.0.0

package/components/multiselect.js

@@ -0,0 +1,351 @@
+/**
+ * MultiSelect Component (vanilla JS, Tailwind)
+ * Dropdown multiselect; same design system as Select, supports multiple values.
+ */
+
+(function (global) {
+  "use strict";
+
+  var CHEVRON_SVG =
+    '<svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
+
+  var CHECK_SVG =
+    '<svg width="14" height="14" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.41574 12.2442 3.41574 12.5331 3.72684C12.822 4.03795 12.822 4.53753 12.5331 4.84863L6.81767 10.6736C6.52329 10.9901 6.05308 10.9901 5.7587 10.6736L2.46685 7.3463C2.17795 7.03519 2.17795 6.53561 2.46685 6.2245C2.75575 5.9134 3.24395 5.9134 3.53285 6.2245L6.28822 9.05351L11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
+
+  function triggerClasses(variant, size, disabled, isEmpty) {
+    var v = variant || "default";
+    var base =
+      "w-full items-center justify-between rounded-4 border-1/2 bg-fill-quarternary-fill-white !text-reg-13 focus:outline-none flex h-full truncate hover:cursor-pointer ";
+    var variantClasses = {
+      default:
+        "border-border-primary hover:border-primary-border focus:border-1/2 focus:border-primary-border",
+      error:
+        "border-error-border hover:border-error-border-hover focus:border-1/2 focus:border-error-border-hover",
+      warning:
+        "border-warning-border hover:border-warning-border-hover focus:border-1/2 focus:border-warning-border-hover",
+      borderless: "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+      inline:
+        "focus:border-transparent border border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray hover:border-transparent",
+    };
+    var sizeClasses = {
+      default: "px-12 py-6",
+      large: "px-12 py-8",
+      small: "px-8 py-4",
+    };
+    var textColorClass = isEmpty ? " text-typography-quaternary-text" : " text-typography-primary-text";
+    var disabledClass = disabled
+      ? " pointer-events-none cursor-not-allowed bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
+      : "";
+    return (
+      base +
+      (variantClasses[v] || variantClasses.default) +
+      " " +
+      (sizeClasses[size] || sizeClasses.default) +
+      textColorClass +
+      disabledClass
+    );
+  }
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function getOptionValue(opt) {
+    return opt.value !== undefined && opt.value !== null
+      ? opt.value
+      : opt.slug || opt.id;
+  }
+
+  function getOptionLabel(opt) {
+    return opt.label || opt.name || opt.display_name || opt.value;
+  }
+
+  /**
+   * Create a multiselect dropdown component
+   * @param {Object} config
+   * @param {string} [config.fieldId] - Field ID for state management
+   * @param {Array} config.options - Array of { value, label } or { slug, display_name } (optional badge_config)
+   * @param {string} config.placeholder - Placeholder text
+   * @param {Array} [config.value] - Current selected values (array)
+   * @param {string} [config.label] - Label for summary when items selected (e.g. "selected" -> "3 selected")
+   * @param {Function} config.onValuesChange - Change handler (values: string[])
+   * @param {boolean} [config.disabled] - Whether multiselect is disabled
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @returns {HTMLElement} MultiSelect container element
+   */
+  function createMultiSelect(config) {
+    var fieldId = config.fieldId;
+    var options = config.options || [];
+    var placeholder = config.placeholder || "Select options";
+    var summaryLabel = config.label || "selected";
+    var onValuesChange = config.onValuesChange;
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var disabled = config.disabled === true;
+
+    var values = Array.isArray(config.value)
+      ? config.value.slice()
+      : Array.isArray(config.values)
+        ? config.values.slice()
+        : [];
+
+    var container = document.createElement("div");
+    container.className = "custom-multiselect relative w-full group";
+    if (fieldId) container.setAttribute("data-field-id", fieldId);
+
+    var triggerWrapper = document.createElement("span");
+    triggerWrapper.className =
+      "multiselect-trigger-wrapper relative flex w-full items-center justify-between gap-8";
+
+    var trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
+    trigger.disabled = disabled;
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-multiselectable", "true");
+    trigger.setAttribute("aria-label", placeholder);
+
+    var triggerContent = document.createElement("div");
+    triggerContent.className = "flex flex-1 items-center gap-6 truncate text-left text-inherit";
+
+    function renderTriggerContent() {
+      triggerContent.innerHTML = "";
+      if (values.length === 0) {
+        var placeholderSpan = document.createElement("span");
+        placeholderSpan.className = "text-inherit";
+        placeholderSpan.textContent = placeholder;
+        triggerContent.appendChild(placeholderSpan);
+      } else {
+        var summary = document.createElement("span");
+        summary.className = "text-inherit";
+        summary.textContent = values.length + " " + summaryLabel;
+        triggerContent.appendChild(summary);
+      }
+    }
+    renderTriggerContent();
+
+    trigger.appendChild(triggerContent);
+
+    var chevron = document.createElement("span");
+    chevron.className =
+      "ml-4 box-content flex size-16 items-center justify-center shrink-0 transition-transform duration-200 group-[.open]:rotate-180";
+    chevron.innerHTML = CHEVRON_SVG;
+    chevron.setAttribute("aria-hidden", "true");
+    trigger.appendChild(chevron);
+
+    triggerWrapper.appendChild(trigger);
+    container.appendChild(triggerWrapper);
+
+    var contentBase =
+      "custom-multiselect-content absolute left-0 right-0 z-50 max-h-[200px] min-w-[8rem] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out " +
+      "group-[.open]:opacity-100 group-[.open]:visible ";
+
+    var content = document.createElement("div");
+    content.setAttribute("role", "listbox");
+    content.setAttribute("aria-multiselectable", "true");
+    content.className = contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+
+    var optionsList = document.createElement("div");
+    optionsList.className =
+      "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+
+    function isSelected(optionValue) {
+      return values.some(function (v) {
+        return v === optionValue || String(v) === String(optionValue);
+      });
+    }
+
+    function toggleValue(optionValue) {
+      var idx = values.findIndex(function (v) {
+        return v === optionValue || String(v) === String(optionValue);
+      });
+      if (idx >= 0) {
+        values.splice(idx, 1);
+      } else {
+        values.push(optionValue);
+      }
+      renderTriggerContent();
+      trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
+      syncOptionStates();
+      if (onValuesChange) onValuesChange(values.slice());
+    }
+
+    function syncOptionStates() {
+      optionsList.querySelectorAll("[role=option]").forEach(function (optEl) {
+        var dv = optEl.getAttribute("data-value");
+        var selected = values.some(function (v) {
+          return v === dv || String(v) === dv || (dv === "false" && v === false) || (dv === "true" && v === true);
+        });
+        optEl.setAttribute("aria-selected", selected);
+        var checkEl = optEl.querySelector(".multiselect-option-check");
+        if (checkEl) checkEl.style.visibility = selected ? "visible" : "hidden";
+        optEl.classList.toggle("bg-primary-surface", selected);
+        optEl.classList.toggle("hover:!bg-primary-surface-hover", selected);
+        optEl.classList.toggle("hover:bg-fill-tertiary-fill-light-gray", !selected);
+      });
+    }
+
+    function buildOptionsList() {
+      optionsList.innerHTML = "";
+      if (options.length === 0) {
+        var noOpt = document.createElement("div");
+        noOpt.className =
+          "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-typography-quaternary-text";
+        noOpt.textContent = "No options available";
+        optionsList.appendChild(noOpt);
+        return;
+      }
+      options.forEach(function (opt) {
+        var optionValue = getOptionValue(opt);
+        var optionLabel = getOptionLabel(opt);
+        var selected = isSelected(optionValue);
+
+        var option = document.createElement("div");
+        option.setAttribute("role", "option");
+        option.setAttribute("data-value", optionValue);
+        option.setAttribute("aria-selected", selected);
+        option.className = join(
+          "relative flex w-full cursor-pointer select-none items-center gap-8 rounded-2 px-12 py-6 text-reg-13 outline-none first:rounded-t-4 last:rounded-b-4",
+          "hover:bg-fill-tertiary-fill-light-gray focus:bg-fill-tertiary-fill-light-gray",
+          selected ? "bg-primary-surface hover:!bg-primary-surface-hover" : ""
+        );
+
+        var optionContent = document.createElement("span");
+        optionContent.className = "flex items-center gap-8 flex-1 truncate";
+        optionContent.textContent = optionLabel;
+        option.appendChild(optionContent);
+
+        var checkSpan = document.createElement("span");
+        checkSpan.className = "multiselect-option-check ml-auto flex size-14 shrink-0 items-center justify-center";
+        checkSpan.innerHTML = CHECK_SVG;
+        checkSpan.style.visibility = selected ? "visible" : "hidden";
+        option.appendChild(checkSpan);
+
+        option.addEventListener("click", function (e) {
+          e.stopPropagation();
+          if (disabled) return;
+          toggleValue(optionValue);
+        });
+        option.addEventListener("mouseenter", function () {
+          if (disabled) return;
+          optionsList.querySelectorAll("[role=option]").forEach(function (o) {
+            if (o !== option && !isSelected(o.getAttribute("data-value"))) {
+              o.classList.remove("bg-fill-tertiary-fill-light-gray");
+            }
+          });
+          if (!option.classList.contains("bg-primary-surface")) {
+            option.classList.add("bg-fill-tertiary-fill-light-gray");
+          }
+        });
+
+        optionsList.appendChild(option);
+      });
+    }
+    buildOptionsList();
+
+    content.appendChild(optionsList);
+    container.appendChild(content);
+
+    var isOpen = false;
+
+    function openDropdown() {
+      if (disabled) return;
+      document
+        .querySelectorAll(".custom-select.open, .record-select.open, .custom-multiselect.open")
+        .forEach(function (other) {
+          if (other !== container) {
+            other.classList.remove("open");
+            var t = other.querySelector(
+              "button, .custom-select-trigger, .record-select-trigger, .multiselect-trigger-wrapper button"
+            );
+            if (t) t.setAttribute("aria-expanded", "false");
+          }
+        });
+      isOpen = true;
+      container.classList.add("open");
+      trigger.setAttribute("aria-expanded", "true");
+    }
+
+    function closeDropdown() {
+      isOpen = false;
+      container.classList.remove("open");
+      trigger.setAttribute("aria-expanded", "false");
+    }
+
+    function toggleDropdown() {
+      if (isOpen) closeDropdown();
+      else openDropdown();
+    }
+
+    trigger.addEventListener("click", function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleDropdown();
+    });
+
+    trigger.addEventListener("keydown", function (e) {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          toggleDropdown();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) openDropdown();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!isOpen) openDropdown();
+          break;
+        case "Escape":
+          if (isOpen) {
+            e.preventDefault();
+            closeDropdown();
+          }
+          break;
+      }
+    });
+
+    document.addEventListener("click", function (e) {
+      if (isOpen && !container.contains(e.target)) closeDropdown();
+    });
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape" && isOpen) closeDropdown();
+    });
+
+    container.updateValues = function (newValues) {
+      values = Array.isArray(newValues) ? newValues.slice() : [];
+      renderTriggerContent();
+      buildOptionsList();
+      syncOptionStates();
+    };
+
+    container.updateOptions = function (newOptions) {
+      options.length = 0;
+      options.push.apply(options, newOptions || []);
+      buildOptionsList();
+      syncOptionStates();
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      trigger.disabled = disabled;
+      trigger.className = triggerClasses(variant, size, disabled, values.length === 0);
+      if (disabled && isOpen) closeDropdown();
+    };
+
+    container.getValues = function () {
+      return values.slice();
+    };
+
+    return container;
+  }
+
+  global.MultiSelect = {
+    create: createMultiSelect,
+  };
+})(typeof window !== "undefined" ? window : this);