@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/tree-view/index.ts

@@ -0,0 +1,285 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    nodes: Node[];
+    open?: string[];
+    selected?: string;
+    state?: { selected: string };
+};
+
+type Item = {
+    folder: boolean;
+    id: string;
+    name: string;
+    parent: string | null;
+};
+
+type Node = {
+    children?: Node[];
+    name: string;
+};
+
+
+// Long enough to type "pa" at a normal pace, short enough that a fresh
+// letter a moment later starts a new search.
+const TYPEAHEAD_RESET = 500;
+
+
+function folders(nodes: Node[], parent: string | null, out: string[]) {
+    for (let i = 0, n = nodes.length; i < n; i++) {
+        let node = nodes[i];
+
+        if (node.children) {
+            let id = join(parent, node.name);
+
+            out.push(id);
+            folders(node.children, id, out);
+        }
+    }
+
+    return out;
+}
+
+function join(parent: string | null, name: string) {
+    return parent ? `${parent}/${name}` : name;
+}
+
+function parentOf(id: string) {
+    let i = id.lastIndexOf('/');
+
+    return i === -1 ? null : id.slice(0, i);
+}
+
+// The rows a keyboard user can reach: everything not inside a closed folder.
+function visible(nodes: Node[], open: Record<string, boolean>, parent: string | null, out: Item[]) {
+    for (let i = 0, n = nodes.length; i < n; i++) {
+        let node = nodes[i],
+            id = join(parent, node.name);
+
+        out.push({ folder: !!node.children, id, name: node.name, parent });
+
+        if (node.children && open[id]) {
+            visible(node.children, open, id, out);
+        }
+    }
+
+    return out;
+}
+
+
+export default component<A>(
+    function({ nodes, open: initial = [], selected, state = reactive({ selected: selected ?? '' }), ...attributes }: A) {
+        let highlights = new Map<string, HTMLElement>(),
+            ids = folders(nodes, null, []),
+            items = new Map<string, HTMLElement>(),
+            open = reactive(
+                Object.fromEntries( ids.map((id) => [id, initial.includes(id)]) )
+            ),
+            // A folder clips its rows only while they move; once open it stops
+            // clipping so the highlight can glide in from a row outside it.
+            settled = reactive(
+                Object.fromEntries( ids.map((id) => [id, initial.includes(id)]) )
+            ),
+            reachable = visible(nodes, open, null, []),
+            typed = '',
+            typedAt = 0,
+            ui = reactive({
+                focused: reachable.some((item) => item.id === state.selected) ? state.selected : (reachable[0]?.id ?? '')
+            });
+
+        function activate(item: Item) {
+            if (item.folder) {
+                toggle(item.id, !open[item.id]);
+                return;
+            }
+
+            glide(state.selected, item.id);
+            state.selected = item.id;
+        }
+
+        function focus(id: string) {
+            ui.focused = id;
+            items.get(id)?.focus();
+        }
+
+        // FLIP: start the new highlight where the old one sits, then let it
+        // transition home. Rows share one width, so it is a pure translate.
+        function glide(from: string, to: string) {
+            let a = highlights.get(from),
+                b = highlights.get(to);
+
+            if (!a || !b || a === b) {
+                return;
+            }
+
+            b.style.transition = 'none';
+            b.style.translate = `0 ${a.getBoundingClientRect().top - b.getBoundingClientRect().top}px`;
+            b.getBoundingClientRect();
+            b.style.transition = '';
+            b.style.translate = '';
+        }
+
+        function render(nodes: Node[], depth: number, parent: string | null): Renderable<unknown> {
+            return nodes.map((node) => {
+                let id = join(parent, node.name),
+                    item: Item = { folder: !!node.children, id, name: node.name, parent };
+
+                return html`
+                    <li
+                        class='tree-view-item'
+                        role='treeitem'
+                        style='--tree-view-depth: ${depth}'
+                        ${item.folder
+                            ? { 'aria-expanded': () => open[id] ? 'true' : 'false' }
+                            : { 'aria-selected': () => state.selected === id ? 'true' : 'false' }}
+                        ${{
+                            onfocus: () => {
+                                ui.focused = id;
+                            },
+                            onrender: (element: HTMLElement) => {
+                                items.set(id, element);
+                            },
+                            tabindex: () => ui.focused === id ? 0 : -1
+                        }}
+                    >
+                        <div
+                            class='tree-view-row ${item.folder ? 'tree-view-row--folder' : ''} ${() => state.selected === id && '--active'}'
+                            onclick='${() => activate(item)}'
+                        >
+                            <span class='tree-view-highlight' ${{ onrender: (element: HTMLElement) => { highlights.set(id, element); } }}></span>
+                            <span class='tree-view-chevron ${() => item.folder && open[id] && '--active'}'>
+                                ${item.folder && html`
+                                    <svg viewBox='0 0 16 16' aria-hidden='true' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>
+                                        <path d='m6 4 4 4-4 4' />
+                                    </svg>
+                                `}
+                            </span>
+                            <svg class='tree-view-icon' viewBox='0 0 16 16' aria-hidden='true' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>
+                                <path d='${item.folder
+                                    ? 'M2.25 4.5A1.25 1.25 0 0 1 3.5 3.25h2.6l1.4 1.5h5a1.25 1.25 0 0 1 1.25 1.25v5.5a1.25 1.25 0 0 1-1.25 1.25h-9A1.25 1.25 0 0 1 2.25 11.5z'
+                                    : 'M4.25 2.25h4.5l3 3v7.25a1.25 1.25 0 0 1-1.25 1.25h-6.25A1.25 1.25 0 0 1 3 12.5v-9a1.25 1.25 0 0 1 1.25-1.25zM8.5 2.5v3h3'}' />
+                            </svg>
+                            <span class='tree-view-name'>${node.name}</span>
+                        </div>
+
+                        ${node.children && html`
+                            <div
+                                class='tree-view-group ${() => open[id] && '--active'} ${() => settled[id] && '--settled'}'
+                                ${{
+                                    inert: () => !open[id],
+                                    ontransitionend: function(this: HTMLElement, event: TransitionEvent) {
+                                        if (event.target === this && event.propertyName === 'grid-template-rows' && open[id]) {
+                                            settled[id] = true;
+                                        }
+                                    }
+                                }}
+                            >
+                                <ul class='tree-view-group-content ${() => parentOf(state.selected) === id && '--active'}' role='group'>
+                                    ${render(node.children, depth + 1, id)}
+                                </ul>
+                            </div>
+                        `}
+                    </li>
+                `;
+            });
+        }
+
+        function toggle(id: string, value: boolean) {
+            open[id] = value;
+            settled[id] = false;
+        }
+
+        function typeahead(key: string, from: number, reachable: Item[]) {
+            let now = performance.now(),
+                next = (now - typedAt > TYPEAHEAD_RESET ? '' : typed) + key.toLowerCase(),
+                // Repeating one letter cycles through the items that start with it.
+                repeat = [...next].every((c) => c === next[0]),
+                start = repeat ? from + 1 : from;
+
+            typed = repeat ? next[0] : next;
+            typedAt = now;
+
+            for (let i = 0, n = reachable.length; i < n; i++) {
+                let item = reachable[(start + i) % n];
+
+                if (item.name.toLowerCase().startsWith(typed)) {
+                    focus(item.id);
+                    return;
+                }
+            }
+        }
+
+        return html`
+            <ul
+                class='tree-view'
+                role='tree'
+                ${attributes}
+                ${{
+                    onkeydown: (event: KeyboardEvent) => {
+                        let reachable = visible(nodes, open, null, []),
+                            index = reachable.findIndex((item) => item.id === ui.focused),
+                            item = reachable[index];
+
+                        if (!item) {
+                            return;
+                        }
+
+                        let target: Item | undefined;
+
+                        switch (event.key) {
+                            case 'ArrowDown':
+                                target = reachable[index + 1];
+                                break;
+                            case 'ArrowUp':
+                                target = reachable[index - 1];
+                                break;
+                            case 'Home':
+                                target = reachable[0];
+                                break;
+                            case 'End':
+                                target = reachable[reachable.length - 1];
+                                break;
+                            case 'ArrowRight':
+                                if (item.folder && open[item.id]) {
+                                    target = reachable[index + 1];
+                                }
+                                else if (item.folder) {
+                                    toggle(item.id, true);
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                if (item.folder && open[item.id]) {
+                                    toggle(item.id, false);
+                                }
+                                else if (item.parent) {
+                                    focus(item.parent);
+                                }
+                                break;
+                            case 'Enter':
+                            case ' ':
+                                activate(item);
+                                break;
+                            default:
+                                if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) {
+                                    return;
+                                }
+
+                                typeahead(event.key, index, reachable);
+                        }
+
+                        if (target) {
+                            focus(target.id);
+                        }
+
+                        event.preventDefault();
+                    }
+                }}
+            >
+                ${render(nodes, 0, null)}
+            </ul>
+        `;
+    }
+);

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

@@ -0,0 +1,169 @@
+@use '/tokens';
+@use 'variables';
+
+.tree-view {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--font-size);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &-chevron {
+        align-items: center;
+        color: var(--color-default);
+        display: flex;
+        flex: 0 0 var(--indent);
+        height: var(--indent);
+        justify-content: center;
+        position: relative;
+
+        svg {
+            height: var(--chevron-size);
+            transition: rotate 0.2s var(--transition-ease-out);
+            width: var(--chevron-size);
+        }
+
+        @include tokens.state(active) {
+            svg {
+                rotate: 90deg;
+            }
+        }
+    }
+
+    &-group {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 0.2s var(--transition-ease-out);
+
+        @include tokens.state(active) {
+            grid-template-rows: 1fr;
+            transition-duration: 0.25s;
+
+            > .tree-view-group-content {
+                filter: blur(0px);
+                opacity: 1;
+                transition-delay: 0.05s;
+                transition-duration: 0.2s;
+            }
+        }
+
+        &.--settled > .tree-view-group-content {
+            overflow: visible;
+        }
+
+        // Rows fade in a beat behind the opening and leave at once, so text is
+        // never seen squeezed by a closing folder.
+        &-content {
+            filter: blur(2px);
+            list-style: none;
+            margin: 0;
+            min-height: 0;
+            opacity: 0;
+            overflow: hidden;
+            padding: 0;
+            position: relative;
+            transition:
+                filter 0.12s ease-out,
+                opacity 0.12s ease-out;
+
+            // Drawn after the rows so it paints over the highlight, the way an
+            // editor draws its guides, centred under the parent's chevron column.
+            &::after {
+                background: var(--guide-color);
+                bottom: 0;
+                content: '';
+                left: calc(var(--padding-horizontal) + var(--tree-view-depth) * var(--indent) + (var(--indent) - 1px) / 2);
+                pointer-events: none;
+                position: absolute;
+                top: 0;
+                transition: background-color 0.15s ease-out;
+                width: 1px;
+            }
+
+            @include tokens.state(active) {
+                &::after {
+                    background: var(--guide-color-active);
+                }
+            }
+        }
+    }
+
+    &-highlight {
+        background: var(--background-active);
+        border-radius: var(--border-radius);
+        inset: 0;
+        opacity: 0;
+        position: absolute;
+        transition: translate 0.25s var(--transition-ease-out);
+    }
+
+    &-icon {
+        color: var(--color-default);
+        flex: 0 0 var(--icon-size);
+        height: var(--icon-size);
+        position: relative;
+    }
+
+    &-item {
+        outline: none;
+
+        // The item holds its children too, so the ring goes on the row alone.
+        &:focus-visible > .tree-view-row {
+            outline: 2px solid var(--outline-color);
+            outline-offset: -2px;
+        }
+    }
+
+    &-name {
+        overflow: hidden;
+        position: relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-row {
+        align-items: center;
+        border-radius: var(--border-radius);
+        color: var(--color-default);
+        cursor: default;
+        display: flex;
+        gap: var(--gap);
+        height: var(--height);
+        padding: 0 var(--padding-horizontal) 0 calc(var(--padding-horizontal) + var(--tree-view-depth) * var(--indent));
+        position: relative;
+        transition:
+            background-color 0.15s ease-out,
+            color 0.15s ease-out;
+        user-select: none;
+
+        &:hover {
+            background: var(--background-hover);
+            color: var(--color-active);
+        }
+
+        &--folder {
+            color: var(--color-active);
+        }
+
+        @include tokens.state(active) {
+            color: var(--color-active);
+
+            .tree-view-highlight {
+                opacity: 1;
+            }
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-chevron svg,
+        &-group,
+        &-highlight {
+            transition: none;
+        }
+
+        &-group-content {
+            transition-property: opacity;
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+.tree-view {
+    --background-active: var(--color-grey-500);
+    --background-hover: color-mix(in oklab, var(--background-active) 60%, transparent);
+    --border-radius: var(--border-radius-300);
+    --chevron-size: 14px;
+    --color-active: var(--color-text-500);
+    --color-default: var(--color-text-300);
+    --font-size: var(--font-size-400);
+    --gap: 6px;
+    --guide-color: var(--color-border-400);
+    --guide-color-active: color-mix(in oklab, var(--color-active) 35%, transparent);
+    --height: 32px;
+    --icon-size: var(--size-400);
+    --indent: var(--size-400);
+    --outline-color: var(--color-active);
+    --padding-horizontal: 8px;
+    --transition-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+}

package/src/components/typewriter/index.ts

@@ -8,11 +8,12 @@ const EMPTY_NODE = html` `;
 
 
 export default component(
-    function(_, content: string[]) {
-        let state = reactive({ text: '' });
+    function(attributes, content: string[]) {
+        let state = reactive({ text: '' }),
+            timer: ReturnType<typeof setTimeout> | undefined;
 
         return html`
-            <div class='typewriter' ${{
+            <div class='typewriter' ${attributes} ${{
                 onconnect: () => {
                     let character = 0,
                         i = 0,
@@ -20,13 +21,13 @@ export default component(
                         write = content[i];
 
                     function play() {
-                        setTimeout(() => {
+                        timer = setTimeout(() => {
                             state.text = write.slice(0, character);
 
                             if (isWriting) {
                                 if (character > write.length) {
                                     isWriting = false;
-                                    setTimeout(play, 2000);
+                                    timer = setTimeout(play, 2000);
                                     return;
                                 }
                                 else {
@@ -48,10 +49,13 @@ export default component(
                     }
 
                     play();
+                },
+                ondisconnect: () => {
+                    clearTimeout(timer);
                 }
             }}>
                 ${() => state.text || EMPTY_NODE}
             </div>
         `;
     }
-);
+);

package/src/components/typewriter/scss/index.scss

@@ -1,15 +1,34 @@
+@use 'variables';
+
 .typewriter {
+    text-shadow: var(--glow);
+
     &::after {
-        animation: blink 0.64s infinite;
-        content: '|';
-
-        @keyframes blink {
-            0%, 100% {
-                opacity: 1;
-            }
-            50% {
-                opacity: 0;
-            }
+        animation: typewriter--blink var(--caret-duration) var(--caret-timing-function) infinite;
+        color: var(--caret-color);
+        content: var(--caret);
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
         }
     }
-}
+
+    &--block::after {
+        background: var(--caret-color);
+        box-shadow: var(--glow);
+        display: inline-block;
+        height: 1lh;
+        margin-inline-start: 0.08em;
+        vertical-align: bottom;
+        width: 0.56em;
+    }
+}
+
+@keyframes typewriter--blink {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+}

package/src/components/typewriter/scss/variables.scss

@@ -0,0 +1,24 @@
+.typewriter {
+    --caret: '|';
+    --caret-color: currentColor;
+    --caret-duration: 0.64s;
+    --caret-timing-function: ease-in-out;
+    --glow: 0 0 0 transparent;
+
+    &--block {
+        --caret: '';
+    }
+
+    &--glow {
+        --glow: 0 0 0.4em var(--caret-color);
+    }
+
+    &--hard {
+        --caret-duration: 1s;
+        --caret-timing-function: steps(1, end);
+    }
+
+    &--underscore {
+        --caret: '_';
+    }
+}