@rivtn/noseur 1.0.0

package/dist/esm/compose/form/FormControl.d.ts

@@ -0,0 +1,33 @@
+import "../Composed.css";
+import React from "react";
+import { Scheme } from "../../constants/Scheme";
+import { ComponentBaseProps } from "../../core/ComponentBaseProps";
+import { NoseurLabel, NoseurObject, NoseurElement } from "../../constants/Types";
+export interface FormControlProps extends ComponentBaseProps<HTMLDivElement> {
+    fill: boolean;
+    invalid: boolean;
+    labelFor: string;
+    tabIndex: number;
+    leftContent: any;
+    rightContent: any;
+    required: boolean;
+    highlight: boolean;
+    label: NoseurLabel;
+    borderless: boolean;
+    isFieldset: boolean;
+    invalidScheme: Scheme;
+    infoLabel: NoseurLabel;
+    validClassname: string;
+    helpLabel: NoseurLabel;
+    children?: NoseurElement;
+    invalidClassname: string;
+    centerOverlayContent: any;
+    fieldsetLegendBackground: string;
+    childrenProps: NoseurObject<any>;
+    childrenValidPropsMap: NoseurObject<any>;
+    childrenInvalidPropsMap: NoseurObject<any>;
+    validStyle: React.CSSProperties | undefined;
+    invalidStyle: React.CSSProperties | undefined;
+    contentStyle: React.CSSProperties | undefined;
+}
+export declare const FormControl: ({ ref, ...props }: Partial<FormControlProps>) => React.JSX.Element;

package/dist/esm/compose/form/FormControl.js

@@ -0,0 +1,163 @@
+import "../Composed.css";
+import React from "react";
+import { Scheme } from "../../constants/Scheme";
+import { Classname } from "../../utils/Classname";
+import { TypeChecker } from "../../utils/TypeChecker";
+import { ObjectHelper } from "../../utils/ObjectHelper";
+import { MicroBuilder } from "../../utils/MicroBuilder";
+import { DOMHelper } from "../../utils/DOMUtils";
+;
+// TODO implement manageRef to control contents, label, invalid, children, helpLabel, highlight, borderless
+class FormControlComponent extends React.Component {
+    static defaultProps = {
+        tabIndex: 0,
+        invalid: false,
+        invalidStyle: {},
+        contentStyle: {},
+        invalidScheme: Scheme.DANGER,
+        childrenValidPropsMap: {
+            "borderless": true,
+            "scheme": "{scheme}"
+        },
+        childrenInvalidPropsMap: {
+            "highlight": true,
+            "borderless": true,
+            "scheme": "{invalidScheme}"
+        }
+    };
+    state = {};
+    constructor(props) {
+        super(props);
+    }
+    mapComponentProperties(childrenProps, propsMap) {
+        Object.keys(propsMap || {}).forEach((prop) => {
+            let propValue = propsMap[prop];
+            if (TypeChecker.isString(propValue) && propValue.startsWith("{") && propValue.endsWith("}")) {
+                propValue = this.props[propValue.substring(1, propValue.length - 1)];
+            }
+            const previousValue = childrenProps[prop];
+            if (previousValue && !TypeChecker.isString(previousValue)) {
+                childrenProps[prop] = ObjectHelper.joinValues(previousValue, propValue);
+            }
+            else {
+                childrenProps[prop] = propValue;
+            }
+        });
+    }
+    renderLeftContent() {
+        if (!this.props.leftContent)
+            return;
+        let className = "noseur-fctrl-lc";
+        let leftContent = this.props.leftContent;
+        const scheme = !this.props.invalid ? this.props.scheme : this.props.invalidScheme;
+        if (TypeChecker.isString(leftContent)) {
+            if (scheme)
+                className += ` ${scheme}-tx`;
+            leftContent = React.createElement("i", { className: leftContent });
+        }
+        return (React.createElement("div", { className: className }, leftContent));
+    }
+    renderRightContent() {
+        if (!this.props.rightContent)
+            return;
+        let className = "noseur-fctrl-rc";
+        let rightContent = this.props.rightContent;
+        const scheme = !this.props.invalid ? this.props.scheme : this.props.invalidScheme;
+        if (TypeChecker.isString(rightContent)) {
+            if (scheme)
+                className += ` ${scheme}-tx`;
+            rightContent = React.createElement("i", { className: rightContent });
+        }
+        return (React.createElement("div", { className: className }, rightContent));
+    }
+    renderFieldsetLegend() {
+        if (!this.props.isFieldset)
+            return;
+        let className = "noseur-fieldset-legend";
+        const label = MicroBuilder.buildLabel(this.props.label, { scheme: this.props.scheme, type: "label", htmlFor: this.props.labelFor, className: "noseur-fctrl-l" });
+        return (React.createElement("legend", { className: className, ref: (r) => {
+                if (!r)
+                    return;
+                if (this.props.fieldsetLegendBackground === "dynamic") {
+                    console.log(DOMHelper.getElementStyle(r.parentElement?.parentElement?.parentElement)?.backgroundColor);
+                    r.style.backgroundColor = DOMHelper.getElementStyle(r.parentElement?.parentElement)?.backgroundColor;
+                }
+            }, style: { backgroundColor: (this.props.fieldsetLegendBackground && this.props.fieldsetLegendBackground !== "dynamic" ? this.props.fieldsetLegendBackground : undefined) } }, label));
+    }
+    renderCenterOverlayContent() {
+        if (!this.props.centerOverlayContent)
+            return;
+        let className = "noseur-fctrl-coc";
+        let centerOverlayContent = this.props.centerOverlayContent;
+        const scheme = !this.props.invalid ? this.props.scheme : this.props.invalidScheme;
+        if (TypeChecker.isString(centerOverlayContent)) {
+            if (scheme)
+                className += ` ${scheme}-tx`;
+            centerOverlayContent = React.createElement("i", { className: centerOverlayContent });
+        }
+        return (React.createElement("div", { className: className }, centerOverlayContent));
+    }
+    renderChildren(hasLeftContent, hasRightContent) {
+        const children = [].concat(this.props.children);
+        return children.map((child, index) => {
+            if (!child)
+                return child;
+            const childrenOwnScheme = child.props?.scheme;
+            const childrenProps = { ...(this.props.childrenProps || {}), ...(child.props || {}) };
+            if (this.props.required)
+                childrenProps.required = true;
+            if (!childrenOwnScheme)
+                childrenProps.scheme = this.props.scheme;
+            childrenProps.className = Classname.build("noseur-fctrl-cc", childrenProps.className, {
+                'noseur-pd-l-0': hasLeftContent,
+                'noseur-pd-r-0': hasRightContent,
+            });
+            if (!childrenProps.key)
+                childrenProps.key = index;
+            this.mapComponentProperties(childrenProps, (!this.props.invalid ? this.props.childrenValidPropsMap : this.props.childrenInvalidPropsMap));
+            return React.cloneElement(child, childrenProps);
+        });
+    }
+    render() {
+        const leftContent = this.renderLeftContent();
+        const rightContent = this.renderRightContent();
+        const fieldsetLegend = this.renderFieldsetLegend();
+        const centerOverlayContent = this.renderCenterOverlayContent();
+        const scheme = this.props.invalid ? this.props.invalidScheme : this.props.scheme;
+        const helpLabelClassName = this.props.invalid && !this.props.scheme ? "noseur-fctrl-hl noseur-invalid-tx" : "noseur-fctrl-hl";
+        const infoLabel = !this.props.invalid ? MicroBuilder.buildLabel(this.props.infoLabel, { scheme: this.props.scheme, className: "noseur-fctrl-il" }) : null;
+        const helpLabel = this.props.invalid ? MicroBuilder.buildLabel(this.props.helpLabel, { scheme: this.props.scheme, className: helpLabelClassName }) : null;
+        const label = (this.props.isFieldset ? null : MicroBuilder.buildLabel(this.props.label, { scheme: this.props.scheme, type: "label", htmlFor: this.props.labelFor, className: "noseur-fctrl-l" }));
+        const eventProps = ObjectHelper.extractEventProps(this.props);
+        const props = {
+            ...eventProps,
+            id: this.props.id,
+            key: this.props.key,
+            style: this.props.style,
+            required: this.props.required,
+            className: Classname.build("noseur-fctrl", (this.props.fill ? "noseur-wd-100-pct" : null), this.props.className),
+        };
+        delete props.children;
+        const contentStyle = {
+            ...this.props.contentStyle,
+            ...(this.props.invalid ? this.props.invalidStyle : this.props.validStyle),
+        };
+        const tagName = (this.props.isFieldset ? "fieldset" : "div");
+        const className = Classname.build("noseur-fctrl-c", { 'noseur-no-bd': this.props.borderless, "noseur-fieldset": this.props.isFieldset }, (scheme && this.props.highlight) ? `${scheme}-bd-cl` : null, this.props.invalid ? `${this.props.invalidScheme}-bd-cl` : null, (this.props.invalid ? this.props.invalidClassname : this.props.validClassname), (scheme) ? `${scheme}-bd-3px-bx-sw-fc ${scheme}-bd-cl-fc ${scheme}-bd-cl-hv` : null);
+        const children = this.renderChildren(!!leftContent, !!rightContent);
+        return (React.createElement("div", { ref: this.props.forwardRef, ...props },
+            label,
+            React.createElement(tagName, {
+                className,
+                style: contentStyle,
+                tabIndex: this.props.tabIndex,
+            }, (React.createElement(React.Fragment, null,
+                fieldsetLegend,
+                leftContent,
+                children,
+                centerOverlayContent,
+                rightContent))),
+            !this.props.invalid ? infoLabel : helpLabel));
+    }
+}
+export const FormControl = ({ ref, ...props }) => (React.createElement(FormControlComponent, { ...props, forwardRef: ref }));

package/dist/esm/compose/form/FormGroup.d.ts

@@ -0,0 +1,14 @@
+import "../Composed.css";
+import React from "react";
+import { NoseurObject } from "../../constants/Types";
+import { ComponentBaseProps } from "../../core/ComponentBaseProps";
+export interface FormGroupProps extends ComponentBaseProps<HTMLFormElement> {
+    method: string;
+    action: string;
+    childrenClassname: string;
+    childrenProps: NoseurObject<any>;
+    childrenStyle: React.CSSProperties | undefined;
+    onSubmit: React.FormEventHandler<HTMLFormElement>;
+}
+export declare const FormGroup: ({ ref, ...props }: Partial<FormGroupProps>) => React.JSX.Element;
+export declare const Form: ({ ref, ...props }: Partial<FormGroupProps>) => React.JSX.Element;

package/dist/esm/compose/form/FormGroup.js

@@ -0,0 +1,58 @@
+import "../Composed.css";
+import React from "react";
+import { ObjectHelper } from "../../utils/ObjectHelper";
+import { Classname } from "../../utils/Classname";
+import { TypeChecker } from "../../utils/TypeChecker";
+;
+class FormGroupComponent extends React.Component {
+    static defaultProps = {
+        method: "POST",
+        childrenStyle: {},
+        childrenProps: {},
+    };
+    state = {};
+    constructor(props) {
+        super(props);
+        this.resolveChildren = this.resolveChildren.bind(this);
+    }
+    resolveChildren(parent) {
+        if (!parent)
+            return;
+        const children = parent.length != undefined ? parent : [parent];
+        if (!children.length)
+            return;
+        return children.map((child, index) => {
+            if (!child)
+                return;
+            if (TypeChecker.isArray(child))
+                return this.resolveChildren(child);
+            if (!React.isValidElement(child))
+                return child;
+            const props = {
+                ...child.props,
+                ...this.props.childrenProps,
+                scheme: child.props.scheme || this.props.scheme,
+            };
+            if (!props.key)
+                props.key = index;
+            const cachedStyle = props.style || {};
+            const cachedClassname = props.className;
+            props.style = { ...this.props.childrenStyle, ...cachedStyle };
+            props.className = Classname.build(this.props.childrenClassname, cachedClassname);
+            return React.cloneElement(child, props);
+        });
+    }
+    render() {
+        const eventProps = ObjectHelper.extractEventProps(this.props);
+        const props = {
+            ...eventProps,
+            key: this.props.key,
+            style: this.props.style,
+            className: Classname.build("noseur-fgrp", this.props.className),
+        };
+        delete props.children;
+        return (React.createElement("form", { ...props, method: this.props.method, action: this.props.action, onSubmit: this.props.onSubmit || ((e) => e.preventDefault()), ref: this.props.forwardRef }, this.resolveChildren(this.props.children)));
+    }
+}
+export const FormGroup = ({ ref, ...props }) => (React.createElement(FormGroupComponent, { ...props, forwardRef: ref }));
+export const Form = FormGroup;

package/dist/esm/compose/overlay/Alert.d.ts

@@ -0,0 +1,56 @@
+import "../Composed.css";
+import React from "react";
+import { DialogProps } from "../../overlay/Dialog";
+import { PopoverProps } from "../../overlay/Popover";
+import { Alignment } from "../../constants/Alignment";
+import { ButtonProps, Scheme } from "../../";
+import { ComponentBaseProps, TransitionProps } from "../../core/ComponentBaseProps";
+import { NoseurDivElement, NoseurElement, NoseurIconElement, NoseurRawElement } from "../../constants/Types";
+export type AlertEvent = () => void;
+export type AlertControl = {
+    scheme?: Scheme;
+    label?: NoseurElement;
+    icon?: NoseurIconElement;
+    props?: Partial<ButtonProps>;
+    action?: AlertEvent;
+    ref?: React.ForwardedRef<any>;
+};
+export interface AlertProps<T> extends ComponentBaseProps<HTMLDivElement>, TransitionProps {
+    visible: boolean;
+    alignment: Alignment;
+    alignFooter: Alignment;
+    message: NoseurElement;
+    icon: NoseurIconElement;
+    dismissibleModal: boolean;
+    componentProps: Partial<T>;
+    container: NoseurRawElement;
+    cancel: AlertControl | null;
+    confirm: AlertControl | null;
+    footerElements: NoseurElement;
+    component: React.FunctionComponent<Partial<ComponentBaseProps<NoseurDivElement, any>> & React.RefAttributes<NoseurDivElement>>;
+    onHide: Function;
+    onCancel: AlertEvent;
+    onConfirm: AlertEvent;
+}
+export interface AlertInterface<T = DialogProps> {
+    hide: (onUnMount?: Function) => void;
+    destroy: (onUnMount?: Function) => void;
+    doneLoading: (onMount?: Function) => void;
+    startLoading: (onMount?: Function) => void;
+    show: (onMount?: Function) => AlertInterface<T>;
+    update: (newProps: Partial<AlertProps<T>>, onMount?: Function, onUnMount?: Function) => void;
+}
+export declare function alert<T>(props: Partial<AlertProps<T>>): AlertInterface<T>;
+export interface LoadingAlertDialog<T, C> extends AlertProps<C> {
+    loadingProps: Partial<AlertProps<C>>;
+    loadingElement: NoseurIconElement;
+    onLoading: (alert: AlertInterface<T>, params?: T) => Promise<boolean | undefined>;
+}
+export declare function loadingAlert<T, C>(props: Partial<LoadingAlertDialog<T, C>>, params?: T): AlertInterface<DialogProps>;
+export declare const AlertDialog: <T>({ ref, ...props }: Partial<AlertProps<T>>) => React.JSX.Element;
+export declare const AlertPopover: <T>({ ref, ...props }: Partial<AlertProps<T>>) => React.JSX.Element;
+export declare const Alert: <T>({ ref, ...props }: Partial<AlertProps<T>>) => React.JSX.Element;
+export declare const alertDialog: ({ ref, ...props }: Partial<AlertProps<DialogProps>>) => AlertInterface<DialogProps>;
+export declare const alertPopover: ({ ref, ...props }: Partial<AlertProps<PopoverProps>>) => AlertInterface<PopoverProps<HTMLDivElement, import("../../").PopoverManageRef, {}>>;
+export declare const loadingAlertDialog: <T>({ ref, ...props }: Partial<LoadingAlertDialog<T, DialogProps>>, params?: T) => AlertInterface<DialogProps>;
+export declare const loadingAlertPopover: <T>({ ref, ...props }: Partial<LoadingAlertDialog<T, PopoverProps>>, params?: T) => AlertInterface<DialogProps>;

package/dist/esm/compose/overlay/Alert.js

@@ -0,0 +1,267 @@
+import "../Composed.css";
+import React from "react";
+import ReactDOM from 'react-dom/client';
+import { Dialog } from "../../overlay/Dialog";
+import { Popover } from "../../overlay/Popover";
+import { Classname } from "../../utils/Classname";
+import { Alignment } from "../../constants/Alignment";
+import { MicroBuilder } from "../../utils/MicroBuilder";
+import { Button, DOMHelper, ObjectHelper, Scheme } from "../../";
+;
+class AlertComponent extends React.Component {
+    static defaultProps = {
+        component: Dialog,
+        componentProps: {},
+        dismissibleModal: true,
+        transitionTimeout: 500,
+        alignment: Alignment.CENTER,
+        alignFooter: Alignment.RIGHT,
+        confirm: {
+            label: "OK",
+            scheme: Scheme.SUCCESS
+        },
+        cancel: {
+            label: "Cancel",
+            scheme: Scheme.SECONDARY
+        }
+    };
+    state = {
+        visible: this.props.visible,
+    };
+    lastClickedElement;
+    internalComponentRef;
+    internalComponentSelfRef;
+    documentClickListener;
+    constructor(props) {
+        super(props);
+        this.onHide = this.onHide.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onConfirm = this.onConfirm.bind(this);
+    }
+    componentDidMount() {
+        this.documentClickListener = (event) => {
+            this.lastClickedElement = event.target || event.currentTarget;
+        };
+        document.addEventListener('click', this.documentClickListener);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.visible !== this.props.visible) {
+            const isVisible = this.state.visible;
+            this.setState({ visible: this.props.visible });
+            if (isVisible && this.props.dismissibleModal)
+                return;
+            this.internalComponentSelfRef && this.internalComponentSelfRef.toggle && this.internalComponentSelfRef.toggle({}, this.getUsableTarget());
+        }
+    }
+    componentWillUnmount() {
+        if (!this.documentClickListener)
+            return;
+        document.removeEventListener('click', this.documentClickListener);
+        this.documentClickListener = undefined;
+    }
+    getUsableTarget(e) {
+        let target = (e || event)?.target || (e || event)?.currentTarget;
+        if (!DOMHelper.isElement(target))
+            target = this.lastClickedElement;
+        return target;
+    }
+    onHide(e) {
+        if (this.props.onHide)
+            return this.props.onHide();
+        this.setState({ visible: false });
+        this.internalComponentSelfRef && this.internalComponentSelfRef.toggle && this.internalComponentSelfRef.toggle({}, this.getUsableTarget(e));
+    }
+    onConfirm(e) {
+        if (this.props.onConfirm)
+            return this.props.onConfirm();
+        this.onHide(e);
+    }
+    onCancel(e) {
+        if (this.props.onCancel)
+            return this.props.onCancel();
+        this.onHide(e);
+    }
+    renderControl() {
+        if (!this.props.cancel && !this.props.confirm && !this.props.footerElements)
+            return;
+        const controlButtons = [this.props.cancel, this.props.confirm].map((control, index) => {
+            if (!control)
+                return null;
+            const cachedOnClick = control.props?.onClick;
+            const text = control.label || control.props?.text;
+            const icon = control.icon || control.props?.leftIcon;
+            const ref = control.ref || control.props?.ref;
+            const scheme = control.scheme || control.props?.scheme;
+            const onClick = (e) => {
+                if (cachedOnClick)
+                    cachedOnClick(e);
+                if (control.action)
+                    control.action();
+                if (index === 0)
+                    this.onCancel(e);
+                if (index === 1)
+                    this.onConfirm(e);
+            };
+            return (React.createElement(Button, { ...(control.props || {}), key: control.props?.key || index, text: text, leftIcon: icon, scheme: scheme, ref: ref, onClick: onClick }));
+        });
+        return (React.createElement("div", { className: `noseur-alert-footer noseur-alert-footer-${this.props.alignFooter}` },
+            controlButtons,
+            this.props.footerElements));
+    }
+    render() {
+        const controls = this.renderControl();
+        const closeIcon = this.props.componentProps.closeIcon ?? null;
+        const cachedComponentPropsRef = this.props.componentProps.ref;
+        const cachedComponentPropsSelfRef = this.props.componentProps.selfRef;
+        const cachedComponentPropsForwardRef = this.props.componentProps.forwardRef;
+        const container = this.props.componentProps.container ?? this.props.container;
+        const alignment = this.props.componentProps.alignment ?? this.props.alignment;
+        const style = { ...(this.props.style || {}), ...(this.props.componentProps.style ?? {}) };
+        const className = Classname.build("noseur-alert", this.props.className, this.props.componentProps.className);
+        const icon = MicroBuilder.buildIcon(this.props.icon, { scheme: this.props.scheme, className: "noseur-dialog-content-icon" });
+        const ref = (e) => {
+            if (!!this.internalComponentRef && !e)
+                this.componentWillUnmount();
+            else if (!this.documentClickListener && !!e)
+                this.componentDidMount();
+            this.internalComponentRef = e;
+            ObjectHelper.resolveRef(cachedComponentPropsRef, e);
+        };
+        const forwardRef = (e) => {
+            if (!!this.internalComponentRef && !e)
+                this.componentWillUnmount();
+            else if (!this.documentClickListener && !!e)
+                this.componentDidMount();
+            this.internalComponentRef = e;
+            ObjectHelper.resolveRef(cachedComponentPropsForwardRef, e);
+        };
+        const selfRef = (e) => {
+            this.internalComponentSelfRef = e;
+            ObjectHelper.resolveRef(cachedComponentPropsSelfRef, e);
+        };
+        return React.createElement(this.props.component, {
+            ...this.props.componentProps,
+            ref,
+            style,
+            selfRef,
+            className,
+            alignment,
+            container,
+            forwardRef,
+            onHide: this.onHide,
+            closeIcon: closeIcon,
+            visible: this.state.visible,
+            transition: this.props.transition,
+            dismissible: this.props.dismissibleModal,
+            dismissibleModal: this.props.dismissibleModal,
+            transitionOptions: this.props.transitionOptions,
+            transitionTimeout: this.props.transitionTimeout,
+        }, (React.createElement("div", { className: "noseur-alert-content", ref: this.props.forwardRef },
+            icon,
+            this.props.message)), controls);
+    }
+}
+export function alert(props) {
+    let container = props.container || document.body;
+    let alertWrapper = document.createDocumentFragment();
+    DOMHelper.appendChild(alertWrapper, container);
+    props = { ...props, ...{ isVisible: props.visible === undefined ? true : props.visible } };
+    let alertDialog = React.createElement(AlertDialog, props);
+    let root = ReactDOM.createRoot(alertWrapper);
+    root.render(alertDialog);
+    let destroyed = false;
+    let mounted = props.visible;
+    let updateAlert = (newProps, onMount, onUnMount) => {
+        if (destroyed)
+            return;
+        props = { ...props, ...newProps, onHide: onUnMount };
+        mounted = props.visible;
+        const cachedRef = props.ref;
+        props.ref = !onMount ? cachedRef : (r) => {
+            if (!r)
+                return;
+            onMount();
+            if (cachedRef)
+                ObjectHelper.resolveRef(cachedRef, r);
+        };
+        root.render(React.cloneElement(alertDialog, props));
+    };
+    const alertInterface = {
+        hide: (onUnMount) => updateAlert({ visible: false }, undefined, onUnMount),
+        update: (newProps, onMount, nUnMount) => updateAlert(newProps, onMount, nUnMount),
+        destroy: (onUnMount) => {
+            if (!mounted)
+                return;
+            root.unmount();
+            destroyed = true;
+            onUnMount && onUnMount();
+        },
+        show: (onMount, onUnMount) => {
+            mounted = true;
+            updateAlert({
+                visible: true, onHide: () => {
+                    updateAlert({ visible: false }, undefined, onUnMount);
+                }
+            }, onMount);
+            return alertInterface;
+        },
+        doneLoading: (_) => { throw new Error("Alert is not of the loading type."); },
+        startLoading: (_) => { throw new Error("Alert is not of the loading type."); },
+    };
+    return alertInterface;
+}
+;
+export function loadingAlert(props, params) {
+    const icon = props.loadingElement || "fas fa-spinner fa-pulse";
+    const doneProps = {
+        icon: props.icon,
+        cancel: props.cancel,
+        confirm: props.confirm,
+        message: props.message,
+        className: props.className,
+        footerElements: props.footerElements,
+        dismissibleModal: props.dismissibleModal,
+    };
+    const loadingProps = {
+        ...props,
+        icon: icon,
+        cancel: null,
+        confirm: null,
+        message: null,
+        dismissibleModal: false,
+        className: "noseur-alert-loading",
+        ...(props.loadingProps || {})
+    };
+    const alert = alertDialog(loadingProps);
+    alert.show = (onMount, onUnMount) => {
+        if (props.onLoading) {
+            props.onLoading(alert, params).then((result) => {
+                if (result)
+                    alert.update(doneProps, onMount);
+                else if (result === undefined)
+                    alert.destroy();
+            });
+        }
+        alert.update({
+            ...loadingProps, visible: true, onHide: () => {
+                alert.update({ visible: false }, onMount, onUnMount);
+            }
+        }, onMount, onUnMount);
+        return alert;
+    };
+    alert.startLoading = (onMount) => {
+        alert.update(loadingProps, onMount);
+    };
+    alert.doneLoading = (onMount) => {
+        alert.update(doneProps, onMount);
+    };
+    return alert;
+}
+;
+export const AlertDialog = ({ ref, ...props }) => (React.createElement(AlertComponent, { ...props, forwardRef: ref }));
+export const AlertPopover = ({ ref, ...props }) => (React.createElement(AlertComponent, { ...props, component: Popover, forwardRef: ref }));
+export const Alert = AlertDialog;
+export const alertDialog = ({ ref, ...props }) => alert({ ...props, forwardRef: ref });
+export const alertPopover = ({ ref, ...props }) => alert({ ...props, forwardRef: ref, component: Popover });
+export const loadingAlertDialog = ({ ref, ...props }, params) => loadingAlert({ ...props, forwardRef: ref }, params);
+export const loadingAlertPopover = ({ ref, ...props }, params) => loadingAlert({ ...props, forwardRef: ref, component: Popover }, params);

package/dist/esm/constants/Alignment.d.ts

@@ -0,0 +1,17 @@
+export declare enum Alignment {
+    NONE = "",
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom",
+    CENTER = "center",
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    TOP_CENTER = "top-center",
+    BOTTOM_LEFT = "bottom-left",
+    CENTER_LEFT = "center-left",
+    CENTER_RIGHT = "center-right",
+    BOTTOM_RIGHT = "bottom-right",
+    BOTTOM_CENTER = "bottom-center"
+}
+export declare const Position: typeof Alignment;

package/dist/esm/constants/Alignment.js

@@ -0,0 +1,18 @@
+export var Alignment;
+(function (Alignment) {
+    Alignment["NONE"] = "";
+    Alignment["TOP"] = "top";
+    Alignment["LEFT"] = "left";
+    Alignment["RIGHT"] = "right";
+    Alignment["BOTTOM"] = "bottom";
+    Alignment["CENTER"] = "center";
+    Alignment["TOP_LEFT"] = "top-left";
+    Alignment["TOP_RIGHT"] = "top-right";
+    Alignment["TOP_CENTER"] = "top-center";
+    Alignment["BOTTOM_LEFT"] = "bottom-left";
+    Alignment["CENTER_LEFT"] = "center-left";
+    Alignment["CENTER_RIGHT"] = "center-right";
+    Alignment["BOTTOM_RIGHT"] = "bottom-right";
+    Alignment["BOTTOM_CENTER"] = "bottom-center";
+})(Alignment || (Alignment = {}));
+export const Position = Alignment;

package/dist/esm/constants/Direction.d.ts

@@ -0,0 +1,26 @@
+export declare enum Direction {
+    ALL = "",
+    WEST = "WEST",
+    EAST = "EAST",
+    NORTH = "NORTH",
+    SOUTH = "SOUTH",
+    EAST_WEST = "EAST_WEST",
+    NORTH_WEST = "NORTH_WEST",
+    NORTH_EAST = "NORTH_EAST",
+    SOUTH_WEST = "SOUTH_WEST",
+    SOUTH_EAST = "SOUTH_EAST",
+    NORTH_SOUTH = "NORTH_SOUTH"
+}
+export declare enum Bound {
+    ALL = "",
+    TOP = "TOP",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT",
+    BOTTOM = "BOTTOM"
+}
+export interface Ceiling {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+}