ds-tis 1.0.0-beta.10

package/js/combobox.js

@@ -0,0 +1,263 @@
+/* ============================================================
+   combobox.js — runtime público para Combobox (required)
+
+   O componente em css/components/combobox.css define anatomia e
+   estados visuais; este módulo implementa abertura/fechamento do
+   listbox, filtro, seleção e teclado. Use com a estrutura:
+
+     <div class="ds-field">
+       <label class="ds-field__label" for="id">…</label>
+       <div class="ds-combobox-anchor">
+         <div class="ds-combobox ds-combobox--md">…</div>
+         <ul class="ds-combobox__listbox" hidden>…</ul>
+       </div>
+     </div>
+
+   Ciclo de vida:
+     const instances = initComboboxes(root);
+     destroyComboboxes(root); // ou instance.destroy()
+   ============================================================ */
+
+const instances = new Set();
+let generatedId = 0;
+
+function closeAllExcept(current) {
+  for (const inst of instances) {
+    if (inst !== current) inst.close();
+  }
+}
+
+function getOptions(listbox) {
+  return Array.from(listbox.querySelectorAll('.ds-combobox__option'));
+}
+
+function ensureId(element, prefix) {
+  if (!element.id) {
+    generatedId += 1;
+    element.id = `${prefix}-${generatedId}`;
+  }
+  return element.id;
+}
+
+/**
+ * Sincroniza valor, estado filled e aria-selected das opções.
+ * @param {HTMLElement} root - .ds-combobox-anchor ou .ds-field legado
+ * @param {string} [value] - se omitido, lê do input
+ */
+export function syncComboboxState(root, value) {
+  const input = root.querySelector('.ds-combobox__input');
+  const combobox = root.querySelector('.ds-combobox');
+  const listbox = root.querySelector('.ds-combobox__listbox');
+  if (!input || !combobox || !listbox) return;
+
+  const current = value != null ? value : input.value.trim();
+  combobox.classList.toggle('ds-combobox--filled', current.length > 0);
+  for (const opt of getOptions(listbox)) {
+    opt.setAttribute('aria-selected', opt.textContent.trim() === current ? 'true' : 'false');
+  }
+}
+
+function createInstance(root, { onChange } = {}) {
+  const combobox = root.querySelector('.ds-combobox');
+  const input = root.querySelector('.ds-combobox__input');
+  const listbox = root.querySelector('.ds-combobox__listbox');
+  if (!combobox || !input || !listbox) return null;
+
+  const listboxId = ensureId(listbox, 'ds-combobox-listbox');
+  input.setAttribute('aria-controls', listboxId);
+  for (const opt of getOptions(listbox)) ensureId(opt, `${listboxId}-option`);
+
+  const cleanups = [];
+  const on = (target, type, handler, options) => {
+    target.addEventListener(type, handler, options);
+    cleanups.push(() => target.removeEventListener(type, handler, options));
+  };
+
+  const inst = {
+    root,
+    close() {
+      listbox.hidden = true;
+      input.setAttribute('aria-expanded', 'false');
+      input.removeAttribute('aria-activedescendant');
+      combobox.classList.remove('ds-combobox--open');
+      for (const opt of getOptions(listbox)) opt.removeAttribute('data-active');
+    },
+    open() {
+      closeAllExcept(inst);
+      listbox.hidden = false;
+      input.setAttribute('aria-expanded', 'true');
+      combobox.classList.add('ds-combobox--open');
+      filterOptions();
+    },
+    destroy() {
+      inst.close();
+      while (cleanups.length) cleanups.pop()();
+      delete root.dataset.dsComboboxInit;
+      instances.delete(inst);
+    },
+  };
+
+  function filterOptions() {
+    const query = input.value.trim().toLowerCase();
+    for (const opt of getOptions(listbox)) {
+      const label = opt.textContent.trim().toLowerCase();
+      opt.hidden = query.length > 0 && !label.includes(query);
+    }
+  }
+
+  function setActiveOption(option) {
+    for (const opt of getOptions(listbox)) opt.removeAttribute('data-active');
+    if (!option) {
+      input.removeAttribute('aria-activedescendant');
+      return;
+    }
+    option.setAttribute('data-active', 'true');
+    input.setAttribute('aria-activedescendant', ensureId(option, `${listboxId}-option`));
+  }
+
+  function emitChange(option = null) {
+    syncComboboxState(root);
+    if (typeof onChange === 'function') onChange(input, root);
+    input.dispatchEvent(new CustomEvent('ds-combobox-change', {
+      bubbles: true,
+      detail: {
+        input,
+        root,
+        option,
+        value: input.value,
+      },
+    }));
+  }
+
+  function selectOption(opt) {
+    input.value = opt.textContent.trim();
+    inst.close();
+    emitChange(opt);
+  }
+
+  function visibleOptions() {
+    return getOptions(listbox).filter((opt) => !opt.hidden);
+  }
+
+  on(input, 'focus', () => inst.open());
+
+  on(input, 'input', () => {
+    inst.open();
+    emitChange();
+  });
+
+  on(input, 'change', () => emitChange());
+
+  on(input, 'blur', () => {
+    requestAnimationFrame(() => {
+      if (!instances.has(inst)) return;
+      if (!root.contains(document.activeElement)) inst.close();
+    });
+  });
+
+  on(input, 'keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      inst.close();
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      inst.open();
+      const visible = visibleOptions();
+      const activeIndex = visible.findIndex((opt) => opt.getAttribute('data-active') === 'true');
+      const next = visible[activeIndex < visible.length - 1 ? activeIndex + 1 : 0];
+      setActiveOption(next);
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      inst.open();
+      const visible = visibleOptions();
+      const activeIndex = visible.findIndex((opt) => opt.getAttribute('data-active') === 'true');
+      const prev = visible[activeIndex > 0 ? activeIndex - 1 : visible.length - 1];
+      setActiveOption(prev);
+      return;
+    }
+    if (e.key === 'Enter') {
+      const visible = visibleOptions();
+      const active = visible.find((opt) => opt.getAttribute('data-active') === 'true');
+      if (active) {
+        e.preventDefault();
+        selectOption(active);
+      } else {
+        inst.close();
+        emitChange();
+      }
+    }
+  });
+
+  on(listbox, 'mousedown', (e) => {
+    const opt = e.target.closest('.ds-combobox__option');
+    if (opt && listbox.contains(opt)) {
+      e.preventDefault();
+      selectOption(opt);
+    }
+  });
+
+  on(document, 'click', (e) => {
+    if (!root.contains(e.target)) inst.close();
+  });
+
+  syncComboboxState(root);
+  return inst;
+}
+
+function isInside(root, node) {
+  return root === document || root === node || (typeof root.contains === 'function' && root.contains(node));
+}
+
+/**
+ * Inicializa comboboxes dentro de `root`.
+ * @param {ParentNode} [root]
+ * @param {{ onChange?: (input: HTMLInputElement, root: HTMLElement) => void }} [opts]
+ */
+export function initComboboxes(root = document, opts = {}) {
+  const created = [];
+
+  const anchors = [
+    ...(root instanceof Element && root.matches('.ds-combobox-anchor') ? [root] : []),
+    ...root.querySelectorAll('.ds-combobox-anchor'),
+  ];
+  anchors.forEach((anchor) => {
+    if (anchor.dataset.dsComboboxInit === 'true') return;
+    const inst = createInstance(anchor, opts);
+    if (inst) {
+      anchor.dataset.dsComboboxInit = 'true';
+      instances.add(inst);
+      created.push(inst);
+    }
+  });
+
+  const fields = [
+    ...(root instanceof Element && root.matches('.ds-field') ? [root] : []),
+    ...root.querySelectorAll('.ds-field'),
+  ];
+  fields.forEach((field) => {
+    if (field.querySelector('.ds-combobox-anchor')) return;
+    if (field.dataset.dsComboboxInit === 'true') return;
+    if (!field.querySelector(':scope > .ds-combobox__listbox')) return;
+    const inst = createInstance(field, opts);
+    if (inst) {
+      field.dataset.dsComboboxInit = 'true';
+      instances.add(inst);
+      created.push(inst);
+    }
+  });
+
+  return created;
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export function destroyComboboxes(root = document) {
+  for (const inst of [...instances]) {
+    if (isInside(root, inst.root)) inst.destroy();
+  }
+}

package/js/menu.js

@@ -0,0 +1,301 @@
+/* ============================================================
+   menu.js — runtime público para Action Menu (required)
+
+   Anatomia e estados visuais: css/components/menu.css
+   Uso:
+     <div class="ds-action-menu">
+       <button class="ds-button ds-action-menu__trigger"
+               type="button"
+               aria-haspopup="menu"
+               aria-expanded="false"
+               aria-controls="menu-id">...</button>
+       <div class="ds-menu ds-action-menu__content" id="menu-id" role="menu">...</div>
+     </div>
+
+   Ciclo de vida:
+     const instances = initActionMenus(root);
+     destroyActionMenus(root); // ou instance.destroy()
+   ============================================================ */
+
+const instances = new Set();
+const MENU_ITEM_SELECTOR = [
+  '.ds-menu__item[role="menuitem"]',
+  '.ds-menu__item[role="menuitemradio"]',
+  '.ds-menu__item[role="menuitemcheckbox"]',
+].join(', ');
+
+function getMenuItems(menu) {
+  return [...menu.querySelectorAll(MENU_ITEM_SELECTOR)].filter((item) => !item.disabled);
+}
+
+function isDisabled(item) {
+  return item.disabled || item.getAttribute('aria-disabled') === 'true';
+}
+
+function focusItem(items, index) {
+  const item = items[index];
+  if (!item) return;
+  items.forEach((node) => node.removeAttribute('data-active'));
+  item.setAttribute('data-active', 'true');
+  item.focus();
+}
+
+function emit(root, name, detail) {
+  root.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+}
+
+function createInstance(root) {
+  const trigger = root.querySelector('.ds-action-menu__trigger');
+  const menu = root.querySelector('.ds-action-menu__content[role="menu"], .ds-menu[role="menu"]');
+  if (!trigger || !menu) return null;
+
+  const cleanups = [];
+  let typeaheadBuffer = '';
+  let typeaheadTimer = null;
+  let focusFrame = null;
+  const on = (target, type, handler, options) => {
+    target.addEventListener(type, handler, options);
+    cleanups.push(() => target.removeEventListener(type, handler, options));
+  };
+
+  const inst = {
+    root,
+    trigger,
+    menu,
+    open() {
+      if (root.dataset.open === 'true') return;
+      root.dataset.open = 'true';
+      trigger.setAttribute('aria-expanded', 'true');
+      const items = getMenuItems(menu);
+      const firstItem = items[0] || null;
+      if (firstItem) {
+        focusItem(items, 0);
+        focusFirstWhenVisible(firstItem);
+      }
+      emit(root, 'ds-menu-open', { root, trigger, menu, item: firstItem });
+    },
+    close() {
+      if (root.dataset.open !== 'true') return;
+      delete root.dataset.open;
+      trigger.setAttribute('aria-expanded', 'false');
+      cancelPendingFocus();
+      clearTypeahead();
+      getMenuItems(menu).forEach((item) => item.removeAttribute('data-active'));
+      trigger.focus();
+      emit(root, 'ds-menu-close', { root, trigger, menu });
+    },
+    toggle() {
+      if (root.dataset.open === 'true') inst.close();
+      else inst.open();
+    },
+    destroy() {
+      cancelPendingFocus();
+      clearTypeahead();
+      if (root.dataset.open === 'true') {
+        delete root.dataset.open;
+        trigger.setAttribute('aria-expanded', 'false');
+        getMenuItems(menu).forEach((item) => item.removeAttribute('data-active'));
+      }
+      while (cleanups.length) cleanups.pop()();
+      delete root.dataset.dsActionMenuInit;
+      instances.delete(inst);
+    },
+  };
+
+  function cancelPendingFocus() {
+    if (focusFrame !== null) cancelAnimationFrame(focusFrame);
+    focusFrame = null;
+  }
+
+  function focusFirstWhenVisible(firstItem) {
+    cancelPendingFocus();
+    let attempts = 0;
+    const attempt = () => {
+      focusFrame = null;
+      if (root.dataset.open !== 'true' || !instances.has(inst) || !firstItem.isConnected) return;
+      if (getComputedStyle(menu).visibility === 'visible') {
+        focusItem(getMenuItems(menu), 0);
+        return;
+      }
+      attempts += 1;
+      if (attempts >= 60) return;
+      focusFrame = requestAnimationFrame(attempt);
+    };
+    focusFrame = requestAnimationFrame(attempt);
+  }
+
+  function clearTypeahead() {
+    if (typeaheadTimer !== null) clearTimeout(typeaheadTimer);
+    typeaheadTimer = null;
+    typeaheadBuffer = '';
+  }
+
+  function scheduleTypeaheadReset() {
+    if (typeaheadTimer !== null) clearTimeout(typeaheadTimer);
+    typeaheadTimer = setTimeout(() => {
+      typeaheadTimer = null;
+      typeaheadBuffer = '';
+    }, 500);
+  }
+
+  function activateItem(item) {
+    if (isDisabled(item)) return false;
+    const role = item.getAttribute('role');
+    if (role === 'menuitemradio') {
+      for (const radio of menu.querySelectorAll('.ds-menu__item[role="menuitemradio"]')) {
+        radio.setAttribute('aria-checked', radio === item ? 'true' : 'false');
+      }
+    } else if (role === 'menuitemcheckbox') {
+      item.setAttribute('aria-checked', item.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
+    }
+    inst.close();
+    return true;
+  }
+
+  on(trigger, 'click', (e) => {
+    e.preventDefault();
+    inst.toggle();
+  });
+
+  on(trigger, 'keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      inst.open();
+    }
+  });
+
+  on(menu, 'keydown', (e) => {
+    const items = getMenuItems(menu);
+    const activeIndex = items.findIndex((item) => item.getAttribute('data-active') === 'true');
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      inst.close();
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
+      focusItem(items, next);
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
+      focusItem(items, prev);
+      return;
+    }
+    if (e.key === 'Home') {
+      e.preventDefault();
+      focusItem(items, 0);
+      return;
+    }
+    if (e.key === 'End') {
+      e.preventDefault();
+      focusItem(items, items.length - 1);
+      return;
+    }
+    if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      typeaheadBuffer += e.key.toLowerCase();
+      let query = typeaheadBuffer;
+      let match = items.find((item, index) => {
+        if (index <= activeIndex) return false;
+        return item.textContent.trim().toLowerCase().startsWith(query);
+      }) || items.find((item) => item.textContent.trim().toLowerCase().startsWith(query));
+      if (!match && typeaheadBuffer.length > 1) {
+        typeaheadBuffer = e.key.toLowerCase();
+        query = typeaheadBuffer;
+        match = items.find((item) => item.textContent.trim().toLowerCase().startsWith(query));
+      }
+      if (match) {
+        e.preventDefault();
+        focusItem(items, items.indexOf(match));
+      }
+      scheduleTypeaheadReset();
+    }
+  });
+
+  on(menu, 'click', (e) => {
+    const item = e.target.closest(MENU_ITEM_SELECTOR);
+    if (!item || !menu.contains(item) || !isDisabled(item)) return;
+    e.preventDefault();
+    e.stopPropagation();
+  }, true);
+
+  on(menu, 'click', (e) => {
+    const item = e.target.closest(MENU_ITEM_SELECTOR);
+    if (item && menu.contains(item)) activateItem(item);
+  });
+
+  on(document, 'click', (e) => {
+    if (!root.contains(e.target)) inst.close();
+  });
+
+  on(document, 'keydown', (e) => {
+    if (root.dataset.open !== 'true') return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      inst.close();
+    }
+  });
+
+  if (root.dataset.open !== 'true') {
+    trigger.setAttribute('aria-expanded', 'false');
+  }
+
+  return inst;
+}
+
+function isInside(root, node) {
+  return root === document || root === node || (typeof root.contains === 'function' && root.contains(node));
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export function initActionMenus(root = document) {
+  const created = [];
+
+  const actionMenus = [
+    ...(root instanceof Element && root.matches('.ds-action-menu') ? [root] : []),
+    ...root.querySelectorAll('.ds-action-menu'),
+  ];
+  actionMenus.forEach((actionMenu) => {
+    if (actionMenu.dataset.dsActionMenuInit === 'true') return;
+    const inst = createInstance(actionMenu);
+    if (inst) {
+      actionMenu.dataset.dsActionMenuInit = 'true';
+      instances.add(inst);
+      created.push(inst);
+    }
+  });
+
+  return created;
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export function destroyActionMenus(root = document) {
+  for (const inst of [...instances]) {
+    if (isInside(root, inst.root)) inst.destroy();
+  }
+}
+
+/**
+ * @param {HTMLElement} root
+ */
+export function openActionMenu(root) {
+  const inst = [...instances].find((item) => item.root === root);
+  inst?.open();
+  return inst;
+}
+
+/**
+ * @param {HTMLElement} root
+ */
+export function closeActionMenu(root) {
+  const inst = [...instances].find((item) => item.root === root);
+  inst?.close();
+  return inst;
+}