@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/nested-menu/index.ts

@@ -0,0 +1,446 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [NESTED_MENU_TRIGGER]?: Attributes;
+    animate?: boolean;
+    items: Item[];
+    onselect?: (item: Item) => void;
+    state?: { active: boolean };
+};
+
+type Item = {
+    danger?: boolean;
+    disabled?: boolean;
+    hint?: string;
+    // Factory because the icon renders twice for branches: in the row and in the panel header.
+    icon?: () => Renderable<unknown>;
+    items?: Item[];
+    label: string;
+    onselect?: (item: Item) => void;
+};
+
+type MenuNode = {
+    button?: HTMLElement;
+    children: MenuNode[];
+    item?: Item;
+    panel?: HTMLElement;
+    parent?: MenuNode;
+    state: { open: boolean, render: boolean, settled: boolean };
+};
+
+
+const NESTED_MENU_TRIGGER = Symbol.for('@esportsplus/ui/nested-menu.trigger');
+
+// Keeps the shifted stack this far from the viewport edges.
+const VIEWPORT_MARGIN = 8;
+
+
+function covered(node: MenuNode) {
+    for (let i = 0, n = node.children.length; i < n; i++) {
+        if (node.children[i].state.open) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function enabled(node: MenuNode) {
+    if (!node.panel) {
+        return [];
+    }
+
+    return Array.from(
+        node.panel.querySelectorAll<HTMLElement>(':scope > .nested-menu-entry > .nested-menu-item:not(:disabled)')
+    );
+}
+
+// Class and attribute updates are applied on the next frame, so focus waits one more.
+function later(fn: VoidFunction) {
+    requestAnimationFrame(() => requestAnimationFrame(fn));
+}
+
+function tree(items: Item[], parent?: MenuNode) {
+    let nodes: MenuNode[] = [];
+
+    for (let i = 0, n = items.length; i < n; i++) {
+        let node: MenuNode = {
+            children: [],
+            item: items[i],
+            parent,
+            state: reactive({ open: false, render: false, settled: false })
+        };
+
+        node.children = tree(items[i].items ?? [], node);
+        nodes.push(node);
+    }
+
+    return nodes;
+}
+
+
+export default component(
+    ({ animate = true, items, onselect, state = reactive({ active: false }), ...attributes }: A, content) => {
+        let elements = new WeakMap<Element, MenuNode>(),
+            root: MenuNode = { children: [], state: reactive({ open: true, render: true, settled: true }) },
+            stack: MenuNode[] = [root],
+            trigger: HTMLElement | undefined;
+
+        root.children = tree(items, root);
+
+        function close(focus: boolean) {
+            state.active = false;
+
+            if (!animate) {
+                reset();
+            }
+
+            if (focus) {
+                trigger?.focus();
+            }
+        }
+
+        function drill(node: MenuNode) {
+            if (!node.children.length || node.item?.disabled) {
+                return;
+            }
+
+            stack.push(node);
+
+            if (node.state.render) {
+                expand(node);
+                return;
+            }
+
+            // A panel created already open has no closed state to transition from, so it would never
+            // animate or settle; paint it closed first.
+            node.state.render = true;
+
+            later(() => {
+                if (stack.includes(node)) {
+                    expand(node);
+                }
+            });
+        }
+
+        function entry(node: MenuNode): Renderable<unknown> {
+            let branch = node.children.length > 0,
+                { danger, disabled, hint, icon, label } = node.item!;
+
+            return html`
+                <div class='nested-menu-entry' ${{ class: () => node.state.open && '--open' }}>
+                    <button
+                        class='nested-menu-item ${danger ? '--danger' : ''}'
+                        role='menuitem'
+                        tabindex='-1'
+                        type='button'
+                        ${{
+                            'aria-expanded': branch ? () => String(node.state.open) : undefined,
+                            'aria-haspopup': branch ? 'menu' : undefined,
+                            disabled: disabled === true,
+                            onconnect: (element: HTMLElement) => {
+                                elements.set(element, node);
+                                node.button = element;
+                            }
+                        }}
+                    >
+                        ${icon ? html`<span class='nested-menu-icon'>${icon()}</span>` : ''}
+                        <span class='nested-menu-label'>${label}</span>
+                        ${hint ? html`<span class='nested-menu-hint'>${hint}</span>` : ''}
+                        ${branch ? html`<span class='nested-menu-chevron'></span>` : ''}
+                    </button>
+
+                    ${() => branch && node.state.render ? panel(node) : ''}
+                </div>
+            `;
+        }
+
+        function expand(node: MenuNode) {
+            // No transitionend will settle it: either still open from a pending close, or motion is off
+            node.state.settled = node.state.open || instant();
+            node.state.open = true;
+
+            later(() => enabled(node)[0]?.focus());
+        }
+
+        function instant() {
+            return !root.panel || parseFloat(getComputedStyle(root.panel).getPropertyValue('--open-duration')) === 0;
+        }
+
+        function open() {
+            reset();
+            state.active = true;
+            shift();
+
+            later(() => enabled(root)[0]?.focus());
+        }
+
+        function panel(node: MenuNode): Renderable<unknown> {
+            let item = node.item;
+
+            return html`
+                <div
+                    class='nested-menu-panel'
+                    role='menu'
+                    ${{
+                        class: () => {
+                            let active = node === root ? state.active : node.state.open;
+
+                            return `${active ? '--active' : ''} ${covered(node) ? '--covered' : ''} ${node.state.settled ? '--settled' : ''}`;
+                        },
+                        inert: () => node === root && !state.active,
+                        onconnect: (element: HTMLElement) => {
+                            elements.set(element, node);
+                            node.panel = element;
+                        },
+                        ontransitionend: (e: TransitionEvent) => {
+                            if (e.target !== node.panel) {
+                                return;
+                            }
+
+                            // Collapse the stack once the closing fade finishes so the next open starts at the root.
+                            if (node === root) {
+                                if (e.propertyName === 'opacity' && !state.active) {
+                                    reset();
+                                }
+                            }
+                            // The reveal clip would also clip nested panels, so it's dropped once the panel is open.
+                            else if (e.propertyName === 'clip-path' && node.state.open) {
+                                node.state.settled = true;
+                            }
+                        }
+                    }}
+                >
+                    ${item ? html`
+                        <div class='nested-menu-header'>
+                            ${item.icon ? html`<span class='nested-menu-icon'>${item.icon()}</span>` : ''}
+                            <span class='nested-menu-title'>
+                                <span class='nested-menu-title-regular'>${item.label}</span>
+                                <span aria-hidden='true' class='nested-menu-title-bold'>${item.label}</span>
+                            </span>
+                            <span class='nested-menu-chevron'></span>
+                        </div>
+                    ` : ''}
+
+                    ${node.children.map(entry)}
+                </div>
+            `;
+        }
+
+        function pop() {
+            if (stack.length < 2) {
+                return;
+            }
+
+            let node = stack.pop()!;
+
+            node.state.settled = false;
+            node.button?.focus();
+
+            // Restore the clip before closing: 'none' can't interpolate, so closing straight from
+            // the settled state would snap shut instead of animating.
+            later(() => {
+                if (!stack.includes(node)) {
+                    node.state.open = false;
+                }
+            });
+        }
+
+        function popTo(node: MenuNode) {
+            while (stack.length > 1 && stack[stack.length - 1] !== node) {
+                pop();
+            }
+        }
+
+        function reset() {
+            while (stack.length > 1) {
+                let node = stack.pop()!;
+
+                node.state.open = false;
+                node.state.settled = false;
+            }
+        }
+
+        function select(node: MenuNode) {
+            let item = node.item!;
+
+            if (item.disabled) {
+                return;
+            }
+
+            close(true);
+            item.onselect?.(item);
+            onselect?.(item);
+        }
+
+        // Moves the whole stack horizontally to stay inside the viewport; sub-panels inherit the
+        // offset because they're positioned within the root panel.
+        function shift() {
+            let element = root.panel;
+
+            if (!element) {
+                return;
+            }
+
+            let current = parseFloat(element.style.getPropertyValue('--shift-x')) || 0,
+                rect = element.getBoundingClientRect(),
+                left = rect.left - current,
+                right = rect.right - current,
+                x = 0;
+
+            if (right > window.innerWidth - VIEWPORT_MARGIN) {
+                x = window.innerWidth - VIEWPORT_MARGIN - right;
+            }
+
+            if (left + x < VIEWPORT_MARGIN) {
+                x = VIEWPORT_MARGIN - left;
+            }
+
+            element.style.setProperty('--shift-x', `${x}px`);
+        }
+
+        return html`
+            <div
+                class='nested-menu ${animate ? '' : '--instant'}'
+                ${attributes}
+                ${{
+                    class: () => state.active && '--active',
+                    onclick: (e: MouseEvent) => {
+                        let target = (e.target as HTMLElement).closest<HTMLElement>(
+                                '.nested-menu-header, .nested-menu-item, .nested-menu-panel, .nested-menu-trigger'
+                            );
+
+                        if (!target) {
+                            return;
+                        }
+
+                        if (target === trigger) {
+                            if (state.active) {
+                                close(false);
+                            }
+                            else {
+                                open();
+                            }
+
+                            return;
+                        }
+
+                        if (target.classList.contains('nested-menu-header')) {
+                            pop();
+                            return;
+                        }
+
+                        let node = elements.get(target);
+
+                        if (!node) {
+                            return;
+                        }
+
+                        if (target.classList.contains('nested-menu-item')) {
+                            if (node.children.length) {
+                                drill(node);
+                            }
+                            else {
+                                select(node);
+                            }
+                        }
+                        // A dimmed parent panel's scrim takes the click; return to that level
+                        else if (node !== stack[stack.length - 1]) {
+                            popTo(node);
+                        }
+                    },
+                    ondocumentclick: function(this, e: MouseEvent) {
+                        if (!state.active || !this?.isConnected) {
+                            return;
+                        }
+
+                        if (!this.contains(e.target as Node | null)) {
+                            close(false);
+                        }
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        if (!state.active) {
+                            if (e.key === 'ArrowDown' && e.target === trigger) {
+                                e.preventDefault();
+                                open();
+                            }
+
+                            return;
+                        }
+
+                        let top = stack[stack.length - 1],
+                            buttons = enabled(top),
+                            index = buttons.indexOf(document.activeElement as HTMLElement),
+                            n = buttons.length;
+
+                        switch (e.key) {
+                            case 'ArrowDown':
+                                buttons[(index + 1) % n]?.focus();
+                                break;
+                            case 'ArrowUp':
+                                buttons[index < 1 ? n - 1 : index - 1]?.focus();
+                                break;
+                            case 'ArrowLeft':
+                            case 'Backspace':
+                                pop();
+                                break;
+                            case 'ArrowRight': {
+                                let node = index === -1 ? undefined : elements.get(buttons[index]);
+
+                                if (node) {
+                                    drill(node);
+                                }
+                                break;
+                            }
+                            case 'End':
+                                buttons[n - 1]?.focus();
+                                break;
+                            case 'Escape':
+                                if (stack.length > 1) {
+                                    pop();
+                                }
+                                else {
+                                    close(true);
+                                }
+                                break;
+                            case 'Home':
+                                buttons[0]?.focus();
+                                break;
+                            case 'Tab':
+                                close(true);
+                                break;
+                            // Enter and Space fall through to the native button click
+                            default:
+                                return;
+                        }
+
+                        e.preventDefault();
+                    }
+                }}
+            >
+                <button
+                    aria-haspopup='menu'
+                    class='nested-menu-trigger'
+                    type='button'
+                    ${attributes[NESTED_MENU_TRIGGER]}
+                    ${{
+                        'aria-expanded': () => String(state.active),
+                        onconnect: (element: HTMLElement) => {
+                            trigger = element;
+                        }
+                    }}
+                >
+                    ${content}
+                </button>
+
+                ${panel(root)}
+            </div>
+        `;
+    },
+    { trigger: NESTED_MENU_TRIGGER }
+);
+
+export type { Item };

package/src/components/nested-menu/scss/index.scss

@@ -0,0 +1,219 @@
+@use '/tokens';
+@use 'variables';
+
+.nested-menu {
+    display: inline-block;
+    position: relative;
+
+    &-chevron {
+        border-color: currentColor;
+        border-style: solid;
+        border-width: 0 1.5px 1.5px 0;
+        flex-shrink: 0;
+        height: 6px;
+        margin-inline: 2px;
+        opacity: 0.6;
+        rotate: -45deg;
+        transition: rotate var(--open-duration) var(--open-timing-function);
+        width: 6px;
+    }
+
+    &-entry {
+        position: relative;
+
+        // Above the parent's scrim, so the open child panel stays undimmed
+        &.--open {
+            z-index: 2;
+        }
+    }
+
+    &-header,
+    &-item {
+        align-items: center;
+        border-radius: var(--item-border-radius);
+        display: flex;
+        gap: var(--gap);
+        min-height: var(--item-height);
+        padding-inline: var(--item-padding);
+    }
+
+    &-header {
+        cursor: pointer;
+
+        .nested-menu-chevron {
+            rotate: 45deg;
+        }
+    }
+
+    &-hint {
+        color: var(--color-hint);
+        font-size: 0.75rem;
+    }
+
+    &-icon {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
+    &-item {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        outline: none;
+        text-align: start;
+        transition: background var(--close-duration) var(--open-timing-function);
+        width: 100%;
+
+        &:focus,
+        &:hover {
+            background: var(--background-hover);
+        }
+
+        &.--danger {
+            color: var(--color-danger);
+        }
+
+        &:disabled {
+            background: transparent;
+            color: var(--color-disabled);
+            cursor: not-allowed;
+        }
+    }
+
+    &-label,
+    &-title {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-panel {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        color: var(--color);
+        font-size: var(--font-size);
+        isolation: isolate;
+        padding: var(--padding);
+        position: absolute;
+        width: var(--width);
+
+        // Scrim over parent panels while a child is open; it also takes clicks meant to pop back here
+        &::after {
+            background: var(--scrim);
+            border-radius: inherit;
+            content: '';
+            inset: 0;
+            opacity: 0;
+            pointer-events: none;
+            position: absolute;
+            transition: opacity var(--open-duration) var(--open-timing-function);
+            z-index: 1;
+        }
+
+        &.--covered::after {
+            cursor: pointer;
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    // Root panel
+    > .nested-menu-panel {
+        left: 0;
+        opacity: 0;
+        top: calc(100% + var(--offset));
+        transition:
+            opacity var(--close-duration) var(--open-timing-function),
+            visibility 0s linear var(--close-duration);
+        translate: var(--shift-x, 0px) 0;
+        visibility: hidden;
+        z-index: 9;
+
+        &.--active {
+            opacity: 1;
+            transition: opacity var(--close-duration) var(--open-timing-function);
+            visibility: visible;
+        }
+    }
+
+    // Sub-panels start clipped to the row that opened them, so the row reads as the panel's header,
+    // then the clip grows downward. The open clip overhangs the box so the shadow isn't cut off.
+    &-entry > &-panel {
+        clip-path: inset(
+            var(--padding)
+            var(--padding)
+            calc(100% - var(--padding) - var(--item-height))
+            var(--padding)
+            round var(--item-border-radius)
+        );
+        inset-inline: calc(var(--padding) * -1);
+        pointer-events: none;
+        top: calc(var(--padding) * -1);
+        transition:
+            clip-path var(--close-duration) var(--open-timing-function),
+            visibility 0s linear var(--close-duration);
+        visibility: hidden;
+        width: auto;
+        z-index: 2;
+
+        &.--active {
+            clip-path: inset(-48px round calc(var(--border-radius) + 48px));
+            pointer-events: auto;
+            transition: clip-path var(--open-duration) var(--open-timing-function);
+            visibility: visible;
+
+            &.--settled {
+                clip-path: none;
+            }
+        }
+    }
+
+    // Regular and bold copies of the title are stacked; crossfading them morphs the weight
+    // without reflowing the label.
+    &-title {
+        display: grid;
+
+        &-bold,
+        &-regular {
+            grid-area: 1 / 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            transition: opacity var(--open-duration) var(--open-timing-function);
+        }
+
+        &-bold {
+            font-weight: 600;
+            opacity: 0;
+        }
+    }
+
+    &-panel.--active > &-header &-title {
+        &-bold {
+            opacity: 1;
+        }
+
+        &-regular {
+            opacity: 0;
+        }
+    }
+
+    &-trigger {
+        cursor: pointer;
+    }
+
+    &.--instant {
+        --close-duration: 0s;
+        --open-duration: 0s;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --close-duration: 0s;
+        --open-duration: 0s;
+    }
+}

package/src/components/nested-menu/scss/variables.scss

@@ -0,0 +1,26 @@
+.nested-menu {
+    --background: var(--color-white-400);
+    --background-hover: var(--color-grey-500);
+    --border-radius: var(--border-radius-600);
+    --box-shadow: var(--box-shadow-500);
+    --close-duration: 0.12s;
+    --color: var(--color-text-500);
+    --color-danger: var(--color-red-400);
+    --color-disabled: var(--color-text-300);
+    --color-hint: var(--color-text-300);
+    --font-size: 0.875rem;
+    --gap: var(--size-200);
+    --item-border-radius: var(--border-radius-400);
+    --item-height: 36px;
+    --item-padding: var(--size-200);
+    --offset: var(--size-200);
+    --open-duration: 0.28s;
+    --open-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    --padding: 4px;
+    --scrim: oklch(from var(--color-black-400) l c h / 0.08);
+    --width: 17rem;
+
+    @media (pointer: coarse) {
+        --item-height: 44px;
+    }
+}