@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/overlay/popup.ts

@@ -0,0 +1,214 @@
+import { effect, reactive } from '@esportsplus/reactivity';
+import type { Attributes } from '@esportsplus/template';
+import { finished } from '~/shared/animation';
+
+
+type State = { active: boolean };
+
+type Lifecycle = {
+    activeClass?: boolean;
+    animations?: () => HTMLElement;
+    close?: VoidFunction;
+    closed?: VoidFunction;
+    open: VoidFunction;
+    state: State;
+    subtree?: boolean;
+};
+
+type Popup = {
+    // Pending hover delays can also be dismissed before a surface opens.
+    canDismiss?: () => boolean;
+    contains?: (root: HTMLElement, node: Node | null) => boolean;
+    dismiss?: boolean;
+    // Clicks on matching content close after its own click handler has run.
+    dismissOn?: string;
+    escape?: boolean;
+    ondismiss?: (reason: 'escape' | 'outside') => void;
+    onclosed?: VoidFunction;
+    onopen?: VoidFunction;
+    popover?: boolean;
+    state?: State;
+    target?: (root: HTMLElement) => HTMLElement | undefined;
+};
+
+
+// Both dialogs and popups wait for their finite exit animations and invalidate an earlier close on reopening.
+function lifecycle(element: HTMLElement, { activeClass = true, animations, close, closed, open, state, subtree = false }: Lifecycle) {
+    let generation = 0,
+        opened = false,
+        stop = effect(() => {
+            let active = state.active,
+                current = ++generation;
+
+            if (active) {
+                open();
+                opened = true;
+
+                if (activeClass) {
+                    element.classList.add('--active');
+                }
+
+                return;
+            }
+
+            if (activeClass) {
+                element.classList.remove('--active');
+            }
+
+            close?.();
+
+            if (!opened) {
+                return;
+            }
+
+            void finished(animations?.() ?? element, { subtree }).then(() => {
+                if (generation === current && !state.active) {
+                    opened = false;
+                    closed?.();
+                }
+            });
+        });
+
+    return () => {
+        generation++;
+        stop();
+    };
+}
+
+
+let opened: HTMLElement[] = [];
+
+
+// Spread on a popup's host. Inline surfaces retain their positioning and morph CSS; popovers use the top layer.
+function popup({ canDismiss, contains = (root, node) => !!node && root.contains(node), dismiss = true, dismissOn, escape = true, ondismiss, onclosed, onopen, popover = false, state = reactive({ active: false }), target = (root) => root }: Popup = {}): Attributes {
+    let root: HTMLElement | undefined,
+        stop: VoidFunction | undefined;
+
+    function remove() {
+        if (root) {
+            let index = opened.indexOf(root);
+
+            if (index !== -1) {
+                opened.splice(index, 1);
+            }
+        }
+    }
+
+    function hide() {
+        let element = root && target(root);
+
+        if (popover && element?.matches(':popover-open')) {
+            element.hidePopover();
+        }
+
+        onclosed?.();
+    }
+
+    function dismissable() {
+        return state.active || !!canDismiss?.();
+    }
+
+    function dismissPopup(reason: 'escape' | 'outside') {
+        ondismiss?.(reason);
+        state.active = false;
+    }
+
+    return {
+        // Inline hosts compose this binding with their own class bindings through the template runtime.
+        class: !popover ? () => state.active && '--active' : undefined,
+        onconnect: (element: HTMLElement) => {
+            root = element;
+            stop = lifecycle(element, {
+                activeClass: popover,
+                animations: () => target(element) ?? element,
+                close: () => {
+                    remove();
+                    let surface = target(element);
+
+                    if (surface) {
+                        surface.inert = true;
+                    }
+                },
+                closed: hide,
+                open: () => {
+                    let surface = target(element),
+                        previous = document.activeElement;
+
+                    if (popover && surface && !surface.matches(':popover-open')) {
+                        surface.popover = 'manual';
+                        surface.inert = true;
+                        surface.showPopover();
+                    }
+
+                    if (surface) {
+                        surface.inert = false;
+                    }
+
+                    onopen?.();
+
+                    // Commit the closed styles after placement, before lifecycle adds '--active'.
+                    if (popover) {
+                        surface?.getBoundingClientRect();
+                    }
+
+                    if (previous instanceof HTMLElement && previous !== document.activeElement) {
+                        previous.focus({ preventScroll: true });
+                    }
+
+                    remove();
+                    opened.push(element);
+                },
+                state,
+                subtree: true
+            });
+        },
+        ondisconnect: () => {
+            stop?.();
+            remove();
+            hide();
+            root = undefined;
+        },
+        // Every popup sees every document event, so the cheap open check comes before any tree walk.
+        ...(dismiss && {
+            ondocumentpointerdown: (event: PointerEvent) => {
+                if (root && dismissable() && !contains(root, event.target as Node | null)) {
+                    dismissPopup('outside');
+                }
+            }
+        }),
+        ...(dismissOn && {
+            ondocumentclick: (event: MouseEvent) => {
+                if (!root || !dismissable()) {
+                    return;
+                }
+
+                let match = (event.target as Element | null)?.closest?.(dismissOn);
+
+                if (match && root.contains(match)) {
+                    dismissPopup('outside');
+                }
+            }
+        }),
+        ...(escape && {
+            ondocumentkeydown: (event: KeyboardEvent) => {
+                if (event.key !== 'Escape' || event.defaultPrevented || !root || !dismissable()) {
+                    return;
+                }
+
+                let modal = document.activeElement?.closest('dialog:modal') ?? document.querySelector('dialog:modal');
+
+                if ((modal && !modal.contains(root) && !popover) || (opened.length && opened[opened.length - 1] !== root)) {
+                    return;
+                }
+
+                event.preventDefault();
+                dismissPopup('escape');
+            }
+        })
+    };
+}
+
+
+export { lifecycle };
+export default popup;
+export type { Popup };

package/src/components/overlay/scss/index.scss

@@ -1,18 +1,390 @@
-@use '/lib';
+@use '/shared';
 @use '/tokens';
+@use 'variables';
 
-.overlay {
-    @include lib.position(fixed, full);
-    cursor: default;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
+// Zero specificity so paired classes (e.g. '.card') still win over the dialog UA reset.
+:where(dialog.overlay) {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    inset: 0;
+    max-height: calc(100% - (var(--margin-vertical) * 2));
+    max-width: 100%;
+    padding: 0;
+    // Only non-modal overlays stay out of the top layer and need it.
     z-index: 9;
+}
+
+// Outranks pairings like '.card { position: relative }'. Modal overlays pin to the viewport; non-modal ones
+// sit in their positioned container, which may be the viewport too via an inline 'position: fixed'.
+dialog.overlay {
+    position: fixed;
+
+    &:not(:modal) {
+        position: absolute;
+    }
 
+    // A flow overlay occupies a row in its parent instead of covering that parent's content.
+    &.overlay--flow:not(:modal) {
+        align-self: start;
+        inset: auto;
+        margin: 0;
+        max-height: none;
+        max-width: none;
+        min-height: 0;
+        position: relative;
+        width: 100%;
+        z-index: auto;
+
+        // Keep its natural height available to the parent's collapsing grid while it is closed.
+        &:not([open]) {
+            display: block;
+            visibility: hidden;
+        }
+    }
+}
+
+.overlay {
+    @extend %anchor;
+    margin: auto;
+    transition:
+        filter var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        scale var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function),
+        translate var(--transition-duration) var(--transition-timing-function);
+    transform-origin: center;
+    width: min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)));
 
     @include tokens.state(inactive) {
+        opacity: var(--opacity);
+        pointer-events: none;
+        scale: var(--scale);
+        translate: var(--translate);
+
+        &::backdrop {
+            opacity: 0;
+        }
+
         input[type='password'] {
             display: none;
         }
     }
+
+    &::backdrop {
+        background: var(--backdrop);
+        transition: opacity var(--transition-duration) var(--transition-timing-function);
+    }
+
+    // Fades with the drag, so the page shows through as the overlay leaves.
+    #{tokens.state(active)}::backdrop {
+        opacity: calc(1 - var(--progress, 0));
+    }
+
+    // Only the lowest modal backdrop dims the page; the layers above it dim what they cover themselves.
+    &.overlay--stacked::backdrop {
+        opacity: 0;
+    }
+
+
+    @each $placement in shared.$anchor-placements {
+        &--#{$placement} {
+            @extend %anchor--#{$placement};
+        }
+    }
+
+    &--alert::backdrop,
+    &--blur::backdrop {
+        backdrop-filter: blur(var(--blur));
+    }
+
+    &--e,
+    &--w {
+        height: calc(100% - (var(--margin-vertical) * 2));
+    }
+
+    // Pinned to the edges its placement names, squaring the corners that meet them unless floating; a corner
+    // placement meets two.
+    &--e,
+    &--ne,
+    &--se {
+        margin-inline-end: var(--margin-horizontal);
+
+        &:not(.overlay--floating) {
+            border-end-end-radius: 0;
+            border-start-end-radius: 0;
+        }
+    }
+
+    &--n,
+    &--ne,
+    &--nw {
+        margin-block-start: var(--margin-vertical);
+
+        &:not(.overlay--floating) {
+            border-start-end-radius: 0;
+            border-start-start-radius: 0;
+        }
+    }
+
+    &--s,
+    &--se,
+    &--sw {
+        margin-block-end: var(--margin-vertical);
+
+        &:not(.overlay--floating) {
+            border-end-end-radius: 0;
+            border-end-start-radius: 0;
+        }
+    }
+
+    &--w,
+    &--nw,
+    &--sw {
+        margin-inline-start: var(--margin-horizontal);
+
+        &:not(.overlay--floating) {
+            border-end-start-radius: 0;
+            border-start-start-radius: 0;
+        }
+    }
+
+    &--e {
+        transform-origin: right;
+    }
+
+    &--n {
+        transform-origin: top;
+    }
+
+    &--ne {
+        transform-origin: top right;
+    }
+
+    &--nw {
+        transform-origin: top left;
+    }
+
+    &--s {
+        transform-origin: bottom;
+    }
+
+    &--se {
+        transform-origin: bottom right;
+    }
+
+    &--sw {
+        transform-origin: bottom left;
+    }
+
+    &--w {
+        transform-origin: left;
+    }
+
+
+    // '--depth' is how many layers are open above this one, fractional while the top one is dragged away.
+    &.overlay--covered {
+        filter: brightness(calc(1 - min(var(--depth), 1) * var(--stack-dim)));
+        scale: pow(var(--stack-scale), var(--depth));
+        translate: var(--stack-translate);
+    }
+
+    &.overlay--draggable {
+        cursor: grab;
+        outline: none;
+        touch-action: none;
+        user-select: none;
+
+        // Touch scrolls the content, so only the handle drags.
+        &.overlay--scrollable {
+            touch-action: auto;
+        }
+
+        // Let non-scrolling surfaces keep their shadows outside the box.
+        &:not(.overlay--scrollable):is(.overlay--e, .overlay--n, .overlay--ne, .overlay--nw, .overlay--s, .overlay--se, .overlay--sw, .overlay--w) {
+            overflow: visible;
+        }
+    }
+
+    // Border paint reaches outside a scrolling surface without adding overflow or using its pseudo-elements.
+    // Matching width and outset keeps the fill entirely outside the original border box.
+    &.overlay--edge-fill {
+        border-image-source: linear-gradient(var(--edge-background), var(--edge-background));
+        border-image-slice: 1;
+        border-image-width: var(--edge-fill);
+        border-image-outset: var(--edge-fill);
+        border-image-repeat: stretch;
+
+        &.overlay--e {
+            --edge-fill: 0 50vw 0 0;
+        }
+
+        &.overlay--n {
+            --edge-fill: 50vh 0 0 0;
+        }
+
+        &.overlay--ne {
+            --edge-fill: 50vh 50vw 0 0;
+        }
+
+        &.overlay--nw {
+            --edge-fill: 50vh 0 0 50vw;
+        }
+
+        &.overlay--s {
+            --edge-fill: 0 0 50vh 0;
+        }
+
+        &.overlay--se {
+            --edge-fill: 0 50vw 50vh 0;
+        }
+
+        &.overlay--sw {
+            --edge-fill: 0 0 50vh 50vw;
+        }
+
+        &.overlay--w {
+            --edge-fill: 0 0 0 50vw;
+        }
+    }
+
+    // Always open; '--active' expands it. Rows keep their width and are clipped rather than reflowed, so the
+    // collapsed rail shows whatever leads each row (usually an icon).
+    &.overlay--rail {
+        overflow: hidden;
+        transition: width var(--transition-duration) var(--transition-timing-function);
+        white-space: nowrap;
+        width: min(var(--width-closed), calc(100% - (var(--margin-horizontal) * 2)));
+
+        @include tokens.state(active) {
+            width: min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)));
+        }
+
+        @include tokens.state(inactive) {
+            opacity: 1;
+            pointer-events: auto;
+            scale: 1;
+            translate: none;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
+
+    // Fades with the drag, in step with its backdrop.
+    &.overlay--dragging {
+        cursor: grabbing;
+        opacity: calc(1 - var(--progress, 0));
+    }
+
+    // Following the finger: the layers beneath the dragged one track it too, so neither may ease.
+    &.overlay--dragging,
+    &.overlay--tracking {
+        &,
+        &::backdrop {
+            transition: none;
+        }
+    }
+
+
+    &-handle {
+        background: var(--handle-color);
+        border-radius: var(--handle-thickness);
+        height: var(--handle-thickness);
+        position: absolute;
+        touch-action: none;
+        width: var(--handle-length);
+
+        .overlay:not(.overlay--e, .overlay--n, .overlay--ne, .overlay--nw, .overlay--s, .overlay--se, .overlay--sw, .overlay--w) > & {
+            display: none;
+        }
+
+        .overlay--e > &,
+        .overlay--w > & {
+            height: var(--handle-length);
+            top: 50%;
+            translate: 0 -50%;
+            width: var(--handle-thickness);
+        }
+
+        .overlay--e > & {
+            left: var(--handle-offset);
+        }
+
+        .overlay--n > &,
+        .overlay--ne > &,
+        .overlay--nw > &,
+        .overlay--s > &,
+        .overlay--se > &,
+        .overlay--sw > & {
+            left: 50%;
+            translate: -50% 0;
+        }
+
+        .overlay--n > &,
+        .overlay--ne > &,
+        .overlay--nw > & {
+            bottom: var(--handle-offset);
+        }
+
+        .overlay--s > &,
+        .overlay--se > &,
+        .overlay--sw > & {
+            top: var(--handle-offset);
+        }
+
+        .overlay--w > & {
+            right: var(--handle-offset);
+        }
+    }
+
+    // Every placement fades in place instead of travelling.
+    @media (prefers-reduced-motion: reduce) {
+        --opacity: 0;
+        --scale: 1;
+        --translate: 0px;
+
+        & {
+            transition:
+                filter var(--transition-duration) var(--transition-timing-function),
+                opacity var(--transition-duration) var(--transition-timing-function);
+        }
+
+        &::backdrop {
+            transition: opacity var(--transition-duration) var(--transition-timing-function);
+        }
+
+        &.overlay--covered {
+            scale: none;
+            translate: none;
+        }
+    }
+}
+
+// Opt-in: a direct child of <body> recedes behind modal overlays, and a direct child of a non-modal overlay's
+// container behind that overlay.
+.overlay-page {
+    transform-origin: top;
+    transition:
+        filter var(--transition-duration) var(--transition-timing-function),
+        scale var(--transition-duration) var(--transition-timing-function),
+        translate var(--transition-duration) var(--transition-timing-function);
+
+    .overlay-host--active > & {
+        filter: brightness(calc(1 - min(var(--overlay-depth), 1) * var(--dim)));
+        scale: calc(1 - min(var(--overlay-depth), 1) * (1 - var(--scale)));
+        translate: 0 calc(min(var(--overlay-depth), 1) * var(--peek));
+    }
+
+    .overlay-host--dragging > & {
+        transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .overlay-host--active > & {
+            scale: none;
+            translate: none;
+        }
+    }
 }