@elliemae/pui-app-sdk 4.14.1 → 5.0.0

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

@@ -1,7 +1,9 @@
 "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)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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, {
@@ -23,14 +33,25 @@ __export(wait_message_exports, {
 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_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_react2 = require("../../data/react.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 = "m",
-    style = { color: "white", fontSize: "1.25rem" },
+    size = "xl",
+    color = "light",
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = "center",
     ...rest
   }) => {
     const isOpen = (0, import_react2.useAppSelector)((state) => state.waitMessage?.isOpen);
@@ -42,16 +63,21 @@ const WaitMessage = (0, import_react.memo)(
         (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
-      }
-    );
+    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/esm/view/wait-message/index.js

@@ -1,16 +1,27 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect } from "react";
-import { DSLoadingIndicator } from "@elliemae/ds-loading-indicator";
+import styled from "styled-components";
+import { DSBackdrop } from "@elliemae/ds-backdrop";
+import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
 import { useAppSelector } from "../../data/react.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 = "m",
-    style = { color: "white", fontSize: "1.25rem" },
+    size = "xl",
+    color = "light",
+    showText = true,
+    withTooltip = false,
+    tooltipStartPlacementPreference = "center",
     ...rest
   }) => {
     const isOpen = useAppSelector((state) => state.waitMessage?.isOpen);
@@ -22,17 +33,22 @@ const WaitMessage = memo(
         waitEndEvent();
     }, [isOpen]);
     useHTMLWaitMessage(isOpen !== null);
-    return /* @__PURE__ */ jsx(
-      DSLoadingIndicator,
-      {
-        id: "em-loading",
-        size,
-        style,
-        ...rest,
-        loading: isOpen,
-        message
-      }
-    );
+    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 {

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

@@ -1,7 +1,13 @@
 /// <reference types="react" />
+import { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';
+type CircularIndicatorProps = React.ComponentProps<typeof DSCircularIndeterminateIndicator>;
 export interface WaitMessageProps {
-    size?: string;
-    style?: React.CSSProperties;
+    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.14.1",
+  "version": "5.0.0",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",
@@ -123,7 +123,6 @@
     "@elliemae/ds-form": "^3.13.2",
     "@elliemae/ds-form-layout-blocks": "^3.13.2",
     "@elliemae/ds-grid": "^3.13.2",
-    "@elliemae/ds-loading-indicator": "^3.13.2",
     "@elliemae/ds-modal": "^3.13.2",
     "@elliemae/ds-popperjs": "^3.13.2",
     "@elliemae/ds-toast": "^3.13.2",
@@ -148,7 +147,6 @@
     "@elliemae/ds-form": "~3.13.2",
     "@elliemae/ds-form-layout-blocks": "~3.13.2",
     "@elliemae/ds-grid": "~3.13.2",
-    "@elliemae/ds-loading-indicator": "~3.13.2",
     "@elliemae/ds-modal": "~3.13.2",
     "@elliemae/ds-popperjs": "~3.13.2",
     "@elliemae/ds-toast": "~3.13.2",