dry-ux 1.66.0 → 1.68.0

package/dist/helpers/utilities.d.ts

@@ -113,3 +113,7 @@ export declare const usePubSub: <T>() => {
     usePub: () => <TName extends keyof T, TPayload extends T[TName]>(event: TName, data?: TPayload) => void;
     useSub: <TName extends keyof T, TPayload_1 extends T[TName]>(event: TName, callback: (data: TPayload_1) => void) => () => void;
 };
+export declare const useDimensions: (ref?: React.MutableRefObject<HTMLElement>) => {
+    width: number;
+    height: number;
+};

package/dist/helpers/utilities.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePubSub = exports.useIsVisible = exports.tryParseJson = exports.Deferred = exports.getUrlParams = exports.insertUrlParams = exports.insertUrlParam = exports.toHashCode = exports.StorageUtils = exports.fnWithAuthCheck = exports.formatDollar = exports.useCountdown = exports.importStyleSheet = exports.importScript = exports.preventDefault = void 0;
+exports.useDimensions = exports.usePubSub = exports.useIsVisible = exports.tryParseJson = exports.Deferred = exports.getUrlParams = exports.insertUrlParams = exports.insertUrlParam = exports.toHashCode = exports.StorageUtils = exports.fnWithAuthCheck = exports.formatDollar = exports.useCountdown = exports.importStyleSheet = exports.importScript = exports.preventDefault = void 0;
 const React = require("react");
 /**
  * Returns a function that will call the given handler and prevent the default event behavior.
@@ -282,3 +282,17 @@ const usePubSub = () => {
     return { usePub, useSub };
 };
 exports.usePubSub = usePubSub;
+const useDimensions = (ref) => {
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const element = (ref === null || ref === void 0 ? void 0 : ref.current) || document.documentElement;
+    const handleResize = React.useCallback(() => setSize({ width: element.clientWidth, height: element.clientHeight }), [element]);
+    React.useEffect(() => {
+        const controller = new AbortController();
+        window.addEventListener("load", handleResize, { signal: controller.signal });
+        window.addEventListener("resize", handleResize, { signal: controller.signal });
+        handleResize();
+        return () => controller.abort();
+    }, [ref, handleResize]);
+    return size;
+};
+exports.useDimensions = useDimensions;

package/dist/index.d.ts

@@ -15,5 +15,6 @@ export { Loader } from "./ui-utils/Loader";
 export { Spinner } from "./ui-utils/Spinner";
 export { RenderWhenVisible } from "./ui-utils/RenderWhenVisible";
 export { Validation, Element } from "./enhanced-inputs/Validaition";
+export { Viewport } from "./ui-utils/ViewportDetect";
 export * from "./enhanced-inputs/HTMLInputs";
 export * from "./enhanced-inputs/interface";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Element = exports.Validation = exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
+exports.Viewport = exports.Element = exports.Validation = exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
 var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 Object.defineProperty(exports, "useDryUxContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
 Object.defineProperty(exports, "DryUXContext", { enumerable: true, get: function () { return UIUtilProvider_1.UIUtilContext; } });
@@ -47,5 +47,7 @@ Object.defineProperty(exports, "RenderWhenVisible", { enumerable: true, get: fun
 var Validaition_1 = require("./enhanced-inputs/Validaition");
 Object.defineProperty(exports, "Validation", { enumerable: true, get: function () { return Validaition_1.Validation; } });
 Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Validaition_1.Element; } });
+var ViewportDetect_1 = require("./ui-utils/ViewportDetect");
+Object.defineProperty(exports, "Viewport", { enumerable: true, get: function () { return ViewportDetect_1.Viewport; } });
 __exportStar(require("./enhanced-inputs/HTMLInputs"), exports);
 __exportStar(require("./enhanced-inputs/interface"), exports);

package/dist/provider.d.ts

@@ -10,6 +10,10 @@ interface IDryUXProviderProps {
      * Props to pass to the renderer.
      */
     rendererProps?: UIUtilRendererProps;
+    /**
+     * If true, the viewport detection will be enabled.
+     */
+    viewportDetect?: boolean;
     children: React.ReactNode;
 }
 export declare const DryUXProvider: React.FC<IDryUXProviderProps>;

package/dist/provider.js

@@ -4,6 +4,6 @@ exports.DryUXProvider = void 0;
 const React = require("react");
 const UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 const UIUtilRenderer_1 = require("./ui-utils/UIUtilRenderer");
-exports.DryUXProvider = React.memo(({ children, noRenderer = false, rendererProps }) => (React.createElement(UIUtilProvider_1.UIUtilProvider, null,
+exports.DryUXProvider = React.memo(({ children, noRenderer = false, rendererProps, viewportDetect }) => (React.createElement(UIUtilProvider_1.UIUtilProvider, { viewportDetect: viewportDetect },
     children,
     !noRenderer && React.createElement(UIUtilRenderer_1.UIUtilRenderer, Object.assign({}, rendererProps)))));

package/dist/styles/viewport.css

@@ -0,0 +1,66 @@
+.dry-visible-xs,
+.dry-visible-sm,
+.dry-visible-md,
+.dry-visible-lg {
+  display: none !important;
+}
+@media (max-width: 767px) {
+  .dry-visible-xs {
+    display: block !important;
+  }
+  table.dry-visible-xs {
+    display: table;
+  }
+  tr.dry-visible-xs {
+    display: table-row !important;
+  }
+  th.dry-visible-xs,
+  td.dry-visible-xs {
+    display: table-cell !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .dry-visible-sm {
+    display: block !important;
+  }
+  table.dry-visible-sm {
+    display: table;
+  }
+  tr.dry-visible-sm {
+    display: table-row !important;
+  }
+  th.dry-visible-sm,
+  td.dry-visible-sm {
+    display: table-cell !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .dry-visible-md {
+    display: block !important;
+  }
+  table.dry-visible-md {
+    display: table;
+  }
+  tr.dry-visible-md {
+    display: table-row !important;
+  }
+  th.dry-visible-md,
+  td.dry-visible-md {
+    display: table-cell !important;
+  }
+}
+@media (min-width: 1200px) {
+  .dry-visible-lg {
+    display: block !important;
+  }
+  table.dry-visible-lg {
+    display: table;
+  }
+  tr.dry-visible-lg {
+    display: table-row !important;
+  }
+  th.dry-visible-lg,
+  td.dry-visible-lg {
+    display: table-cell !important;
+  }
+}

package/dist/ui-utils/Modal.js

@@ -5,8 +5,10 @@ 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 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;
@@ -14,7 +16,7 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, opt
         if (setBackdropHeight) {
             document
                 .querySelectorAll(".modal-backdrop")
-                .forEach((el) => (el.style.height = `${document.body.scrollHeight}px`));
+                .forEach((el) => (el.style.height = `${document.documentElement.clientHeight}px`));
         }
         Object.keys(styles).forEach(selector => {
             document.querySelectorAll(selector).forEach((el) => {
@@ -33,6 +35,13 @@ 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();

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

@@ -1,11 +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";
 export interface IUIUtilProviderState {
     modal: UIUtilModal;
     prompt: UIUtilPrompt;
     customLoader: IUIUtilLoader;
     loader: Pick<IUIUtilLoader, "show" | "hide">;
+    viewport?: Viewport;
 }
 export declare const UIUtilContext: React.Context<IUIUtilProviderState>;
 export declare const useUIUtilContext: () => IUIUtilProviderState;
@@ -16,7 +18,9 @@ declare const modalId: {
     modal: string;
 };
 type ModalId = (typeof modalId)[keyof typeof modalId];
-export declare class UIUtilProvider extends React.PureComponent<{}, IUIUtilProviderState> {
+export declare class UIUtilProvider extends React.PureComponent<{
+    viewportDetect?: boolean;
+}, IUIUtilProviderState> {
     private readonly loader;
     constructor(props: any);
     get modalDefaults(): {

package/dist/ui-utils/UIUtilProvider.js

@@ -5,6 +5,7 @@ const React = require("react");
 require("../types");
 const Loader_1 = require("./Loader");
 const ActionsOverlay_1 = require("./ActionsOverlay");
+const ViewportDetect_1 = require("./ViewportDetect");
 const defaultState = {
     modal: {
         show: null,
@@ -171,7 +172,9 @@ class UIUtilProvider extends React.PureComponent {
         return this.getCurrentModal(id);
     }
     render() {
-        return React.createElement(exports.UIUtilContext.Provider, { value: this.state }, this.props.children);
+        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));
     }
 }
 exports.UIUtilProvider = UIUtilProvider;

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import "../styles/viewport.css";
+export declare enum Viewport {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const ViewportDetect: React.FC<{
+    onChange: (viewport: Viewport) => void;
+}>;

package/dist/ui-utils/ViewportDetect.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportDetect = exports.Viewport = void 0;
+const React = require("react");
+require("../styles/viewport.css");
+const utilities_1 = require("../helpers/utilities");
+var Viewport;
+(function (Viewport) {
+    Viewport["XS"] = "xs";
+    Viewport["SM"] = "sm";
+    Viewport["MD"] = "md";
+    Viewport["LG"] = "lg";
+})(Viewport || (exports.Viewport = Viewport = {}));
+const DetectionElement = ({ viewport, onVisibilityChange, }) => {
+    const ref = React.useRef(null);
+    const isVisible = (0, utilities_1.useIsVisible)(ref);
+    React.useEffect(() => {
+        onVisibilityChange(isVisible);
+    }, [isVisible]);
+    return React.createElement("div", { ref: ref, className: `dry-visible-${viewport}` });
+};
+exports.ViewportDetect = React.memo(({ onChange }) => {
+    const onVisibilityChange = (viewport, isVisible) => {
+        if (isVisible) {
+            onChange(viewport);
+        }
+    };
+    return (React.createElement(React.Fragment, null, Object.keys(Viewport)
+        .map(v => Viewport[v])
+        .map((viewport) => (React.createElement(DetectionElement, { key: viewport, viewport: viewport, onVisibilityChange: isVisible => onVisibilityChange(viewport, isVisible) })))));
+});

package/package.json

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