tablewalk 0.0.1

package/dist/client/dropdown.js

@@ -0,0 +1,279 @@
+/**
+ * A themed listbox.
+ *
+ * A native `<select>` cannot be styled where it matters: the open menu is
+ * drawn by the operating system, in the system font, with the system
+ * highlight colour, ignoring the page entirely. On a dark theme that means a
+ * white menu with blue selection appearing out of a dark page.
+ *
+ * It also cannot show two lines per option, which is the actual requirement
+ * here — a connection is a name *and* a host, and the host is what tells two
+ * similarly named databases apart.
+ *
+ * Rebuilding a select means rebuilding what a select gives you for free, so
+ * this implements the listbox keyboard contract rather than approximating it:
+ * arrows move, Home and End jump, Enter and Space choose, Escape closes and
+ * returns focus, Tab closes, typing jumps to a matching option. Anything less
+ * is a control that looks better and works worse.
+ */
+import { el } from './core.js';
+
+/**
+ * @param {object} options
+ * @param {Array<{value: string, label: string, detail?: string, badge?: string, disabled?: boolean, tone?: string}>} options.items
+ * @param {string} options.value           currently selected value
+ * @param {(value: string) => void} options.onChange
+ * @param {string} [options.ariaLabel]
+ * @param {Array<{label: string, onSelect: () => void}>} [options.actions]  pinned at the bottom
+ */
+export function dropdown({ items, value, onChange, ariaLabel = 'Select', actions = [] }) {
+  /* Reassigned by `choose`, so the control tracks its own state rather than
+     depending on the caller to redraw it. */
+  let selected = items.find((i) => i.value === value);
+
+  const button = el('button', {
+    type: 'button',
+    class: 'dd-button',
+    'aria-haspopup': 'listbox',
+    'aria-expanded': 'false',
+    'aria-label': ariaLabel,
+    title: selected?.detail ?? selected?.label ?? '',
+  }, [
+    el('span', { class: 'dd-value', text: selected?.label ?? '—' }),
+    el('span', { class: 'dd-caret', 'aria-hidden': 'true', text: '▾' }),
+  ]);
+
+  const list = el('div', { class: 'dd-list', role: 'listbox', 'aria-label': ariaLabel, hidden: true });
+  const root = el('div', { class: 'dd' }, [button, list]);
+
+  /** Options plus actions, in DOM order, for keyboard traversal. */
+  let focusables = [];
+  let activeIndex = -1;
+
+  function build() {
+    list.replaceChildren();
+    focusables = [];
+
+    for (const item of items) {
+      const option = el('div', {
+        class: `dd-option${item.value === value ? ' selected' : ''}${item.disabled ? ' disabled' : ''}${item.tone ? ` tone-${item.tone}` : ''}`,
+        role: 'option',
+        'aria-selected': String(item.value === value),
+        'aria-disabled': item.disabled ? 'true' : undefined,
+        tabindex: -1,
+        onclick: () => !item.disabled && choose(item.value),
+      }, [
+        el('span', { class: 'dd-check', 'aria-hidden': 'true', text: item.value === value ? '✓' : '' }),
+        el('span', { class: 'dd-text' }, [
+          el('span', { class: 'dd-label', text: item.label }),
+          item.detail ? el('span', { class: 'dd-detail', text: item.detail }) : null,
+        ]),
+        item.badge ? el('span', { class: 'dd-badge', text: item.badge }) : null,
+      ]);
+      list.append(option);
+      focusables.push({ node: option, run: () => !item.disabled && choose(item.value), text: item.label });
+    }
+
+    if (actions.length) {
+      list.append(el('div', { class: 'dd-divider', role: 'presentation' }));
+      for (const action of actions) {
+        const node = el('div', {
+          class: 'dd-option dd-action',
+          role: 'option',
+          'aria-selected': 'false',
+          tabindex: -1,
+          onclick: () => {
+            close();
+            action.onSelect();
+          },
+        }, el('span', { class: 'dd-text' }, el('span', { class: 'dd-label', text: action.label })));
+        list.append(node);
+        focusables.push({ node, run: () => { close(); action.onSelect(); }, text: action.label });
+      }
+    }
+  }
+
+  function choose(next) {
+    close();
+    if (next === value) return;
+
+    /* The control shows what was chosen.
+    
+       It used to only announce the choice and leave the button reading the
+       old label — which was invisible for years because every caller rebuilt
+       its whole surface in response, so a stale button never survived to be
+       seen. The page builder does not rebuild: it writes the value onto a
+       draft and stays put, and there the dropdown simply refused to change.
+    
+       A control that does not reflect its own click is not a control. If the
+       caller disagrees — a connection that failed to open, say — it redraws
+       and says so, which is the same correction it was already making. */
+    value = next;
+    const chosen = items.find((i) => i.value === value);
+    button.querySelector('.dd-value').textContent = chosen?.label ?? '—';
+    button.title = chosen?.detail ?? chosen?.label ?? '';
+    onChange(next);
+  }
+
+  function setActive(index) {
+    if (!focusables.length) return;
+    // Wraps, because a list that stops at the end makes you reverse direction
+    // to reach the item one step past it.
+    activeIndex = (index + focusables.length) % focusables.length;
+    focusables.forEach(({ node }, i) => node.classList.toggle('active', i === activeIndex));
+    focusables[activeIndex].node.scrollIntoView({ block: 'nearest' });
+  }
+
+  function open() {
+    build();
+    list.hidden = false;
+    button.setAttribute('aria-expanded', 'true');
+    position();
+    const current = items.findIndex((i) => i.value === value);
+    setActive(current >= 0 ? current : 0);
+    // Listeners are added on open and removed on close, so a page with a
+    // dozen of these does not accumulate a dozen document handlers.
+    document.addEventListener('pointerdown', onOutside, true);
+    document.addEventListener('keydown', onKey, true);
+  }
+
+  function close() {
+    if (list.hidden) return;
+    list.hidden = true;
+    button.setAttribute('aria-expanded', 'false');
+    activeIndex = -1;
+    document.removeEventListener('pointerdown', onOutside, true);
+    document.removeEventListener('keydown', onKey, true);
+    window.removeEventListener('scroll', close, true);
+    window.removeEventListener('resize', close);
+  }
+
+  /**
+   * Place the open list in the viewport rather than in the flow.
+   *
+   * An absolutely positioned menu is clipped by any ancestor that scrolls,
+   * and the panels this control lives in all scroll — the composer's sidebar
+   * clips its overflow precisely so its sections can scroll independently, so
+   * a menu opening inside one was being cut in half.
+   *
+   * Fixed positioning escapes every clip, at the cost of not moving with the
+   * page, so the list closes on scroll rather than drifting away from the
+   * button that owns it.
+   */
+  function position() {
+    const box = button.getBoundingClientRect();
+    /* Sized *before* it is measured, which is the whole subtlety here.
+
+       The stylesheet gives the list `min-width: 100%` as a sensible default,
+       and a `position: fixed` element resolves percentages against the
+       viewport rather than against the button it belongs to — so an unsized
+       list measures as nearly the width of the screen. Measuring first and
+       correcting afterwards meant `width` was that screen-wide figure, the
+       clamp below decided the menu could not fit anywhere, and it was pinned
+       to the left edge of the window — yards from the control that opened it.
+       Visible on any dropdown in a narrow container; the driver picker inside
+       the connection dialog is where it was finally obvious. */
+    list.style.position = 'fixed';
+    list.style.minWidth = `${box.width}px`;
+    const width = Math.max(list.offsetWidth, box.width);
+    const height = list.offsetHeight;
+    // Flipped above the button when there is no room below, and pulled back
+    // from the right edge when the menu is wider than the space beside it.
+    const below = window.innerHeight - box.bottom;
+    list.style.top = below < height + 12 && box.top > height + 12
+      ? `${box.top - height - 4}px`
+      : `${box.bottom + 4}px`;
+    list.style.left = `${Math.max(8, Math.min(box.left, window.innerWidth - width - 12))}px`;
+    window.addEventListener('scroll', close, true);
+    window.addEventListener('resize', close);
+  }
+
+  function onOutside(e) {
+    if (!root.contains(e.target)) close();
+  }
+
+  let typed = '';
+  let typedAt = 0;
+
+  function onKey(e) {
+    if (list.hidden) return;
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        close();
+        button.focus();
+        return;
+      case 'ArrowDown':
+        e.preventDefault();
+        setActive(activeIndex + 1);
+        return;
+      case 'ArrowUp':
+        e.preventDefault();
+        setActive(activeIndex - 1);
+        return;
+      case 'Home':
+        e.preventDefault();
+        setActive(0);
+        return;
+      case 'End':
+        e.preventDefault();
+        setActive(focusables.length - 1);
+        return;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        focusables[activeIndex]?.run();
+        return;
+      case 'Tab':
+        // Tab means "leave", not "choose". Closing without selecting matches
+        // what a native select does.
+        close();
+        return;
+      default:
+        break;
+    }
+    if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      // Type-ahead. The one-second window is what makes "de" jump to "demo"
+      // rather than treating d and e as two separate jumps.
+      const now = Date.now();
+      typed = now - typedAt > 1000 ? e.key : typed + e.key;
+      typedAt = now;
+      const hit = focusables.findIndex((f) => f.text.toLowerCase().startsWith(typed.toLowerCase()));
+      if (hit >= 0) setActive(hit);
+    }
+  }
+
+  button.addEventListener('click', () => (list.hidden ? open() : close()));
+  button.addEventListener('keydown', (e) => {
+    if (list.hidden && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      open();
+    }
+  });
+
+  /**
+   * Set it from outside, without calling back.
+   *
+   * `connmanager` has always written `driver.value = parts.driver` when a
+   * pasted URL changes the driver, and until now that set an expando property
+   * on a `<div>` and did nothing at all. Pasting `postgres@127.0.0.1/db` —
+   * which is a *file path*, having no `://` — switched the form to SQLite and
+   * left the control still reading "postgres", so the dialog contradicted
+   * itself and the error came back as "unable to open database file".
+   *
+   * No `onChange`: the caller assigning this is the one making the decision,
+   * and calling it back would loop through whatever handler it set.
+   */
+  Object.defineProperty(root, 'value', {
+    get: () => value,
+    set: (next) => {
+      if (next === value) return;
+      value = next;
+      const chosen = items.find((i) => i.value === value);
+      button.querySelector('.dd-value').textContent = chosen?.label ?? '—';
+      button.title = chosen?.detail ?? chosen?.label ?? '';
+    },
+  });
+
+  return root;
+}