@rivtn/noseur 1.0.0

package/dist/esm/layout/GridView.js

@@ -0,0 +1,34 @@
+import "./Layout.css";
+import React from "react";
+import { Classname } from "../utils/Classname";
+class GridViewComponent extends React.Component {
+    static defaultProps = {
+        gap: 0,
+        row: 5,
+        column: 5,
+        columnSize: 25,
+    };
+    state = {
+        column: this.props.column,
+    };
+    constructor(props) {
+        super(props);
+    }
+    componentDidUpdate(prevProps, _) {
+        console.log("THE.----", prevProps, this.state.column);
+    }
+    render() {
+        const width = (typeof this.props.columnSize === "number" ? this.props.columnSize : this.props.columnSize.width);
+        const className = Classname.build("noseur-gridview", this.props.className);
+        const style = {
+            ...(this.props.style ?? {}),
+            gridTemplateColumns: Array(this.state.column).fill(`${width}px`).join(" "),
+            columnGap: (typeof this.props.gap !== "number" ? this.props.gap?.column : undefined),
+            rowGap: (typeof this.props.gap !== "number" ? this.props.gap?.row : undefined),
+            gap: (typeof this.props.gap === "number" ? this.props.gap : undefined),
+        };
+        return (React.createElement("div", { className: className, style: style, id: this.props.id, key: this.props.key }, this.props.children));
+    }
+    ;
+}
+export const GridView = ({ ref, ...props }) => (React.createElement(GridViewComponent, { ...props, forwardRef: ref }));

package/dist/esm/layout/Layout.css

@@ -0,0 +1,5 @@
+/* GridView */
+.noseur-gridview {
+  display: grid;
+  width: fit-content;
+}

package/dist/esm/misc/Misc.css

@@ -0,0 +1,164 @@
+/* Progressbar */
+.noseur-progress-bar {
+  height: 1rem;
+  overflow: hidden;
+  position: relative;
+  border-radius: 6px;
+}
+
+.noseur-progress-bar-determinant {
+  width: 0%;
+  margin: 0px;
+  height: 100%;
+  display: flex;
+  border: 0 none;
+  overflow: hidden;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  transition: width 1s ease-in-out;
+}
+
+.noseur-progress-bar-label {
+  font-size: 11px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.noseur-progress-bar-indeterminate {
+  width: 0px;
+  margin: 0px;
+}
+
+.noseur-progress-bar-indeterminate::before {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: noseur-progress-bar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation: noseur-progress-bar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.noseur-progress-bar-indeterminate::after {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: noseur-progress-bar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation: noseur-progress-bar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  -webkit-animation-delay: 1.15s;
+  animation-delay: 1.15s;
+}
+
+@-webkit-keyframes noseur-progress-bar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@keyframes noseur-progress-bar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@-webkit-keyframes noseur-progress-bar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes noseur-progress-bar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+/* Badge, Tag And Pill */
+.noseur-badge {
+  font-weight: 700;
+  overflow: hidden;
+  min-width: 1.2rem;
+  border-radius: 50%;
+  font-size: 0.65rem;
+  text-align: center;
+  align-items: center;
+  line-height: 1.2rem;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.noseur-tag {
+  font-weight: 700;
+  border-radius: 3px;
+  font-size: 0.65rem;
+  text-align: center;
+  align-items: center;
+  display: inline-block;
+  justify-content: center;
+  padding: 0.25rem 0.4rem;
+}
+
+.noseur-pill {
+  font-weight: 700;
+  font-size: 0.65rem;
+  text-align: center;
+  border-radius: 10px;
+  align-items: center;
+  display: inline-block;
+  padding: 0.25rem 0.4rem;
+  justify-content: center;
+}
+
+.noseur-badge-overlay {
+  padding-top: 4px;
+  padding-right: 4px;
+  position: relative;
+  width: max-content;
+}
+
+.noseur-badge-overlay > .noseur-badge,
+.noseur-badge-overlay > .noseur-tag,
+.noseur-badge-overlay > .noseur-pill {
+  z-index: 2;
+  position: absolute;
+}

package/dist/esm/misc/ProgressBar.d.ts

@@ -0,0 +1,22 @@
+import "./Misc.css";
+import React from 'react';
+import { ComponentBaseProps } from '../core/ComponentBaseProps';
+import { NoseurNummber, NoseurNumberedObject, NumberRange, NoseurObject } from "../constants/Types";
+export interface ProgressBarManageRef {
+    getValue: () => NumberRange<0, 100>;
+    setValue: (value: NumberRange<0, 100>) => void;
+}
+export declare enum ProgressBarMode {
+    DETERMINATE = 0,
+    INDETERMINATE = 1
+}
+export interface ProgressBarProps extends ComponentBaseProps<HTMLDivElement, ProgressBarManageRef> {
+    style: {};
+    stripped: boolean;
+    noLabel: boolean;
+    mode: ProgressBarMode;
+    value: NumberRange<0, 100>;
+    labeltemplate: (value: NoseurNummber) => string;
+    percentageColors: NoseurNumberedObject<NoseurObject<string>>;
+}
+export declare const ProgressBar: ({ ref, ...props }: Partial<ProgressBarProps>) => React.JSX.Element;

package/dist/esm/misc/ProgressBar.js

@@ -0,0 +1,86 @@
+import "./Misc.css";
+import React from 'react';
+import { Scheme } from '../constants/Scheme';
+import { Classname } from '../utils/Classname';
+import { ObjectHelper } from "../utils/ObjectHelper";
+export var ProgressBarMode;
+(function (ProgressBarMode) {
+    ProgressBarMode[ProgressBarMode["DETERMINATE"] = 0] = "DETERMINATE";
+    ProgressBarMode[ProgressBarMode["INDETERMINATE"] = 1] = "INDETERMINATE";
+})(ProgressBarMode || (ProgressBarMode = {}));
+;
+// TODO color per percentage
+class ProgressBarComponent extends React.Component {
+    static defaultProps = {
+        scheme: Scheme.PRIMARY,
+        mode: ProgressBarMode.DETERMINATE
+    };
+    state = {
+        currentValue: this.props.value
+    };
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            getValue: () => this.state.currentValue,
+            setValue: (value) => this.setState({ currentValue: value }),
+        });
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ currentValue: this.props.value });
+        }
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    getPercentageColor(value) {
+        if (!this.props.percentageColors)
+            return;
+        const percentages = Object.keys(this.props.percentageColors).reverse();
+        for (const percentage of percentages) {
+            if (value >= percentage) {
+                return this.props.percentageColors[percentage];
+            }
+        }
+        return;
+    }
+    buildDeterminant(value, label, percentageColor) {
+        const style = { width: `${value}%`, background: percentageColor ? percentageColor["fg"] : undefined };
+        const className = Classname.build("noseur-progress-bar-determinant", this.props.scheme);
+        const props = {
+            style,
+            className
+        };
+        return (React.createElement("div", { ...props }, label));
+    }
+    buildInDeterminant() {
+        const className = Classname.build("noseur-progress-bar-indeterminate", this.props.scheme);
+        return (React.createElement("div", { className: className }));
+    }
+    buildLabel(value) {
+        if (this.props.noLabel)
+            return null;
+        const label = this.props.labeltemplate ? this.props.labeltemplate(3) : value + "%";
+        return React.createElement("span", { className: "noseur-progress-bar-label" }, label);
+    }
+    render() {
+        const className = Classname.build("noseur-progress-bar", {
+            'noseur-disabled': !this.props.noStyle && this.props.disabled,
+        }, this.props.className);
+        let value = (this.state.currentValue && this.state.currentValue < 0 ? 0 : this.state.currentValue);
+        value = (value && value > 100 ? 100 : value);
+        const label = this.buildLabel(value);
+        const percentageColor = this.getPercentageColor(value);
+        const style = percentageColor ? { ...this.props.style, background: percentageColor["bg"] } : this.props.style;
+        const bar = this.props.mode === ProgressBarMode.DETERMINATE ? this.buildDeterminant(value, label, percentageColor) : this.buildInDeterminant();
+        const eventProps = ObjectHelper.extractEventProps(this.props);
+        const props = {
+            style,
+            className,
+            ...eventProps,
+            id: this.props.id,
+            key: this.props.key,
+        };
+        return (React.createElement("div", { ref: this.props.forwardRef, ...props }, bar));
+    }
+}
+export const ProgressBar = ({ ref, ...props }) => (React.createElement(ProgressBarComponent, { ...props, forwardRef: ref }));

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

@@ -0,0 +1,46 @@
+import "./Overlay.css";
+import React from "react";
+import { Alignment } from "../constants/Alignment";
+import { ComponentBaseProps, ComponentElementBasicAttributes, TransitionProps } from "../core/ComponentBaseProps";
+import { NoseurElement, NoseurObject, NoseurRawElement } from "../constants/Types";
+export type DialogEvent = () => void;
+export type DialogMaximizeEvent = (event?: any) => boolean;
+export interface DialogManageRef {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}
+export interface DialogProps extends ComponentBaseProps<HTMLDivElement, DialogManageRef>, TransitionProps {
+    visible: boolean;
+    baseZIndex: number;
+    maximized: boolean;
+    noOverlay: boolean;
+    icons: NoseurElement;
+    notClosable: boolean;
+    alignment: Alignment;
+    maximizable: boolean;
+    header: NoseurElement;
+    footer: NoseurElement;
+    disableScroll: boolean;
+    closeIcon: NoseurElement;
+    dismissibleModal: boolean;
+    modalProps: NoseurObject<any>;
+    headerProps: NoseurObject<any>;
+    contentProps: NoseurObject<any>;
+    onOpenFocusRef: React.MutableRefObject<any>;
+    onCloseFocusRef: React.MutableRefObject<any>;
+    container: NoseurRawElement | React.Ref<HTMLDivElement>;
+    maximizeIcons: {
+        minimize: NoseurElement;
+        maximize: NoseurElement;
+    };
+    maximizeProps?: {
+        minimize?: ComponentElementBasicAttributes;
+        maximize?: ComponentElementBasicAttributes;
+    };
+    onShow: DialogEvent;
+    onHide: DialogEvent;
+    onMaximize?: DialogMaximizeEvent;
+    onMinimize?: DialogMaximizeEvent;
+}
+export declare const Dialog: ({ ref, ...props }: Partial<DialogProps>) => React.JSX.Element;

package/dist/esm/overlay/Dialog.js

@@ -0,0 +1,290 @@
+import "./Overlay.css";
+import React from "react";
+import { Portal } from "./Portal";
+import { Classname } from "../utils/Classname";
+import { TypeChecker } from "../utils/TypeChecker";
+import { Alignment } from "../constants/Alignment";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { CSSTransition } from 'react-transition-group';
+import { BaseZIndex, DOMHelper, ZIndexHandler } from "../utils/DOMUtils";
+import { NoseurGlobals } from "../core/ComponentBaseProps";
+import { Transition } from "../constants/Transition";
+;
+class DialogComponent extends React.Component {
+    static defaultProps = {
+        notClosable: false,
+        disableScroll: false,
+        dismissibleModal: true,
+        closeIcon: "fa fa-times",
+        alignment: Alignment.CENTER,
+        baseZIndex: BaseZIndex.MODAL,
+        transition: Transition.DIALOGY,
+        maximizeIcons: {
+            minimize: "fa fa-window-minimize",
+            maximize: "fa fa-window-maximize",
+        }
+    };
+    state = {
+        visible: false,
+        modalVisible: false,
+        id: DOMHelper.uniqueElementId(),
+        maximized: this.props.maximized,
+    };
+    internalModalElement;
+    internalDialogElement;
+    componentUnmounted = false;
+    transitionNodeRef;
+    constructor(props) {
+        super(props);
+        this.onClose = this.onClose.bind(this);
+        this.onEnter = this.onEnter.bind(this);
+        this.onExited = this.onExited.bind(this);
+        this.onEntered = this.onEntered.bind(this);
+        this.onModalClick = this.onModalClick.bind(this);
+        this.toggleMaximize = this.toggleMaximize.bind(this);
+        this.transitionNodeRef = React.createRef();
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            show: () => this.setState({ visible: true }),
+            hide: () => this.setState({ visible: false }),
+            toggle: () => this.setState({ visible: !this.props.visible }),
+        });
+        if (this.props.visible) {
+            this.setState({ modalVisible: true }, () => {
+                ZIndexHandler.setElementZIndex(this.internalModalElement, this.props.baseZIndex);
+            });
+        }
+        this.componentUnmounted = true;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.visible && !this.state.modalVisible) {
+            this.setState({ modalVisible: true }, () => {
+                ZIndexHandler.setElementZIndex(this.internalModalElement, this.props.baseZIndex);
+            });
+        }
+        if (!this.props.visible && this.state.visible && this.state.modalVisible) {
+            this.setState({
+                visible: this.props.visible
+            });
+        }
+        if (prevProps.maximized !== this.props.maximized) {
+            this.setState({ maximized: this.props.maximized }, () => {
+                if (this.props.onMaximize) {
+                    this.updateScrollOnMaximizable();
+                }
+            });
+        }
+    }
+    componentWillUnmount() {
+        if (!this.componentUnmounted)
+            return;
+        this.componentUnmounted = true;
+        ZIndexHandler.removeElementZIndex(this.internalModalElement);
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    onClose(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({ visible: !this.props.visible });
+    }
+    onEnter() {
+        if ((this.props.disableScroll || (this.props.maximizable && this.state.maximized)) && !this.props.noOverlay) {
+            DOMHelper.addClass((this.getRefOrHTMLElement(this.props.container) || document.body), 'noseur-overflow-hidden');
+        }
+    }
+    onEntered() {
+        if (this.props.onShow)
+            this.props.onShow();
+        const elementToReceiveOpenFocus = this.props.onOpenFocusRef?.current;
+        if (elementToReceiveOpenFocus && TypeChecker.isFunction(elementToReceiveOpenFocus?.focus)) {
+            elementToReceiveOpenFocus.focus();
+        }
+    }
+    onExited() {
+        ZIndexHandler.removeElementZIndex(this.internalModalElement);
+        this.setState({ modalVisible: false });
+        if ((this.props.disableScroll || (this.props.maximizable && this.state.maximized)) && !this.props.noOverlay) {
+            DOMHelper.removeClass((this.getRefOrHTMLElement(this.props.container) || document.body), 'noseur-overflow-hidden');
+        }
+        const elementToReceiveCloseFocus = this.props.onCloseFocusRef?.current;
+        if (elementToReceiveCloseFocus && TypeChecker.isFunction(elementToReceiveCloseFocus?.focus)) {
+            elementToReceiveCloseFocus.focus();
+        }
+        if (this.props.onHide)
+            this.props.onHide();
+    }
+    onModalClick(event) {
+        if (this.props.dismissibleModal && !this.props.noOverlay && this.internalModalElement === event.target) {
+            this.onClose(event);
+        }
+    }
+    toggleMaximize(event) {
+        let maximized = !this.state.maximized;
+        event.preventDefault();
+        event.stopPropagation();
+        if (!maximized && (!this.props.onMinimize || this.props.onMinimize(event))) {
+            this.setState({ maximized }, this.updateScrollOnMaximizable);
+        }
+        if (!!maximized && (!this.props.onMaximize || this.props.onMaximize(event))) {
+            this.setState({ maximized }, this.updateScrollOnMaximizable);
+        }
+    }
+    updateScrollOnMaximizable() {
+        if (!this.props.disableScroll) {
+            let funcIdentifier = this.state.maximized ? 'addClass' : 'removeClass';
+            (DOMHelper[funcIdentifier])((this.getRefOrHTMLElement(this.props.container) || document.body), 'noseur-overflow-hidden');
+        }
+    }
+    renderCloseButton() {
+        if (this.props.notClosable || !this.props.closeIcon)
+            return;
+        if (TypeChecker.isString(this.props.closeIcon)) {
+            return (React.createElement("i", { className: `noseur-dialog-header-close-icon ${this.props.closeIcon}`, onClick: this.onClose }));
+        }
+        const closeProps = { ...(this.props.closeIcon.props || {}) };
+        const cacheClassName = closeProps.className;
+        closeProps.className = Classname.build('noseur-dialog-header-close-icon', cacheClassName);
+        if (!closeProps.onClick)
+            closeProps.onClick = this.onClose;
+        return React.cloneElement(this.props.closeIcon, closeProps);
+    }
+    renderMaximizeButton() {
+        if (!this.props.maximizable)
+            return;
+        const icon = (this.state.maximized ? this.props.maximizeIcons.minimize : this.props.maximizeIcons.maximize);
+        if (TypeChecker.isString(icon)) {
+            const className = Classname.build('noseur-dialog-header-maximize-icon', icon);
+            return (React.createElement("i", { className: className, onClick: this.toggleMaximize }));
+        }
+        const iconProps = { ...(icon.props || {}) };
+        const cacheClassName = iconProps.className;
+        iconProps.className = Classname.build('noseur-dialog-header-maximize-icon', cacheClassName);
+        if (!iconProps.onClick)
+            iconProps.onClick = this.toggleMaximize;
+        return React.cloneElement(icon, iconProps);
+    }
+    renderHeader(id) {
+        let header = this.props.header;
+        const closeIcon = this.renderCloseButton();
+        const maximizeIcon = this.renderMaximizeButton();
+        const icons = this.props.icons || [];
+        if (!closeIcon && !maximizeIcon && !header)
+            return;
+        if (header) {
+            header = this.props.header;
+            if (TypeChecker.isString(header)) {
+                header = React.createElement("span", { id: id + '-header', className: "noseur-dialog-title" }, header);
+            }
+            else {
+                const relayProps = { ...(header.props || {}) };
+                const cacheClassName = relayProps.className;
+                relayProps.className = Classname.build('noseur-dialog-title', cacheClassName);
+                header = React.cloneElement(header, relayProps);
+            }
+        }
+        const headerProps = { ...(this.props.headerProps || {}) };
+        const cacheClassName = headerProps.className;
+        headerProps.className = Classname.build(`noseur-dialog-header ${!header ? "nl" : ""}`, cacheClassName);
+        // TODO add onMouseDown for dragging header on screen
+        return (React.createElement("div", { ...headerProps },
+            header,
+            React.createElement("div", { className: "noseur-dialog-header-right" },
+                icons,
+                maximizeIcon,
+                closeIcon)));
+    }
+    renderFooter() {
+        if (!this.props.footer)
+            return;
+        const footer = this.props.footer;
+        const className = "noseur-dialog-footer";
+        if (TypeChecker.isReactElement(this.props.footer)) {
+            const footerProps = { ...(footer.props || {}) };
+            const cacheClassName = footerProps.className;
+            footerProps.className = Classname.build(className, cacheClassName);
+            return React.cloneElement(footer, footerProps);
+        }
+        return (React.createElement("div", { className: className }, footer));
+    }
+    renderContent(id, hasHeader) {
+        const contentProps = { ...(this.props.contentProps || {}) };
+        const cacheId = contentProps.id;
+        const cacheClassName = contentProps.className;
+        contentProps.className = Classname.build('noseur-dialog-content', cacheClassName, {
+            'noseur-dialog-content-bd-t': !hasHeader,
+            'noseur-dialog-content-bd-b': !this.props.footer,
+        });
+        return (React.createElement("div", { ...contentProps, id: cacheId || `${id}-content` }, this.props.children));
+    }
+    renderChildren() {
+        const id = this.props.id || this.state.id;
+        const className = Classname.build('noseur-dialog', this.props.className, {
+            'noseur-dialog-maximized': this.state.maximized
+        }, NoseurGlobals.get(NoseurGlobals.KEYS.LAF.THEME));
+        let alignment = this.props.alignment;
+        if (alignment === Alignment.TOP_CENTER)
+            alignment = Alignment.TOP;
+        if (alignment === Alignment.BOTTOM_CENTER)
+            alignment = Alignment.BOTTOM;
+        const modalProps = { ...(this.props.modalProps || {}) };
+        const cacheModalRef = modalProps.ref;
+        const cacheClassName = modalProps.className;
+        modalProps.ref = (r) => {
+            if (!!this.internalModalElement && !r)
+                this.componentWillUnmount();
+            else if (this.componentUnmounted && !!r)
+                this.componentDidMount();
+            this.internalModalElement = r;
+            ObjectHelper.resolveRef(cacheModalRef, r);
+        };
+        modalProps.className = Classname.build('noseur-dialog-modal', {
+            'noseur-p-stk': !!this.props.container,
+            'noseur-component-overlay': !this.props.noOverlay,
+            'noseur-dialog-visible': this.state.modalVisible
+        }, `noseur-dialog-${alignment}`, cacheClassName, this.props.maximizeProps?.[this.state.maximized ? "maximize" : "minimize"]?.className);
+        const transitionTimeout = this.props.transitionTimeout ?? 500;
+        const footer = this.renderFooter();
+        const header = this.renderHeader(id);
+        const transition = this.props.transition;
+        const content = this.renderContent(id, !!header);
+        const elementRef = (r) => {
+            this.internalDialogElement = r;
+            ObjectHelper.resolveRef(cacheModalRef, r);
+            ObjectHelper.resolveRef(this.transitionNodeRef, r);
+            ObjectHelper.resolveRef(this.props.forwardRef, r, true);
+        };
+        if (!modalProps.onClick)
+            modalProps.onClick = this.onModalClick;
+        return (React.createElement("div", { ...modalProps, style: {
+                ...(modalProps.style),
+                zIndex: this.props.baseZIndex ?? modalProps.style?.zIndex,
+                ...(this.props.maximizeProps?.[this.state.maximized ? "maximize" : "minimize"]?.style),
+            }, ref: (r) => {
+                ObjectHelper.resolveRef(cacheModalRef, r);
+                if (!(r && !this.state.visible && this.props.visible))
+                    return;
+                this.setState({
+                    visible: this.props.visible
+                });
+            } },
+            React.createElement(CSSTransition, { classNames: transition, timeout: transition === Transition.NONE ? 0 : transitionTimeout, in: this.state.visible, options: this.props.transitionOptions, unmountOnExit: true, onEnter: this.onEnter, onEntered: this.onEntered, onExited: this.onExited, nodeRef: this.transitionNodeRef },
+                React.createElement("div", { ref: elementRef, id: id, className: className, style: this.props.style, role: "dialog", "aria-labelledby": id + '-header', "aria-describedby": id + '-content', "aria-modal": this.props.dismissibleModal },
+                    header,
+                    content,
+                    footer))));
+    }
+    getRefOrHTMLElement(p) {
+        if (typeof p === "object" && ("current" in p)) {
+            return p.current;
+        }
+        return p;
+    }
+    render() {
+        if (!this.state.modalVisible)
+            return null;
+        const children = this.renderChildren();
+        return React.createElement(Portal, { children: children, container: this.getRefOrHTMLElement(this.props.container), visible: true });
+    }
+}
+export const Dialog = ({ ref, ...props }) => (React.createElement(DialogComponent, { ...props, forwardRef: ref }));

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

@@ -0,0 +1,35 @@
+import "./Overlay.css";
+import React, { MouseEventHandler } from 'react';
+import { NoseurElement, NoseurIconElement, NoseurRawElement } from "../constants/Types";
+import { ProgressBarProps } from "../misc/ProgressBar";
+import { ComponentBaseProps, ComponentElementBasicAttributes, TransitionProps } from "../core/ComponentBaseProps";
+export type MessageEventHandler = () => void;
+export type MessageContentHandler = (attr?: ComponentElementBasicAttributes) => NoseurElement;
+export type MessageAttributesRelays = {
+    progressBar: Partial<ProgressBarProps>;
+    content?: ComponentElementBasicAttributes;
+    closeIcon?: ComponentElementBasicAttributes;
+};
+export interface MessageManageRef {
+    close: () => void;
+    update: (messageProps: Partial<MessageProps>, borrowLifetime?: boolean) => void;
+}
+export interface MessageProps extends ComponentBaseProps<HTMLDivElement, MessageManageRef, MessageAttributesRelays>, TransitionProps {
+    fill: boolean;
+    sticky: boolean;
+    lifetime: number;
+    foreScheme: boolean;
+    closeOnClick: boolean;
+    icon: NoseurIconElement;
+    showProgressbar: boolean;
+    pauseDelayOnHover: boolean;
+    container: NoseurRawElement;
+    content: NoseurElement | MessageContentHandler;
+    onClose: MessageEventHandler;
+    onAction: MessageEventHandler;
+    onExitDOM: MessageEventHandler;
+    onEnterDOM: MessageEventHandler;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement> | undefined;
+}
+export declare const Message: ({ ref, ...props }: Partial<MessageProps>) => React.JSX.Element;