@rivtn/noseur 1.0.0

package/dist/esm/overlay/Popover.js

@@ -0,0 +1,245 @@
+import "./Overlay.css";
+import React from 'react';
+import { Portal } from "./Portal";
+import { Classname } from "../utils/Classname";
+import { TypeChecker } from "../utils/TypeChecker";
+import { Transition } from "../constants/Transition";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { CSSTransition } from 'react-transition-group';
+import { BaseZIndex, DOMHelper, ScrollHandler, ZIndexHandler } from "../utils/DOMUtils";
+class PopoverComponent extends React.Component {
+    static defaultProps = {
+        transition: Transition.NONE,
+        outsideClickLogic: "elemental",
+        transitionTimeout: { enter: 130, exit: 110 },
+        pointingArrowClassName: "noseur-popover-arrow",
+    };
+    state = {
+        sticky: false,
+        visible: false,
+    };
+    internalElement;
+    target;
+    hostRectBeforeRerendering = {};
+    documentScrollHandler;
+    transitionNodeRef;
+    windowResizeListener;
+    documentClickListener;
+    constructor(props) {
+        super(props);
+        this.toggle = this.toggle.bind(this);
+        this.onExit = this.onExit.bind(this);
+        this.onEnter = this.onEnter.bind(this);
+        this.onExited = this.onExited.bind(this);
+        this.onEntered = this.onEntered.bind(this);
+        this.rePosition = this.rePosition.bind(this);
+        this.showPopover = this.showPopover.bind(this);
+        this.hidePopover = this.hidePopover.bind(this);
+        this.transitionNodeRef = React.createRef();
+        this.resolvePopoverStyle = this.resolvePopoverStyle.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            toggle: this.toggle,
+            rePosition: this.rePosition,
+            visible: () => this.state.visible,
+            sticky: (sticky) => this.setState({ sticky }),
+            hide: () => {
+                if (this.state.visible)
+                    this.hidePopover();
+            },
+            show: (event, target) => {
+                if (this.state.visible)
+                    this.rePosition(event);
+                else
+                    this.showPopover(event, target);
+            },
+        });
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    toggle(event, target) {
+        (!this.state.visible) ? this.showPopover(event, target) : this.hidePopover();
+    }
+    onEnter() {
+        ZIndexHandler.setElementZIndex(this.internalElement, BaseZIndex.OVERLAY);
+        this.resolvePopoverStyle();
+    }
+    onEntered() {
+        const elementToReceiveOpenFocus = this.props.onOpenFocusRef?.current;
+        if (elementToReceiveOpenFocus && TypeChecker.isFunction(elementToReceiveOpenFocus?.focus)) {
+            elementToReceiveOpenFocus.focus();
+        }
+        this.bindDocumentClickListener();
+        this.bindScrollListener();
+        this.bindResizeListener();
+        if (this.props.onShow)
+            this.props.onShow();
+    }
+    onExit() {
+        this.unbindDocumentClickListener();
+        this.unbindScrollListener();
+        this.unbindResizeListener();
+    }
+    onExited() {
+        ZIndexHandler.removeElementZIndex(this.internalElement);
+        const elementToReceiveCloseFocus = this.props.onCloseFocusRef?.current;
+        if (elementToReceiveCloseFocus && TypeChecker.isFunction(elementToReceiveCloseFocus?.focus)) {
+            elementToReceiveCloseFocus.focus();
+        }
+        if (this.props.onHide)
+            this.props.onHide();
+    }
+    showPopover(event, target) {
+        this.target = target ?? event?.target ?? event?.currentTarget;
+        if (this.state.visible) {
+            this.resolvePopoverStyle();
+            return;
+        }
+        this.setState({ visible: true });
+    }
+    hidePopover() {
+        this.setState({ visible: false });
+    }
+    isNotToggleElement(event) {
+        const target = this.target;
+        const eventTarget = (event.target);
+        return target && target != eventTarget && target.isSameNode && !(target.isSameNode(eventTarget) || target.contains(eventTarget));
+    }
+    isOutsideClicked(event) {
+        if (this.props.outsideClickLogic === "elemental") {
+            const target = event.target;
+            return this.props.dismissOnClick || (this.internalElement && !(this.internalElement.isSameNode(target) || this.internalElement.contains(target)));
+        }
+        const { x, y } = event;
+        const hostRect = this.internalElement.getBoundingClientRect();
+        const hostX = Math.min(hostRect.x, this.hostRectBeforeRerendering.x ?? 0);
+        const hostY = Math.min(hostRect.y, this.hostRectBeforeRerendering.y ?? 0);
+        const hostWidth = Math.max(hostRect.width, this.hostRectBeforeRerendering.width ?? 0);
+        const hostHeight = Math.max(hostRect.height, this.hostRectBeforeRerendering.height ?? 0);
+        const hostAbsoluteWidth = hostX + hostWidth;
+        const hostAbsoluteHeight = hostY + hostHeight;
+        const isOutSide = !((x >= hostX && x <= hostAbsoluteWidth) && (y >= hostY && y <= hostAbsoluteHeight));
+        this.hostRectBeforeRerendering = this.internalElement.getBoundingClientRect();
+        return isOutSide;
+    }
+    bindDocumentClickListener() {
+        if (this.documentClickListener || this.props.notDismissable)
+            return;
+        const elementToReceiveOpenFocus = this.props.onOpenFocusRef?.current;
+        this.documentClickListener = (event) => {
+            if (!this.state.sticky && this.isNotToggleElement(event) && this.isOutsideClicked(event)) {
+                if (this.props.trapFocus && TypeChecker.isFunction(elementToReceiveOpenFocus?.focus)) {
+                    elementToReceiveOpenFocus.focus();
+                    return;
+                }
+                if (this.props.sticky)
+                    return;
+                this.hidePopover();
+            }
+        };
+        document.addEventListener('click', this.documentClickListener);
+    }
+    unbindDocumentClickListener() {
+        if (!this.documentClickListener)
+            return;
+        document.removeEventListener('click', this.documentClickListener);
+        this.documentClickListener = undefined;
+    }
+    bindScrollListener() {
+        if (this.documentScrollHandler || !this.target)
+            return;
+        this.documentScrollHandler = ScrollHandler.handle(this.target, this.rePosition);
+        this.documentScrollHandler.attach();
+    }
+    unbindScrollListener() {
+        if (!this.documentScrollHandler)
+            return;
+        this.documentScrollHandler.detach();
+        this.documentScrollHandler = undefined;
+    }
+    bindResizeListener() {
+        if (this.windowResizeListener)
+            return;
+        this.windowResizeListener = (_) => {
+            if (this.state.visible)
+                this.hidePopover(); // is android or ios
+        };
+        window.addEventListener('resize', this.windowResizeListener);
+    }
+    unbindResizeListener() {
+        if (!this.windowResizeListener)
+            return;
+        window.removeEventListener('resize', this.windowResizeListener);
+        this.windowResizeListener = undefined;
+    }
+    rePosition(event, cb) {
+        if (!this.state.visible)
+            return;
+        this.target = event?.target ?? event?.currentTarget ?? this.target;
+        if (!this.target || !this.target.getBoundingClientRect)
+            return;
+        DOMHelper.absolutePositionRelatively(this.internalElement, this.target, this.props.positional);
+        const targetOffset = DOMHelper.getElementOffset(this.target);
+        const popoverOffset = DOMHelper.getElementOffset(this.internalElement);
+        if (targetOffset.top > popoverOffset.top) {
+            DOMHelper.addClass(this.internalElement, 'noseur-popover-arrow-flipped');
+        }
+        else {
+            if (DOMHelper.hasClass(this.internalElement, "noseur-popover-arrow-flipped")) {
+                DOMHelper.removeClass(this.internalElement, "noseur-popover-arrow-flipped");
+            }
+        }
+        cb && cb();
+    }
+    matchTargetSizeCb(_, styleValue, __, targetComputedStyle) {
+        const sidePaddingSum = DOMHelper.sanitizeStyleValue(targetComputedStyle.paddingLeft) + DOMHelper.sanitizeStyleValue(targetComputedStyle.paddingRight);
+        return (DOMHelper.sanitizeStyleValue(styleValue) - sidePaddingSum) + "px";
+    }
+    resolvePopoverStyle() {
+        if (!this.target || !this.target?.getBoundingClientRect)
+            return;
+        if (this.props.matchTargetSize) {
+            DOMHelper.matchStyles(this.target, [this.internalElement], ["width"], this.matchTargetSizeCb);
+        }
+        DOMHelper.absolutePositionRelatively(this.internalElement, this.target, this.props.positional);
+        if (!this.props.pointingArrowClassName?.startsWith("noseur-popover-arrow"))
+            return;
+        const targetOffset = DOMHelper.getElementOffset(this.target);
+        const popoverOffset = DOMHelper.getElementOffset(this.internalElement);
+        if (TypeChecker.isString(targetOffset.left) || TypeChecker.isString(popoverOffset.left))
+            return;
+        if (targetOffset.left > popoverOffset.left) {
+            const arrowLeftOffset = targetOffset.left - popoverOffset.left - 10;
+            this.internalElement.style.setProperty('--popoverArrowLeftOffset', `${arrowLeftOffset}px`);
+        }
+        if (targetOffset.top > popoverOffset.top) {
+            DOMHelper.addClass(this.internalElement, 'noseur-popover-arrow-flipped');
+        }
+    }
+    renderChildren() {
+        const transition = this.props.transition;
+        let className = Classname.build('noseur-popover', this.props.pointingArrowClassName, this.props.className);
+        const props = {
+            className,
+            id: this.props.id,
+            key: this.props.key,
+            style: this.props.style,
+        };
+        const ref = (el) => {
+            this.internalElement = el;
+            ObjectHelper.resolveRef(this.props.forwardRef, el);
+            ObjectHelper.resolveRef(this.transitionNodeRef, el);
+            if (el && !this.hostRectBeforeRerendering.width)
+                this.hostRectBeforeRerendering = this.internalElement.getBoundingClientRect();
+        };
+        return (React.createElement(CSSTransition, { classNames: transition, timeout: this.props.transitionTimeout, in: this.state.visible, options: this.props.transitionOptions, unmountOnExit: true, onEnter: this.onEnter, onEntered: this.onEntered, onExit: this.onExit, onExited: this.onExited, nodeRef: this.transitionNodeRef },
+            React.createElement("div", { ref: ref, ...props }, this.props.children)));
+    }
+    render() {
+        const children = this.renderChildren();
+        return React.createElement(Portal, { children: children, container: this.props.container, visible: true });
+    }
+}
+export const Popover = ({ ref, ...props }) => (React.createElement(PopoverComponent, { ...props, forwardRef: ref }));

package/dist/esm/overlay/Portal.d.ts

@@ -0,0 +1,11 @@
+import "./Overlay.css";
+import React from 'react';
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+import { NoseurElement, NoseurRawElement } from '../constants/Types';
+export type PortalContainerEvent = () => NoseurRawElement;
+export interface PortalProps extends ComponentBaseProps<HTMLElement> {
+    visible: boolean;
+    children: NoseurElement;
+    container: PortalContainerEvent | NoseurRawElement;
+}
+export declare const Portal: ({ ref, ...props }: Partial<PortalProps>) => React.JSX.Element;

package/dist/esm/overlay/Portal.js

@@ -0,0 +1,29 @@
+import "./Overlay.css";
+import React from 'react';
+import ReactDOM from 'react-dom';
+class PortalComponent extends React.Component {
+    static defaultProps = {
+        visible: false
+    };
+    state = {
+        renderChild: false
+    };
+    constructor(props) {
+        super(props);
+    }
+    isDOMReady() {
+        return (typeof window !== 'undefined' && window.document && window.document.createElement);
+    }
+    componentDidMount() {
+        if (this.isDOMReady() && this.props.visible && !this.state.renderChild) {
+            this.setState({ renderChild: true });
+        }
+    }
+    render() {
+        if (!(this.props.children && this.state.renderChild))
+            return null;
+        const container = this.props.container ? ((this.props.container instanceof Function) ? this.props.container() : this.props.container) : document.body;
+        return ReactDOM.createPortal(this.props.children, container);
+    }
+}
+export const Portal = ({ ref, ...props }) => (React.createElement(PortalComponent, { ...props, forwardRef: ref }));

package/dist/esm/overlay/Toast.d.ts

@@ -0,0 +1,49 @@
+import "./Overlay.css";
+import React from 'react';
+import { Orientation } from "../constants/Orientation";
+import { Alignment } from "../constants/Alignment";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+import { NoseurRawElement } from "../constants/Types";
+import { MessageProps } from "./Message";
+declare enum ToastType {
+    TOAST = "toast",
+    TOASTER = "toaster",
+    MESSAGES = "messages"
+}
+export type ToastMessageEventHandler = (message?: Partial<MessageProps>, key?: string) => void;
+export type ToastAttributesRelays = {};
+export interface ToastManageRef {
+    clear: () => void;
+    reverse: () => void;
+    changeLimit: (limit: number) => void;
+    remove: (key: string | string[]) => void;
+    changePosition: (position: Alignment) => void;
+    changeOrientation: (orientation: Orientation) => void;
+    show: (message: Partial<MessageProps> | Partial<MessageProps>[], key?: string | string[]) => string[];
+    update: (key: string | string[], message: Partial<MessageProps> | Partial<MessageProps>[], borrowLifetime?: boolean) => void;
+}
+export interface ToastProps extends ComponentBaseProps<HTMLDivElement, ToastManageRef, ToastAttributesRelays> {
+    limit: number;
+    reverse: boolean;
+    position: Alignment;
+    orientation: Orientation;
+    container: NoseurRawElement;
+    positionProps: {
+        relative?: boolean;
+    } & Partial<ComponentBaseProps<HTMLDivElement>>;
+    onAction: ToastMessageEventHandler;
+    onRemove: ToastMessageEventHandler;
+    __type__: ToastType;
+}
+interface ToasterInterfaceRelay {
+    destroy: () => void;
+    init: (props: Partial<ToastProps>, ref?: any) => string[] | void;
+    toast: (message: Partial<MessageProps> | Partial<MessageProps>[], key?: string | string[]) => string[];
+}
+export type ToasterInterface = ToasterInterfaceRelay & ToastManageRef;
+export type MessagesProps = ToastProps;
+export type MessagesManageRef = ToastManageRef;
+export declare const Toast: ({ ref, ...props }: Partial<ToastProps>) => React.JSX.Element;
+export declare const Messages: ({ ref, ...props }: Partial<ToastProps>) => React.JSX.Element;
+export declare const Toaster: ToasterInterface;
+export {};

package/dist/esm/overlay/Toast.js

@@ -0,0 +1,341 @@
+import "./Overlay.css";
+import React from 'react';
+import { Portal } from "./Portal";
+import ReactDOM from "react-dom/client";
+import { DOMHelper } from "../utils/DOMUtils";
+import { Classname } from "../utils/Classname";
+import { TypeChecker } from "../utils/TypeChecker";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { Orientation } from "../constants/Orientation";
+import { Alignment, Position } from "../constants/Alignment";
+import { Message } from "./Message";
+var ToastType;
+(function (ToastType) {
+    ToastType["TOAST"] = "toast";
+    ToastType["TOASTER"] = "toaster";
+    ToastType["MESSAGES"] = "messages";
+})(ToastType || (ToastType = {}));
+class ToastComponent extends React.Component {
+    static defaultProps = {
+        reverse: false,
+        position: Position.TOP_RIGHT,
+    };
+    state = {
+        breads: {},
+        reverse: this.props.reverse,
+        position: this.props.position,
+        breadsLimit: this.props.limit,
+        orientation: this.props.orientation,
+    };
+    synchronizationIndex = 0;
+    positionElementsMap = {};
+    synchronizer = {}; // to ensure messages are shown regardless of react setState asyncronous property
+    constructor(props) {
+        super(props);
+        this.showMessage = this.showMessage.bind(this);
+        this.actOnMessage = this.actOnMessage.bind(this);
+        this.removeMessage = this.removeMessage.bind(this);
+        this.clearMessages = this.clearMessages.bind(this);
+        this.updateMessage = this.updateMessage.bind(this);
+        this.renderMessages = this.renderMessages.bind(this);
+        this.operateOnMessageByKeys = this.operateOnMessageByKeys.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            show: this.showMessage,
+            clear: this.clearMessages,
+            update: this.updateMessage,
+            remove: this.removeMessage,
+            reverse: () => this.setState({ reverse: !this.state.reverse }),
+            changePosition: (position) => this.setState({ position }),
+            changeLimit: (limit) => this.setState({ breadsLimit: limit }),
+            changeOrientation: (orientation) => this.setState({ orientation }),
+        });
+    }
+    showMessage(message, key, synchronizationKey_) {
+        // start synchronization
+        const synchronizerKeys = Object.keys(this.synchronizer);
+        const synchronizationKey = `${synchronizationKey_ ?? this.synchronizationIndex++}`;
+        if (!synchronizerKeys.includes(synchronizationKey) && synchronizerKeys.length) {
+            this.synchronizer[synchronizationKey] = () => this.showMessage(message, key, synchronizationKey);
+            return [];
+        }
+        // end synchronization
+        const stateBreads = ObjectHelper.clone(this.state.breads);
+        let keys = (key && key instanceof Array) ? key : (key ? [key] : []);
+        const breads = message instanceof Array ? message : (message ? [message] : []);
+        if (keys.length && keys.length != breads.length) {
+            throw new Error("The toast keys count must match the count of the messages");
+        }
+        const position = this.state.position;
+        const newBreads = { ...stateBreads };
+        if (!keys.length)
+            keys = breads.map((message) => (message.key ?? DOMHelper.uniqueElementId("msg_")));
+        const positionBreads = breads.reduce((acc, bread, index) => {
+            bread.key = keys[index];
+            acc[bread.key] = bread;
+            return acc;
+        }, {});
+        newBreads[position] = {
+            ...stateBreads[position],
+            ...positionBreads,
+        };
+        this.synchronizer[synchronizationKey] = () => delete this.synchronizer[synchronizationKey];
+        this.setState({ breads: newBreads }, () => {
+            const desyncFun = (synchronizationKey && synchronizationKey in this.synchronizer) ? this.synchronizer[synchronizationKey] : undefined;
+            desyncFun && desyncFun();
+            const synchronizerKeys = Object.keys(this.synchronizer);
+            if (synchronizerKeys.length) {
+                const nextFire = this.synchronizer[synchronizerKeys[0]];
+                nextFire();
+            }
+            else {
+                this.synchronizationIndex = 0;
+            }
+            this.renderMessages(position, this.state.breads[position]);
+        });
+        return keys;
+    }
+    operateOnMessageByKeys(keys, operation) {
+        if (!keys.length)
+            return;
+        const stateBreads = this.state.breads;
+        const positions = Object.keys(this.state.breads);
+        positions.forEach((position) => {
+            const positionalBreads = stateBreads[position];
+            const positionals = Object.keys(positionalBreads);
+            positionals.forEach((positional) => {
+                const message = positionalBreads[positional];
+                if (!message || !keys.includes(message.key))
+                    return;
+                operation(message.key, message);
+            });
+        });
+    }
+    actOnMessage(key, message, action) {
+        if (!message.__manage_ref__) {
+            console.warn("noseur - toast/messages: gabbage collection failed, likely a memory leak, ", key);
+            return;
+        }
+        action(message.__manage_ref__);
+    }
+    removeMessage(key) {
+        let keys = (key && key instanceof Array) ? key : (key ? [key] : []);
+        this.operateOnMessageByKeys(keys, (key, message) => {
+            this.actOnMessage(key, message, (manageRef) => manageRef.close());
+        });
+    }
+    updateMessage(key, message, borrowLifetime = true) {
+        let keys = (key && key instanceof Array) ? key : (key ? [key] : []);
+        const breads = message instanceof Array ? message : (message ? [message] : []);
+        if (keys.length && keys.length != breads.length) {
+            throw new Error("The toast keys count must match the count of the messages");
+        }
+        this.operateOnMessageByKeys(keys, (key, message) => {
+            const index = keys.indexOf(key);
+            this.actOnMessage(key, message, (manageRef) => manageRef.update(breads[index], borrowLifetime));
+        });
+    }
+    clearMessages() {
+        Object.keys(this.state.breads).forEach(key => {
+            const positionBreads = this.state.breads[key];
+            Object.keys(positionBreads).forEach(skey => {
+                this.actOnMessage(skey, positionBreads[skey], (manageRef) => manageRef.close());
+            });
+        });
+    }
+    renderMessage(position, positionBreads, key) {
+        const message = positionBreads[key];
+        const cachedOnAction = message?.onAction;
+        const cachedOnExitDOM = message?.onExitDOM;
+        const cachedManageRef = message?.manageRef;
+        return React.createElement(Message, ({
+            ...message,
+            manageRef: (r) => {
+                if (r && cachedManageRef)
+                    ObjectHelper.resolveRef(cachedManageRef, r);
+                message.__manage_ref__ = r;
+            },
+            onAction: () => {
+                if (cachedOnAction)
+                    cachedOnAction();
+                this.props.onAction && this.props.onAction(message, key);
+            },
+            onExitDOM: () => {
+                delete positionBreads[key];
+                const breads = this.state.breads;
+                breads[position] = positionBreads;
+                if (cachedOnExitDOM)
+                    cachedOnExitDOM();
+                this.props.onRemove && this.props.onRemove(message, key);
+                this.setState({ breads }, () => {
+                    if (!(position in this.state.breads))
+                        return;
+                    const positionBreads = this.state.breads[position] || {};
+                    if (Object.keys(positionBreads).length) {
+                        this.renderMessages(position, positionBreads);
+                        return;
+                    }
+                    delete breads[position];
+                    this.setState({ breads }, () => {
+                        if (position in this.positionElementsMap) {
+                            delete this.positionElementsMap[position];
+                        }
+                    });
+                });
+            }
+        }));
+    }
+    renderMessages(position, positionBreads) {
+        const root = this.positionElementsMap[position];
+        if (!root)
+            return;
+        let keys = Object.keys(positionBreads);
+        if (TypeChecker.isNumber(this.state.breadsLimit) && this.state.breadsLimit)
+            keys = keys.slice(0, this.state.breadsLimit);
+        const messages = keys.map((key) => this.renderMessage(position, positionBreads, key));
+        root.render(this.state.reverse ? messages.reverse() : messages);
+    }
+    buildPositionRoot(type, position) {
+        const style = {};
+        if (this.state.orientation === Orientation.HORIZONTAL) {
+            style["flexDirection"] = "row";
+            if (position === Alignment.TOP || position === Alignment.BOTTOM || position.includes("center")) {
+                style["--messageMarginLeft"] = "0.25em";
+                style["--messageMarginRight"] = "0.25em";
+            }
+            else if (position.includes("left")) {
+                style["--messageMarginRight"] = "0.5em";
+            }
+            else if (position.includes("right")) {
+                style["--messageMarginLeft"] = "0.5em";
+            }
+        }
+        else {
+            if (position.includes("top")) {
+                style["--messageMarginBottom"] = "0.5em";
+            }
+            else if (position.includes("bottom")) {
+                style["--messageMarginTop"] = "0.5em";
+            }
+            else if (position === Alignment.LEFT || position === Alignment.RIGHT || position.includes("center")) {
+                style["--messageMarginTop"] = "0.25em";
+                style["--messageMarginBottom"] = "0.25em";
+            }
+        }
+        if (this.props.positionProps?.relative) {
+            style.position = "relative";
+        }
+        return (React.createElement("div", { key: position, className: Classname.build(`noseur-${type}-${position}`, this.props.positionProps?.className), id: this.props.positionProps?.id, style: ObjectHelper.merge(style, this.props.positionProps?.style ?? {}), ref: (r) => {
+                if (!(position in this.positionElementsMap)) {
+                    this.positionElementsMap[position] = ReactDOM.createRoot(r);
+                    this.renderMessages(position, this.state.breads[position]);
+                }
+            } }));
+    }
+    render() {
+        const breadsKeys = Object.keys(this.state.breads);
+        if (!breadsKeys.length && this.props.__type__ === ToastType.TOAST)
+            return null;
+        const type = (this.props.__type__ === ToastType.TOASTER) ? ToastType.TOAST : this.props.__type__;
+        const className = Classname.build(`noseur-${type}`, this.props.className);
+        const positionElements = breadsKeys.map((position) => this.buildPositionRoot(type, position));
+        const content = (React.createElement("div", { ref: this.props.forwardRef, className: className, id: this.props.id, style: this.props.style }, positionElements));
+        return (!this.props.container ? content : React.createElement(Portal, { children: content, container: this.props.container, visible: true }));
+    }
+}
+;
+export const Toast = ({ ref, ...props }) => (React.createElement(ToastComponent, { ...props, forwardRef: ref, __type__: ToastType.TOAST, container: document.body }));
+export const Messages = ({ ref, ...props }) => (React.createElement(ToastComponent, { ...props, forwardRef: ref, __type__: ToastType.MESSAGES }));
+let noseurInternalGlobalToasterRoot;
+let noseurInternalGlobalToasterManageRef;
+let noseurInternalGlobalToasterCallStack = [];
+export const Toaster = {
+    init: (props, onMount, ref) => {
+        if (noseurInternalGlobalToasterRoot) {
+            if (!noseurInternalGlobalToasterManageRef && onMount) {
+                noseurInternalGlobalToasterCallStack.push(onMount);
+            }
+            return;
+        }
+        let result = null;
+        const ___noseur_toaster___ = React.createElement(ToastComponent, {
+            ...props,
+            container: document.body,
+            __type__: ToastType.TOASTER,
+            forwardRef: ref ?? props.ref,
+            manageRef: (r) => {
+                noseurInternalGlobalToasterManageRef = r;
+                onMount && onMount();
+                for (const fun of (noseurInternalGlobalToasterCallStack ?? [])) {
+                    let sresult = fun();
+                    if (sresult)
+                        result = sresult;
+                }
+                noseurInternalGlobalToasterCallStack = null;
+            },
+        });
+        const wrapper = document.createDocumentFragment();
+        DOMHelper.appendChild(wrapper, document.body);
+        noseurInternalGlobalToasterRoot = ReactDOM.createRoot(wrapper);
+        noseurInternalGlobalToasterRoot.render(___noseur_toaster___);
+        if (result)
+            return result;
+    },
+    destroy: () => {
+        if (!noseurInternalGlobalToasterRoot)
+            return;
+        noseurInternalGlobalToasterRoot.unmount();
+        noseurInternalGlobalToasterRoot = null;
+    },
+    toast: (message, key) => {
+        return Toaster.show(message, key);
+    },
+    clear: () => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef)
+            Toaster.init({});
+        noseurInternalGlobalToasterManageRef?.clear();
+    },
+    reverse: () => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef) {
+            Toaster.init({}, Toaster.reverse());
+        }
+        noseurInternalGlobalToasterManageRef?.reverse();
+    },
+    changeLimit: (limit) => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef) {
+            Toaster.init({}, Toaster.changeLimit(limit));
+            return;
+        }
+        noseurInternalGlobalToasterManageRef?.changeLimit(limit);
+    },
+    remove: (key) => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef)
+            Toaster.init({});
+        noseurInternalGlobalToasterManageRef?.remove(key);
+    },
+    changePosition: (position) => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef) {
+            return Toaster.init({}, Toaster.changePosition(position));
+        }
+        noseurInternalGlobalToasterManageRef?.changePosition(position);
+    },
+    changeOrientation: (orientation) => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef) {
+            return Toaster.init({}, Toaster.changeOrientation(orientation));
+        }
+        noseurInternalGlobalToasterManageRef?.changeOrientation(orientation);
+    },
+    show: (message, key) => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef) {
+            return Toaster.init({}, () => Toaster.show(message, key));
+        }
+        return noseurInternalGlobalToasterManageRef?.show(message, key);
+    },
+    update: (key, message, borrowLifetime) => {
+        if (!noseurInternalGlobalToasterRoot || !noseurInternalGlobalToasterManageRef) {
+            return Toaster.init({}, () => Toaster.update(key, message, borrowLifetime));
+        }
+        noseurInternalGlobalToasterManageRef?.update(key, message, borrowLifetime);
+    },
+};