dry-ux 1.69.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.js

@@ -174,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/package.json

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