@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.106

package/dist/select-register.js

@@ -1,262 +1,404 @@
-import { installHelpTags } from './chunk-TDMHA7C3.js';
-import '@awesome.me/webawesome/dist/components/button/button.js';
-import '@awesome.me/webawesome/dist/components/divider/divider.js';
-import '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
-import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
-import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
-import WaOption from '@awesome.me/webawesome/dist/components/option/option.js';
-import WaSelect from '@awesome.me/webawesome/dist/components/select/select.js';
-import { WaAfterHideEvent } from '@awesome.me/webawesome/dist/events/after-hide.js';
-import { WaAfterShowEvent } from '@awesome.me/webawesome/dist/events/after-show.js';
-import { WaHideEvent } from '@awesome.me/webawesome/dist/events/hide.js';
-import { WaShowEvent } from '@awesome.me/webawesome/dist/events/show.js';
+import { installPopupMenus } from './chunk-C3RLKKFQ.js';
+import { installHelpTags } from './chunk-SQ2Q3OQI.js';
+import { summarizeSelection } from './chunk-TUID42UE.js';
+import { followAnchor, positionPopup } from './chunk-PE2KPZDW.js';
 
-// src/components/forms/select/internal/install-select-actions.ts
-function runSelectAction(host, action) {
-  if (host.disabled || !host.multiple) return false;
-  const enabled = host.getAllOptions().filter((option) => !option.disabled);
-  const next = action === "all" ? enabled : [];
-  const current = host.selectedOptions;
-  if (current.length === next.length && current.every((option) => next.includes(option)))
-    return false;
-  host.hasInteracted = true;
-  host.valueHasChanged = true;
-  host.setSelectedOptions(next);
-  void host.updateComplete.then(() => {
-    host.dispatchEvent(
-      new InputEvent("input", { bubbles: true, composed: true })
-    );
-    host.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-  });
-  return true;
+
+// src/components/forms/select/internal/select-element.ts
+var OPTION = ".kui-select__option";
+var isDisabled = (option) => option.getAttribute("aria-disabled") === "true";
+var optionValue = (option) => option.getAttribute("data-value");
+var optionLabel = (option) => option.querySelector(".kui-select__option-label").textContent;
+function optionsOf(root) {
+  return Array.from(root.querySelectorAll(OPTION));
 }
-var installedDocuments = /* @__PURE__ */ new WeakSet();
-function installSelectActions(doc = document) {
-  if (installedDocuments.has(doc)) return;
-  installedDocuments.add(doc);
-  doc.addEventListener("keydown", (event) => {
-    if (event.key === "Escape" || event.key === "Tab") return;
-    if (!(event.target instanceof Element)) return;
-    const button = event.target.closest("button[data-select-action]");
-    if (button?.closest('wa-select[data-component="select"]'))
-      event.stopImmediatePropagation();
-  });
-  doc.addEventListener("click", (event) => {
-    if (!(event.target instanceof Element)) return;
-    const button = event.target.closest(
-      "button[data-select-action]"
-    );
-    if (!button || button.hasAttribute("disabled")) return;
-    const host = button.closest(
-      'wa-select[data-component="select"]'
-    );
-    if (!host) return;
-    const action = button.dataset.selectAction;
-    if (action === "all" || action === "clear") runSelectAction(host, action);
-  });
+function chosenOptions(root) {
+  return optionsOf(root).filter(
+    (option) => option.getAttribute("aria-selected") === "true" && !isDisabled(option)
+  );
 }
-
-// src/components/forms/select/internal/animate-select-popup.ts
-function animateSelectPopup(popup, phase, signal) {
-  return new Promise((resolve) => {
-    let settled = false;
-    let frame = 0;
-    const finish = () => {
-      if (settled) return;
-      settled = true;
-      window.cancelAnimationFrame(frame);
-      signal.removeEventListener("abort", finish);
-      popup.classList.remove(phase);
-      resolve();
-    };
-    signal.addEventListener("abort", finish, { once: true });
-    popup.classList.add(phase);
-    frame = window.requestAnimationFrame(() => {
-      void Promise.all(
-        popup.getAnimations().map((animation) => animation.finished.catch(() => void 0))
-      ).then(finish);
-    });
-    if (signal.aborted) finish();
-  });
+function renderSelection(root) {
+  const trigger = root.querySelector(
+    ":scope > .kui-select__trigger"
+  );
+  const valueText = trigger.querySelector(".kui-select__value");
+  const chosen = chosenOptions(root);
+  const multiple = root.hasAttribute("multiple");
+  const iconOnly = root.getAttribute("data-selected-presentation") === "icon-only";
+  const summary = multiple ? summarizeSelection(chosen.map(optionLabel)) : "";
+  const text = multiple ? iconOnly ? "" : summary : chosen[0] ? optionLabel(chosen[0]) : "";
+  if (multiple && iconOnly) {
+    const base = root.querySelector(".kui-select__listbox").getAttribute("aria-label");
+    trigger.setAttribute("aria-label", summary ? `${base}: ${summary}` : base);
+  }
+  if (root.classList.contains("kui-select--custom-selected")) return;
+  if (text) {
+    valueText.textContent = text;
+    valueText.removeAttribute("data-placeholder");
+  } else {
+    valueText.textContent = valueText.getAttribute("data-placeholder-text");
+    valueText.setAttribute("data-placeholder", "true");
+  }
+  if (multiple) return;
+  trigger.querySelector(":scope > .kui-select__icon--selected")?.remove();
+  const icon = chosen[0]?.querySelector(".kui-select__icon");
+  if (icon) {
+    const copy = icon.cloneNode(true);
+    copy.classList.add("kui-select__icon--selected");
+    trigger.prepend(copy);
+  }
 }
-
-// src/components/forms/select/internal/install-select-lifecycle.ts
-function releaseClosedPopupOverflow(popup) {
-  const display = popup.style.getPropertyValue("display");
-  const priority = popup.style.getPropertyPriority("display");
-  popup.style.setProperty("display", "block");
-  void popup.offsetHeight;
-  if (display) popup.style.setProperty("display", display, priority);
-  else popup.style.removeProperty("display");
+function setChosen(root, values) {
+  const wanted = new Set(values);
+  const multiple = root.hasAttribute("multiple");
+  let changed = false;
+  let found = false;
+  for (const option of optionsOf(root)) {
+    const next = !isDisabled(option) && wanted.has(optionValue(option)) && (multiple || !found);
+    if (next) found = true;
+    if (option.getAttribute("aria-selected") === "true" !== next) {
+      option.setAttribute("aria-selected", String(next));
+      changed = true;
+    }
+  }
+  if (changed) renderSelection(root);
+  return changed;
 }
-function installSelectLifecycle(prototype) {
-  const installed = /* @__PURE__ */ Symbol.for("@kerfjs/ui/select-lifecycle");
-  if (Object.prototype.hasOwnProperty.call(prototype, installed)) return;
-  Object.defineProperty(prototype, installed, { value: true });
-  const original = prototype.handleOpenChange;
-  const originalDisabled = prototype.handleDisabledChange;
-  prototype.handleDisabledChange = function() {
-    const host = this;
-    const wasOpen = host.open;
-    originalDisabled.call(this);
-    if (host.dataset.component === "select" && wasOpen && !host.open) {
-      void host.handleOpenChange();
+var KuiSelectElement = class extends HTMLElement {
+  static formAssociated = true;
+  #internals;
+  #observer;
+  constructor() {
+    super();
+    this.#internals = typeof this.attachInternals === "function" ? this.attachInternals() : void 0;
+  }
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  get multiple() {
+    return this.hasAttribute("multiple");
+  }
+  get value() {
+    const values = chosenOptions(this).map(optionValue);
+    return this.multiple ? values : values[0] ?? "";
+  }
+  set value(next) {
+    setChosen(this, typeof next === "string" ? [next] : next);
+    this.syncFormValue();
+  }
+  /** The form the Select submits with, or null. */
+  get form() {
+    return this.#internals?.form ?? null;
+  }
+  connectedCallback() {
+    this.syncFormValue();
+    this.#observer ??= new MutationObserver(() => this.syncFormValue());
+    this.#observer.observe(this, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["aria-selected"]
+    });
+  }
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+  }
+  /** A form reset returns to the rendered (default) choice. */
+  formResetCallback() {
+    setChosen(
+      this,
+      optionsOf(this).filter((option) => option.hasAttribute("data-default-selected")).map(optionValue)
+    );
+    this.syncFormValue();
+  }
+  /** Publish the current choice as the form value. */
+  syncFormValue() {
+    const internals = this.#internals;
+    if (!internals) return;
+    const values = chosenOptions(this).map(optionValue);
+    if (!this.multiple) {
+      internals.setFormValue(values[0] ?? null);
+      return;
     }
+    const data = new FormData();
+    for (const value of values) data.append(this.name, value);
+    internals.setFormValue(data);
+  }
+};
+
+// src/components/forms/select/internal/select-controller.ts
+var ROOT = "kui-select.kui-select";
+var TRIGGER = ".kui-select__trigger";
+var POPUP = ".kui-select__popup";
+var SELECT_TYPEAHEAD_RESET = 1e3;
+var isOpen = (popup) => popup.matches(":popover-open");
+var isDisabled2 = (option) => option.getAttribute("aria-disabled") === "true";
+var triggerOf = (root) => root.querySelector(`:scope > ${TRIGGER}`);
+var popupOf = (root) => root.querySelector(`:scope > ${POPUP}`);
+var labelOf = (option) => option.querySelector(".kui-select__option-label").textContent.trim();
+function reveal(option, popup) {
+  if (popup.scrollHeight <= popup.clientHeight) return;
+  const box = option.getBoundingClientRect();
+  const top = popup.getBoundingClientRect().top + popup.clientTop;
+  const bottom = top + popup.clientHeight;
+  if (box.top < top) popup.scrollTop -= top - box.top;
+  else if (box.bottom > bottom) popup.scrollTop += box.bottom - bottom;
+}
+var installed = /* @__PURE__ */ new WeakSet();
+function installSelects(doc = document) {
+  if (installed.has(doc)) return;
+  installed.add(doc);
+  const win = doc.defaultView;
+  if (!win.customElements.get("kui-select"))
+    win.customElements.define("kui-select", KuiSelectElement);
+  const following = /* @__PURE__ */ new WeakMap();
+  const openRoots = /* @__PURE__ */ new Set();
+  const typeahead = /* @__PURE__ */ new WeakMap();
+  const reset = (popup) => {
+    following.get(popup)?.();
+    following.delete(popup);
+    const root = popup.parentElement;
+    openRoots.delete(root);
+    root.removeAttribute("open");
+    triggerOf(root).setAttribute("aria-expanded", "false");
+  };
+  const announce = (root) => {
+    root.syncFormValue?.();
+    root.dispatchEvent(
+      new InputEvent("input", { bubbles: true, composed: true })
+    );
+    root.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  };
+  const focusOption = (root, option) => {
+    const popup = popupOf(root);
+    (option ?? popup).focus({ preventScroll: true });
+    if (option) reveal(option, popup);
   };
-  const transitions = /* @__PURE__ */ new WeakMap();
-  const restorations = /* @__PURE__ */ new WeakMap();
-  prototype.handleOpenChange = async function() {
-    const host = this;
-    if (host.dataset.component !== "select") return original.call(this);
-    const restoring = restorations.get(host)?.open === host.open;
-    restorations.delete(host);
-    if (restoring) return;
-    const transition = new AbortController();
-    const opening = host.open && !host.disabled;
-    const current = () => !transition.signal.aborted && host.isConnected && (host.open && !host.disabled) === opening;
-    try {
-      if (!host.isConnected) return;
-      if (opening) {
-        host.setCurrentOption(host.selectedOptions[0] || host.getFirstOption());
+  const open = (root, focus) => {
+    const trigger = triggerOf(root);
+    const popup = popupOf(root);
+    if (trigger.disabled || isOpen(popup)) return;
+    popup.showPopover();
+    openRoots.add(root);
+    root.setAttribute("open", "");
+    trigger.setAttribute("aria-expanded", "true");
+    const fit = root.classList.contains("kui-select--fit-menu");
+    const place = async () => {
+      if (!popup.isConnected || !isOpen(popup)) {
+        reset(popup);
+        return;
       }
-      const event = opening ? new WaShowEvent() : new WaHideEvent();
-      host.dispatchEvent(event);
-      if (event.defaultPrevented) {
-        host.open = !opening;
-        const restoration = { open: host.open };
-        restorations.set(host, restoration);
-        void host.updateComplete.then(() => {
-          if (restorations.get(host) === restoration) restorations.delete(host);
-        });
+      if (fit) popup.style.width = `${trigger.getBoundingClientRect().width}px`;
+      await positionPopup(trigger, popup, { placement: "bottom" });
+    };
+    const stopFollowing = followAnchor(trigger, popup, () => void place());
+    let replacing = false;
+    const restore = new MutationObserver(() => {
+      if (trigger.disabled) {
+        close(root, false);
         return;
       }
-      if (!current()) return;
-      transitions.get(host)?.abort();
-      transitions.set(host, transition);
-      if (opening) {
-        host.addOpenListeners();
-        host.listbox.hidden = false;
-        host.popup.sync = host.classList.contains("kui-select--fit-menu") ? "width" : void 0;
-        host.popup.autoSize = "both";
-        host.popup.shiftPadding = 10;
-        host.popup.active = true;
-        window.requestAnimationFrame(() => {
-          if (current()) host.setCurrentOption(host.currentOption);
-        });
-      } else {
-        host.removeOpenListeners();
+      if (trigger.getAttribute("aria-expanded") !== "true")
+        trigger.setAttribute("aria-expanded", "true");
+      if (popup.style.top || replacing) return;
+      replacing = true;
+      void place().finally(() => {
+        replacing = false;
+      });
+    });
+    restore.observe(trigger, {
+      attributeFilter: ["aria-expanded", "disabled"]
+    });
+    restore.observe(popup, { attributeFilter: ["style"] });
+    following.set(popup, () => {
+      restore.disconnect();
+      stopFollowing();
+    });
+    const options = optionsOf(root);
+    const target = focus === "last" ? options[options.length - 1] : focus === "first" ? options[0] : chosenOptions(root)[0] ?? options[0];
+    focusOption(root, target);
+  };
+  const close = (root, restoreFocus) => {
+    const popup = popupOf(root);
+    const focusInside = popup.contains(doc.activeElement);
+    popup.hidePopover();
+    if (restoreFocus && focusInside)
+      triggerOf(root).focus({ preventScroll: true });
+  };
+  const choose = (root, option) => {
+    if (isDisabled2(option) || triggerOf(root).disabled) return;
+    const value = optionValue(option);
+    const multiple = root.hasAttribute("multiple");
+    const values = chosenOptions(root).map(optionValue);
+    const next = multiple ? values.includes(value) ? values.filter((candidate) => candidate !== value) : [...values, value] : [value];
+    if (setChosen(root, next)) announce(root);
+    if (!multiple) close(root, true);
+  };
+  const runAction = (root, action) => {
+    const next = action === "all" ? optionsOf(root).filter((option) => !isDisabled2(option)).map(optionValue) : [];
+    if (setChosen(root, next)) announce(root);
+  };
+  const runTypeahead = (root, key) => {
+    const state = typeahead.get(root) ?? { query: "", timer: void 0 };
+    typeahead.set(root, state);
+    win.clearTimeout(state.timer);
+    state.timer = win.setTimeout(() => {
+      state.query = "";
+    }, SELECT_TYPEAHEAD_RESET);
+    state.query = key === "Backspace" ? state.query.slice(0, -1) : state.query + key.toLowerCase();
+    const match = optionsOf(root).find(
+      (option) => labelOf(option).toLowerCase().startsWith(state.query)
+    );
+    if (!match) return false;
+    focusOption(root, match);
+    return true;
+  };
+  doc.addEventListener(
+    "pointerdown",
+    (event) => {
+      const path = event.composedPath();
+      for (const root of [...openRoots]) {
+        if (!root.isConnected || !isOpen(popupOf(root))) {
+          openRoots.delete(root);
+          continue;
+        }
+        if (!path.includes(root)) close(root, false);
+      }
+    },
+    true
+  );
+  doc.addEventListener(
+    "click",
+    (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const root = target.closest(ROOT);
+      if (!root) return;
+      const trigger = target.closest(TRIGGER);
+      if (trigger?.parentElement === root) {
+        const popup = popupOf(root);
+        if (popup && isOpen(popup)) close(root, true);
+        else open(root, "chosen");
+        return;
       }
-      await animateSelectPopup(
-        host.popup.popup,
-        opening ? "show" : "hide",
-        transition.signal
-      );
-      if (!transition.signal.aborted && !host.isConnected) {
-        host.removeOpenListeners();
-        host.listbox.hidden = true;
-        host.popup.active = false;
+      if (target.closest(".kui-select__label")?.parentElement === root) {
+        triggerOf(root).focus();
+        return;
       }
-      if (!current()) return;
-      if (opening) {
-        const option = host.currentOption;
-        if (option) {
-          const list = host.listbox;
-          const offset = Math.round(
-            option.getBoundingClientRect().top - list.getBoundingClientRect().top
-          );
-          if (offset < 0)
-            list.scrollTo({ top: list.scrollTop + offset, behavior: "auto" });
-          else if (offset + option.clientHeight > list.offsetHeight) {
-            list.scrollTo({
-              top: list.scrollTop + offset - list.offsetHeight + option.clientHeight,
-              behavior: "auto"
-            });
-          }
+      const action = target.closest("[data-select-action]");
+      if (action) {
+        runAction(root, action.getAttribute("data-select-action"));
+        return;
+      }
+      const option = target.closest(".kui-select__option");
+      if (option) choose(root, option);
+    },
+    true
+  );
+  doc.addEventListener(
+    "keydown",
+    (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const root = target.closest(ROOT);
+      if (!root || event.altKey || event.ctrlKey || event.metaKey) return;
+      const popup = popupOf(root);
+      const query = typeahead.get(root)?.query ?? "";
+      if (target.closest(TRIGGER)?.parentElement === root) {
+        if (isOpen(popup)) return;
+        switch (event.key) {
+          case "Enter":
+          case " ":
+          case "ArrowDown":
+            event.preventDefault();
+            open(root, "chosen");
+            return;
+          case "ArrowUp":
+            event.preventDefault();
+            open(root, "chosen");
+            return;
+          case "Home":
+          case "End":
+            event.preventDefault();
+            open(root, event.key === "Home" ? "first" : "last");
+            return;
+          default:
+            if (event.key.length === 1) {
+              event.preventDefault();
+              open(root, "chosen");
+              runTypeahead(root, event.key);
+            }
         }
-        host.dispatchEvent(new WaAfterShowEvent());
-      } else {
-        host.listbox.hidden = true;
-        host.popup.active = false;
-        void host.popup.updateComplete.then(() => {
-          if (!host.open) releaseClosedPopupOverflow(host.popup);
-        });
-        host.dispatchEvent(new WaAfterHideEvent());
+        return;
       }
-    } finally {
-      if (transitions.get(host) === transition) transitions.delete(host);
-    }
-  };
-}
-
-// src/components/forms/select/internal/install-select-multiple.ts
-function kerfMultiple(host) {
-  return host instanceof HTMLElement && host.dataset.component === "select" && host.multiple;
-}
-function listLocale(host) {
-  const lang = host.closest("[lang]")?.lang;
-  return lang || void 0;
-}
-function summarizeSelection(labels, locale) {
-  if (labels.length === 0) return "";
-  try {
-    return new Intl.ListFormat(locale, {
-      type: "unit",
-      style: "short"
-    }).format(labels);
-  } catch {
-    return labels.join(", ");
-  }
-}
-function installSelectMultiple(selectPrototype, optionPrototype) {
-  const installed = /* @__PURE__ */ Symbol.for("@kerfjs/ui/select-multiple");
-  if (Object.prototype.hasOwnProperty.call(selectPrototype, installed)) return;
-  Object.defineProperty(selectPrototype, installed, { value: true });
-  const select = selectPrototype;
-  const selectionChanged = select.selectionChanged;
-  select.selectionChanged = function() {
-    selectionChanged.call(this);
-    if (!kerfMultiple(this)) return;
-    const chosen = new Set(this.selectedOptions);
-    const summary = summarizeSelection(
-      this.getAllOptions().filter((option2) => chosen.has(option2)).map((option2) => option2.label),
-      listLocale(this)
-    );
-    const nameSummary = this.querySelector(
-      ':scope > [slot="label"] > .kui-select__name-summary'
-    );
-    if (this.dataset.selectedPresentation === "icon-only" && nameSummary) {
-      nameSummary.textContent = summary ? `: ${summary}` : "";
-      this.displayLabel = "";
-      return;
-    }
-    this.displayLabel = summary;
-  };
-  const tags = Object.getOwnPropertyDescriptor(selectPrototype, "tags");
-  if (tags?.get) {
-    const getTags = tags.get;
-    Object.defineProperty(selectPrototype, "tags", {
-      configurable: true,
-      get() {
-        return kerfMultiple(this) ? [] : getTags.call(this);
+      if (!popup.contains(target) || !isOpen(popup)) return;
+      const onAction = target.closest("[data-select-action]") !== null;
+      const options = optionsOf(root);
+      const current = target.closest(".kui-select__option");
+      const index = current ? options.indexOf(current) : -1;
+      const move = (next) => {
+        event.preventDefault();
+        event.stopPropagation();
+        focusOption(root, next);
+      };
+      switch (event.key) {
+        case "ArrowDown":
+          move(
+            options[index >= 0 && index < options.length - 1 ? index + 1 : 0]
+          );
+          return;
+        case "ArrowUp":
+          move(options[index > 0 ? index - 1 : options.length - 1]);
+          return;
+        case "Home":
+          move(options[0]);
+          return;
+        case "End":
+          move(options[options.length - 1]);
+          return;
+        case "Escape":
+          event.preventDefault();
+          event.stopPropagation();
+          close(root, true);
+          return;
+        case "Tab":
+          close(root, false);
+          triggerOf(root).focus({ preventScroll: true });
+          return;
+        case "Enter":
+          if (onAction || !current) return;
+          event.preventDefault();
+          choose(root, current);
+          return;
+        case " ":
+          if (onAction || !current) return;
+          event.preventDefault();
+          if (query) runTypeahead(root, " ");
+          else choose(root, current);
+          return;
+        default:
+          if ((event.key.length === 1 || event.key === "Backspace") && !onAction && runTypeahead(root, event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
       }
-    });
-  }
-  const option = optionPrototype;
-  const syncDefaultSelected = option.syncDefaultSelected;
-  option.syncDefaultSelected = function() {
-    const host = this.closest('[data-component="select"]');
-    if (!kerfMultiple(host) || !host.hasUpdated) {
-      syncDefaultSelected.call(this);
-      return;
-    }
-    host.value = host.getAllOptions().filter((candidate) => candidate.hasAttribute("selected")).map((candidate) => candidate.value);
-  };
+    },
+    true
+  );
+  doc.addEventListener(
+    "beforetoggle",
+    (event) => {
+      const popup = event.target;
+      if (popup.matches(POPUP) && event.newState === "closed")
+        reset(popup);
+    },
+    true
+  );
 }
 
 // src/components/forms/select/register/select-register.ts
-installSelectLifecycle(WaSelect.prototype);
-installSelectMultiple(WaSelect.prototype, WaOption.prototype);
-installSelectActions();
+installSelects();
+installPopupMenus();
 installHelpTags();
 var selectElementsRegistered = true;