@elliemae/pui-app-sdk 4.14.0 → 4.14.1

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

@@ -1,9 +1,7 @@
 "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)
@@ -17,14 +15,6 @@ 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, {
@@ -33,25 +23,14 @@ __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_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_ds_loading_indicator = require("@elliemae/ds-loading-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 = "xl",
-    color = "light",
-    showText = true,
-    withTooltip = false,
-    tooltipStartPlacementPreference = "center",
+    size = "m",
+    style = { color: "white", fontSize: "1.25rem" },
     ...rest
   }) => {
     const isOpen = (0, import_react2.useAppSelector)((state) => state.waitMessage?.isOpen);
@@ -63,21 +42,16 @@ const WaitMessage = (0, import_react.memo)(
         (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;
+    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/wait-message/index.js

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

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

@@ -1,13 +1,7 @@
 /// <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'];
+    size?: string;
+    style?: React.CSSProperties;
     [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.0",
+  "version": "4.14.1",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",
@@ -123,6 +123,7 @@
     "@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",
@@ -147,6 +148,7 @@
     "@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",