cx 25.11.1 → 26.0.2

package/build/widgets/overlay/Overlay.js

@@ -0,0 +1,597 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { isBinding, isBindingObject } from "../../data/Binding";
+import { startAppLoop } from "../../ui/app/startAppLoop";
+import { ContainerBase } from "../../ui/Container";
+import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import { Instance } from "../../ui/Instance";
+import { VDOM, Widget } from "../../ui/Widget";
+import { ZIndexManager } from "../../ui/ZIndexManager";
+import { getActiveElement } from "../../util";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { closest, isSelfOrDescendant } from "../../util/DOM";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isDataRecord } from "../../util/isDataRecord";
+import { isNumber } from "../../util/isNumber";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { SubscriberList } from "../../util/SubscriberList";
+import { ddDetect, ddMouseDown, ddMouseUp } from "../drag-drop/ops";
+import { captureMouseOrTouch, getCursorPos } from "./captureMouse";
+export class OverlayInstance extends Instance {
+    onBeforeDismiss;
+}
+export class OverlayBase extends ContainerBase {
+    init() {
+        if (this.center)
+            this.centerX = this.centerY = this.center;
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            shadowStyle: {
+                structured: true,
+            },
+            resizable: undefined,
+            draggable: undefined,
+            zIndex: undefined,
+        });
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = {
+            ...data.stateMods,
+            inline: this.inline,
+            modal: this.modal,
+            pad: this.pad,
+            resizable: data.resizable,
+            draggable: data.draggable,
+            animate: this.animate,
+            shadow: this.modal || this.backdrop,
+        };
+        super.prepareData(context, instance);
+    }
+    initInstance(context, instance) {
+        instance.positionChangeSubscribers = new SubscriberList();
+        super.initInstance(context, instance);
+    }
+    explore(context, instance) {
+        if (isBinding(this.visible)) {
+            if (!instance.dismiss) {
+                instance.dismiss = () => {
+                    if (instance.onBeforeDismiss && instance.onBeforeDismiss() === false)
+                        return;
+                    instance.set("visible", false);
+                };
+            }
+        }
+        else if (context.options.dismiss)
+            instance.dismiss = context.options.dismiss;
+        if (instance.dismiss) {
+            context.push("parentOptions", {
+                ...context.parentOptions,
+                dismiss: instance.dismiss,
+            });
+        }
+        if (instance.cache("dismiss", instance.dismiss))
+            instance.markShouldUpdate(context);
+        context.push("parentPositionChangeEvent", instance.positionChangeSubscribers);
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        if (instance.dismiss)
+            context.pop("parentOptions");
+        context.pop("parentPositionChangeEvent");
+    }
+    render(context, instance, key) {
+        return (_jsx(OverlayComponent, { instance: instance, subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss, parentEl: context.options.parentEl, children: this.renderContents(context, instance) }, key));
+    }
+    renderContents(context, instance) {
+        return this.renderChildren(context, instance);
+    }
+    overlayDidMount(instance, component) {
+        let { el } = component;
+        if (this.centerX)
+            if (!el.style.left)
+                el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
+        if (this.centerY)
+            if (!el.style.top)
+                el.style.top = `${Math.max(0, (window.innerHeight - el.offsetHeight) / 2)}px`;
+    }
+    overlayDidUpdate(instance, component) { }
+    overlayWillUnmount(instance, component) { }
+    handleFocusOut(instance, component) {
+        if (this.onFocusOut)
+            instance.invoke("onFocusOut", instance, component);
+        if (this.dismissOnFocusOut && instance.dismiss)
+            instance.dismiss();
+    }
+    handleKeyDown(e, instance, component) {
+        if (this.onKeyDown && instance.invoke("onKeyDown", e, instance, component) === false)
+            return false;
+        if (this.closeOnEscape && e.keyCode == KeyCode.esc && instance.dismiss) {
+            instance.dismiss();
+            e.stopPropagation();
+        }
+    }
+    handleMouseLeave(instance, component) {
+        if (this.onMouseLeave)
+            instance.invoke("onMouseLeave", instance, component);
+    }
+    handleMouseEnter(instance, component) {
+        if (this.onMouseEnter)
+            instance.invoke("onMouseEnter", instance, component);
+    }
+    getOverlayContainer() {
+        return document.body;
+    }
+    containerFactory() {
+        let el = document.createElement("div");
+        let container = this.getOverlayContainer();
+        container.appendChild(el);
+        el.style.position = "absolute";
+        if (this.containerStyle)
+            Object.assign(el.style, parseStyle(this.containerStyle));
+        return el;
+    }
+    open(storeOrInstance, options) {
+        if (!this.initialized)
+            this.init();
+        let el = this.containerFactory();
+        el.style.display = "hidden";
+        let beforeDismiss = null;
+        let stop;
+        options = {
+            destroyDelay: this.destroyDelay,
+            removeParentDOMElement: true,
+            ...options,
+            parentEl: el,
+            dismiss: () => {
+                if (beforeDismiss && beforeDismiss() === false)
+                    return;
+                stop();
+                beforeDismiss = null;
+            },
+            subscribeToBeforeDismiss: (cb) => {
+                beforeDismiss = cb;
+            },
+        };
+        options.name = options.name || "overlay";
+        stop = startAppLoop(el, storeOrInstance, this, options);
+        return options.dismiss;
+    }
+    handleMove(e, instance, component) {
+        let { widget } = instance;
+        if (!widget.onMove || instance.invoke("onMove", e, instance, component) !== false) {
+            instance.store.silently(() => {
+                if (isDataRecord(this.style) && isBindingObject(this.style.top)) {
+                    instance.store.set(this.style.top.bind, component.el.style.top);
+                }
+                if (isDataRecord(this.style) && isBindingObject(this.style.left)) {
+                    instance.store.set(this.style.left.bind, component.el.style.left);
+                }
+            });
+        }
+        instance.positionChangeSubscribers.notify();
+    }
+    handleResize(e, instance, component) {
+        let { widget } = instance;
+        if (!widget.onResize || instance.invoke("onResize", e, instance, component) !== false) {
+            instance.store.silently(() => {
+                if (isDataRecord(this.style) && isBindingObject(this.style.width)) {
+                    instance.store.set(this.style.width.bind, component.el.style.width);
+                }
+                if (isDataRecord(this.style) && isBindingObject(this.style.height)) {
+                    instance.store.set(this.style.height.bind, component.el.style.height);
+                }
+            });
+        }
+        instance.positionChangeSubscribers.notify();
+    }
+}
+OverlayBase.prototype.styled = true;
+OverlayBase.prototype.baseClass = "overlay";
+OverlayBase.prototype.resizable = false;
+OverlayBase.prototype.resizeWidth = 7;
+OverlayBase.prototype.center = false;
+OverlayBase.prototype.centerX = false;
+OverlayBase.prototype.centerY = false;
+OverlayBase.prototype.modal = false;
+OverlayBase.prototype.backdrop = false;
+OverlayBase.prototype.inline = false;
+OverlayBase.prototype.autoFocus = false;
+OverlayBase.prototype.autoFocusFirstChild = false;
+OverlayBase.prototype.animate = false;
+OverlayBase.prototype.draggable = false;
+OverlayBase.prototype.destroyDelay = 0;
+OverlayBase.prototype.dismissOnFocusOut = false;
+OverlayBase.prototype.focusable = false;
+OverlayBase.prototype.containerStyle = undefined;
+OverlayBase.prototype.dismissOnPopState = false;
+OverlayBase.prototype.closeOnEscape = false;
+export class Overlay extends OverlayBase {
+}
+Widget.alias("overlay", Overlay);
+//TODO: all el related logic should be moved here
+class OverlayContent extends VDOM.Component {
+    render() {
+        return (_jsx("div", { ref: this.props.onRef, className: this.props.className, style: this.props.style, tabIndex: this.props.tabIndex, onFocus: this.props.onFocus, onBlur: this.props.onBlur, onKeyDown: this.props.onKeyDown, onMouseMove: this.props.onMouseMove, onMouseUp: this.props.onMouseUp, onMouseDown: this.props.onMouseDown, onTouchStart: this.props.onTouchStart, onTouchEnd: this.props.onTouchEnd, onTouchMove: this.props.onTouchMove, onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave, onClick: this.props.onClick, "data-focusable-overlay-container": this.props.focusableOverlayContainer, children: this.props.children }));
+    }
+    componentDidUpdate() {
+        this.props.onDidUpdate();
+    }
+}
+//TODO: This should be called OverlayPortal
+export class OverlayComponent extends VDOM.Component {
+    onOverlayRef;
+    onPopState;
+    unsubscribeWheelBlock;
+    constructor(props) {
+        super(props);
+        this.state = {};
+        this.customStyle = {};
+    }
+    render() {
+        let { instance, parentEl } = this.props;
+        let { widget } = instance;
+        if (widget.inline || parentEl)
+            return this.renderOverlay();
+        if (!this.containerEl) {
+            this.ownedEl = widget.containerFactory();
+            this.ownedEl.style.display = "hidden";
+            this.containerEl = this.ownedEl;
+        }
+        if (VDOM.DOM.createPortal)
+            return VDOM.DOM.createPortal(this.renderOverlay(), this.containerEl);
+        //rendered in componentDidUpdate if portals are not supported
+        return null;
+    }
+    renderOverlay() {
+        let { widget, data } = this.props.instance;
+        let { CSS, baseClass } = widget;
+        if (!this.onOverlayRef)
+            this.onOverlayRef = (el) => {
+                this.el = el;
+            };
+        let content = (_jsx(OverlayContent, { onRef: this.onOverlayRef, className: data.classNames, style: data.style, tabIndex: widget.focusable ? 0 : undefined, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onKeyDown: this.onKeyDown.bind(this), onMouseDown: this.onMouseDown.bind(this), onMouseUp: this.onMouseUp.bind(this), onMouseMove: this.onMouseMove.bind(this), onTouchStart: this.onMouseDown.bind(this), onTouchEnd: this.onMouseUp.bind(this), onTouchMove: this.onMouseMove.bind(this), onMouseLeave: this.onMouseLeave.bind(this), onMouseEnter: this.onMouseEnter.bind(this), onClick: this.onClick.bind(this), onDidUpdate: this.overlayDidUpdate.bind(this), focusableOverlayContainer: widget.dismissOnFocusOut, children: this.renderOverlayBody() }));
+        let result = content;
+        if (widget.modal || widget.backdrop) {
+            result = (_jsxs("div", { ref: (el) => {
+                    this.shadowEl = el;
+                }, className: CSS.element(baseClass, "shadow", {
+                    animated: this.state.animated,
+                    "animate-enter": this.state.animated && !this.dismissed,
+                    animate: widget.animate,
+                }), style: parseStyle(data.shadowStyle), children: [_jsx("div", { className: CSS.element("overlay", "modal-backdrop"), onClick: this.onBackdropClick.bind(this) }, "backdrop"), content] }, "shadow"));
+        }
+        return result;
+    }
+    renderOverlayBody() {
+        return this.props.children;
+    }
+    onFocus() {
+        FocusManager.nudge();
+        this.onFocusIn();
+        if (this.el)
+            oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+    }
+    onBlur() {
+        FocusManager.nudge();
+    }
+    onFocusIn() { }
+    onFocusOut() {
+        let { widget } = this.props.instance;
+        widget.handleFocusOut(this.props.instance, this);
+    }
+    onMouseEnter(e) {
+        let { widget } = this.props.instance;
+        widget.handleMouseEnter(this.props.instance, this);
+    }
+    onMouseLeave(e) {
+        let { widget } = this.props.instance;
+        widget.handleMouseLeave(this.props.instance, this);
+    }
+    onClick(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.onClick)
+            instance.invoke("onClick", e, instance, this);
+    }
+    onKeyDown(e) {
+        let { widget } = this.props.instance;
+        widget.handleKeyDown(e, this.props.instance, this);
+    }
+    getResizePrefix(e) {
+        let { widget, data } = this.props.instance;
+        if (!data.resizable)
+            return "";
+        let cursor = getCursorPos(e);
+        let bounds = getTopLevelBoundingClientRect(this.el);
+        let leftMargin = cursor.clientX - bounds.left;
+        let rightMargin = bounds.right - cursor.clientX;
+        let topMargin = cursor.clientY - bounds.top;
+        let bottomMargin = bounds.bottom - cursor.clientY;
+        let prefix = "";
+        if (topMargin >= 0 && topMargin < widget.resizeWidth)
+            prefix += "n";
+        else if (bottomMargin >= 0 && bottomMargin < widget.resizeWidth)
+            prefix += "s";
+        if (leftMargin >= 0 && leftMargin < widget.resizeWidth)
+            prefix += "w";
+        else if (rightMargin >= 0 && rightMargin < widget.resizeWidth)
+            prefix += "e";
+        return prefix;
+    }
+    onMouseDown(e) {
+        let { instance } = this.props;
+        let { widget, data } = instance;
+        if (widget.onMouseDown && instance.invoke("onMouseDown", e, instance) === false)
+            return;
+        let prefix = this.getResizePrefix(e);
+        if (prefix) {
+            //e.preventDefault();
+            let rect = getTopLevelBoundingClientRect(this.el);
+            let cursor = getCursorPos(e);
+            let captureData = {
+                prefix: prefix,
+                dl: cursor.clientX - rect.left,
+                dt: cursor.clientY - rect.top,
+                dr: cursor.clientX - rect.right,
+                db: cursor.clientY - rect.bottom,
+                rect: rect,
+            };
+            captureMouseOrTouch(e, this.onMouseMove.bind(this), undefined, captureData, prefix + "-resize");
+        }
+        else if (data.draggable) {
+            ddMouseDown(e);
+        }
+        //e.stopPropagation();
+    }
+    onBackdropClick(e) {
+        e.stopPropagation();
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.onBackdropClick)
+            instance.invoke("onBackdropClick", e, instance);
+        if (widget.backdrop) {
+            if (instance.dismiss)
+                instance.dismiss();
+        }
+        else if (widget.modal) {
+            FocusManager.focus(this.el);
+        }
+    }
+    onMouseUp(e) {
+        ddMouseUp();
+        e.stopPropagation();
+    }
+    onMouseMove(e, captureData) {
+        // handle dragging
+        let { instance } = this.props;
+        let { data, widget } = instance;
+        let detect = ddDetect(e);
+        if (data.draggable && detect) {
+            this.startMoveOperation(e);
+            return;
+        }
+        if (captureData && captureData.prefix) {
+            let { prefix, rect, dl, dt, dr, db } = captureData;
+            let cursor = getCursorPos(e);
+            if (prefix.indexOf("w") != -1)
+                this.setCustomStyle({
+                    left: cursor.clientX - dl + "px",
+                    width: rect.right - cursor.clientX + dl + "px",
+                    right: "auto",
+                });
+            if (prefix.indexOf("n") != -1)
+                this.setCustomStyle({
+                    top: cursor.clientY - dt + "px",
+                    height: rect.bottom - cursor.clientY + dt + "px",
+                    bottom: "auto",
+                });
+            if (prefix.indexOf("e") != -1)
+                this.setCustomStyle({
+                    width: cursor.clientX - dr - rect.left + "px",
+                    left: `${rect.left}px`,
+                    right: "auto",
+                });
+            if (prefix.indexOf("s") != -1)
+                this.setCustomStyle({
+                    height: cursor.clientY - db - rect.top + "px",
+                    top: `${rect.top}px`,
+                    bottom: "auto",
+                });
+            if (prefix.indexOf("w") >= 0 || prefix.indexOf("n") >= 0)
+                widget.handleMove(e, instance, this);
+            widget.handleResize(e, instance, this);
+        }
+        else {
+            let prefix = this.getResizePrefix(e);
+            this.setCustomStyle({
+                cursor: prefix ? prefix + "-resize" : undefined,
+            });
+        }
+    }
+    startMoveOperation(e) {
+        if (this.el && !this.getResizePrefix(e)) {
+            e.stopPropagation();
+            let rect = getTopLevelBoundingClientRect(this.el);
+            let cursor = getCursorPos(e);
+            let data = {
+                dx: cursor.clientX - rect.left,
+                dy: cursor.clientY - rect.top,
+            };
+            captureMouseOrTouch(e, this.onMove.bind(this), undefined, data, getComputedStyle(e.target).cursor);
+        }
+    }
+    onMove(e, data) {
+        if (data) {
+            let cursor = getCursorPos(e);
+            e.preventDefault();
+            this.setCustomStyle({
+                left: cursor.clientX - data.dx + "px",
+                top: cursor.clientY - data.dy + "px",
+                right: "auto",
+                bottom: "auto",
+            });
+            let { instance } = this.props;
+            let { widget } = instance;
+            widget.handleMove(e, instance, this);
+        }
+    }
+    onBeforeDismiss() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.overlayWillDismiss && widget.overlayWillDismiss(instance, this) === false)
+            return false;
+        this.dismissed = true;
+        //this.el might be null if visible is set to false
+        if (this.el) {
+            this.el.className = this.getOverlayCssClass();
+            // if (widget.animate)
+            //    this.setState({
+            //       animated: false
+            //    });
+        }
+        return true;
+    }
+    componentDidMount() {
+        let { instance, subscribeToBeforeDismiss, parentEl } = this.props;
+        let { widget, data } = instance;
+        this.setZIndex(isNumber(data.zIndex) ? data.zIndex : ZIndexManager.next());
+        this.componentDidUpdate();
+        widget.overlayDidMount(instance, this);
+        if (this.containerEl)
+            this.containerEl.style.removeProperty("display");
+        else if (parentEl)
+            parentEl.style.removeProperty("display");
+        let childHasFocus = isSelfOrDescendant(this.el, getActiveElement());
+        if (childHasFocus)
+            oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+        else {
+            if (!widget.autoFocusFirstChild || !FocusManager.focusFirstChild(this.el))
+                if (widget.focusable && widget.autoFocus)
+                    FocusManager.focus(this.el);
+        }
+        instance.onBeforeDismiss = this.onBeforeDismiss.bind(this);
+        if (subscribeToBeforeDismiss) {
+            subscribeToBeforeDismiss(instance.onBeforeDismiss);
+        }
+        if (widget.animate) {
+            setTimeout(() => {
+                if (!this.unmounting)
+                    this.setState({
+                        animated: true,
+                    });
+            }, 0);
+        }
+        if (widget.dismissOnPopState) {
+            this.onPopState = () => {
+                this.props.instance.dismiss?.();
+            };
+            window.addEventListener("popstate", this.onPopState);
+        }
+        if (this.shadowEl)
+            this.unsubscribeWheelBlock = addEventListenerWithOptions(this.shadowEl, "wheel", (e) => {
+                if (e.shiftKey || e.ctrlKey)
+                    return;
+                //check if there is a scrollable element within the shadow or overlay contents
+                //such that its scrollbar is not at the very end
+                let scrollAllowed = false;
+                closest(e.target, (el) => {
+                    if ((e.deltaY > 0 && el.scrollTop < el.scrollHeight - el.clientHeight) ||
+                        (e.deltaY < 0 && el.scrollTop > 0)) {
+                        scrollAllowed = true;
+                        return true;
+                    }
+                    return el == e.currentTarget;
+                });
+                if (!scrollAllowed)
+                    e.preventDefault();
+            }, { passive: false });
+    }
+    componentWillUnmount() {
+        if (this.onPopState)
+            window.removeEventListener("popstate", this.onPopState);
+        if (this.unsubscribeWheelBlock)
+            this.unsubscribeWheelBlock();
+        offFocusOut(this);
+        this.unmounting = true;
+        let { widget } = this.props.instance;
+        let { baseClass, CSS } = widget;
+        // //we didn't have a chance to call onBeforeDismiss
+        if (this.state.animated && this.el) {
+            this.el.className = this.getOverlayCssClass();
+            if (this.shadowEl)
+                this.shadowEl.className = CSS.element(baseClass, "shadow", {
+                    animate: widget.animate,
+                    "animate-leave": true,
+                });
+        }
+        widget.overlayWillUnmount(this.props.instance, this);
+        if (this.ownedEl) {
+            setTimeout(() => {
+                if (this.ownedEl?.parentNode)
+                    this.ownedEl.parentNode.removeChild(this.ownedEl);
+                this.ownedEl = null;
+            }, widget.destroyDelay);
+        }
+        delete this.containerEl;
+    }
+    setZIndex(zIndex) {
+        if (this.shadowEl)
+            this.shadowEl.style.zIndex = zIndex.toString();
+        this.setCustomStyle({
+            zIndex: zIndex.toString(),
+        });
+    }
+    setCustomStyle(style) {
+        Object.assign(this.customStyle, style);
+        if (this.el)
+            Object.assign(this.el.style, this.customStyle);
+    }
+    getOverlayStyle() {
+        let { data } = this.props.instance;
+        return {
+            ...data.style,
+            ...this.customStyle,
+        };
+    }
+    setCSSState(mods) {
+        let m = { ...this.state.mods };
+        let changed = false;
+        for (let k in mods)
+            if (m[k] !== mods[k]) {
+                m[k] = mods[k];
+                changed = true;
+            }
+        if (changed)
+            this.setState({
+                mods: mods,
+            });
+    }
+    getOverlayCssClass() {
+        let { data, widget } = this.props.instance;
+        let { CSS } = widget;
+        return (CSS.expand(data.classNames, CSS.state({
+            ...this.state.mods,
+            animated: this.state.animated && !this.unmounting && !this.dismissed,
+            "animate-enter": this.state.animated && !this.dismissed,
+            "animate-leave": widget.animate && this.dismissed,
+        })) ?? "");
+    }
+    overlayDidUpdate() {
+        if (this.el && !this.dismissed) {
+            let { widget } = this.props.instance;
+            widget.overlayDidUpdate(this.props.instance, this);
+            this.el.className = this.getOverlayCssClass();
+            Object.assign(this.el.style, this.getOverlayStyle());
+        }
+    }
+    componentDidUpdate() {
+        if (this.containerEl && !VDOM.DOM.createPortal) {
+            VDOM.DOM.render(this.renderOverlay(), this.containerEl);
+        }
+        this.overlayDidUpdate();
+    }
+}

package/build/widgets/overlay/Toast.d.ts

@@ -0,0 +1,27 @@
+import { OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, StringProp } from "../../ui/Prop";
+export interface ToastConfig extends OverlayConfig {
+    /** Value of timeout in milliseconds after which the toast is automatically dismissed. */
+    timeout?: NumberProp;
+    message?: StringProp;
+    /** Add default padding. Default is `true`. */
+    pad?: boolean;
+    /**
+     * Defines where the toast will be placed.
+     * Supported values are `top`, `right`, `bottom` and `left`. Default value is `top`.
+     */
+    placement?: string;
+}
+export declare class Toast extends OverlayBase<ToastConfig, OverlayInstance> {
+    message?: StringProp;
+    pad?: boolean;
+    placement?: string;
+    init(): void;
+    declareData(...args: Record<string, unknown>[]): void;
+    prepareData(context: RenderingContext, instance: OverlayInstance): void;
+    overlayDidUpdate(instance: OverlayInstance, component: any): void;
+    overlayDidMount(instance: OverlayInstance, component: any): void;
+    overlayWillUnmount(instance: OverlayInstance, component: any): void;
+    containerFactory(): HTMLElement;
+}

package/build/widgets/overlay/Toast.js

@@ -0,0 +1,76 @@
+import { OverlayBase } from "./Overlay";
+import { Text } from "../../ui/Text";
+export class Toast extends OverlayBase {
+    init() {
+        if (this.message)
+            this.items = {
+                type: Text,
+                value: this.message,
+            };
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            timeout: undefined,
+        });
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = {
+            ...data.stateMods,
+            pad: this.pad,
+        };
+        super.prepareData(context, instance);
+    }
+    overlayDidUpdate(instance, component) {
+        let el = component.containerEl || component.props.parentEl;
+        if (component.state.animated) {
+            el.style.height = `${component.el.offsetHeight}px`;
+            el.classList.add(this.CSS.state("live"));
+        }
+    }
+    overlayDidMount(instance, component) {
+        let { data } = instance;
+        if (data.timeout > 0) {
+            component.timeoutTimer = setTimeout(() => {
+                instance.dismiss();
+            }, data.timeout);
+        }
+    }
+    overlayWillUnmount(instance, component) {
+        let el = component.containerEl || component.props.parentEl;
+        el.style.height = 0;
+        el.classList.remove(this.CSS.state("live"));
+        if (component.timeoutTimer)
+            clearTimeout(component.timeoutTimer);
+    }
+    containerFactory() {
+        let el = document.createElement("div");
+        el.className = this.CSS.element("toaster", "item");
+        let placement = this.placement || "top";
+        let toaster = getToaster(placement);
+        toaster.el.className = this.CSS.block("toaster", null, {
+            [`placement-${placement}`]: true,
+        });
+        toaster.el.insertBefore(el, toaster.el.firstChild);
+        return el;
+    }
+}
+const toasters = {};
+function getToaster(placement) {
+    let t = toasters[placement];
+    if (!t) {
+        let el = document.createElement("div");
+        document.body.appendChild(el);
+        t = toasters[placement] = {
+            el,
+        };
+    }
+    return t;
+}
+Toast.prototype.styled = true;
+Toast.prototype.pad = true;
+Toast.prototype.animate = true;
+Toast.prototype.baseClass = "toast";
+Toast.prototype.placement = "top";
+Toast.prototype.destroyDelay = 300;