@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/overlay-service/global-position.d.ts

@@ -0,0 +1,34 @@
+import type { OverlayReference, PositionStrategy } from "./overlay-strategy.js";
+export declare class GlobalPositionStrategy implements PositionStrategy {
+    private _overlayRef;
+    private _cssPosition;
+    private _topOffset;
+    private _bottomOffset;
+    private _alignItems;
+    private _xPosition;
+    private _xOffset;
+    private _width;
+    private _height;
+    private _isDisposed;
+    attach(overlayRef: OverlayReference): void;
+    /** Top offset (clears bottom). */
+    top(value?: string): this;
+    left(value?: string): this;
+    /** Bottom offset (clears top). */
+    bottom(value?: string): this;
+    right(value?: string): this;
+    /** Offset from the start edge (left in LTR, right in RTL). */
+    start(value?: string): this;
+    /** Offset from the end edge. */
+    end(value?: string): this;
+    /** @deprecated Angular: use the overlay's `width` config. */
+    width(value?: string): this;
+    /** @deprecated Angular: use the overlay's `height` config. */
+    height(value?: string): this;
+    centerHorizontally(offset?: string): this;
+    centerVertically(offset?: string): this;
+    apply(): void;
+    dispose(): void;
+}
+/** A new `GlobalPositionStrategy` (Angular `createGlobalPositionStrategy`). */
+export declare const createGlobalPositionStrategy: () => GlobalPositionStrategy;

package/overlay-service/global-position.js

@@ -0,0 +1,154 @@
+const wrapperClass = "cdk-global-overlay-wrapper";
+export class GlobalPositionStrategy {
+    _overlayRef = null;
+    _cssPosition = "static";
+    _topOffset = "";
+    _bottomOffset = "";
+    _alignItems = "";
+    _xPosition = "";
+    _xOffset = "";
+    _width = "";
+    _height = "";
+    _isDisposed = false;
+    attach(overlayRef) {
+        const config = overlayRef.getConfig();
+        this._overlayRef = overlayRef;
+        if (this._width && !config.width)
+            overlayRef.updateSize({ width: this._width });
+        if (this._height && !config.height)
+            overlayRef.updateSize({ height: this._height });
+        overlayRef.hostElement.classList.add(wrapperClass);
+        this._isDisposed = false;
+    }
+    /** Top offset (clears bottom). */
+    top(value = "") {
+        this._bottomOffset = "";
+        this._topOffset = value;
+        this._alignItems = "flex-start";
+        return this;
+    }
+    left(value = "") {
+        this._xOffset = value;
+        this._xPosition = "left";
+        return this;
+    }
+    /** Bottom offset (clears top). */
+    bottom(value = "") {
+        this._topOffset = "";
+        this._bottomOffset = value;
+        this._alignItems = "flex-end";
+        return this;
+    }
+    right(value = "") {
+        this._xOffset = value;
+        this._xPosition = "right";
+        return this;
+    }
+    /** Offset from the start edge (left in LTR, right in RTL). */
+    start(value = "") {
+        this._xOffset = value;
+        this._xPosition = "start";
+        return this;
+    }
+    /** Offset from the end edge. */
+    end(value = "") {
+        this._xOffset = value;
+        this._xPosition = "end";
+        return this;
+    }
+    /** @deprecated Angular: use the overlay's `width` config. */
+    width(value = "") {
+        if (this._overlayRef)
+            this._overlayRef.updateSize({ width: value });
+        else
+            this._width = value;
+        return this;
+    }
+    /** @deprecated Angular: use the overlay's `height` config. */
+    height(value = "") {
+        if (this._overlayRef)
+            this._overlayRef.updateSize({ height: value });
+        else
+            this._height = value;
+        return this;
+    }
+    centerHorizontally(offset = "") {
+        this.left(offset);
+        this._xPosition = "center";
+        return this;
+    }
+    centerVertically(offset = "") {
+        this.top(offset);
+        this._alignItems = "center";
+        return this;
+    }
+    apply() {
+        // Applied asynchronously: the overlay may be gone.
+        if (!this._overlayRef || !this._overlayRef.hasAttached())
+            return;
+        const styles = this._overlayRef.overlayElement.style;
+        const parentStyles = this._overlayRef.hostElement.style;
+        const config = this._overlayRef.getConfig();
+        const { width, height, maxWidth, maxHeight } = config;
+        const shouldBeFlushHorizontally = (width === "100%" || width === "100vw") && (!maxWidth || maxWidth === "100%" || maxWidth === "100vw");
+        const shouldBeFlushVertically = (height === "100%" || height === "100vh") && (!maxHeight || maxHeight === "100%" || maxHeight === "100vh");
+        const xPosition = this._xPosition;
+        const xOffset = this._xOffset;
+        const isRtl = this._overlayRef.getDirection() === "rtl";
+        let marginLeft = "", marginRight = "", justifyContent = "";
+        if (shouldBeFlushHorizontally)
+            justifyContent = "flex-start";
+        else if (xPosition === "center") {
+            justifyContent = "center";
+            if (isRtl)
+                marginRight = xOffset;
+            else
+                marginLeft = xOffset;
+        }
+        else if (isRtl) {
+            if (xPosition === "left" || xPosition === "end") {
+                justifyContent = "flex-end";
+                marginLeft = xOffset;
+            }
+            else if (xPosition === "right" || xPosition === "start") {
+                justifyContent = "flex-start";
+                marginRight = xOffset;
+            }
+        }
+        else if (xPosition === "left" || xPosition === "start") {
+            justifyContent = "flex-start";
+            marginLeft = xOffset;
+        }
+        else if (xPosition === "right" || xPosition === "end") {
+            justifyContent = "flex-end";
+            marginRight = xOffset;
+        }
+        styles.position = this._cssPosition;
+        styles.marginLeft = shouldBeFlushHorizontally ? "0" : marginLeft;
+        styles.marginTop = shouldBeFlushVertically ? "0" : this._topOffset;
+        styles.marginBottom = this._bottomOffset;
+        styles.marginRight = shouldBeFlushHorizontally ? "0" : marginRight;
+        parentStyles.justifyContent = justifyContent;
+        parentStyles.alignItems = shouldBeFlushVertically ? "flex-start" : this._alignItems;
+    }
+    dispose() {
+        if (this._isDisposed || !this._overlayRef)
+            return;
+        const styles = this._overlayRef.overlayElement.style;
+        const parent = this._overlayRef.hostElement;
+        const parentStyles = parent.style;
+        parent.classList.remove(wrapperClass);
+        parentStyles.justifyContent =
+            parentStyles.alignItems =
+                styles.marginTop =
+                    styles.marginBottom =
+                        styles.marginLeft =
+                            styles.marginRight =
+                                styles.position =
+                                    "";
+        this._overlayRef = null;
+        this._isDisposed = true;
+    }
+}
+/** A new `GlobalPositionStrategy` (Angular `createGlobalPositionStrategy`). */
+export const createGlobalPositionStrategy = () => new GlobalPositionStrategy();

package/overlay-service/index.d.ts

@@ -0,0 +1,15 @@
+import { type CreateOverlayOptions, type OverlayConfig, type OverlayRef } from "./overlay-ref.js";
+import { OverlayPositionBuilder } from "./overlay-position-builder.js";
+import { ScrollStrategyOptions } from "./scroll-strategies.js";
+export declare class Overlay {
+    readonly scrollStrategies: ScrollStrategyOptions;
+    private readonly _options;
+    private _positionBuilder;
+    constructor(options?: CreateOverlayOptions);
+    /** Create an overlay (browser only). */
+    create(config?: Partial<OverlayConfig>): OverlayRef;
+    /** Position strategy builder. */
+    position(): OverlayPositionBuilder;
+}
+/** The shared `Overlay` service (created on first use). */
+export declare const overlayService: () => Overlay;

package/overlay-service/index.js

@@ -0,0 +1,27 @@
+// The overlay service (Angular CDK `Overlay`): create overlays, build position strategies, pick
+// scroll strategies. Deviation: a lazily created singleton (`overlayService()`) instead of DI;
+// `new Overlay(options)` for custom container / dispatchers.
+//
+// Ported from @angular/cdk/overlay (overlay.ts), MIT, © Google LLC.
+import { createOverlayRef } from "./overlay-ref.js";
+import { OverlayPositionBuilder } from "./overlay-position-builder.js";
+import { ScrollStrategyOptions } from "./scroll-strategies.js";
+export class Overlay {
+    scrollStrategies = new ScrollStrategyOptions();
+    _options;
+    _positionBuilder;
+    constructor(options = {}) {
+        this._options = options;
+    }
+    /** Create an overlay (browser only). */
+    create(config) {
+        return createOverlayRef(config, this._options);
+    }
+    /** Position strategy builder. */
+    position() {
+        return (this._positionBuilder ??= new OverlayPositionBuilder());
+    }
+}
+let shared;
+/** The shared `Overlay` service (created on first use). */
+export const overlayService = () => (shared ??= new Overlay());

package/overlay-service/overlay-container.d.ts

@@ -0,0 +1,27 @@
+export declare class OverlayContainer {
+    protected _containerElement: HTMLElement | undefined;
+    protected _document: Document;
+    constructor(document_?: Document);
+    /** Remove the container. */
+    ngOnDestroy(): void;
+    /** The container element (created on first call). */
+    getContainerElement(): HTMLElement;
+    /** Move the container to the end of its parent (stack above overlays opened before it). */
+    bringToFront(): void;
+    protected _createContainer(): void;
+}
+/** An `OverlayContainer` that follows the fullscreen element (overlays stay visible in fullscreen). */
+export declare class FullscreenOverlayContainer extends OverlayContainer {
+    private _fullScreenEventName;
+    private _cleanupFullScreenListener;
+    ngOnDestroy(): void;
+    protected _createContainer(): void;
+    private _adjustParentForFullscreenChange;
+    private _getEventName;
+    /** The current fullscreen element, if any. */
+    getFullscreenElement(): Element | null;
+}
+/** The shared overlay container (created on first use). */
+export declare const overlayContainer: () => OverlayContainer;
+/** Replace the shared container (e.g. with a `FullscreenOverlayContainer`); Angular's DI override. */
+export declare function provideOverlayContainer(container: OverlayContainer): void;

package/overlay-service/overlay-container.js

@@ -0,0 +1,93 @@
+// The container Angular-style overlays render into (Angular CDK `OverlayContainer`; the div overlay
+// layer, never the native top layer): one `<div data-rivet-portal class="cdk-overlay-container">` at the
+// end of body, created on first use.
+// Deviation (one overlay layer): the container is a portal host like the React Aria-style overlays'
+// (`<Portal>` hosts, `div[data-rivet-portal]`) and `bringToFront()` (called on every attach) moves it back
+// to the end of its parent, so the most recently opened overlay of either kind stacks last; both share
+// the z-index base 100000 (`overlay.css`, `overlayPosition`). `FullscreenOverlayContainer` moves it into the fullscreen element while one is active.
+// Styles: `@rivetjs/cdk/overlay.css` (Angular loads them on first use; Rivet ships a stylesheet —
+// no style injection, CSP-safe).
+//
+// Ported from @angular/cdk/overlay (overlay-container.ts, fullscreen-overlay-container.ts), MIT, © Google LLC.
+export class OverlayContainer {
+    _containerElement;
+    _document;
+    constructor(document_ = document) {
+        this._document = document_;
+    }
+    /** Remove the container. */
+    ngOnDestroy() {
+        this._containerElement?.remove();
+        this._containerElement = undefined;
+    }
+    /** The container element (created on first call). */
+    getContainerElement() {
+        if (!this._containerElement || !this._containerElement.isConnected)
+            this._createContainer();
+        return this._containerElement;
+    }
+    /** Move the container to the end of its parent (stack above overlays opened before it). */
+    bringToFront() {
+        const container = this._containerElement;
+        const parent = container?.parentNode;
+        if (container && parent && container.nextSibling)
+            parent.appendChild(container);
+    }
+    _createContainer() {
+        const containerClass = "cdk-overlay-container";
+        // Server-rendered or stale test containers of another instance (Angular removes the opposite platform's).
+        for (const old of this._document.querySelectorAll(`.${containerClass}[platform="server"], .${containerClass}[platform="test"]`))
+            old.remove();
+        const container = this._document.createElement("div");
+        container.setAttribute("data-rivet-portal", "");
+        container.classList.add(containerClass);
+        this._document.body.appendChild(container);
+        this._containerElement = container;
+    }
+}
+/** An `OverlayContainer` that follows the fullscreen element (overlays stay visible in fullscreen). */
+export class FullscreenOverlayContainer extends OverlayContainer {
+    _fullScreenEventName;
+    _cleanupFullScreenListener;
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._cleanupFullScreenListener?.();
+    }
+    _createContainer() {
+        const eventName = this._getEventName();
+        super._createContainer();
+        this._adjustParentForFullscreenChange();
+        if (eventName) {
+            this._cleanupFullScreenListener?.();
+            const listener = () => this._adjustParentForFullscreenChange();
+            this._document.addEventListener(eventName, listener);
+            this._cleanupFullScreenListener = () => this._document.removeEventListener(eventName, listener);
+        }
+    }
+    _adjustParentForFullscreenChange() {
+        if (this._containerElement)
+            (this.getFullscreenElement() || this._document.body).appendChild(this._containerElement);
+    }
+    _getEventName() {
+        if (!this._fullScreenEventName) {
+            const doc = this._document;
+            if (doc.fullscreenEnabled)
+                this._fullScreenEventName = "fullscreenchange";
+            else if (doc.webkitFullscreenEnabled)
+                this._fullScreenEventName = "webkitfullscreenchange";
+        }
+        return this._fullScreenEventName;
+    }
+    /** The current fullscreen element, if any. */
+    getFullscreenElement() {
+        const doc = this._document;
+        return doc.fullscreenElement || doc.webkitFullscreenElement || null;
+    }
+}
+let shared;
+/** The shared overlay container (created on first use). */
+export const overlayContainer = () => (shared ??= new OverlayContainer());
+/** Replace the shared container (e.g. with a `FullscreenOverlayContainer`); Angular's DI override. */
+export function provideOverlayContainer(container) {
+    shared = container;
+}

package/overlay-service/overlay-dispatchers.d.ts

@@ -0,0 +1,44 @@
+import type { EventStream } from "./overlay-viewport.js";
+/** What dispatchers need from an `OverlayRef`. */
+export interface DispatchedOverlay {
+    readonly overlayElement: HTMLElement;
+    readonly eventPredicate: ((event: Event) => boolean) | null;
+    readonly _keydownEvents: EventStream<KeyboardEvent>;
+    readonly _outsidePointerEvents: EventStream<MouseEvent>;
+    hasAttached(): boolean;
+}
+export declare abstract class BaseOverlayDispatcher {
+    /** Attached overlays, bottom first. */
+    _attachedOverlays: DispatchedOverlay[];
+    protected _document: Document;
+    protected _isAttached: boolean;
+    constructor(document_?: Document);
+    ngOnDestroy(): void;
+    /** Add an overlay (moves it to the top if present). */
+    add(overlayRef: DispatchedOverlay): void;
+    /** Remove an overlay; the global listener goes with the last one. */
+    remove(overlayRef: DispatchedOverlay): void;
+    protected abstract detach(): void;
+    /** Whether `overlayRef` takes `event`: it has subscribers and its predicate (if any) accepts it. */
+    protected canReceiveEvent<T>(overlayRef: DispatchedOverlay, event: Event, stream: EventStream<T>): boolean;
+}
+export declare class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
+    private _cleanupKeydown;
+    add(overlayRef: DispatchedOverlay): void;
+    protected detach(): void;
+    private _keydownListener;
+}
+export declare class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
+    private _cursorOriginalValue;
+    private _cursorStyleIsSet;
+    private _pointerDownEventTarget;
+    private _cleanups;
+    add(overlayRef: DispatchedOverlay): void;
+    protected detach(): void;
+    private _pointerDownListener;
+    private _clickListener;
+}
+/** The shared keyboard dispatcher (created on first use). */
+export declare const overlayKeyboardDispatcher: () => OverlayKeyboardDispatcher;
+/** The shared outside-click dispatcher (created on first use). */
+export declare const overlayOutsideClickDispatcher: () => OverlayOutsideClickDispatcher;

package/overlay-service/overlay-dispatchers.js

@@ -0,0 +1,149 @@
+// Document-level event dispatchers of attached overlays (Angular CDK): `OverlayKeyboardDispatcher`
+// sends a keydown to the top-most overlay that listens to `keydownEvents()` (even when focus stays on
+// a trigger: select, autocomplete); `OverlayOutsideClickDispatcher` sends clicks outside overlays to
+// `outsidePointerEvents()`, top-most first, stopping at the overlay the click is inside (origin =
+// the pointerdown target, so a drag from inside to outside is not outside). Global listeners only
+// while overlays are attached.
+//
+// Ported from @angular/cdk/overlay (dispatchers/*.ts), MIT, © Google LLC.
+import { isIOS } from "../platform/index.js";
+export class BaseOverlayDispatcher {
+    /** Attached overlays, bottom first. */
+    _attachedOverlays = [];
+    _document;
+    _isAttached = false;
+    constructor(document_ = document) {
+        this._document = document_;
+    }
+    ngOnDestroy() {
+        this.detach();
+    }
+    /** Add an overlay (moves it to the top if present). */
+    add(overlayRef) {
+        this.remove(overlayRef);
+        this._attachedOverlays.push(overlayRef);
+    }
+    /** Remove an overlay; the global listener goes with the last one. */
+    remove(overlayRef) {
+        const index = this._attachedOverlays.indexOf(overlayRef);
+        if (index > -1)
+            this._attachedOverlays.splice(index, 1);
+        if (this._attachedOverlays.length === 0)
+            this.detach();
+    }
+    /** Whether `overlayRef` takes `event`: it has subscribers and its predicate (if any) accepts it. */
+    canReceiveEvent(overlayRef, event, stream) {
+        if (!stream.observed)
+            return false;
+        if (overlayRef.eventPredicate)
+            return overlayRef.eventPredicate(event);
+        return true;
+    }
+}
+export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
+    _cleanupKeydown;
+    add(overlayRef) {
+        super.add(overlayRef);
+        if (!this._isAttached) {
+            const body = this._document.body;
+            body.addEventListener("keydown", this._keydownListener);
+            this._cleanupKeydown = () => body.removeEventListener("keydown", this._keydownListener);
+            this._isAttached = true;
+        }
+    }
+    detach() {
+        if (this._isAttached) {
+            this._cleanupKeydown?.();
+            this._isAttached = false;
+        }
+    }
+    _keydownListener = (event) => {
+        const overlays = this._attachedOverlays;
+        // The most recent overlay with keydown subscribers, not the one focus is in (select /
+        // autocomplete keep focus on the trigger); overlays without subscribers do not block lower ones.
+        for (let i = overlays.length - 1; i > -1; i--) {
+            const overlayRef = overlays[i];
+            if (this.canReceiveEvent(overlayRef, event, overlayRef._keydownEvents)) {
+                overlayRef._keydownEvents.next(event);
+                break;
+            }
+        }
+    };
+}
+const eventTarget = (event) => (event.composedPath ? event.composedPath()[0] : event.target);
+export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
+    _cursorOriginalValue = "";
+    _cursorStyleIsSet = false;
+    _pointerDownEventTarget = null;
+    _cleanups;
+    add(overlayRef) {
+        super.add(overlayRef);
+        if (!this._isAttached) {
+            const body = this._document.body;
+            const listen = (type, fn) => {
+                body.addEventListener(type, fn, { capture: true });
+                return () => body.removeEventListener(type, fn, { capture: true });
+            };
+            this._cleanups = [
+                listen("pointerdown", this._pointerDownListener),
+                listen("click", this._clickListener),
+                listen("auxclick", this._clickListener),
+                listen("contextmenu", this._clickListener),
+            ];
+            // iOS Safari fires no click on non-interactive elements unless the body looks clickable.
+            if (isIOS() && !this._cursorStyleIsSet) {
+                this._cursorOriginalValue = body.style.cursor;
+                body.style.cursor = "pointer";
+                this._cursorStyleIsSet = true;
+            }
+            this._isAttached = true;
+        }
+    }
+    detach() {
+        if (this._isAttached) {
+            this._cleanups?.forEach((cleanup) => cleanup());
+            this._cleanups = undefined;
+            if (isIOS() && this._cursorStyleIsSet) {
+                this._document.body.style.cursor = this._cursorOriginalValue;
+                this._cursorStyleIsSet = false;
+            }
+            this._isAttached = false;
+        }
+    }
+    _pointerDownListener = (event) => {
+        this._pointerDownEventTarget = eventTarget(event);
+    };
+    _clickListener = (event) => {
+        const target = eventTarget(event);
+        // A click's origin is the preceding pointerdown target (pressed inside, released outside: not
+        // outside); programmatic clicks have none.
+        const origin = event.type === "click" && this._pointerDownEventTarget ? this._pointerDownEventTarget : target;
+        this._pointerDownEventTarget = null;
+        // Copy: listeners may detach overlays meanwhile.
+        const overlays = this._attachedOverlays.slice();
+        // Top-most first; stop at the overlay the click is inside.
+        for (let i = overlays.length - 1; i > -1; i--) {
+            const overlayRef = overlays[i];
+            const outsidePointerEvents = overlayRef._outsidePointerEvents;
+            if (!overlayRef.hasAttached() || !this.canReceiveEvent(overlayRef, event, outsidePointerEvents))
+                continue;
+            if (containsPierceShadowDom(overlayRef.overlayElement, target) || containsPierceShadowDom(overlayRef.overlayElement, origin))
+                break;
+            outsidePointerEvents.next(event);
+        }
+    };
+}
+function containsPierceShadowDom(parent, child) {
+    let current = child;
+    while (current) {
+        if (current === parent)
+            return true;
+        current = typeof ShadowRoot !== "undefined" && current instanceof ShadowRoot ? current.host : current.parentNode;
+    }
+    return false;
+}
+let keyboard, outside;
+/** The shared keyboard dispatcher (created on first use). */
+export const overlayKeyboardDispatcher = () => (keyboard ??= new OverlayKeyboardDispatcher());
+/** The shared outside-click dispatcher (created on first use). */
+export const overlayOutsideClickDispatcher = () => (outside ??= new OverlayOutsideClickDispatcher());

package/overlay-service/overlay-position-builder.d.ts

@@ -0,0 +1,8 @@
+import { type FlexibleConnectedPositionStrategy, type FlexibleConnectedPositionStrategyOrigin } from "./connected-position.js";
+import { type GlobalPositionStrategy } from "./global-position.js";
+export declare class OverlayPositionBuilder {
+    /** A strategy positioning the overlay relative to the viewport. */
+    global(): GlobalPositionStrategy;
+    /** A strategy positioning the overlay relative to `origin`. */
+    flexibleConnectedTo(origin: FlexibleConnectedPositionStrategyOrigin): FlexibleConnectedPositionStrategy;
+}

package/overlay-service/overlay-position-builder.js

@@ -0,0 +1,15 @@
+// Builder for overlay position strategies (Angular CDK `OverlayPositionBuilder`).
+//
+// Ported from @angular/cdk/overlay (position/overlay-position-builder.ts), MIT, © Google LLC.
+import { createFlexibleConnectedPositionStrategy, } from "./connected-position.js";
+import { createGlobalPositionStrategy } from "./global-position.js";
+export class OverlayPositionBuilder {
+    /** A strategy positioning the overlay relative to the viewport. */
+    global() {
+        return createGlobalPositionStrategy();
+    }
+    /** A strategy positioning the overlay relative to `origin`. */
+    flexibleConnectedTo(origin) {
+        return createFlexibleConnectedPositionStrategy(origin);
+    }
+}