@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/tooltip/utilities.ts

@@ -0,0 +1,103 @@
+// Referenced by '.tooltip.--morphing' in CSS; a missing reference is ignored until this exists.
+const GOO = 'tooltip-morph-goo';
+
+
+function content(element: HTMLElement) {
+    let candidates = element.querySelectorAll<HTMLElement>('.tooltip-content, .tooltip-message');
+
+    for (let i = 0, n = candidates.length; i < n; i++) {
+        if (candidates[i].closest('.tooltip') === element) {
+            return candidates[i];
+        }
+    }
+}
+
+// Blur then threshold the alpha so nearby shapes melt into one blob (the neck between trigger
+// and tooltip), then lay the original 'over' it: the union keeps the trigger's own border-radius
+// and only adds goo where the originals don't reach ('atop' would reshape them to the goo's
+// rounder outline). The threshold's midpoint is alpha 0.5 so straight goo edges sit on the
+// originals instead of just outside them. The region is fixed and oversized because the
+// default one is the trigger's box, which would crop the tooltip.
+function goo() {
+    if (document.getElementById(GOO)) {
+        return;
+    }
+
+    document.body.insertAdjacentHTML(
+        'beforeend',
+        `<svg aria-hidden='true' height='0' style='position: absolute;' width='0'>
+            <filter color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse' height='4000' id='${GOO}' width='4000' x='-2000' y='-2000'>
+                <feGaussianBlur in='SourceGraphic' result='blur' stdDeviation='8' />
+                <feColorMatrix in='blur' result='goo' type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -12' />
+                <feComposite in='SourceGraphic' in2='goo' operator='over' />
+            </filter>
+        </svg>`
+    );
+}
+
+// Seeds the '--morph' variant with the trigger's box, then calls 'open' once that start
+// shape has been painted; the returned function cancels a pending open.
+function morph(element: HTMLElement, open: VoidFunction) {
+    let tooltip = content(element);
+
+    if (!tooltip || !(tooltip.classList.contains('tooltip-content--morph') || tooltip.classList.contains('tooltip-message--morph'))) {
+        open();
+        return;
+    }
+
+    goo();
+
+    let box = tooltip.getBoundingClientRect(),
+        rect = element.getBoundingClientRect(),
+        style = tooltip.style;
+
+    // Jump straight to the new start shape instead of transitioning into it. The insets place
+    // the clip over the trigger; negative values reach outside the tooltip's own box.
+    style.transition = 'none';
+    style.setProperty('--morph-bottom', `${box.bottom - rect.bottom}px`);
+    style.setProperty('--morph-left', `${rect.left - box.left}px`);
+    style.setProperty('--morph-radius', getComputedStyle(element).borderTopLeftRadius);
+    style.setProperty('--morph-right', `${box.right - rect.right}px`);
+    style.setProperty('--morph-top', `${rect.top - box.top}px`);
+
+    // Apply the start shape now, while transitions are off; otherwise it is first styled
+    // after they're restored and animates into the start shape instead of out of it.
+    tooltip.getBoundingClientRect();
+
+    // Open on the next frame, restoring transitions in the same step: the flush above committed
+    // the start shape, so the open transitions out of it with only one frame of latency.
+    let frame = requestAnimationFrame(() => {
+        style.removeProperty('transition');
+        open();
+    });
+
+    return () => {
+        cancelAnimationFrame(frame);
+        style.removeProperty('transition');
+    };
+}
+
+// Trigger event handler for bubbled transition/animation events. The goo filter reshapes
+// everything it touches, so it's only on while the shape is moving; at rest the trigger and
+// tooltip keep their exact edges. Opening is a clip-path transition, closing the
+// 'tooltip-morph-close' animation.
+function morphing(active: boolean) {
+    return (e: AnimationEvent | TransitionEvent) => {
+        let element = e.currentTarget as HTMLElement,
+            tooltip = e.target as HTMLElement;
+
+        if (
+            tooltip.closest('.tooltip') !== element ||
+            !(tooltip.classList.contains('tooltip-content--morph') || tooltip.classList.contains('tooltip-message--morph'))
+        ) {
+            return;
+        }
+
+        if ('propertyName' in e ? e.propertyName === 'clip-path' : e.animationName === 'tooltip-morph-close') {
+            element.classList.toggle('--morphing', active);
+        }
+    };
+}
+
+
+export { content, morph, morphing };

package/src/components/tree/index.ts

@@ -0,0 +1,259 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    expanded?: string[];
+    label: string;
+    nodes: Node[];
+    select?: (id: string) => void;
+    selected?: string;
+    toggle?: (id: string, expanded: boolean) => void;
+};
+
+type Node = {
+    children?: Node[];
+    id: string;
+    label: string;
+    meta?: Renderable<unknown>;
+};
+
+
+function flatten(nodes: Node[], parent: Node | null, index: Map<string, { node: Node, parent: Node | null }>) {
+    for (let i = 0, n = nodes.length; i < n; i++) {
+        let node = nodes[i];
+
+        index.set(node.id, { node, parent });
+
+        if (node.children) {
+            flatten(node.children, node, index);
+        }
+    }
+
+    return index;
+}
+
+function visible(nodes: Node[], expanded: Record<string, boolean>, out: Node[] = []) {
+    for (let i = 0, n = nodes.length; i < n; i++) {
+        let node = nodes[i];
+
+        out.push(node);
+
+        if (node.children?.length && expanded[node.id]) {
+            visible(node.children, expanded, out);
+        }
+    }
+
+    return out;
+}
+
+
+export default component<A>(
+    function({ expanded: open = [], label, nodes, select, selected: initial, toggle, ...attributes }) {
+        let index = flatten(nodes, null, new Map()),
+            ids = [...index.keys()],
+            expanded = reactive(
+                Object.fromEntries( ids.map((id) => [id, open.includes(id)]) )
+            ),
+            selected = reactive(
+                Object.fromEntries( ids.map((id) => [id, id === initial]) )
+            ),
+            state = {
+                focused: visible(nodes, expanded).some((node) => node.id === initial) ? initial! : (nodes[0]?.id ?? ''),
+                selected: initial ?? ''
+            },
+            tabbable = reactive(
+                Object.fromEntries( ids.map((id) => [id, id === state.focused]) )
+            );
+
+        function activate(id: string) {
+            let entry = index.get(id)!;
+
+            if (state.selected !== id) {
+                if (state.selected) {
+                    selected[state.selected] = false;
+                }
+
+                selected[id] = true;
+                state.selected = id;
+                select?.(id);
+            }
+
+            if (entry.node.children?.length) {
+                set(id, !expanded[id]);
+            }
+        }
+
+        function focus(root: HTMLElement, id: string) {
+            root.querySelector<HTMLElement>(`.tree-row[data-id="${CSS.escape(id)}"]`)?.focus();
+        }
+
+        function set(id: string, value: boolean) {
+            if (expanded[id] === value) {
+                return;
+            }
+
+            expanded[id] = value;
+            toggle?.(id, value);
+        }
+
+        function render(nodes: Node[], depth: number): Renderable<unknown> {
+            return nodes.map((node, i) => {
+                let branch = !!node.children?.length,
+                    id = node.id;
+
+                return html`
+                    <div class='tree-item' role='none'>
+                        <div
+                            class='tree-row ${() => selected[id] && '--active'}'
+                            role='treeitem'
+                            aria-level='${depth}'
+                            aria-posinset='${i + 1}'
+                            aria-setsize='${nodes.length}'
+                            data-id='${id}'
+                            ${branch ? { 'aria-expanded': () => expanded[id] ? 'true' : 'false' } : undefined}
+                            ${{
+                                'aria-selected': () => selected[id] ? 'true' : 'false',
+                                tabindex: () => tabbable[id] ? 0 : -1
+                            }}
+                        >
+                            ${branch
+                                ? html`
+                                    <span class='tree-caret ${() => expanded[id] && '--active'}' aria-hidden='true'>
+                                        <svg viewBox='0 0 10 10'><path d='M3.5 2 6.5 5 3.5 8' /></svg>
+                                    </span>
+                                `
+                                : html`<span class='tree-caret' aria-hidden='true'></span>`}
+                            <span class='tree-label'>${node.label}</span>
+                            ${node.meta !== undefined && html`<span class='tree-meta'>${node.meta}</span>`}
+                        </div>
+
+                        ${branch && html`
+                            <div
+                                class='tree-group ${() => expanded[id] && '--active'}'
+                                role='group'
+                                ${{ inert: () => !expanded[id] }}
+                            >
+                                <div class='tree-group-content'>
+                                    ${render(node.children!, depth + 1)}
+                                </div>
+                            </div>
+                        `}
+                    </div>
+                `;
+            });
+        }
+
+        return html`
+            <div
+                class='tree'
+                role='tree'
+                aria-label='${label}'
+                ${attributes}
+                ${{
+                    onclick: (event: MouseEvent) => {
+                        let row = (event.target as HTMLElement).closest<HTMLElement>('.tree-row'),
+                            root = row?.closest<HTMLElement>('.tree');
+
+                        if (!row || !root) {
+                            return;
+                        }
+
+                        focus(root, row.dataset.id!);
+                        activate(row.dataset.id!);
+                    },
+                    onfocusin: (event: FocusEvent) => {
+                        let id = (event.target as HTMLElement).closest<HTMLElement>('.tree-row')?.dataset.id;
+
+                        if (id === undefined || id === state.focused) {
+                            return;
+                        }
+
+                        tabbable[state.focused] = false;
+                        tabbable[id] = true;
+                        state.focused = id;
+                    },
+                    onkeydown: (event: KeyboardEvent) => {
+                        let root = (event.target as HTMLElement).closest<HTMLElement>('.tree');
+
+                        if (!root || !index.has(state.focused)) {
+                            return;
+                        }
+
+                        let entry = index.get(state.focused)!,
+                            id = state.focused,
+                            rows = visible(nodes, expanded),
+                            position = rows.indexOf(entry.node),
+                            target: string | undefined;
+
+                        switch (event.key) {
+                            case 'ArrowDown':
+                                target = rows[position + 1]?.id;
+                                break;
+                            case 'ArrowUp':
+                                target = rows[position - 1]?.id;
+                                break;
+                            case 'ArrowRight':
+                                if (!entry.node.children?.length) {
+                                    break;
+                                }
+
+                                if (expanded[id]) {
+                                    target = entry.node.children[0].id;
+                                }
+                                else {
+                                    set(id, true);
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                if (entry.node.children?.length && expanded[id]) {
+                                    set(id, false);
+                                }
+                                else {
+                                    target = entry.parent?.id;
+                                }
+                                break;
+                            case 'End':
+                                target = rows[rows.length - 1]?.id;
+                                break;
+                            case 'Enter':
+                            case ' ':
+                                activate(id);
+                                break;
+                            case 'Home':
+                                target = rows[0]?.id;
+                                break;
+                            default: {
+                                if (event.key.length !== 1 || event.altKey || event.ctrlKey || event.metaKey) {
+                                    return;
+                                }
+
+                                let key = event.key.toLowerCase();
+
+                                for (let i = 1, n = rows.length; i < n; i++) {
+                                    let row = rows[(position + i) % n];
+
+                                    if (row.label.toLowerCase().startsWith(key)) {
+                                        target = row.id;
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+
+                        event.preventDefault();
+
+                        if (target !== undefined) {
+                            focus(root, target);
+                        }
+                    }
+                }}
+            >
+                ${render(nodes, 1)}
+            </div>
+        `;
+    }
+);
+
+export type { Node };

package/src/components/tree/scss/index.scss

@@ -0,0 +1,105 @@
+@use '/tokens';
+@use 'variables';
+
+.tree {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size);
+
+    &-caret {
+        align-items: center;
+        display: inline-flex;
+        flex: 0 0 var(--caret-size);
+        height: var(--caret-size);
+        justify-content: center;
+        transition: rotate var(--caret-duration) var(--caret-timing-function);
+
+        @include tokens.state(active) {
+            rotate: 90deg;
+        }
+
+        svg {
+            fill: none;
+            height: 10px;
+            stroke: currentColor;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.6;
+            width: 10px;
+        }
+    }
+
+    &-group {
+        display: grid;
+        grid-template-rows: 1fr;
+        transition: grid-template-rows var(--open-duration) var(--open-timing-function);
+
+        @include tokens.state(inactive) {
+            grid-template-rows: 0fr;
+            transition: grid-template-rows var(--close-duration) var(--close-timing-function);
+
+            .tree-group-content {
+                opacity: 0;
+                transition: opacity var(--close-fade-duration) var(--close-timing-function);
+            }
+        }
+
+        &-content {
+            border-inline-start: var(--guide-width) solid var(--guide-color);
+            display: flex;
+            flex-direction: column;
+            margin-inline-start: calc(var(--padding-horizontal) + (var(--caret-size) - var(--guide-width)) / 2);
+            min-height: 0;
+            opacity: 1;
+            overflow: hidden;
+            padding-inline-start: var(--size-100);
+            transition: opacity var(--open-fade-duration) var(--open-timing-function);
+        }
+    }
+
+    &-label {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-meta {
+        color: var(--meta-color);
+        flex: 0 0 auto;
+        font-family: var(--meta-font-family);
+        font-size: 0.85em;
+        font-weight: var(--font-weight-400);
+    }
+
+    &-row {
+        align-items: center;
+        background: var(--background);
+        border-radius: var(--border-radius);
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        font-weight: var(--font-weight);
+        gap: var(--gap);
+        height: var(--height);
+        outline: none;
+        padding-inline: var(--padding-horizontal);
+        transition:
+            background var(--transition-duration) var(--transition-timing-function),
+            color var(--transition-duration) var(--transition-timing-function);
+        user-select: none;
+
+        &:focus-visible {
+            box-shadow: inset 0 0 0 var(--focus-width) var(--focus-color);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-caret,
+        &-group,
+        &-group-content {
+            transition: none !important;
+        }
+    }
+}

package/src/components/tree/scss/variables.scss

@@ -0,0 +1,48 @@
+@use '/tokens';
+
+.tree {
+    --background: var(--background-default);
+    --background-active: var(--color-grey-500);
+    --background-default: transparent;
+    --background-hover: var(--color-grey-400);
+    --border-radius: var(--border-radius-300);
+    --caret-duration: 320ms;
+    --caret-size: 16px;
+    // Spring: stiffness 700, damping 46
+    --caret-timing-function: linear(0, 0.2 6%, 0.53 13%, 0.8 21%, 0.96 30%, 1.02 38%, 1.03 45%, 1.01 60%, 1);
+    --close-duration: 200ms;
+    --close-fade-duration: 140ms;
+    --close-timing-function: cubic-bezier(0.4, 0, 1, 1);
+    --color: var(--color-default);
+    --color-active: var(--color-text-500);
+    --color-default: var(--color-text-300);
+    --color-hover: var(--color-text-400);
+    --focus-color: var(--color-blue-400);
+    --focus-width: 1.5px;
+    --font-size: var(--font-size-300);
+    --font-weight: var(--font-weight-400);
+    --font-weight-active: var(--font-weight-500);
+    --gap: var(--size-200);
+    --guide-color: var(--color-border-300);
+    --guide-width: 1px;
+    --height: 28px;
+    --meta-color: var(--color-text-300);
+    --meta-font-family: 'Geist Mono', ui-monospace, monospace;
+    --open-duration: 280ms;
+    --open-fade-duration: 180ms;
+    --open-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    --padding-horizontal: var(--size-300);
+
+    &-row {
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+            --color: var(--color-hover);
+        }
+
+        @include tokens.state(active) {
+            --background: var(--background-active);
+            --color: var(--color-active);
+            --font-weight: var(--font-weight-active);
+        }
+    }
+}