@elliemae/pui-app-sdk 4.10.0 → 4.11.0

package/dist/cjs/index.js

@@ -148,7 +148,7 @@ var import_history = require("./utils/history.js");
 var import_constants2 = require("./utils/constants.js");
 var import_actions2 = require("./data/navigation-prompt/actions.js");
 var import_loadable = require("./view/loadable/index.js");
-var import_wait_message = require("./view/modals/wait-message/index.js");
+var import_wait_message = require("./view/wait-message/index.js");
 var import_session_timeout = require("./view/session-timeout/index.js");
 var import_session = require("./utils/session.js");
 var import_actions3 = require("./data/wait-message/actions.js");

package/dist/cjs/view/app-root/hosted-app.js

@@ -34,10 +34,10 @@ module.exports = __toCommonJS(hosted_app_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_styled_components = __toESM(require("styled-components"));
 var import_error_toast = require("../error-toast/index.js");
-var import_wait_message = require("../modals/wait-message/index.js");
+var import_wait_message = require("../wait-message/index.js");
 var import_use_breakpoint = require("../breakpoint/use-breakpoint.js");
 var import_use_window_size_change = require("../use-window-size-change.js");
-var import_use_html_wait_message = require("../modals/wait-message/use-html-wait-message.js");
+var import_use_html_wait_message = require("../wait-message/use-html-wait-message.js");
 var import_style = __toESM(require("./style.js"));
 const Div = import_styled_components.default.div`
   height: 100%;

package/dist/cjs/view/app-root/stand-alone-app.js

@@ -39,7 +39,7 @@ var import_use_window_size_change = require("../use-window-size-change.js");
 var import_session_timeout = require("../session-timeout/index.js");
 var import_live_message = require("../live-message/index.js");
 var import_error_toast = require("../error-toast/index.js");
-var import_wait_message = require("../modals/wait-message/index.js");
+var import_wait_message = require("../wait-message/index.js");
 var import_style = __toESM(require("./style.js"));
 const Div = import_styled_components.default.div`
   height: 100%;

package/dist/cjs/view/loadable/index.js

@@ -23,7 +23,7 @@ __export(loadable_exports, {
 module.exports = __toCommonJS(loadable_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_wait_message_launcher = require("../modals/wait-message/wait-message-launcher.js");
+var import_wait_message_launcher = require("../wait-message/wait-message-launcher.js");
 const loadable = (importFunc, fallback = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wait_message_launcher.WaitMessageLauncher, {})) => {
   const LazyComponent = (0, import_react.lazy)(importFunc);
   return (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LazyComponent, { ...props }) });

package/dist/cjs/view/render-with-host-data/index.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(render_with_host_data_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_fetch_host_app_data = require("../fetch-host-app-data/index.js");
-var import_wait_message_launcher = require("../modals/wait-message/wait-message-launcher.js");
+var import_wait_message_launcher = require("../wait-message/wait-message-launcher.js");
 const renderWithHostData = (data) => {
   const {
     ComponentToRender,

package/dist/cjs/view/wait-message/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var wait_message_exports = {};
+__export(wait_message_exports, {
+  WaitMessage: () => WaitMessage
+});
+module.exports = __toCommonJS(wait_message_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_backdrop = require("@elliemae/ds-backdrop");
+var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
+var import_react_redux = require("../../data/react-redux.js");
+var import_use_html_wait_message = require("./use-html-wait-message.js");
+var import_user_wait_event = require("../../analytics/user-wait-event.js");
+const StyledCircularIndicator = (0, import_styled_components.default)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+const WaitMessage = (0, import_react.memo)(
+  ({
+    size = "xl",
+    color = "light",
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = "center",
+    ...rest
+  }) => {
+    const isOpen = (0, import_react_redux.useAppSelector)((state) => state.waitMessage?.isOpen);
+    const message = (0, import_react_redux.useAppSelector)((state) => state.waitMessage?.message);
+    (0, import_react.useEffect)(() => {
+      if (isOpen)
+        (0, import_user_wait_event.waitStartEvent)();
+      else
+        (0, import_user_wait_event.waitEndEvent)();
+    }, [isOpen]);
+    (0, import_use_html_wait_message.useHTMLWaitMessage)(isOpen !== null);
+    return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_backdrop.DSBackdrop, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledCircularIndicator,
+        {
+          id: "em-loading",
+          size,
+          color,
+          showText,
+          withTooltip,
+          tooltipStartPlacementPreference,
+          ...rest,
+          text: message
+        }
+      )
+    ] }) : null;
+  }
+);

package/dist/cjs/view/{modals/wait-message → wait-message}/wait-message-launcher.js

@@ -22,8 +22,8 @@ __export(wait_message_launcher_exports, {
 });
 module.exports = __toCommonJS(wait_message_launcher_exports);
 var import_react = require("react");
-var import_react_redux = require("../../../data/react-redux.js");
-var import_actions = require("../../../data/wait-message/actions.js");
+var import_react_redux = require("../../data/react-redux.js");
+var import_actions = require("../../data/wait-message/actions.js");
 const WaitMessageLauncher = () => {
   const dispatch = (0, import_react_redux.useAppDispatch)();
   (0, import_react.useEffect)(() => {

package/dist/esm/index.js

@@ -21,7 +21,7 @@ import { browserHistory, memoryHistory } from "./utils/history.js";
 import { Themes } from "./utils/constants.js";
 import { ACTIONS } from "./data/navigation-prompt/actions.js";
 import { loadable } from "./view/loadable/index.js";
-import { WaitMessage } from "./view/modals/wait-message/index.js";
+import { WaitMessage } from "./view/wait-message/index.js";
 import { SessionTimeout } from "./view/session-timeout/index.js";
 import {
   subscribeToSessionExpiryWarning,

package/dist/esm/view/app-root/hosted-app.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { ErrorToast } from "../error-toast/index.js";
-import { WaitMessage as DefaultWaitMessage } from "../modals/wait-message/index.js";
+import { WaitMessage as DefaultWaitMessage } from "../wait-message/index.js";
 import { useBreakpoint } from "../breakpoint/use-breakpoint.js";
 import { useWindowSizeChange } from "../use-window-size-change.js";
-import { useHTMLWaitMessage } from "../modals/wait-message/use-html-wait-message.js";
+import { useHTMLWaitMessage } from "../wait-message/use-html-wait-message.js";
 import GlobalStyle from "./style.js";
 const Div = styled.div`
   height: 100%;

package/dist/esm/view/app-root/stand-alone-app.js

@@ -6,7 +6,7 @@ import { useWindowSizeChange } from "../use-window-size-change.js";
 import { SessionTimeout } from "../session-timeout/index.js";
 import { LiveMessage } from "../live-message/index.js";
 import { ErrorToast } from "../error-toast/index.js";
-import { WaitMessage as DefaultWaitMessage } from "../modals/wait-message/index.js";
+import { WaitMessage as DefaultWaitMessage } from "../wait-message/index.js";
 import GlobalStyle from "./style.js";
 const Div = styled.div`
   height: 100%;

package/dist/esm/view/loadable/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { lazy, Suspense } from "react";
-import { WaitMessageLauncher } from "../modals/wait-message/wait-message-launcher.js";
+import { WaitMessageLauncher } from "../wait-message/wait-message-launcher.js";
 const loadable = (importFunc, fallback = /* @__PURE__ */ jsx(WaitMessageLauncher, {})) => {
   const LazyComponent = lazy(importFunc);
   return (props) => /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(LazyComponent, { ...props }) });

package/dist/esm/view/render-with-host-data/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { fetchHostAppData } from "../fetch-host-app-data/index.js";
-import { WaitMessageLauncher } from "../modals/wait-message/wait-message-launcher.js";
+import { WaitMessageLauncher } from "../wait-message/wait-message-launcher.js";
 const renderWithHostData = (data) => {
   const {
     ComponentToRender,

package/dist/esm/view/wait-message/index.js

@@ -0,0 +1,56 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect } from "react";
+import styled from "styled-components";
+import { DSBackdrop } from "@elliemae/ds-backdrop";
+import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
+import { useAppSelector } from "../../data/react-redux.js";
+import { useHTMLWaitMessage } from "./use-html-wait-message.js";
+import {
+  waitStartEvent,
+  waitEndEvent
+} from "../../analytics/user-wait-event.js";
+const StyledCircularIndicator = styled(DSCircularIndeterminateIndicator)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+const WaitMessage = memo(
+  ({
+    size = "xl",
+    color = "light",
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = "center",
+    ...rest
+  }) => {
+    const isOpen = useAppSelector((state) => state.waitMessage?.isOpen);
+    const message = useAppSelector((state) => state.waitMessage?.message);
+    useEffect(() => {
+      if (isOpen)
+        waitStartEvent();
+      else
+        waitEndEvent();
+    }, [isOpen]);
+    useHTMLWaitMessage(isOpen !== null);
+    return isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DSBackdrop, {}),
+      /* @__PURE__ */ jsx(
+        StyledCircularIndicator,
+        {
+          id: "em-loading",
+          size,
+          color,
+          showText,
+          withTooltip,
+          tooltipStartPlacementPreference,
+          ...rest,
+          text: message
+        }
+      )
+    ] }) : null;
+  }
+);
+export {
+  WaitMessage
+};

package/dist/esm/view/{modals/wait-message → wait-message}/wait-message-launcher.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { useAppDispatch } from "../../../data/react-redux.js";
-import { waitMessage } from "../../../data/wait-message/actions.js";
+import { useAppDispatch } from "../../data/react-redux.js";
+import { waitMessage } from "../../data/wait-message/actions.js";
 const WaitMessageLauncher = () => {
   const dispatch = useAppDispatch();
   useEffect(() => {

package/dist/types/lib/index.d.ts

@@ -14,7 +14,7 @@ export { browserHistory as history, memoryHistory } from './utils/history.js';
 export { Themes } from './utils/constants.js';
 export { ACTIONS as NavigationPromptActions } from './data/navigation-prompt/actions.js';
 export { loadable } from './view/loadable/index.js';
-export { WaitMessage } from './view/modals/wait-message/index.js';
+export { WaitMessage } from './view/wait-message/index.js';
 export { SessionTimeout } from './view/session-timeout/index.js';
 export { subscribeToSessionExpiryWarning, subscribeToSessionExpiry, subscribeToResetSession, resetUserIdleTime, trackActivity, } from './utils/session.js';
 export { waitMessage as waitMessageAction } from './data/wait-message/actions.js';

package/dist/types/lib/view/wait-message/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';
+type CircularIndicatorProps = React.ComponentProps<typeof DSCircularIndeterminateIndicator>;
+export interface WaitMessageProps {
+    size?: CircularIndicatorProps['size'];
+    color?: CircularIndicatorProps['color'];
+    showText?: CircularIndicatorProps['showText'];
+    withTooltip?: CircularIndicatorProps['withTooltip'];
+    tooltipStartPlacementPreference?: CircularIndicatorProps['tooltipStartPlacementPreference'];
+    [x: string]: any;
+}
+export declare const WaitMessage: import("react").NamedExoticComponent<WaitMessageProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-app-sdk",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",
@@ -112,8 +112,10 @@
   },
   "peerDependencies": {
     "@elliemae/app-react-dependencies": "^4.6.1",
+    "@elliemae/ds-backdrop": "^3.13.1",
     "@elliemae/ds-basic": "^3.13.1",
     "@elliemae/ds-button": "^3.13.1",
+    "@elliemae/ds-circular-progress-indicator": "^3.13.1",
     "@elliemae/ds-controlled-form": "^3.13.1",
     "@elliemae/ds-date-picker": "^3.13.1",
     "@elliemae/ds-date-range-picker": "^3.13.1",
@@ -121,7 +123,6 @@
     "@elliemae/ds-form": "^3.13.1",
     "@elliemae/ds-form-layout-blocks": "^3.13.1",
     "@elliemae/ds-grid": "^3.13.1",
-    "@elliemae/ds-loading-indicator": "^3.13.1",
     "@elliemae/ds-modal": "^3.13.1",
     "@elliemae/ds-popperjs": "^3.13.1",
     "@elliemae/ds-toast": "^3.13.1",
@@ -135,8 +136,10 @@
   "devDependencies": {
     "@elliemae/app-react-dependencies": "~4.6.1",
     "@elliemae/browserslist-config-elliemae-latest-browsers": "~1.6.0",
+    "@elliemae/ds-backdrop": "~3.13.1",
     "@elliemae/ds-basic": "~3.13.1",
     "@elliemae/ds-button": "~3.13.1",
+    "@elliemae/ds-circular-progress-indicator": "~3.13.1",
     "@elliemae/ds-controlled-form": "~3.13.1",
     "@elliemae/ds-date-picker": "~3.13.1",
     "@elliemae/ds-date-range-picker": "~3.13.1",
@@ -144,7 +147,6 @@
     "@elliemae/ds-form": "~3.13.1",
     "@elliemae/ds-form-layout-blocks": "~3.13.1",
     "@elliemae/ds-grid": "~3.13.1",
-    "@elliemae/ds-loading-indicator": "~3.13.1",
     "@elliemae/ds-modal": "~3.13.1",
     "@elliemae/ds-popperjs": "~3.13.1",
     "@elliemae/ds-toast": "~3.13.1",

package/dist/cjs/view/modals/wait-message/index.js

@@ -1,57 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var wait_message_exports = {};
-__export(wait_message_exports, {
-  WaitMessage: () => WaitMessage
-});
-module.exports = __toCommonJS(wait_message_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_loading_indicator = require("@elliemae/ds-loading-indicator");
-var import_react_redux = require("../../../data/react-redux.js");
-var import_use_html_wait_message = require("./use-html-wait-message.js");
-var import_user_wait_event = require("../../../analytics/user-wait-event.js");
-const WaitMessage = (0, import_react.memo)(
-  ({
-    size = "m",
-    style = { color: "white", fontSize: "1.25rem" },
-    ...rest
-  }) => {
-    const isOpen = (0, import_react_redux.useAppSelector)((state) => state.waitMessage?.isOpen);
-    const message = (0, import_react_redux.useAppSelector)((state) => state.waitMessage?.message);
-    (0, import_react.useEffect)(() => {
-      if (isOpen)
-        (0, import_user_wait_event.waitStartEvent)();
-      else
-        (0, import_user_wait_event.waitEndEvent)();
-    }, [isOpen]);
-    (0, import_use_html_wait_message.useHTMLWaitMessage)(isOpen !== null);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ds_loading_indicator.DSLoadingIndicator,
-      {
-        id: "em-loading",
-        size,
-        style,
-        ...rest,
-        loading: isOpen,
-        message
-      }
-    );
-  }
-);

package/dist/esm/view/modals/wait-message/index.js

@@ -1,40 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { memo, useEffect } from "react";
-import { DSLoadingIndicator } from "@elliemae/ds-loading-indicator";
-import { useAppSelector } from "../../../data/react-redux.js";
-import { useHTMLWaitMessage } from "./use-html-wait-message.js";
-import {
-  waitStartEvent,
-  waitEndEvent
-} from "../../../analytics/user-wait-event.js";
-const WaitMessage = memo(
-  ({
-    size = "m",
-    style = { color: "white", fontSize: "1.25rem" },
-    ...rest
-  }) => {
-    const isOpen = useAppSelector((state) => state.waitMessage?.isOpen);
-    const message = useAppSelector((state) => state.waitMessage?.message);
-    useEffect(() => {
-      if (isOpen)
-        waitStartEvent();
-      else
-        waitEndEvent();
-    }, [isOpen]);
-    useHTMLWaitMessage(isOpen !== null);
-    return /* @__PURE__ */ jsx(
-      DSLoadingIndicator,
-      {
-        id: "em-loading",
-        size,
-        style,
-        ...rest,
-        loading: isOpen,
-        message
-      }
-    );
-  }
-);
-export {
-  WaitMessage
-};

package/dist/types/lib/view/modals/wait-message/index.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface WaitMessageProps {
-    size?: string;
-    style?: React.CSSProperties;
-    [x: string]: any;
-}
-export declare const WaitMessage: import("react").NamedExoticComponent<WaitMessageProps>;