@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/select/index.ts

@@ -1,181 +1,534 @@
-import { component, html, type Renderable, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { effect, onCleanup, reactive, signal, write } from '@esportsplus/reactivity';
+import { clamp } from '~/shared/clamp';
 import form from '~/components/form';
+import overlay from '~/components/overlay';
+import place, { ROWS } from './placement';
+import check from '@esportsplus/ui/svg/check.svg';
+import chevronDown from '@esportsplus/ui/svg/chevron-down.svg';
+import chevronUp from '@esportsplus/ui/svg/chevron-up.svg';
+import chevrons from '@esportsplus/ui/svg/chevrons-up-down.svg';
 import './scss/index.scss';
 
 
-const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
+type State = {
+    active: boolean;
+    error: string;
+    render?: boolean;
+    selected?: number | string;
+};
+
+type A = Attributes & {
+    onanimationcancel?: never;
+    onanimationend?: never;
+    onanimationstart?: never;
+    onclick?: never;
+    ondocumentclick?: never;
+    ontransitioncancel?: never;
+    ontransitionend?: never;
+    ontransitionrun?: never;
+    [SELECT_ARROW]?: Attributes;
+    [SELECT_OPTION]?: Attributes;
+    [SELECT_TOOLTIP_CONTENT]?: Attributes & { direction?: string };
+    [SELECT_TRIGGER]?: Attributes;
+    label?: string;
+    name?: string;
+    options: Option[] | Record<number | string, Renderable<unknown> | { content: Renderable<unknown>, selected: Renderable<unknown> }>;
+} & ({ selected?: number | string; state?: never } | { selected?: never; state: State });
+
+
+type Option = {
+    detail?: string;
+    label: Renderable<unknown>;
+    selected?: Renderable<unknown>;
+    text?: string;
+    value: string;
+};
+
+type Parts = {
+    // The first option and its label; every option shares their size and inset.
+    label?: HTMLElement;
+    option?: HTMLElement;
+    panel?: HTMLElement;
+    scroller?: HTMLElement;
+    trigger?: HTMLElement;
+    value?: HTMLElement;
+};
+
+
+// Scroll-button speed while hovered, in px per second.
+const SCROLL_SPEED = 280;
 
 const SELECT_OPTION = Symbol.for('@esportsplus/ui/select.option');
 
+const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
+
 const SELECT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/select.tooltip-content');
 
+const SELECT_TRIGGER = Symbol.for('@esportsplus/ui/select.trigger');
 
-type A = {
-    [SELECT_ARROW]?: Attributes;
-    [SELECT_OPTION]?: Attributes;
-    [SELECT_TOOLTIP_CONTENT]?: Attributes & { direction?: string };
-    options: Record<number | string, Renderable<unknown> | { content: Renderable<unknown>, selected: Renderable<unknown> }>;
-} & (
+// Letters typed within this window extend the search instead of restarting it.
+const TYPEAHEAD_RESET = 500;
+
+
+let uid = 0;
+
+
+function edges(menu: { down: boolean; up: boolean }, scroller: HTMLElement) {
+    menu.down = scroller.scrollTop < scroller.scrollHeight - scroller.clientHeight - 1;
+    menu.up = scroller.scrollTop > 1;
+}
+
+function template(
+    this: { attributes?: Partial<A> } | void,
     {
-        selected?: number | string;
-        state?: never;
-    } | {
-        selected?: never;
-        state: {
-            active: boolean;
-            error: string;
-            render: boolean;
-            selected?: number | string;
+        label,
+        name,
+        options: choices,
+        selected: initial,
+        state = reactive<State>({ active: false, error: '', render: false, selected: initial ?? (Array.isArray(choices) ? choices[0]?.value : Object.keys(choices)[0]) }),
+        ...attributes
+    }: A,
+    content: (state: State) => Renderable<unknown>
+) {
+    let defaults = this?.attributes,
+        ariaLabel = attributes['aria-label'] ?? defaults?.['aria-label'],
+        options: Option[] = Array.isArray(choices) ? choices : Object.entries(choices).map(([value, choice]) => {
+            if (choice !== null && typeof choice === 'object' && 'content' in choice) {
+                return { value, label: choice.content, selected: choice.selected, text: typeof choice.content === 'string' ? choice.content : value };
+            }
+
+            return { value, label: choice, text: typeof choice === 'string' ? choice : value };
+        }),
+        { direction: _defaultDirection, ...defaultPanel } = defaults?.[SELECT_TOOLTIP_CONTENT] ?? {},
+        { direction: _direction, ...panelAttributes } = attributes[SELECT_TOOLTIP_CONTENT] ?? {},
+        // Private mirrors the options select on, so a move or a pick restyles two options rather than every one.
+        chosen = signal(''),
+        frame = 0,
+        highlighted = signal(0),
+        id = `select-menu-${++uid}`,
+        last = { x: -1, y: -1 },
+        menu = reactive({ down: false, highlight: 0, hover: false, placement: '', up: false }),
+        parts: Parts = {},
+        query = '',
+        texts: string[] | undefined,
+        timer: ReturnType<typeof setTimeout> | undefined;
+
+    function choose(index: number) {
+        if (!options[index]) {
+            return;
         }
+
+        state.selected = options[index].value;
+        close();
     }
-) & Attributes;
-
-
-type D = Attributes & Pick<A, typeof SELECT_ARROW | typeof SELECT_OPTION | typeof SELECT_TOOLTIP_CONTENT>;
-
-
-export default component(
-    function(
-        this: { attributes?: D },
-        {
-            options,
-            selected,
-            state = reactive({
-                active: false,
-                error: '',
-                render: false,
-                selected: selected || Object.keys(options)[0]
-            }),
-            ...attributes
-        }: A,
-        content: (state: { active: boolean, selected?: string | number }) => Renderable<unknown>
-    ) {
-        let { direction: defaultDirection, ...defaultTooltipContent } = this?.attributes?.[SELECT_TOOLTIP_CONTENT] ?? {},
-            { direction = defaultDirection || 's', ...tooltipContent } = attributes[SELECT_TOOLTIP_CONTENT] ?? {};
-
-        return html`
-            <div
-                class='select tooltip ${() => state.active && '--active'}'
-                ${this?.attributes}
-                ${attributes}
+
+    function close() {
+        cancelAnimationFrame(frame);
+        state.active = false;
+    }
+
+    // Keyboard moves keep the highlight in view; pointer moves never scroll.
+    function highlight(index: number) {
+        if (!options.length) {
+            return;
+        }
+
+        let next = clamp(index, 0, options.length - 1),
+            scroller = parts.scroller;
+
+        menu.highlight = next;
+
+        if (!scroller) {
+            return;
+        }
+
+        let item = parts.option?.offsetHeight ?? 0,
+            pad = parseFloat(getComputedStyle(scroller).paddingTop) || 0,
+            top = pad + next * item;
+
+        if (top < scroller.scrollTop + pad) {
+            scroller.scrollTop = top - pad;
+        }
+        else if (top + item > scroller.scrollTop + scroller.clientHeight - pad) {
+            scroller.scrollTop = top + item - scroller.clientHeight + pad;
+        }
+    }
+
+    function onkeydown(e: KeyboardEvent) {
+        let typing = query !== '';
+
+        if (!state.active) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key) && !(e.key === ' ' && typing)) {
+                e.preventDefault();
+                open();
+                return;
+            }
+        }
+        else {
+            let active = menu.highlight,
+                page = ROWS - 1,
+                moves: Record<string, number> = {
+                    ArrowDown: active + 1,
+                    ArrowUp: active - 1,
+                    End: options.length - 1,
+                    Home: 0,
+                    PageDown: active + page,
+                    PageUp: active - page
+                };
+
+            if (e.key === 'ArrowUp' && e.altKey) {
+                e.preventDefault();
+                choose(active);
+                return;
+            }
+
+            if (e.key in moves) {
+                e.preventDefault();
+                highlight(moves[e.key]);
+                return;
+            }
+
+            if (e.key === 'Enter' || (e.key === ' ' && !typing)) {
+                e.preventDefault();
+                choose(active);
+                return;
+            }
+
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                close();
+                return;
+            }
+
+            // Tab commits the highlighted option and moves on, per the APG pattern.
+            if (e.key === 'Tab') {
+                choose(active);
+                return;
+            }
+        }
+
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            search(e.key);
+        }
+    }
+
+    function open() {
+        let { label, option, panel, scroller, trigger, value } = parts,
+            index = selected();
+
+        menu.highlight = index;
+        state.render = true;
+        state.active = true;
+
+        if (!label || !option || !panel || !scroller || !trigger || !value) {
+            return;
+        }
+
+        let placed = place({ label, option, panel, scroller, trigger, value }, options.length, index);
+
+        menu.placement = placed.style;
+        scroller.scrollTop = placed.scroll;
+        edges(menu, scroller);
+    }
+
+    function scroll(direction: 1 | -1, e: PointerEvent) {
+        if (e.pointerType === 'touch') {
+            return;
+        }
+
+        let previous = performance.now();
+
+        cancelAnimationFrame(frame);
+
+        function tick(now: number) {
+            if (!parts.scroller) {
+                return;
+            }
+
+            parts.scroller.scrollTop += (direction * SCROLL_SPEED * (now - previous)) / 1000;
+            previous = now;
+            frame = requestAnimationFrame(tick);
+        }
+
+        frame = requestAnimationFrame(tick);
+    }
+
+    function search(character: string) {
+        clearTimeout(timer);
+        query += character.toLowerCase();
+        timer = setTimeout(() => {
+            query = '';
+        }, TYPEAHEAD_RESET);
+
+        // Pressing the same letter again cycles through its matches.
+        let repeated = [...query].every((c) => c === query[0]),
+            from = state.active ? menu.highlight : selected(),
+            needle = repeated ? query[0] : query,
+            start = repeated ? from + 1 : from;
+
+        if (!texts) {
+            texts = [];
+
+            for (let i = 0, n = options.length; i < n; i++) {
+                let option = options[i];
+
+                texts.push((option.text ?? (typeof option.label === 'string' ? option.label : '')).toLowerCase());
+            }
+        }
+
+        for (let i = 0, n = options.length; i < n; i++) {
+            let index = (start + i) % n;
+
+            if (!texts[index].startsWith(needle)) {
+                continue;
+            }
+
+            // Closed, it changes the value directly, like a native select.
+            if (state.active) {
+                highlight(index);
+            }
+            else {
+                state.selected = options[index].value;
+            }
+
+            return;
+        }
+    }
+
+    function selected() {
+        let value = String(state.selected ?? '');
+
+        for (let i = 0, n = options.length; i < n; i++) {
+            if (options[i].value === value) {
+                return i;
+            }
+        }
+
+        return 0;
+    }
+
+    function stop() {
+        cancelAnimationFrame(frame);
+    }
+
+    function wheel(e: WheelEvent) {
+        let scroller = parts.scroller;
+
+        if (!scroller || e.ctrlKey || e.defaultPrevented || !e.deltaY) {
+            return;
+        }
+
+        // Wheel input takes over from the arrow's hover scrolling.
+        stop();
+
+        if (scroller.contains(e.target as Node)) {
+            return;
+        }
+
+        // The arrows overlay the list as siblings, so their wheel events cannot
+        // reach its native scroll container. Forward only those surface events.
+        let unit = e.deltaMode === WheelEvent.DOM_DELTA_PAGE
+            ? scroller.clientHeight
+            : e.deltaMode === WheelEvent.DOM_DELTA_LINE
+                ? parseFloat(getComputedStyle(scroller).lineHeight) || parts.option?.offsetHeight || 16
+                : 1;
+
+        e.preventDefault();
+        scroller.scrollTop += e.deltaY * unit;
+    }
+
+    onCleanup(() => {
+        cancelAnimationFrame(frame);
+        clearTimeout(timer);
+    });
+
+    effect(() => state.active, (active) => {
+        if (!active) {
+            stop();
+        }
+    });
+
+    effect(() => menu.highlight, (index) => {
+        write(highlighted, index);
+    });
+
+    effect(() => String(state.selected ?? ''), (value) => {
+        write(chosen, value);
+    });
+
+    return html`
+        <div
+            class='select select-menu'
+            ${defaults}
+            ${attributes}
+            ${{ ...overlay.popup({ state, target: () => parts.panel }) }}
+        >
+            <span class='select-menu-label' id='${id}-label'>${label ?? defaults?.label ?? String(ariaLabel ?? 'Select option')}</span>
+            <button
+                aria-controls='${id}-list'
+                aria-haspopup='listbox'
+                aria-labelledby='${id}-label ${id}-value'
+                class='select-menu-trigger'
+                role='combobox'
+                type='button'
+                disabled='${attributes.disabled === true || defaults?.disabled === true}'
+                aria-label='${ariaLabel === undefined ? undefined : String(ariaLabel)}'
+                ${this?.attributes?.[SELECT_TRIGGER]}
+                ${attributes[SELECT_TRIGGER]}
                 ${{
+                    'aria-activedescendant': () => state.active && `${id}-option-${menu.highlight}`,
+                    'aria-expanded': () => state.active ? 'true' : 'false',
+                    // A press inside the panel keeps focus here, so losing it is leaving the menu.
+                    onblur: close,
                     onclick: () => {
-                        if (state.render) {
-                            state.active = !state.active;
+                        if (state.active) {
+                            close();
                         }
-
-                        state.render = true;
+                        else {
+                            open();
+                        }
+                    },
+                    onconnect: (element: HTMLElement) => {
+                        parts.trigger = element;
                     },
-                    ondocumentclick: function (this, event: MouseEvent) {
-                        if (!state.active || !this?.isConnected) {
-                            return;
+                    onkeydown
+                }}
+            >
+                <span
+                    class='select-menu-value'
+                    id='${id}-value'
+                    ${{
+                        onconnect: (element: HTMLElement) => {
+                            parts.value = element;
                         }
+                    }}
+                >
+                    ${content ? (() => content(state)) : (() => {
+                        let option = options[selected()];
 
-                        if (!this.contains(event.target as Node | null)) {
-                            state.active = false;
+                        return option?.selected ?? option?.label ?? '';
+                    })}
+                </span>
+                <svg aria-hidden='true' class='select-menu-chevron' ${this?.attributes?.[SELECT_ARROW]} ${attributes[SELECT_ARROW]}><use href='#${chevrons}' /></svg>
+            </button>
+            <input
+                class='select-menu-tag'
+                type='hidden'
+                ${{
+                    name: name ?? defaults?.name,
+                    onconnect: form.input.onconnect(state),
+                    value: () => state.selected
+                }}
+            />
+            <div
+                class='select-menu-panel'
+                ${defaultPanel}
+                ${panelAttributes}
+                ${{
+                    class: () => state.active && '--active',
+                    inert: () => !state.active,
+                    onconnect: (element: HTMLElement) => {
+                        parts.panel = element;
+                    },
+                    onactivewheel: wheel,
+                    // The trigger keeps focus through a press in here, so the keys still drive the menu.
+                    onmousedown: (e: MouseEvent) => {
+                        e.preventDefault();
+                    },
+                    onpointerenter: (e: PointerEvent) => {
+                        if (e.pointerType !== 'touch') {
+                            menu.hover = true;
                         }
-                    }
+                    },
+                    onpointerleave: () => {
+                        menu.hover = false;
+                        stop();
+                    },
+                    style: () => menu.placement
                 }}
             >
-                ${content ? (() => content(state)) : (() => {
-                    let selected = options[state.selected!];
-
-                    if (!selected) {
-                        return '-';
-                    }
-
-                    if (selected !== null && typeof selected === 'object' && 'content' in selected) {
-                        return selected.content;
-                    }
-
-                    return selected;
-                })}
-
-                <div class='select-arrow' ${this?.attributes?.[SELECT_ARROW]} ${attributes[SELECT_ARROW]}></div>
-
-                <input class='select-tag'
+                <div
+                    class='select-menu-scroller'
                     ${{
-                        name: attributes.name,
-                        onclick: () => { /* Prevent double click events from firing */ },
-                        onrender: form.input.onrender(state),
-                        value: () => state.selected
+                        onconnect: (element: HTMLElement) => {
+                            parts.label = element.querySelector<HTMLElement>('.select-menu-option-label') ?? undefined;
+                            parts.option = element.querySelector<HTMLElement>('.select-menu-option') ?? undefined;
+                            parts.scroller = element;
+                        },
+                        onscroll: function(this: HTMLElement) {
+                            edges(menu, this);
+                        },
+                        class: [
+                            () => menu.up && 'select-menu-scroller--up',
+                            () => menu.down && 'select-menu-scroller--down'
+                        ]
                     }}
-                />
-
-                ${() => {
-                    if (!state.render) {
-                        return;
-                    }
-
-                    let keys = Object.keys(options),
-                        selected = reactive(
-                            Object.fromEntries( keys.map(key => [key, false]) )
-                        );
-
-                    return html`
-                        <div
-                            class='tooltip-content tooltip-content--${direction} --flex-column --scrollbar'
-                            ${defaultTooltipContent}
-                            ${tooltipContent}
-                            ${{
-                                inert: () => !state.active,
-                                onclick: (e: Event) => {
-                                    let element = e.target as HTMLElement,
-                                        key = element.dataset?.key;
-
-                                    if (key === undefined) {
-                                        let parent;
-
-                                        while (parent = element.parentElement) {
-                                            key = parent.dataset?.key;
-
-                                            if (key !== undefined) {
-                                                break;
-                                            }
+                >
+                    <div aria-labelledby='${id}-label' id='${id}-list' role='listbox'>
+                        ${options.map((option, index) => html`
+                            <div
+                                class='select-menu-option'
+                                id='${id}-option-${index}'
+                                role='option'
+                                ${this?.attributes?.[SELECT_OPTION]}
+                                ${attributes[SELECT_OPTION]}
+                                ${{
+                                    'aria-selected': () => signal.selector(chosen, option.value) ? 'true' : 'false',
+                                    class: () => signal.selector(highlighted, index) && 'select-menu-option--highlighted',
+                                    onclick: () => choose(index),
+                                    onpointermove: (e: PointerEvent) => {
+                                        // Scrolling under a still cursor can fire synthetic moves; only real movement
+                                        // takes the highlight.
+                                        if (e.pointerType === 'touch' || (last.x === e.clientX && last.y === e.clientY)) {
+                                            return;
                                         }
-                                    }
 
-                                    if (key === undefined) {
-                                        return;
-                                    }
+                                        last = { x: e.clientX, y: e.clientY };
 
-                                    let previous = state.selected!;
-
-                                    state.active = false;
-                                    state.selected = key;
-
-                                    selected[key] = true;
-                                    selected[previous] = false;
-                                },
-                                onconnect: () => {
-                                    state.active = true;
-                                }
-                            }}
-                        >
-                            ${keys.map((key) => {
-                                let content = options[key];
-
-                                if (content !== null && typeof content === 'object' && 'content' in content) {
-                                    content = content.content;
-                                }
-
-                                return html`
-                                    <div
-                                        class='link select-option ${() => selected[key] && '--active'}'
-                                        ${this?.attributes?.[SELECT_OPTION]}
-                                        ${attributes[SELECT_OPTION]}
-                                        data-key='${key}'
-                                    >
-                                        ${content}
-                                    </div>
-                                `;
-                            })}
-                        </div>
-                    `;
-                }}
+                                        if (menu.highlight !== index) {
+                                            menu.highlight = index;
+                                        }
+                                    }
+                                }}
+                            >
+                                <svg aria-hidden='true' class='select-menu-check'><use href='#${check}' /></svg>
+                                <span class='select-menu-option-label'>
+                                    ${option.label}
+                                </span>
+                                ${option.detail && html`<span class='select-menu-option-detail'>${option.detail}</span>`}
+                            </div>
+                        `)}
+                    </div>
+                </div>
+                <div
+                    aria-hidden='true'
+                    class='select-menu-scroll select-menu-scroll--up'
+                    ${{
+                        class: () => menu.hover && menu.up && '--active',
+                        onpointerenter: (e: PointerEvent) => scroll(-1, e),
+                        onpointerleave: stop
+                    }}
+                >
+                    <svg class='select-menu-scroll-icon'><use href='#${chevronUp}' /></svg>
+                </div>
+                <div
+                    aria-hidden='true'
+                    class='select-menu-scroll select-menu-scroll--down'
+                    ${{
+                        class: () => menu.hover && menu.down && '--active',
+                        onpointerenter: (e: PointerEvent) => scroll(1, e),
+                        onpointerleave: stop
+                    }}
+                >
+                    <svg class='select-menu-scroll-icon'><use href='#${chevronDown}' /></svg>
+                </div>
             </div>
-        `;
-    },
-    { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT }
-);
+        </div>
+    `;
+}
+
+
+export default component(template, { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT, trigger: SELECT_TRIGGER });
+export type { Option };