@elliemae/pui-app-sdk 6.0.0-alpha.2 → 6.0.0-alpha.4

package/dist/esm/utils/micro-frontend/tests/app.config.json

@@ -0,0 +1,200 @@
+{
+  "appId": "microfe",
+  "activeEnv": "localhost",
+  "googleTagManager": true,
+  "sessionTimeoutWarnInterval": "7200000",
+  "sessionTimeoutInterval": "9000000",
+  "microFrontendApps": {
+    "loanapp": {
+      "name": "Loan",
+      "hostUrl": "./loan",
+      "development": {
+        "files": ["index.js"]
+      },
+      "production": {
+        "files": ["index.js"]
+      }
+    },
+    "taskapp": {
+      "name": "Task",
+      "hostUrl": "./task",
+      "mode": "development",
+      "development": {
+        "files": ["index.dev.js"]
+      },
+      "production": {
+        "files": ["index.js"]
+      }
+    },
+    "travelhub": {
+      "name": "TravelHub",
+      "hostUrl": "./travelhub",
+      "development": {
+        "files": ["app.js", "landing.js", "app.css", "landing.css"]
+      },
+      "production": {
+        "files": ["app.js", "landing.js", "app.css", "landing.css"]
+      }
+    },
+    "flights": {
+      "name": "Flights",
+      "hostUrl": "./flights",
+      "development": {
+        "files": ["app.js", "app.css"]
+      },
+      "production": {
+        "files": ["app.js", "app.css"]
+      }
+    },
+    "hotels": {
+      "name": "Hotels",
+      "hostUrl": "./hotels",
+      "development": {
+        "files": ["app.js", "app.css"]
+      },
+      "production": {
+        "files": ["app.js", "app.css"]
+      }
+    }
+  },
+  "serviceEndpoints": {
+    "api": "",
+    "idp": "https://int.idp.ellielabs.com",
+    "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+  },
+  "env": {
+    "localhost": {
+      "serviceEndpoints": {
+        "api": "",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "dev": {
+      "serviceEndpoints": {
+        "api": "https://dev.api.puiservice.rd.elliemae.io",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "dev2": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "qa": {
+      "serviceEndpoints": {
+        "api": "https://dev.api.puiservice.rd.elliemae.io",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "qa2": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "qa3": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "int": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-osb1": {
+      "serviceEndpoints": {
+        "api": "https://encompass-peg-api.elliemae.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-osb2": {
+      "serviceEndpoints": {
+        "api": "https://encompass-peg2-api.elliemae.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg": {
+      "serviceEndpoints": {
+        "api": "https://peg2-west.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-oapi-west": {
+      "serviceEndpoints": {
+        "api": "https://peg2-west.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-oapi-east": {
+      "serviceEndpoints": {
+        "api": "https://peg2-east.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg2-oapi-east": {
+      "serviceEndpoints": {
+        "api": "https://peg2-east.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg3": {
+      "serviceEndpoints": {
+        "api": "https://pel1.api.ellielabs.com",
+        "idp": "https://peg3.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "stage": {
+      "serviceEndpoints": {
+        "api": "https://stg.api.elliemae.com",
+        "idp": "https://stg.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "beta": {
+      "serviceEndpoints": {
+        "api": "https://concept.api.elliemae.com",
+        "idp": "https://concept.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "demo": {
+      "serviceEndpoints": {
+        "api": "https://concept.api.elliemae.com",
+        "idp": "https://concept.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "epc": {
+      "serviceEndpoints": {
+        "api": "https://concept.api.elliemae.com",
+        "idp": "https://concept.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "prod": {
+      "serviceEndpoints": {
+        "api": "https://api.elliemae.com",
+        "idp": "https://idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    }
+  }
+}

package/dist/esm/utils/micro-frontend/tests/utils.js

@@ -0,0 +1,96 @@
+import { MessageType } from "@elliemae/microfe-common";
+const applicationScriptingObject = {
+  object: {
+    events: [],
+    functions: [
+      "closeModal",
+      "extend",
+      "getApplicationContext",
+      "getCapabilities",
+      "getCompanySettings",
+      "getDescriptor",
+      "getPersonaAccess",
+      "getPoliciesDetails",
+      "getUserAccessRights",
+      "hideSpinner",
+      "keepSessionAlive",
+      "log",
+      "navigate",
+      "open",
+      "openModal",
+      "performAction",
+      "print",
+      "showError",
+      "showSpinner",
+      "supportsAction",
+      "supportsNavigateTo"
+    ],
+    objectId: "application",
+    objectType: "Object"
+  },
+  type: "object"
+};
+const authScriptingObject = {
+  object: {
+    events: [],
+    functions: ["getAccessToken", "createAuthCode", "getUser"],
+    objectId: "auth",
+    objectType: "Object"
+  },
+  type: "object"
+};
+const hostObjects = {
+  application: applicationScriptingObject,
+  auth: authScriptingObject
+};
+const getOrigin = (url) => {
+  if (!url || url === "about:blank") return "*";
+  try {
+    const { origin } = new URL(url);
+    return origin === "null" || !origin ? url : origin;
+  } catch (e) {
+    const { origin } = new URL(url, document.baseURI);
+    return origin;
+  }
+};
+const postMessage = ({
+  srcWindow,
+  targetWindow,
+  message
+}) => {
+  targetWindow.dispatchEvent(
+    new MessageEvent("message", {
+      source: srcWindow,
+      origin: getOrigin(srcWindow.location.href),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      data: {
+        source: "elli:remoting",
+        ...message
+      }
+    })
+  );
+};
+const setupHost = (hostWindow) => {
+  const onMessage = ({ data }) => {
+    if (data?.type !== MessageType.ObjectGet) return;
+    const scriptingObject = hostObjects[data?.body?.objectId ?? ""] ?? null;
+    if (scriptingObject)
+      postMessage({
+        srcWindow: hostWindow,
+        targetWindow: window,
+        message: {
+          body: scriptingObject,
+          type: "elli:remoting:response",
+          requestId: data.requestId
+        }
+      });
+  };
+  hostWindow?.addEventListener?.("message", onMessage);
+  return () => hostWindow?.removeEventListener?.("message", onMessage);
+};
+export {
+  applicationScriptingObject,
+  authScriptingObject,
+  postMessage,
+  setupHost
+};

package/dist/esm/utils/micro-frontend/types.js

@@ -0,0 +1,14 @@
+var LaunchMode = /* @__PURE__ */ ((LaunchMode2) => {
+  LaunchMode2["DEVELOPMENT"] = "development";
+  LaunchMode2["PRODUCTION"] = "production";
+  return LaunchMode2;
+})(LaunchMode || {});
+var MicroAppManager = /* @__PURE__ */ ((MicroAppManager2) => {
+  MicroAppManager2["SSF"] = "ssf";
+  MicroAppManager2["APPSDK"] = "appsdk";
+  return MicroAppManager2;
+})(MicroAppManager || {});
+export {
+  LaunchMode,
+  MicroAppManager
+};

package/dist/esm/utils/session.js

@@ -6,8 +6,10 @@ import { getLogger } from "./logger.js";
 import { logRecords } from "./log-records.js";
 import { endSession } from "./auth/index.js";
 import { getAppConfigValue } from "./app-config/config.js";
-import { SESSION_TIMEOUT_INTERVAL } from "./constants.js";
-const SESSION_RENEWAL_INTERVAL = 6e4;
+import {
+  SESSION_TIMEOUT_INTERVAL,
+  SESSION_RENEWAL_INTERVAL
+} from "./constants.js";
 let lastUserActivityTimeStamp = Date.now();
 const warnListeners = [];
 const expiryListeners = [];

package/dist/esm/utils/testing/index.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { getDefaultTheme } from "@elliemae/pui-theme";
 import { createAppStore } from "../../data/store.js";
 import { AppRoot } from "../../view/app-root/index.js";
@@ -11,8 +12,28 @@ const AllTheProviders = ({
   theme = defaultTheme,
   children
 }) => /* @__PURE__ */ jsx(AppRoot, { store, history: browserHistory, theme, children });
-const customRender = (ui, options) => render(ui, { wrapper: AllTheProviders, ...options });
-export * from "@testing-library/react";
+const customRender = (ui, options) => ({
+  user: userEvent.setup(),
+  ...render(ui, { wrapper: AllTheProviders, ...options })
+});
+import {
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+  within,
+  fireEvent,
+  act,
+  cleanup,
+  renderHook
+} from "@testing-library/react";
 export {
-  customRender as render
+  act,
+  cleanup,
+  fireEvent,
+  customRender as render,
+  renderHook,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+  within
 };

package/dist/esm/utils/testing/performance-mock.js

@@ -0,0 +1,90 @@
+class MockPerformanceObserver {
+  callback;
+  constructor(callback) {
+    this.callback = callback;
+    global.__performanceObserver = this;
+  }
+  observe() {
+  }
+  disconnect() {
+  }
+}
+const mockMarks = /* @__PURE__ */ new Map();
+const mockMeasures = [];
+const originalPerformance = global.performance;
+function setupPerformanceMock() {
+  global.PerformanceObserver = MockPerformanceObserver;
+  global.performance = {
+    ...originalPerformance,
+    timeOrigin: 16094592e5,
+    // January 1, 2021 00:00:00 UTC
+    now: jest.fn(() => 1e3),
+    // Return fixed value for consistent testing
+    mark: jest.fn((name, options) => {
+      const mark = {
+        name,
+        entryType: "mark",
+        startTime: 1e3,
+        duration: 0,
+        detail: options?.detail,
+        toJSON: () => ({})
+      };
+      mockMarks.set(name, mark);
+      return mark;
+    }),
+    measure: jest.fn((name, options) => {
+      const measure = {
+        name,
+        entryType: "measure",
+        startTime: 1e3,
+        duration: 100,
+        detail: options?.detail,
+        toJSON: () => ({})
+      };
+      mockMeasures.push(measure);
+      const observer = global.__performanceObserver;
+      if (observer) {
+        const list = {
+          getEntries: () => [measure],
+          getEntriesByName: () => [measure],
+          getEntriesByType: () => [measure]
+        };
+        setTimeout(() => observer.callback(list, observer), 0);
+      }
+      return measure;
+    }),
+    clearMarks: jest.fn((name) => {
+      if (name) {
+        mockMarks.delete(name);
+      } else {
+        mockMarks.clear();
+      }
+    }),
+    getEntriesByName: jest.fn((name, type) => {
+      if (type === "mark") {
+        const mark = mockMarks.get(name);
+        return mark ? [mark] : [];
+      }
+      return mockMeasures.filter((m) => m.name === name);
+    })
+  };
+}
+function clearPerformanceMock() {
+  mockMarks.clear();
+  mockMeasures.length = 0;
+}
+function restorePerformance() {
+  if (originalPerformance) {
+    global.performance = originalPerformance;
+  }
+  delete global.__performanceObserver;
+}
+export {
+  MockPerformanceObserver,
+  clearPerformanceMock,
+  mockMarks,
+  mockMeasures,
+  originalPerformance,
+  restorePerformance,
+  setupPerformanceMock
+};

package/dist/esm/utils/window.js

@@ -17,12 +17,13 @@ const getViewportSize = () => ({
     window.innerHeight || 0
   )
 });
-const convertBreakpointToNumber = (breakpoint) => Number(breakpoint.replace("px", ""));
+const convertBreakpointToNumber = (breakpoint) => Number(breakpoint?.replace("px", ""));
 const getCurrentBreakpoint = () => {
   const { width } = getViewportSize();
   const { breakpoints } = getDefaultTheme();
   if (width <= convertBreakpointToNumber(breakpoints.small)) return "small";
   if (width <= convertBreakpointToNumber(breakpoints.medium)) return "medium";
+  if (width <= convertBreakpointToNumber(breakpoints.xsmall)) return "xsmall";
   return "large";
 };
 const getAssetPath = () => {

package/dist/esm/view/breakpoint/use-breakpoint.js

@@ -11,9 +11,10 @@ const useBreakpoint = () => {
     [
       `(max-width: ${theme.breakpoints.small})`,
       `(max-width: ${theme.breakpoints.medium})`,
-      `(max-width: ${theme.breakpoints.large})`
+      `(max-width: ${theme.breakpoints.large})`,
+      `(max-width: ${theme.breakpoints.xsmall})`
     ],
-    ["small", "medium", "large"],
+    ["small", "medium", "large", "xsmall"],
     "large"
   );
   const dispatch = useAppDispatch();

package/dist/esm/view/error-toast/index.js

@@ -1,6 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, memo } from "react";
-import { ToastPosition, ToastType, DSToast, toast } from "@elliemae/ds-toast";
+import {
+  ToastPosition,
+  ToastType,
+  DSToast,
+  toast
+} from "@elliemae/ds-toast";
 import { useAppSelector, useAppDispatch } from "../../data/react.js";
 import { actions as error } from "../../data/error/index.js";
 const ErrorToast = memo((props) => {
@@ -8,15 +13,27 @@ const ErrorToast = memo((props) => {
   const dispatch = useAppDispatch();
   useEffect(() => {
     if (storeError && (storeError?.description || storeError?.messageText)) {
-      const toastProps = {
+      const {
+        position,
+        messageTitle,
+        type,
+        description,
+        messageText: storeMessageText,
+        messageComponent,
+        ...toastOptions
+      } = {
         position: ToastPosition.TOP_RIGHT,
         messageTitle: "Error",
         type: ToastType.ERROR,
         ...props,
         ...storeError
       };
-      const messageText = toastProps.description || toastProps.messageText;
-      if (messageText) toast({ messageText, ...toastProps }, {});
+      const messageText = description || storeMessageText;
+      if (messageText)
+        toast(
+          { messageText, messageTitle, type, messageComponent },
+          { position, ...toastOptions }
+        );
       dispatch(error.clear());
     }
   }, [storeError, props, dispatch]);

package/dist/esm/view/fields/combo-box/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSComboBox } from "@elliemae/ds-form";
+import { DSComboBox } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/date-input/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSDateInput } from "@elliemae/ds-form";
+import { DSDateInput } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/date-picker/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSDatePicker } from "@elliemae/ds-date-picker";
+import { DSDatePicker } from "@elliemae/ds-legacy-date-picker";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/form-item-layout/index.js

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { DSFormItemLayout } from "@elliemae/ds-form";
-import { get } from "react-hook-form";
-import { ConnectForm } from "../connect-form.js";
-const FormItemLayout = ({ name, ...rest }) => /* @__PURE__ */ jsx(ConnectForm, { children: ({
-  formState: { errors }
-}) => {
+import { DSFormItemLayout } from "@elliemae/ds-legacy-form";
+import { useFormState, get } from "react-hook-form";
+const FormItemLayout = ({ name, ...rest }) => {
+  const { errors } = useFormState({ name });
   const errorField = get(errors, name);
   const hasError = !!errorField;
   const validationMessage = errorField?.message;
@@ -17,7 +15,7 @@ const FormItemLayout = ({ name, ...rest }) => /* @__PURE__ */ jsx(ConnectForm, {
       ...rest
     }
   );
-} });
+};
 export {
   FormItemLayout
 };

package/dist/esm/view/fields/form-layout-block-item/index.js

@@ -2,15 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import {
   DSFormLayoutBlockItem
 } from "@elliemae/ds-form-layout-blocks";
-import { get } from "react-hook-form";
-import { ConnectForm } from "../connect-form.js";
+import { useFormState, get } from "react-hook-form";
 const FormLayoutBlockItem = ({
   inputID,
   label,
   ...rest
-}) => /* @__PURE__ */ jsx(ConnectForm, { children: ({
-  formState: { errors }
 }) => {
+  const { errors } = useFormState({ name: inputID });
   const errorField = get(errors, inputID);
   const hasError = !!errorField;
   const validationMessage = errorField?.message;
@@ -24,7 +22,7 @@ const FormLayoutBlockItem = ({
       ...rest
     }
   );
-} });
+};
 export {
   FormLayoutBlockItem
 };

package/dist/esm/view/fields/input-mask/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSInputMask, MASK_TYPES, MASK_PIPES } from "@elliemae/ds-form";
+import { DSInputMask, MASK_TYPES, MASK_PIPES } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/large-text-box/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSLargeInputText } from "@elliemae/ds-form";
+import { DSLargeInputText } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/masked-input-text/index.js

@@ -18,11 +18,11 @@ const MaskedInputText = ({
   const opts = React.useMemo(
     () => ({
       ...maskOpts,
-      onChange: (_, maskedValue) => setValue(name, maskedValue, {
+      onChange: ((_, maskedValue) => setValue(name, maskedValue, {
         shouldValidate: true,
         shouldDirty: true,
         shouldTouch: true
-      }),
+      })),
       valueSetter: setVal
     }),
     [maskOpts, name, setValue]

package/dist/esm/view/fields/radio-group/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSRadioGroup } from "@elliemae/ds-form";
+import { DSRadioGroup } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/text-box/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSTextBox } from "@elliemae/ds-form";
+import { DSTextBox } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/form/submit-button/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
-import { DSButtonV2 } from "@elliemae/ds-button";
+import { DSButtonV2 } from "@elliemae/ds-button-v2";
 const FormSubmitButton = ({ ...rest }) => {
   const {
     formState,