dry-ux 1.68.0 → 1.70.0

package/dist/styles/modal.css

@@ -59,6 +59,16 @@
     left: 50%!important;
 }
 
+.dry-ux-modal-backdrop {
+    position: fixed!important;
+    top: 0!important;
+    left: 0!important;
+    width: 100vw!important;
+    height: 100vh!important;
+    z-index: 1040!important;
+    opacity: 0.5!important;
+}
+
 @media only screen and (max-width: 767px) {
     .dry-ux-overlay-content {
         width: 90%;

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

@@ -9,7 +9,6 @@ export type ModalProps = {
             [selector: string]: React.CSSProperties;
         };
         defaultModalStyles?: boolean;
-        setBackdropHeight?: boolean;
         centered?: boolean;
         onOpen?: (modal: Pick<PopUpOptions, "title" | "trackingId">) => void;
         onClose?: (modal: Pick<PopUpOptions, "title" | "trackingId">) => void;

package/dist/ui-utils/Modal.js

@@ -5,19 +5,12 @@ const react_bootstrap_1 = require("react-bootstrap");
 require("../styles/modal.css");
 const classSet_1 = require("../helpers/classSet");
 const ActionsOverlay_1 = require("./ActionsOverlay");
-const utilities_1 = require("../helpers/utilities");
-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 Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, onOpen, onClose: globalOnClose }, }) => {
     const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
-    const { height: documentHeight } = (0, utilities_1.useDimensions)();
     const applyStyles = React.useCallback(() => {
         document.querySelectorAll(".modal-dialog").forEach((el) => {
             el.style.width = typeof width == "number" ? `${width}px` : width;
         });
-        if (setBackdropHeight) {
-            document
-                .querySelectorAll(".modal-backdrop")
-                .forEach((el) => (el.style.height = `${document.documentElement.clientHeight}px`));
-        }
         Object.keys(styles).forEach(selector => {
             document.querySelectorAll(selector).forEach((el) => {
                 Object.keys(styles[selector]).forEach(style => {
@@ -25,7 +18,7 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, opt
                 });
             });
         });
-    }, [width, styles, setBackdropHeight]);
+    }, [width, styles]);
     React.useEffect(() => {
         if (shown) {
             applyStyles();
@@ -35,13 +28,6 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, opt
             globalOnClose === null || globalOnClose === void 0 ? void 0 : globalOnClose({ title, trackingId });
         }
     }, [shown, width, defaultModalStyles]);
-    React.useEffect(() => {
-        if (setBackdropHeight) {
-            document
-                .querySelectorAll(".modal-backdrop")
-                .forEach((el) => (el.style.height = `${documentHeight}px`));
-        }
-    }, [documentHeight, setBackdropHeight]);
     const onHide = () => {
         handleClose(id, false, true);
         onClose && onClose();
@@ -75,7 +61,7 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, opt
                 }
             } }, 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" },
+    return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, className: modalCssClass, backdropClassName: "dry-ux-modal-backdrop", 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 },

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

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { Content, IUIUtilLoader, PopUp, PopUpAction, PopUpInstance, PopUpOptions, UIUtilModal, UIUtilPrompt } from "./UIUtil.interface";
 import "../types";
-import { Viewport } from "./ViewportDetect";
+import { CurrentViewport } from "./ViewportDetect";
 export interface IUIUtilProviderState {
     modal: UIUtilModal;
     prompt: UIUtilPrompt;
     customLoader: IUIUtilLoader;
     loader: Pick<IUIUtilLoader, "show" | "hide">;
-    viewport?: Viewport;
+    viewport: CurrentViewport;
 }
 export declare const UIUtilContext: React.Context<IUIUtilProviderState>;
 export declare const useUIUtilContext: () => IUIUtilProviderState;

package/dist/ui-utils/UIUtilProvider.js

@@ -31,6 +31,7 @@ const defaultState = {
         show: null,
         hide: null,
     },
+    viewport: new ViewportDetect_1.CurrentViewport(undefined),
 };
 exports.UIUtilContext = React.createContext(defaultState);
 const useUIUtilContext = () => React.useContext(exports.UIUtilContext);
@@ -173,8 +174,8 @@ class UIUtilProvider extends React.PureComponent {
     }
     render() {
         return (React.createElement(exports.UIUtilContext.Provider, { value: this.state },
-            this.props.viewportDetect && React.createElement(ViewportDetect_1.ViewportDetect, { onChange: viewport => this.setState({ viewport }) }),
-            this.props.children));
+            this.props.children,
+            this.props.viewportDetect && React.createElement(ViewportDetect_1.ViewportDetect, { onChange: viewport => this.setState({ viewport }) })));
     }
 }
 exports.UIUtilProvider = UIUtilProvider;

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

@@ -6,6 +6,15 @@ export declare enum Viewport {
     MD = "md",
     LG = "lg"
 }
+export declare class CurrentViewport {
+    private _current;
+    constructor(_current: Viewport);
+    get isXS(): boolean;
+    get isSM(): boolean;
+    get isMD(): boolean;
+    get isLG(): boolean;
+    get current(): Viewport;
+}
 export declare const ViewportDetect: React.FC<{
-    onChange: (viewport: Viewport) => void;
+    onChange: (current: CurrentViewport) => void;
 }>;

package/dist/ui-utils/ViewportDetect.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportDetect = exports.Viewport = void 0;
+exports.ViewportDetect = exports.CurrentViewport = exports.Viewport = void 0;
 const React = require("react");
 require("../styles/viewport.css");
 const utilities_1 = require("../helpers/utilities");
@@ -11,6 +11,27 @@ var Viewport;
     Viewport["MD"] = "md";
     Viewport["LG"] = "lg";
 })(Viewport || (exports.Viewport = Viewport = {}));
+class CurrentViewport {
+    constructor(_current) {
+        this._current = _current;
+    }
+    get isXS() {
+        return this._current === Viewport.XS;
+    }
+    get isSM() {
+        return this._current === Viewport.SM;
+    }
+    get isMD() {
+        return this._current === Viewport.MD;
+    }
+    get isLG() {
+        return this._current === Viewport.LG;
+    }
+    get current() {
+        return this._current;
+    }
+}
+exports.CurrentViewport = CurrentViewport;
 const DetectionElement = ({ viewport, onVisibilityChange, }) => {
     const ref = React.useRef(null);
     const isVisible = (0, utilities_1.useIsVisible)(ref);
@@ -22,7 +43,7 @@ const DetectionElement = ({ viewport, onVisibilityChange, }) => {
 exports.ViewportDetect = React.memo(({ onChange }) => {
     const onVisibilityChange = (viewport, isVisible) => {
         if (isVisible) {
-            onChange(viewport);
+            onChange(new CurrentViewport(viewport));
         }
     };
     return (React.createElement(React.Fragment, null, Object.keys(Viewport)

package/package.json

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