legacy.css 0.1.0

package/src/features/modal.ts

@@ -0,0 +1,265 @@
+import { eventTargetElement, isElement, isLegacyCollection } from "../internal";
+import type { LegacyCloseEvent, LegacyFocusableElement, LegacyRequiredApi, LegacyTarget } from "../internal";
+const openDialogs: HTMLDialogElement[] = [];
+const openerMap = new WeakMap<HTMLDialogElement, HTMLElement | null>();
+const fallbackDialogs = new WeakSet<HTMLDialogElement>();
+const wiredDialogs = new WeakSet<HTMLDialogElement>();
+const supportsNativeDialog = (dialog: HTMLDialogElement): boolean => typeof dialog.showModal === "function";
+let scrollLockCount = 0;
+let previousBodyOverflow = "";
+let previousHtmlOverflow = "";
+const focusableSelector = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+export function installModal(legacy: LegacyRequiredApi): void {
+  function resolveDialog(target: LegacyTarget<HTMLDialogElement>): HTMLDialogElement | null {
+    if (!target) {
+      return null;
+    }
+
+    if (isLegacyCollection(target)) {
+      return resolveDialog(target[0]);
+    }
+
+    if (typeof target === "string") {
+      return document.querySelector(target);
+    }
+
+    if (typeof HTMLDialogElement !== "undefined" && target instanceof HTMLDialogElement) {
+      return target;
+    }
+
+    if (isElement(target) && target.nodeName === "DIALOG") {
+      return target as HTMLDialogElement;
+    }
+
+    return null;
+  }
+
+  function getFocusableElement(dialog: HTMLDialogElement): LegacyFocusableElement | null {
+    return dialog.querySelector("[autofocus], [data-modal-autofocus], " + focusableSelector);
+  }
+
+  function focusDialog(dialog: HTMLDialogElement): void {
+    const focusTarget = getFocusableElement(dialog);
+
+    if (focusTarget) {
+      try {
+        focusTarget.focus({ preventScroll: true });
+      } catch (error) {
+        focusTarget.focus();
+      }
+      return;
+    }
+
+    /* v8 ignore next -- branch depends on caller-provided dialog markup */
+    if (!dialog.hasAttribute("tabindex")) {
+      dialog.setAttribute("tabindex", "-1");
+    }
+
+    try {
+      dialog.focus({ preventScroll: true });
+    } catch (error) {
+      dialog.focus();
+    }
+  }
+
+  function lockScroll(): void {
+    if (scrollLockCount > 0) {
+      scrollLockCount += 1;
+      return;
+    }
+
+    previousBodyOverflow = document.body.style.overflow;
+    previousHtmlOverflow = document.documentElement.style.overflow;
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
+    scrollLockCount = 1;
+  }
+
+  function unlockScroll(): void {
+    /* v8 ignore next -- defensive guard for private scroll-lock bookkeeping */
+    if (scrollLockCount === 0) {
+      return;
+    }
+
+    scrollLockCount -= 1;
+
+    if (scrollLockCount > 0) {
+      return;
+    }
+
+    document.body.style.overflow = previousBodyOverflow;
+    document.documentElement.style.overflow = previousHtmlOverflow;
+  }
+
+  function removeFromOpenDialogs(dialog: HTMLDialogElement): void {
+    const index = openDialogs.indexOf(dialog);
+
+    /* v8 ignore next -- defensive removal branch for repeated native close events */
+    if (index >= 0) {
+      openDialogs.splice(index, 1);
+    }
+  }
+
+  function restoreFocus(dialog: HTMLDialogElement): void {
+    const opener = openerMap.get(dialog);
+
+    /* v8 ignore next -- branch combines browser focus state and opener lifecycle */
+    if (opener && typeof opener.focus === "function" && document.contains(opener)) {
+      try {
+        opener.focus({ preventScroll: true });
+      } catch (error) {
+        opener.focus();
+      }
+    }
+
+    openerMap.delete(dialog);
+  }
+
+  function handleClose(event: Event | LegacyCloseEvent): void {
+    const dialog = event.currentTarget as HTMLDialogElement;
+
+    removeFromOpenDialogs(dialog);
+    dialog.removeAttribute("aria-modal");
+    restoreFocus(dialog);
+
+    if (fallbackDialogs.has(dialog)) {
+      fallbackDialogs.delete(dialog);
+      unlockScroll();
+
+      if (scrollLockCount === 0) {
+        document.removeEventListener("keydown", handleKeydown);
+      }
+    }
+  }
+
+  function closeDialogElement(dialog: HTMLDialogElement | null, returnValue = ""): HTMLDialogElement | null {
+    if (!dialog) {
+      return null;
+    }
+
+    if (!dialog.open) {
+      return dialog;
+    }
+
+    if (typeof dialog.close === "function") {
+      dialog.close(returnValue);
+    } else {
+      dialog.removeAttribute("open");
+      handleClose({ currentTarget: dialog });
+    }
+
+    return dialog;
+  }
+
+  function handleBackdropClick(event: MouseEvent): void {
+    const dialog = event.currentTarget as HTMLDialogElement;
+    const target = eventTargetElement(event);
+
+    if (target === dialog) {
+      closeDialogElement(dialog);
+      return;
+    }
+
+    /* v8 ignore next -- click target shape is browser-dispatched and covered at API level */
+    if (target && target.closest("[data-modal-close]")) {
+      closeDialogElement(dialog);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key !== "Escape") {
+      return;
+    }
+
+    const dialog = openDialogs[openDialogs.length - 1];
+
+    /* v8 ignore next -- fallback Escape listener is only installed while a fallback dialog is open */
+    if (!dialog || !fallbackDialogs.has(dialog)) {
+      return;
+    }
+
+    event.preventDefault();
+    closeDialogElement(dialog);
+  }
+
+  function wireDialog(dialog: HTMLDialogElement): void {
+    if (wiredDialogs.has(dialog)) {
+      return;
+    }
+
+    wiredDialogs.add(dialog);
+    dialog.addEventListener("close", handleClose);
+    dialog.addEventListener("click", handleBackdropClick);
+  }
+
+  function openDialogElement(dialog: HTMLDialogElement | null): HTMLDialogElement | null {
+    if (!dialog) {
+      return null;
+    }
+
+    wireDialog(dialog);
+
+    if (dialog.open) {
+      return dialog;
+    }
+
+    /* v8 ignore next -- activeElement is browser-owned state */
+    openerMap.set(dialog, document.activeElement instanceof HTMLElement ? document.activeElement : null);
+    dialog.setAttribute("aria-modal", "true");
+
+    try {
+      if (dialog.isConnected && supportsNativeDialog(dialog)) {
+        dialog.showModal();
+      } else {
+        throw new Error("dialog.showModal is unavailable");
+      }
+    } catch (error) {
+      dialog.setAttribute("open", "");
+      fallbackDialogs.add(dialog);
+      lockScroll();
+    }
+
+    /* v8 ignore next -- duplicate open state is guarded by the public open early-return */
+    if (!openDialogs.includes(dialog)) {
+      openDialogs.push(dialog);
+    }
+
+    focusDialog(dialog);
+
+    if (fallbackDialogs.has(dialog)) {
+      document.addEventListener("keydown", handleKeydown);
+    }
+
+    return dialog;
+  }
+
+  function toggleDialogElement(dialog: HTMLDialogElement | null): HTMLDialogElement | null {
+    if (!dialog) {
+      return null;
+    }
+
+    return dialog.open ? closeDialogElement(dialog) : openDialogElement(dialog);
+  }
+
+  legacy.modal = {
+    open(target) {
+      return openDialogElement(resolveDialog(target));
+    },
+    close(target, returnValue) {
+      return closeDialogElement(resolveDialog(target), returnValue);
+    },
+    toggle(target) {
+      return toggleDialogElement(resolveDialog(target));
+    },
+  };
+
+
+}

package/src/features/multiselect.ts

@@ -0,0 +1,390 @@
+import { currentTargetElement, eventTargetElement, isElement, isLegacyCollection, isSelectElement } from "../internal";
+import type { LegacyMultiselectState, LegacyRequiredApi, LegacyTarget } from "../internal";
+const wiredMultiselects = new WeakSet<HTMLSelectElement>();
+const multiselectMap = new WeakMap<HTMLSelectElement, LegacyMultiselectState>();
+const multiselectSelector = 'select[multiple][data-multiselect], select[multiple].multiselect-source';
+let multiselectId = 0;
+
+export function installMultiselect(legacy: LegacyRequiredApi): void {
+  function resolveMultiselect(target: LegacyTarget): HTMLSelectElement | null {
+    if (!target) {
+      return null;
+    }
+
+    if (isLegacyCollection(target)) {
+      return resolveMultiselect(target[0]);
+    }
+
+    if (typeof target === "string") {
+      return resolveMultiselect(document.querySelector(target));
+    }
+
+    if (!isElement(target)) {
+      return null;
+    }
+
+    if (isSelectElement(target) && target.matches("select[multiple]")) {
+      return target;
+    }
+
+    const rootElement = target.matches(".multiselect")
+      ? target
+      : target.closest(".multiselect");
+
+    return rootElement && isSelectElement(rootElement.previousElementSibling)
+      ? rootElement.previousElementSibling
+      : null;
+  }
+
+  function getMultiselectPlaceholder(select: HTMLSelectElement): string {
+    return select.getAttribute("data-placeholder") || "Select options";
+  }
+
+  function getMultiselectName(select: HTMLSelectElement): string {
+    const ariaLabel = select.getAttribute("aria-label");
+
+    if (ariaLabel) {
+      return ariaLabel;
+    }
+
+    if (!select.id) {
+      return "";
+    }
+
+    try {
+      const label = document.querySelector('label[for="' + CSS.escape(select.id) + '"]');
+
+      return label && label.textContent ? label.textContent.trim() : "";
+    } catch (error) {
+      return "";
+    }
+  }
+
+  function getMultiselectSelectedOptions(select: HTMLSelectElement): HTMLOptionElement[] {
+    return Array.from(select.options).filter((option) => option.selected);
+  }
+
+  function getMultiselectButtonText(select: HTMLSelectElement): string {
+    const selectedOptions = getMultiselectSelectedOptions(select);
+
+    if (selectedOptions.length === 0) {
+      return getMultiselectPlaceholder(select);
+    }
+
+    if (selectedOptions.length <= 2) {
+      return selectedOptions.map((option) => option.text).join(", ");
+    }
+
+    return selectedOptions.length + " selected";
+  }
+
+  function getMultiselectOptions(rootElement: Element): HTMLButtonElement[] {
+    return Array.from(rootElement.querySelectorAll<HTMLButtonElement>(".multiselect-option"));
+  }
+
+  function updateMultiselect(select: HTMLSelectElement): HTMLSelectElement {
+    const state = multiselectMap.get(select);
+
+    /* v8 ignore next -- update is wired after setup has created state */
+    if (!state) {
+      return select;
+    }
+
+    state.label.textContent = getMultiselectButtonText(select);
+    state.options.forEach((button, index) => {
+      const option = select.options[index];
+
+      button.setAttribute("aria-selected", option.selected ? "true" : "false");
+      button.setAttribute("aria-disabled", option.disabled ? "true" : "false");
+      button.disabled = option.disabled || select.disabled;
+    });
+
+    state.toggle.disabled = select.disabled;
+
+    return select;
+  }
+
+  function closeMultiselect(select: HTMLSelectElement | null): HTMLSelectElement | null {
+    if (!select) {
+      return null;
+    }
+
+    const state = multiselectMap.get(select);
+
+    if (!state) {
+      return select;
+    }
+
+    state.root.classList.remove("is-open");
+    state.toggle.setAttribute("aria-expanded", "false");
+
+    return select;
+  }
+
+  function openMultiselect(select: HTMLSelectElement | null): HTMLSelectElement | null {
+    if (!select) {
+      return null;
+    }
+
+    const state = multiselectMap.get(select);
+
+    if (!state || select.disabled) {
+      return select;
+    }
+
+    document.querySelectorAll(".multiselect.is-open").forEach((rootElement) => {
+      const currentSelect = rootElement.previousElementSibling;
+
+      /* v8 ignore next -- only sibling multiselect controls are closed */
+      if (isSelectElement(currentSelect) && currentSelect !== select) {
+        closeMultiselect(currentSelect);
+      }
+    });
+
+    state.root.classList.add("is-open");
+    state.toggle.setAttribute("aria-expanded", "true");
+
+    return select;
+  }
+
+  function toggleMultiselect(select: HTMLSelectElement | null): HTMLSelectElement | null {
+    if (!select) {
+      return null;
+    }
+
+    const state = multiselectMap.get(select);
+
+    if (!state) {
+      return select;
+    }
+
+    return state.root.classList.contains("is-open")
+      ? closeMultiselect(select)
+      : openMultiselect(select);
+  }
+
+  function toggleMultiselectOption(select: HTMLSelectElement, index: number): void {
+    const option = select.options[index];
+
+    if (!option || option.disabled || select.disabled) {
+      return;
+    }
+
+    option.selected = !option.selected;
+    updateMultiselect(select);
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  function focusMultiselectOption(rootElement: Element, index: number): void {
+    const options = getMultiselectOptions(rootElement).filter((option) => !option.disabled);
+    const option = options[index];
+
+    /* v8 ignore next -- keyboard movement normally resolves an enabled option */
+    if (option) {
+      option.focus();
+    }
+  }
+
+  function handleMultiselectClick(event: MouseEvent): void {
+    const select = resolveMultiselect(currentTargetElement(event));
+    const target = eventTargetElement(event);
+    /* v8 ignore next -- browser click events provide element targets */
+    const option = target ? target.closest(".multiselect-option") : null;
+
+    /* v8 ignore next -- multiselect click listeners are attached only to resolved controls */
+    if (!select) {
+      return;
+    }
+
+    if (option) {
+      toggleMultiselectOption(select, Number(option.getAttribute("data-index")));
+      return;
+    }
+
+    /* v8 ignore next -- delegated click no-op branch for menu background clicks */
+    if (target && target.closest(".multiselect-toggle")) {
+      toggleMultiselect(select);
+    }
+  }
+
+  function handleMultiselectKeydown(event: KeyboardEvent): void {
+    const select = resolveMultiselect(currentTargetElement(event));
+    /* v8 ignore next -- keydown listeners are attached after setup creates state */
+    const state = select ? multiselectMap.get(select) : null;
+    const target = eventTargetElement(event);
+
+    if (!state || !target || !select) {
+      return;
+    }
+
+    if (event.key === "Escape") {
+      closeMultiselect(select);
+      state.toggle.focus();
+      return;
+    }
+
+    if (event.target === state.toggle) {
+      if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        openMultiselect(select);
+        focusMultiselectOption(state.root, 0);
+      }
+
+      return;
+    }
+
+    const options = getMultiselectOptions(state.root).filter((option) => !option.disabled);
+    const currentIndex = options.indexOf(target as HTMLButtonElement);
+
+    if (currentIndex < 0) {
+      return;
+    }
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusMultiselectOption(state.root, (currentIndex + 1) % options.length);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusMultiselectOption(state.root, (currentIndex - 1 + options.length) % options.length);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusMultiselectOption(state.root, 0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusMultiselectOption(state.root, options.length - 1);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      toggleMultiselectOption(select, Number(target.getAttribute("data-index")));
+    }
+  }
+
+  function handleDocumentMultiselectClick(event: MouseEvent): void {
+    const target = eventTargetElement(event);
+
+    if (!target) {
+      return;
+    }
+
+    document.querySelectorAll(".multiselect.is-open").forEach((rootElement) => {
+      if (!rootElement.contains(target)) {
+        /* v8 ignore next 5 -- document close tolerates malformed multiselect markup */
+        closeMultiselect(
+          isSelectElement(rootElement.previousElementSibling)
+            ? rootElement.previousElementSibling
+            : null
+        );
+      }
+    });
+  }
+
+  function createMultiselectOption(option: HTMLOptionElement, index: number, rootId: string): HTMLButtonElement {
+    const button = document.createElement("button");
+
+    button.className = "multiselect-option";
+    button.type = "button";
+    button.id = rootId + "-option-" + index;
+    button.setAttribute("role", "option");
+    button.setAttribute("data-index", String(index));
+    button.textContent = option.text;
+
+    return button;
+  }
+
+  function setupMultiselect(target: LegacyTarget): HTMLSelectElement | null {
+    const select = resolveMultiselect(target);
+
+    if (!select || !select.matches("select[multiple]")) {
+      return null;
+    }
+
+    if (wiredMultiselects.has(select)) {
+      updateMultiselect(select);
+      return select;
+    }
+
+    const rootElement = document.createElement("div");
+    const toggle = document.createElement("button");
+    const label = document.createElement("span");
+    const menu = document.createElement("div");
+    /* v8 ignore next -- id/name/default id selection is covered by setup variants */
+    const rootId = select.id || select.name || "multiselect-" + ++multiselectId;
+    const menuId = rootId + "-menu";
+    const options = Array.from(select.options).map((option, index) =>
+      createMultiselectOption(option, index, rootId)
+    );
+
+    rootElement.className = "multiselect";
+    toggle.className = "multiselect-toggle";
+    toggle.id = rootId + "-toggle";
+    toggle.type = "button";
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.setAttribute("aria-haspopup", "listbox");
+    toggle.setAttribute("aria-controls", menuId);
+    label.className = "multiselect-label";
+    menu.className = "multiselect-menu";
+    menu.id = menuId;
+    menu.setAttribute("role", "listbox");
+    menu.setAttribute("aria-multiselectable", "true");
+
+    const name = getMultiselectName(select);
+
+    if (name) {
+      toggle.setAttribute("aria-label", name);
+    }
+
+    toggle.append(label);
+
+    if (options.length === 0) {
+      const empty = document.createElement("div");
+
+      empty.className = "multiselect-empty";
+      empty.textContent = "No options";
+      menu.append(empty);
+    } else {
+      options.forEach((option) => menu.append(option));
+    }
+
+    rootElement.append(toggle, menu);
+    select.classList.add("multiselect-source");
+    select.after(rootElement);
+
+    multiselectMap.set(select, { label, menu, options, root: rootElement, toggle });
+    wiredMultiselects.add(select);
+    rootElement.addEventListener("click", handleMultiselectClick);
+    rootElement.addEventListener("keydown", handleMultiselectKeydown);
+    select.addEventListener("change", () => updateMultiselect(select));
+
+    if (select.form) {
+      select.form.addEventListener("reset", () => {
+        setTimeout(() => updateMultiselect(select), 0);
+      });
+    }
+
+    updateMultiselect(select);
+
+    return select;
+  }
+
+  legacy.multiselect = {
+    setup(target) {
+      return setupMultiselect(target);
+    },
+    open(target) {
+      return openMultiselect(resolveMultiselect(target));
+    },
+    close(target) {
+      return closeMultiselect(resolveMultiselect(target));
+    },
+    toggle(target) {
+      return toggleMultiselect(resolveMultiselect(target));
+    },
+  };
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(multiselectSelector).forEach(setupMultiselect);
+  });
+
+  document.addEventListener("click", handleDocumentMultiselectClick);
+
+
+}