@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -1,446 +0,0 @@
-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

@@ -1,219 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-.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;
-    }
-}