@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/tooltip/onclick.ts

@@ -1,9 +1,12 @@
 import { component, html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { morph, morphing } from './utilities';
+import { onCleanup, reactive } from '@esportsplus/reactivity';
+import overlay from '~/components/overlay';
+import { content as surface, morph, morphs } from './utilities';
 
 
 type A = Attributes & {
+    // Controlled triggers handle their own clicks while sharing the tooltip's visibility and dismissal.
+    manual?: boolean,
     onanimationcancel?: never,
     onanimationend?: never,
     onanimationstart?: never,
@@ -18,19 +21,34 @@ type A = Attributes & {
 
 
 export default component<A>(
-    ({ state = reactive({ active: false }), toggle = false, ...attributes }, content) => {
-        let cancel: VoidFunction | undefined;
+    ({ manual = false, state = reactive({ active: false }), toggle = false, ...attributes }, content) => {
+        let cancel: VoidFunction | undefined,
+            local = reactive({ morphing: false });
+
+        onCleanup(() => cancel?.());
+
+        let popup = overlay.popup({
+            canDismiss: () => !!cancel,
+            ondismiss: () => {
+                cancel?.();
+                cancel = undefined;
+            },
+            state,
+            target: surface
+        });
 
         return html`
             <div
                 class='tooltip'
                 ${attributes}
                 ${{
-                    class: () => state.active && '--active',
-                    onanimationcancel: morphing(false),
-                    onanimationend: morphing(false),
-                    onanimationstart: morphing(true),
-                    onclick: function(e) {
+                    ...popup,
+                    ...morphs(local),
+                    class: [
+                        popup.class,
+                        () => local.morphing && 'tooltip--morphing'
+                    ].flat(),
+                    ...(!manual && { onclick: function(this: HTMLElement, e: MouseEvent) {
                         let active = this === e.target || toggle ? !state.active : true;
 
                         cancel?.();
@@ -45,19 +63,7 @@ export default component<A>(
                         }
 
                         state.active = active;
-                    },
-                    ondocumentclick: function(this, event) {
-                        if (!this?.isConnected || !state.active) {
-                            return;
-                        }
-
-                        if (!this.contains(event.target as Node | null)) {
-                            state.active = false;
-                        }
-                    },
-                    ontransitioncancel: morphing(false),
-                    ontransitionend: morphing(false),
-                    ontransitionrun: morphing(true)
+                    } })
                 }}
             >
                 ${content}

package/src/components/tooltip/onhover.ts

@@ -1,18 +1,27 @@
 import { component, html, Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { content, morph, morphing } from './utilities';
+import { onCleanup, reactive } from '@esportsplus/reactivity';
+import overlay from '~/components/overlay';
+import { content, cool, morph, morphs, wait, warm, type Delay } from './utilities';
 
 
-type A = Attributes & {
+type A = Attributes & Options & {
     onanimationcancel?: never,
     onanimationend?: never,
     onanimationstart?: never,
+    ondocumentkeydown?: never,
+    onfocusin?: never,
+    onfocusout?: never,
     onmouseover?: never,
     onmouseout?: never,
     onpointermove?: never,
     ontransitioncancel?: never,
     ontransitionend?: never,
-    ontransitionrun?: never,
+    ontransitionrun?: never
+};
+
+type Options = {
+    // Keyboard focus never waits for the open delay.
+    delay?: Delay,
     state?: { active: boolean }
 };
 
@@ -71,83 +80,156 @@ function safe(element: HTMLElement, x: number, y: number) {
         left = Math.min(x, box.left),
         points = hull([[x, y], [box.left, box.top], [box.right, box.top], [box.right, box.bottom], [box.left, box.bottom]]),
         polygon = '',
-        style = element.style,
         top = Math.min(y, box.top);
 
     for (let i = 0, n = points.length; i < n; i++) {
         polygon += `${i ? ', ' : ''}${points[i][0] - left}px ${points[i][1] - top}px`;
     }
 
-    style.setProperty('--safe-area', `polygon(${polygon})`);
-    style.setProperty('--safe-height', `${Math.max(y, box.bottom) - top}px`);
-    style.setProperty('--safe-left', `${left - rect.left - element.clientLeft}px`);
-    style.setProperty('--safe-top', `${top - rect.top - element.clientTop}px`);
-    style.setProperty('--safe-width', `${Math.max(x, box.right) - left}px`);
+    return `
+        --safe-area: polygon(${polygon});
+        --safe-height: ${Math.max(y, box.bottom) - top}px;
+        --safe-left: ${left - rect.left - element.clientLeft}px;
+        --safe-top: ${top - rect.top - element.clientTop}px;
+        --safe-width: ${Math.max(x, box.right) - left}px;
+    `;
 }
 
 
-export default component<A>(
-    ({ state = reactive({ active: false }), ...attributes }, content) => {
-        let cancel: VoidFunction | undefined,
-            settled = morphing(false),
-            x = 0,
-            y = 0;
-
-        return html`
-            <div
-                class='tooltip'
-                ${attributes}
-                ${{
-                    class: () => state.active && '--active',
-                    onanimationcancel: settled,
-                    onanimationend: settled,
-                    onanimationstart: morphing(true),
-                    onmouseover: (e: MouseEvent) => {
-                        let element = e.currentTarget as HTMLElement;
-
-                        // Moving between the trigger and its own children isn't entering it.
-                        if (state.active || cancel || element.contains(e.relatedTarget as Node | null)) {
-                            return;
-                        }
-
-                        cancel = morph(element, () => {
-                            cancel = undefined;
-                            state.active = true;
-                        });
-                    },
-                    onmouseout: (e: MouseEvent) => {
-                        if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) {
-                            return;
-                        }
-
-                        cancel?.();
-                        cancel = undefined;
-                        state.active = false;
-                    },
-                    onpointermove: (e: PointerEvent) => {
-                        let element = e.currentTarget as HTMLElement;
-
-                        x = e.clientX;
-                        y = e.clientY;
-
-                        if (state.active) {
-                            safe(element, x, y);
-                        }
-                    },
-                    ontransitioncancel: settled,
-                    // Content animates in; re-measure once it settles so the cone targets its final position.
-                    ontransitionend: (e: TransitionEvent) => {
-                        settled(e);
-
-                        if (state.active) {
-                            safe(e.currentTarget as HTMLElement, x, y);
-                        }
-                    },
-                    ontransitionrun: morphing(true)
-                }}
-            >
-                ${content}
-            </div>
-        `;
+// The hover behaviour without an element of its own: spread it on any '.tooltip' element that holds a
+// '.tooltip-content' or '.tooltip-message'.
+function trigger({ delay: { close: closing = 0, open: opening = 0 } = {}, state = reactive({ active: false }) }: Options = {}) {
+    let leaving: ReturnType<typeof setTimeout> | undefined,
+        local = reactive({ instant: false, morphing: false, safe: '' }),
+        morphed: VoidFunction | undefined,
+        pending: VoidFunction | undefined,
+        x = 0,
+        y = 0;
+
+    function close() {
+        clearTimeout(leaving);
+        leaving = undefined;
+        morphed?.();
+        morphed = undefined;
+        pending?.();
+        pending = undefined;
+
+        if (opening && state.active) {
+            cool();
+        }
+
+        state.active = false;
     }
+
+    function open(element: HTMLElement) {
+        pending = undefined;
+        morphed = morph(element, () => {
+            morphed = undefined;
+            state.active = true;
+        });
+    }
+
+    // A wait that hasn't opened yet is dropped at once; only a showing tooltip waits out the close delay.
+    function release() {
+        pending?.();
+        pending = undefined;
+
+        if (!closing || !(state.active || morphed)) {
+            close();
+            return;
+        }
+
+        leaving ??= setTimeout(close, closing);
+    }
+
+    function stay() {
+        clearTimeout(leaving);
+        leaving = undefined;
+    }
+
+    onCleanup(() => {
+        clearTimeout(leaving);
+        morphed?.();
+        pending?.();
+    });
+
+    let handlers = morphs(local),
+        popup = overlay.popup({ canDismiss: () => !!(pending || morphed), ondismiss: close, state, target: content });
+
+    return {
+        ...popup,
+        ...handlers,
+        class: [
+            popup.class,
+            () => state.active && local.instant && 'tooltip--instant',
+            () => local.morphing && 'tooltip--morphing'
+        ].flat(),
+        onfocusin: (e: FocusEvent) => {
+            stay();
+
+            if (state.active || morphed || !(e.target as Element).matches(':focus-visible')) {
+                return;
+            }
+
+            pending?.();
+            local.instant = false;
+            open(e.currentTarget as HTMLElement);
+        },
+        onfocusout: (e: FocusEvent) => {
+            if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) {
+                release();
+            }
+        },
+        onmouseover: (e: MouseEvent) => {
+            let element = e.currentTarget as HTMLElement;
+
+            // Moving between the trigger and its own children isn't entering it.
+            if (element.contains(e.relatedTarget as Node | null)) {
+                return;
+            }
+
+            stay();
+
+            if (state.active || morphed || pending) {
+                return;
+            }
+
+            local.instant = opening > 0 && warm();
+            pending = wait(opening, () => open(element));
+        },
+        onmouseout: (e: MouseEvent) => {
+            if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) {
+                release();
+            }
+        },
+        onpointermove: (e: PointerEvent) => {
+            let element = e.currentTarget as HTMLElement;
+
+            x = e.clientX;
+            y = e.clientY;
+
+            if (state.active) {
+                local.safe = safe(element, x, y) ?? local.safe;
+            }
+        },
+        // Content animates in; re-measure once it settles so the cone targets its final position.
+        ontransitionend: (e: TransitionEvent) => {
+            handlers.ontransitionend(e);
+
+            if (state.active) {
+                local.safe = safe(e.currentTarget as HTMLElement, x, y) ?? local.safe;
+            }
+        },
+        style: () => local.safe
+    };
+}
+
+
+export default component(
+    ({ delay, state, ...attributes }: A, content) => html`
+        <div class='tooltip' ${attributes} ${trigger({ delay, state })}>
+            ${content}
+        </div>
+    `,
+    { trigger }
 );

package/src/components/tooltip/scss/_menu.scss

@@ -0,0 +1,352 @@
+@use '/shared';
+@use '/tokens';
+
+// 'tooltip.menu'; the root also carries '.tooltip', for its stacking and positioning.
+.tooltip--menu {
+    display: inline-block;
+
+    // Root panel
+    > .tooltip-menu-panel:not(.tooltip-menu-panel--expand) {
+        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;
+
+        @include tokens.state(active) {
+            opacity: 1;
+            transition: opacity var(--close-duration) var(--open-timing-function);
+            visibility: visible;
+        }
+    }
+
+    // Qualified twice so it outranks the tooltip content it composes, and classes paired onto that content.
+    > .tooltip-menu-panel.tooltip-menu-panel--expand {
+        // Keep the menu's surface tokens when composing the generic tooltip content.
+        --background: inherit;
+        --border-radius: inherit;
+        --box-shadow: inherit;
+        // Keeps the resting clip outside the menu's shadow.
+        --expand-bleed: 24px;
+        // Closing swaps this delay: the shape crossfades back into the trigger once it has
+        // nearly landed. Items leave together at once.
+        --expand-close-fade-delay: 0.2s;
+        --expand-content-delay: 0.06s;
+        --expand-content-duration: 0.15s;
+        --expand-content-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --expand-duration: 0.4s;
+        --expand-fade-delay: var(--expand-close-fade-delay);
+        --expand-fade-duration: 0.15s;
+        --expand-offset: 8px;
+        --expand-shift: 0;
+        --expand-stagger: 0.02s;
+        // Spring (damping 34, stiffness 380, mass 0.8) sampled into linear().
+        --expand-timing-function: linear(0, 0.072, 0.22, 0.382, 0.529, 0.651, 0.747, 0.82, 0.874, 0.913, 0.94, 0.96, 0.973, 0.982, 0.988, 0.992, 0.995, 0.997, 0.998, 0.999, 1);
+        --offset: 0px;
+        --scale: 1;
+        // Cancels the '100%' every direction pushes the tooltip past the trigger by, so it
+        // lines up with the trigger's own edges instead.
+        --spacer: -100%;
+        --width: inherit;
+        background: transparent;
+        box-shadow: none;
+        clip-path: inset(var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left) round var(--morph-radius));
+        overflow: visible;
+        transform: translateX(var(--shift-x, 0px));
+        transition:
+            clip-path var(--expand-duration) var(--expand-timing-function),
+            opacity var(--expand-fade-duration) linear var(--expand-fade-delay);
+
+        @include tokens.state(active) {
+            --expand-fade-delay: 0s;
+            clip-path: inset(calc(var(--expand-bleed) * -1) round calc(var(--border-radius) + var(--expand-bleed)));
+
+            &::before {
+                border-radius: var(--border-radius);
+                inset: 0;
+            }
+
+            > :not(.highlight) {
+                animation: tooltip-menu-expand-in var(--expand-content-duration) var(--expand-content-timing-function) calc(var(--expand-content-delay) + var(--index, 0) * var(--expand-stagger)) backwards;
+                opacity: 1;
+
+                // Text-only items and dividers just fade.
+                > * {
+                    animation: tooltip-menu-expand-slide var(--expand-content-duration) var(--expand-content-timing-function) calc(var(--expand-content-delay) + var(--index, 0) * var(--expand-stagger)) backwards;
+                }
+            }
+
+            // The reveal is finished; child panels can now extend beyond the root.
+            &.tooltip-menu-panel--settled {
+                clip-path: none;
+            }
+        }
+
+        &::before {
+            background: var(--background);
+            border-radius: var(--morph-radius);
+            box-shadow: var(--box-shadow);
+            content: '';
+            inset: var(--morph-top) var(--morph-right) var(--morph-bottom) var(--morph-left);
+            position: absolute;
+            transition:
+                border-radius var(--expand-duration) var(--expand-timing-function),
+                inset var(--expand-duration) var(--expand-timing-function);
+            z-index: -1;
+        }
+
+        // Items animate rather than transition so their own transitions (a link's colour) survive.
+        // Their boxes never move, only fade, so a 'highlight' measures them where they land even
+        // mid-cascade; it places itself with 'translate', so it arrives with the panel instead.
+        // Closing fades them out together; the shrinking shape carries the motion.
+        > :not(.highlight) {
+            animation: tooltip-menu-expand-out var(--expand-content-duration) var(--expand-content-timing-function);
+            opacity: 0;
+        }
+
+        // Cascade order.
+        @for $i from 1 through 12 {
+            > :nth-child(#{$i}) {
+                --index: #{$i - 1};
+            }
+        }
+
+        @each $directions, $shift in (
+            ('e', 'en', 'es', 'nw', 'sw'): calc(var(--expand-offset) * -1) 0,
+            ('n'): 0 var(--expand-offset),
+            ('s'): 0 calc(var(--expand-offset) * -1),
+            ('ne', 'se', 'w', 'wn', 'ws'): var(--expand-offset) 0
+        ) {
+            @each $direction in $directions {
+                &.tooltip-content--#{$direction} {
+                    --expand-shift: #{$shift};
+                }
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            --expand-content-delay: 0s;
+            --expand-content-duration: 0s;
+            --expand-fade-delay: 0s;
+            --expand-stagger: 0s;
+
+            &,
+            &::before {
+                transition-duration: 0s;
+            }
+        }
+    }
+
+    // After the expanding root's own values, which it overrides at the same specificity.
+    &.tooltip--instant > .tooltip-menu-panel--expand {
+        --expand-content-delay: 0s;
+        --expand-content-duration: 0s;
+        --expand-duration: 0s;
+        --expand-fade-delay: 0s;
+        --expand-fade-duration: 0s;
+        --expand-stagger: 0s;
+    }
+}
+
+.tooltip-menu {
+    &-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;
+
+        // A branch panel's header points down into the panel it heads.
+        &--down {
+            rotate: 45deg;
+        }
+    }
+
+    &-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;
+    }
+
+    &-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;
+        text-decoration: none;
+        transition: background var(--close-duration) var(--open-timing-function);
+        width: 100%;
+
+        &:focus,
+        &:hover {
+            background: var(--background-hover);
+        }
+
+        // Doubled so it outranks a class paired onto the item, such as '.link'.
+        &.tooltip-menu-item--danger {
+            color: var(--color-danger);
+        }
+
+        &:disabled,
+        &[aria-disabled='true'] {
+            background: transparent;
+            color: var(--color-disabled);
+            cursor: not-allowed;
+        }
+    }
+
+    &-label,
+    &-title {
+        @extend %text-truncate;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &-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 {
+            @extend %layer;
+            background: var(--scrim);
+            content: '';
+            opacity: 0;
+            transition: opacity var(--open-duration) var(--open-timing-function);
+            z-index: 1;
+        }
+
+        &--covered::after {
+            cursor: pointer;
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    // 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;
+
+        @include tokens.state(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;
+
+            &.tooltip-menu-panel--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: var(--title-bold-opacity);
+        }
+
+        &-regular {
+            opacity: var(--title-regular-opacity);
+        }
+    }
+
+    &-trigger {
+        cursor: pointer;
+    }
+}
+
+@keyframes tooltip-menu-expand-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes tooltip-menu-expand-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes tooltip-menu-expand-slide {
+    from {
+        translate: var(--expand-shift);
+    }
+}