dry-ux 1.63.0 → 1.64.0

package/dist/styles/modal.css

@@ -0,0 +1,51 @@
+.dry-ux-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.65);
+    z-index: 1050;
+    border-radius: 10px;
+}
+
+.dry-ux-overlay-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.dry-ux-modal {
+    opacity: 1!important;
+}
+
+.dry-ux-modal.default-styles .modal-dialog {
+    max-width: 95%;
+    margin-top: 100px;
+}
+
+.dry-ux-modal.default-styles .modal-dialog .modal-header {
+    display: block;
+}
+
+.dry-ux-modal.default-styles .modal-dialog .modal-title {
+    margin-top: 0;
+}
+
+.dry-ux-modal.centered .modal-dialog {
+    margin-top: unset;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+}
+
+@media only screen and (max-width: 767px) {
+    .dry-ux-overlay-content {
+        width: 90%;
+    }
+}

package/dist/ui-utils/ActionsOverlay.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Content, PopUpAction } from "./UIUtil.interface";
+import { Omit } from "react-bootstrap";
+export declare const ActionsOverlay: React.FC<{
+    title: Content;
+    content: Content;
+    hide: () => void;
+    actions: Omit<PopUpAction, "confirm">[];
+}>;

package/dist/ui-utils/{ConfirmOverlay.js → ActionsOverlay.js}

@@ -1,20 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfirmOverlay = void 0;
+exports.ActionsOverlay = void 0;
 const React = require("react");
 const react_bootstrap_1 = require("react-bootstrap");
-const ConfirmOverlay = ({ content, onYes, onNo, }) => {
+const ActionsOverlay = ({ title, content, actions, hide }) => {
     return (React.createElement("div", { style: { minWidth: 200 } },
         React.createElement("div", { style: {
                 fontWeight: "bold",
                 fontSize: 18,
                 paddingLeft: 5,
-            } }, "Confirm"),
+            } }, title),
         React.createElement("hr", { style: { margin: 5 } }),
         React.createElement("div", null, typeof content == "string" ? (React.createElement("h4", { className: "text-center", style: { margin: 10 } }, content)) : (content)),
         React.createElement("hr", { style: { margin: 5 } }),
-        React.createElement("div", { style: { textAlign: "right" } },
-            React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-success", style: { marginRight: 10 }, onClick: onYes }, "Yes"),
-            React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: onNo }, "No"))));
+        React.createElement("div", { style: { textAlign: "right" } }, actions.map((action, index) => (React.createElement(react_bootstrap_1.Button, { key: index, bsClass: `btn btn-${action.type} btn-sm`, style: { marginRight: 10 }, onClick: () => {
+                var _a;
+                (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+                action.closeOnClick && hide();
+            } }, action.content))))));
 };
-exports.ConfirmOverlay = ConfirmOverlay;
+exports.ActionsOverlay = ActionsOverlay;

package/dist/ui-utils/Modal.d.ts

@@ -1,11 +1,9 @@
 import * as React from "react";
-import { Content, PopUpOptions } from "./UIUtil.interface";
-import "../styles/modal-overlay.css";
-export interface IModalProps {
-    options: PopUpOptions;
-    handleClose: () => void;
-    shown: boolean;
-    overlay: Content;
+import { PopUpInstance, PopUpOptions } from "./UIUtil.interface";
+import "../styles/modal.css";
+export type ModalProps = {
+    id: string;
+    instance: PopUpInstance;
     config: {
         styles?: {
             [selector: string]: React.CSSProperties;
@@ -16,8 +14,6 @@ export interface IModalProps {
         onOpen?: (modal: Pick<PopUpOptions, "title" | "trackingId">) => void;
         onClose?: (modal: Pick<PopUpOptions, "title" | "trackingId">) => void;
     };
-}
-declare const Modal: React.FC<IModalProps & {
-    handleClose: () => void;
-}>;
+};
+declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/ui-utils/Modal.js

@@ -2,28 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_bootstrap_1 = require("react-bootstrap");
-require("../styles/modal-overlay.css");
-const Modal = React.memo(({ handleClose, shown, overlay, options: { content, footerContent, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, }, config: { defaultModalStyles = false, styles = {}, setBackdropHeight = true, centered: globalCentered, onOpen, onClose: globalOnClose, }, }) => {
+require("../styles/modal.css");
+const classSet_1 = require("../helpers/classSet");
+const ActionsOverlay_1 = require("./ActionsOverlay");
+const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, setBackdropHeight = true, centered: globalCentered, onOpen, onClose: globalOnClose, }, }) => {
     const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
-    const modalRef = React.useRef(null);
     const applyStyles = React.useCallback(() => {
         document.querySelectorAll(".modal-dialog").forEach((el) => {
             el.style.width = typeof width == "number" ? `${width}px` : width;
-            if (defaultModalStyles) {
-                el.style.maxWidth = "95%";
-                el.style.marginTop = "100px";
-                el.querySelectorAll(".modal-header").forEach((el) => (el.style.display = "block"));
-                el.querySelectorAll(".modal-title").forEach((el) => (el.style.marginTop = "0"));
-            }
-            if (isCentered) {
-                el.style.position = "absolute";
-                el.style.transform = "translate(-50%, -50%)";
-                el.style.top = "50%";
-                el.style.left = "50%";
-                el.style.marginTop = "unset";
-            }
         });
-        document.querySelectorAll("[role=dialog]").forEach((el) => (el.style.opacity = "1"));
         if (setBackdropHeight) {
             document
                 .querySelectorAll(".modal-backdrop")
@@ -36,7 +23,7 @@ const Modal = React.memo(({ handleClose, shown, overlay, options: { content, foo
                 });
             });
         });
-    }, [width, defaultModalStyles, isCentered, styles, setBackdropHeight]);
+    }, [width, styles, setBackdropHeight]);
     React.useEffect(() => {
         if (shown) {
             applyStyles();
@@ -47,12 +34,39 @@ const Modal = React.memo(({ handleClose, shown, overlay, options: { content, foo
         }
     }, [shown, width, defaultModalStyles]);
     const onHide = () => {
-        handleClose();
+        handleClose(id, false, true);
         onClose && onClose();
     };
     const contentToRender = typeof content == "string" ? React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }) : content;
-    const showFooter = closeBtn || footerContent;
-    return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, ref: modalRef, className: cssClass, backdropStyle: { zIndex: 1040, opacity: 0.5 }, backdrop: "static" },
+    const showFooter = closeBtn || footerContent || !!(actions === null || actions === void 0 ? void 0 : actions.length);
+    const modalCssClass = (0, classSet_1.classSet)({
+        "dry-ux-modal": true,
+        centered: isCentered,
+        [cssClass]: true,
+        "default-styles": defaultModalStyles,
+    });
+    const actionsToRender = React.useMemo(() => {
+        const _actions = [...(actions || [])];
+        if (closeBtn) {
+            _actions.push({ content: "Close", type: "danger", onClick: onHide });
+        }
+        return _actions.map(({ content, type = "success", closeOnClick, onClick, confirm }, index) => (React.createElement(react_bootstrap_1.Button, { bsClass: `btn btn-${type} mright`, onClick: () => {
+                const triggerClick = () => {
+                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                    closeOnClick && onHide();
+                };
+                if (!!confirm) {
+                    toggleOverlay(id, React.createElement(ActionsOverlay_1.ActionsOverlay, { title: "Confirm", content: confirm, hide: () => toggleOverlay(id), actions: [
+                            { content: "Yes", type: "success", onClick: triggerClick, closeOnClick: true },
+                            { content: "No", type: "danger", closeOnClick: true },
+                        ] }));
+                }
+                else {
+                    triggerClick();
+                }
+            } }, content)));
+    }, [actions, toggleOverlay, onHide, closeBtn]);
+    return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, className: modalCssClass, backdropStyle: { zIndex: 1040, opacity: 0.5 }, backdrop: "static" },
         overlay && (React.createElement("div", { className: "dry-ux-overlay" },
             React.createElement("div", { className: "dry-ux-overlay-content" }, overlay))),
         !!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: onHide },
@@ -60,6 +74,6 @@ const Modal = React.memo(({ handleClose, shown, overlay, options: { content, foo
         React.createElement(react_bootstrap_1.Modal.Body, null, contentToRender),
         showFooter && (React.createElement(react_bootstrap_1.Modal.Footer, null,
             footerContent,
-            closeBtn && (React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: onHide }, "Close"))))));
-});
+            actionsToRender))));
+};
 exports.default = Modal;

package/dist/ui-utils/UIUtil.interface.d.ts

@@ -1,3 +1,4 @@
+import { Omit } from "react-bootstrap";
 export type Content = JSX.Element | string;
 export type PopUp = {
     /**
@@ -12,6 +13,10 @@ export type PopUp = {
      * Removes the modal.
      */
     remove: () => void;
+    /**
+     * Updates the modal options.
+     */
+    update: (options: Partial<PopUpOptions>) => void;
     /**
      * The overlay for the modal.
      */
@@ -21,15 +26,49 @@ export type PopUp = {
          */
         show: (content: Content) => void;
         /**
-         * Shows the overlay.
+         * Shows the overlay with yes/no buttons.
          */
         showConfirm: (content: Content, onYes: () => void, onNo?: () => void) => void;
+        /**
+         * Shows the overlay with custom actions.
+         */
+        showActions: (title: Content, content: Content, actions: Omit<PopUpAction, "confirm">[]) => void;
         /**
          * Hides the overlay.
          */
         hide: () => void;
     };
 };
+export type ButtonType = "primary" | "secondary" | "info" | "success" | "warning" | "danger";
+export type PopUpInstance = {
+    options: PopUpOptions;
+    shown: boolean;
+    overlay?: Content;
+    handleClose: (id: string, shown: boolean, destroyOnClose?: boolean) => void;
+    toggleOverlay: (id: string, content?: Content) => void;
+};
+export type PopUpAction = {
+    /**
+     * The content to display in the modal.
+     */
+    content: Content;
+    /**
+     * The type of button to display.
+     */
+    type?: ButtonType;
+    /**
+     * Function to call when the button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * If true, the modal will be closed when the button is clicked.
+     */
+    closeOnClick?: boolean;
+    /**
+     * If set, confirm overlay will be shown before the action is executed.
+     */
+    confirm?: Content;
+};
 export type PopUpOptions = {
     /**
      * The content of the modal.
@@ -75,29 +114,10 @@ export type PopUpOptions = {
      * The tracking ID for the modal.
      */
     trackingId?: string;
-};
-export type ButtonType = "primary" | "secondary" | "info" | "success" | "warning" | "danger";
-export type PopUpAction = {
     /**
-     * The content to display in the modal.
-     */
-    content: Content;
-    /**
-     * The type of button to display.
+     * If true, the modal will be shown.
      */
-    type?: ButtonType;
-    /**
-     * Function to call when the button is clicked.
-     */
-    onClick?: () => void;
-    /**
-     * If true, the modal will be closed when the button is clicked.
-     */
-    closeOnClick?: boolean;
-    /**
-     * If set, confirm overlay will be shown before the action is executed.
-     */
-    confirm?: Content;
+    actions?: PopUpAction[];
 };
 export type UIUtilModal = {
     /**
@@ -115,12 +135,7 @@ export type UIUtilModal = {
      * Dictionary of modal instances in memory.
      */
     instances: {
-        [id: string]: {
-            options: PopUpOptions;
-            shown: boolean;
-            overlay?: Content;
-            handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
-        };
+        [id: string]: PopUpInstance;
     };
     /**
      * Gets the current modal instance.
@@ -137,13 +152,13 @@ export type UIUtilModal = {
      * @param onYes The function to call when the yes button is clicked.
      * @param onNo The function to call when the no button is clicked.
      */
-    showConfirm: (options: PopUpOptions, onYes: () => void, onNo?: () => void) => PopUp;
+    showConfirm: (options: Omit<PopUpOptions, "actions">, onYes: () => void, onNo?: () => void) => PopUp;
     /**
      * Shows a modal with custom actions.
      * @param options The options for the modal.
      * @param actions The actions to display in the modal.
      */
-    showActions: (options: PopUpOptions, actions: PopUpAction[]) => PopUp;
+    showActions: (options: Omit<PopUpOptions, "actions">, actions: PopUpAction[]) => PopUp;
 };
 export interface IUIUtilLoader {
     /**

package/dist/ui-utils/UIUtilProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IUIUtilLoader, UIUtilModal, PopUp, PopUpAction, PopUpOptions, UIUtilPrompt, Content } from "./UIUtil.interface";
+import { Content, IUIUtilLoader, PopUp, PopUpAction, PopUpInstance, PopUpOptions, UIUtilModal, UIUtilPrompt } from "./UIUtil.interface";
 import "../types";
 export interface IUIUtilProviderState {
     modal: UIUtilModal;
@@ -9,9 +9,15 @@ export interface IUIUtilProviderState {
 }
 export declare const UIUtilContext: React.Context<IUIUtilProviderState>;
 export declare const useUIUtilContext: () => IUIUtilProviderState;
+declare const modalId: {
+    actions: string;
+    confirm: string;
+    alert: string;
+    modal: string;
+};
+type ModalId = (typeof modalId)[keyof typeof modalId];
 export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProviderState> {
     private readonly loader;
-    private readonly modalId;
     constructor(props: any);
     get modalDefaults(): {
         create: any;
@@ -21,12 +27,7 @@ export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProvi
         showConfirm: (options: PopUpOptions, onYes: () => void, onNo?: () => void) => PopUp;
         showActions: (options: PopUpOptions, actions: PopUpAction[]) => PopUp;
         instances: {
-            [id: string]: {
-                options: PopUpOptions;
-                shown: boolean;
-                overlay?: Content;
-                handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
-            };
+            [id: string]: PopUpInstance;
         };
     };
     get customLoaderDefaults(): {
@@ -40,22 +41,17 @@ export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProvi
     };
     get promptDefaults(): {
         getCurrent: () => PopUp;
-        showConfirm: (options: PopUpOptions, onYes: () => void, onNo?: () => void) => PopUp;
-        showActions: (options: PopUpOptions, actions: PopUpAction[]) => PopUp;
+        showConfirm: (options: import("react-bootstrap").Omit<PopUpOptions, "actions">, onYes: () => void, onNo?: () => void) => PopUp;
+        showActions: (options: import("react-bootstrap").Omit<PopUpOptions, "actions">, actions: PopUpAction[]) => PopUp;
         instances: {
-            [id: string]: {
-                options: PopUpOptions;
-                shown: boolean;
-                overlay?: Content;
-                handleClose: (id: string, shown: boolean, destroyOnClose: boolean) => void;
-            };
+            [id: string]: PopUpInstance;
         };
     };
-    toggleModalInstance(id: string, shown: boolean, destroyOnClose?: boolean): void;
-    toggleModalOverlay(id: string, content?: JSX.Element | string): void;
-    getModalActionButtons(actions: PopUpAction[]): React.JSX.Element[];
-    removeModalInstance(id: string): void;
-    getCurrentModal(id: string): PopUp;
-    createModal(id: string, options: PopUpOptions): PopUp;
+    toggleModalInstance: PopUpInstance["handleClose"];
+    toggleModalOverlay: PopUpInstance["toggleOverlay"];
+    removeModalInstance(id: ModalId): void;
+    getCurrentModal(id: ModalId): PopUp;
+    createModal(id: ModalId, options: PopUpOptions): PopUp;
     render(): React.JSX.Element;
 }
+export {};

package/dist/ui-utils/UIUtilProvider.js

@@ -3,9 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIUtilProvider = exports.useUIUtilContext = exports.UIUtilContext = void 0;
 const React = require("react");
 require("../types");
-const react_bootstrap_1 = require("react-bootstrap");
 const Loader_1 = require("./Loader");
-const ConfirmOverlay_1 = require("./ConfirmOverlay");
+const ActionsOverlay_1 = require("./ActionsOverlay");
 const defaultState = {
     modal: {
         show: null,
@@ -35,33 +34,67 @@ const defaultState = {
 exports.UIUtilContext = React.createContext(defaultState);
 const useUIUtilContext = () => React.useContext(exports.UIUtilContext);
 exports.useUIUtilContext = useUIUtilContext;
+const modalId = {
+    actions: "actions",
+    confirm: "confirm",
+    alert: "alert",
+    modal: "modal",
+};
 class UIUtilProvider extends React.PureComponent {
     constructor(props) {
         super(props);
         this.loader = Loader_1.Loader.getInstance();
-        this.modalId = {
-            actions: "actions",
-            confirm: "confirm",
+        this.toggleModalInstance = (id, shown, destroyOnClose = false) => {
+            var _a, _b;
+            const { modal: { instances }, } = this.state;
+            const instance = instances[id];
+            if (!instance) {
+                return;
+            }
+            // Hide all other instances
+            Object.keys(instances).forEach(id => (instances[id].shown = false));
+            if (!shown) {
+                (_b = (_a = instance.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+            if (!shown && destroyOnClose && instance.options.destroyOnClose) {
+                this.removeModalInstance(id);
+            }
+            else {
+                instance.shown = shown;
+                this.setState({
+                    modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
+                });
+            }
+        };
+        this.toggleModalOverlay = (id, content) => {
+            const { modal: { instances }, } = this.state;
+            instances[id].overlay = content;
+            this.setState({
+                modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
+            });
         };
         this.state = Object.assign(Object.assign({}, defaultState), { modal: this.modalDefaults, customLoader: this.customLoaderDefaults, loader: this.loaderDefaults, prompt: this.promptDefaults });
     }
     get modalDefaults() {
-        return Object.assign(Object.assign({}, defaultState.modal), { create: this.createModal.bind(this), show: (options) => this.createModal(null, options), getCurrent: () => {
+        return Object.assign(Object.assign({}, defaultState.modal), { create: this.createModal.bind(this), show: (options) => this.createModal(modalId.modal, options), getCurrent: () => {
                 const { modal: { instances }, } = this.state;
                 const id = Object.keys(instances).find(id => instances[id].shown);
                 return this.getCurrentModal(id);
-            }, showAlert: (content, onClose) => this.createModal(null, {
+            }, showAlert: (content, onClose) => this.createModal(modalId.alert, {
                 content: typeof content == "string" ? React.createElement("h4", { className: "text-center mtop" }, content) : content,
                 destroyOnClose: true,
                 closeBtn: true,
                 width: 400,
                 onClose,
-            }), showConfirm: (options, onYes, onNo) => this.createModal(this.modalId.confirm, Object.assign(Object.assign({}, options), { footerContent: (React.createElement(React.Fragment, null,
-                    options.footerContent,
-                    React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-success mright", onClick: onYes }, "Yes"),
-                    React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: () => onNo ? onNo() : this.toggleModalInstance(this.modalId.confirm, false, true) }, "No"))) })), showActions: (options, actions) => this.createModal(this.modalId.actions, Object.assign(Object.assign({}, options), { footerContent: (React.createElement(React.Fragment, null,
-                    options.footerContent,
-                    this.getModalActionButtons(actions))) })) });
+            }), showConfirm: (options, onYes, onNo) => this.createModal(modalId.confirm, Object.assign(Object.assign({}, options), { actions: [
+                    { content: "Yes", type: "success", onClick: onYes },
+                    {
+                        content: "No",
+                        type: "danger",
+                        onClick: onNo,
+                        closeOnClick: true,
+                    },
+                ] })), showActions: (options, actions) => this.createModal(modalId.actions, Object.assign(Object.assign({}, options), { actions })) });
     }
     get customLoaderDefaults() {
         return Object.assign(Object.assign({}, defaultState.customLoader), { show: () => this.setState({
@@ -80,52 +113,6 @@ class UIUtilProvider extends React.PureComponent {
                 return this.getCurrentModal(id);
             } });
     }
-    toggleModalInstance(id, shown, destroyOnClose = false) {
-        var _a, _b;
-        const { modal: { instances }, } = this.state;
-        const instance = instances[id];
-        if (!instance) {
-            return;
-        }
-        // Hide all other instances
-        Object.keys(instances).forEach(id => (instances[id].shown = false));
-        if (!shown) {
-            (_b = (_a = instance.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }
-        if (!shown && destroyOnClose && instance.options.destroyOnClose) {
-            this.removeModalInstance(id);
-        }
-        else {
-            instance.shown = shown;
-            this.setState({
-                modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
-            });
-        }
-    }
-    toggleModalOverlay(id, content) {
-        const { modal: { instances }, } = this.state;
-        instances[id].overlay = content;
-        this.setState({
-            modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
-        });
-    }
-    getModalActionButtons(actions) {
-        return actions.map(({ content, type = "success", closeOnClick, onClick, confirm }, index) => (React.createElement(react_bootstrap_1.Button, { bsClass: `btn btn-${type} mright`, onClick: () => {
-                const triggerClick = () => {
-                    onClick === null || onClick === void 0 ? void 0 : onClick();
-                    closeOnClick && this.toggleModalInstance(this.modalId.actions, false, true);
-                };
-                if (!!confirm) {
-                    this.toggleModalOverlay(this.modalId.actions, React.createElement(ConfirmOverlay_1.ConfirmOverlay, { content: confirm, onYes: () => {
-                            triggerClick();
-                            this.toggleModalOverlay(this.modalId.actions);
-                        }, onNo: () => this.toggleModalOverlay(this.modalId.actions) }));
-                }
-                else {
-                    triggerClick();
-                }
-            } }, content)));
-    }
     removeModalInstance(id) {
         var _a, _b;
         const { modal: { instances }, } = this.state;
@@ -141,15 +128,30 @@ class UIUtilProvider extends React.PureComponent {
             show: () => this.toggleModalInstance(id, true),
             hide: () => this.toggleModalInstance(id, false),
             remove: () => this.removeModalInstance(id),
+            update: (options) => {
+                const instance = this.state.modal.instances[id];
+                instance.options = Object.assign(Object.assign({}, instance.options), options);
+                this.setState({
+                    modal: Object.assign(Object.assign({}, this.state.modal), { instances: Object.assign(Object.assign({}, this.state.modal.instances), { [id]: instance }) }),
+                });
+            },
             overlay: {
                 show: (content) => this.toggleModalOverlay(id, content),
-                showConfirm: (content, onYes, onNo) => this.toggleModalOverlay(id, React.createElement(ConfirmOverlay_1.ConfirmOverlay, { content: content, onYes: () => {
-                        onYes();
-                        this.toggleModalOverlay(id);
-                    }, onNo: () => {
-                        onNo === null || onNo === void 0 ? void 0 : onNo();
-                        this.toggleModalOverlay(id);
-                    } })),
+                showConfirm: (content, onYes, onNo) => this.toggleModalOverlay(id, React.createElement(ActionsOverlay_1.ActionsOverlay, { title: "Confirm", content: content, hide: () => this.toggleModalOverlay(id), actions: [
+                        {
+                            content: "Yes",
+                            type: "success",
+                            onClick: onYes,
+                            closeOnClick: true,
+                        },
+                        {
+                            content: "No",
+                            type: "danger",
+                            onClick: onNo,
+                            closeOnClick: true,
+                        },
+                    ] })),
+                showActions: (title, content, actions) => this.toggleModalOverlay(id, React.createElement(ActionsOverlay_1.ActionsOverlay, { title: title, content: content, hide: () => this.toggleModalOverlay(id), actions: actions })),
                 hide: () => this.toggleModalOverlay(id),
             },
         };
@@ -160,6 +162,7 @@ class UIUtilProvider extends React.PureComponent {
             options,
             shown: false,
             handleClose: this.toggleModalInstance.bind(this),
+            toggleOverlay: this.toggleModalOverlay.bind(this),
         };
         this.setState({
             modal: Object.assign(Object.assign({}, this.state.modal), { instances }),

package/dist/ui-utils/UIUtilRenderer.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { IModalProps } from "./Modal";
+import { ModalProps } from "./Modal";
 export type UIUtilRendererProps = {
-    modalConfig?: IModalProps["config"];
+    modalConfig?: ModalProps["config"];
 };
 export declare const UIUtilRenderer: React.FC<UIUtilRendererProps>;

package/dist/ui-utils/UIUtilRenderer.js

@@ -5,9 +5,6 @@ const React = require("react");
 const UIUtilProvider_1 = require("./UIUtilProvider");
 const Modal_1 = require("./Modal");
 exports.UIUtilRenderer = React.memo(({ modalConfig = {} }) => {
-    const { modal } = (0, UIUtilProvider_1.useUIUtilContext)();
-    return (React.createElement(React.Fragment, null, Object.keys(modal.instances).map(id => {
-        const { shown, options, handleClose, overlay } = modal.instances[id];
-        return (React.createElement(Modal_1.default, { key: id, shown: shown, overlay: overlay, options: options, handleClose: () => handleClose(id, false, true), config: modalConfig }));
-    })));
+    const { modal: { instances }, } = (0, UIUtilProvider_1.useUIUtilContext)();
+    return (React.createElement(React.Fragment, null, Object.keys(instances).map(id => (React.createElement(Modal_1.default, { key: id, id: id, instance: instances[id], config: modalConfig })))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.63.0",
+  "version": "1.64.0",
   "description": "",
   "main": "dist/index",
   "scripts": {

package/dist/styles/modal-overlay.css

@@ -1,26 +0,0 @@
-.dry-ux-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.65);
-    z-index: 1050;
-    border-radius: 10px;
-}
-
-.dry-ux-overlay-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: white;
-    padding: 10px;
-    border-radius: 5px;
-}
-
-@media only screen and (max-width: 767px) {
-    .dry-ux-overlay-content {
-        width: 90%;
-    }
-}

package/dist/ui-utils/ConfirmOverlay.d.ts

@@ -1,7 +0,0 @@
-import * as React from "react";
-import { Content } from "./UIUtil.interface";
-export declare const ConfirmOverlay: React.FC<{
-    content: Content;
-    onYes: () => void;
-    onNo: () => void;
-}>;