@elliemae/pui-app-sdk 3.0.0-beta.9 → 3.0.0

package/dist/esm/view/modals/session-expiry/index.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { memo, useEffect, useState } from "react";
+import { DSButtonV2 } from "@elliemae/ds-button";
+import { WarningCircle } from "@elliemae/ds-icons";
+import {
+  DSDialog,
+  DSDialogDefaultLayout,
+  DSDialogPrimaryMessage,
+  DSDialogSecondaryMessage,
+  DSDialogBody,
+  DSDialogFooter,
+  DSDialogSeparator
+} from "@elliemae/ds-dialog";
+import { useAppDispatch } from "../../../data/react-redux.js";
+import { logout } from "../../../data/logout/actions.js";
+import { resetUserIdleTime } from "../../../utils/session.js";
+import { useTrackSessionExpiry } from "./customHooks.js";
+const SessionExpiry = memo(({ open, warningNotifiedAt = 0 }) => {
+  const [isOpen, setIsOpen] = useState(open);
+  const timeLeft = useTrackSessionExpiry(warningNotifiedAt);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+  const resetSession = () => {
+    setIsOpen(false);
+    resetUserIdleTime(true);
+    dispatch(logout.cancel());
+  };
+  const logoutSession = () => {
+    setIsOpen(false);
+    dispatch(logout.confirm());
+  };
+  return timeLeft ? /* @__PURE__ */ React.createElement(DSDialog, {
+    isOpen,
+    size: "small"
+  }, /* @__PURE__ */ React.createElement(DSDialogBody, {
+    p: "s"
+  }, /* @__PURE__ */ React.createElement(DSDialogDefaultLayout, null, /* @__PURE__ */ React.createElement(WarningCircle, {
+    size: "xl",
+    color: ["warning", "900"]
+  }), /* @__PURE__ */ React.createElement(DSDialogPrimaryMessage, null, `Your session will expire in ${timeLeft}`), /* @__PURE__ */ React.createElement(DSDialogSecondaryMessage, null, "Please logout or reset your session"))), /* @__PURE__ */ React.createElement(DSDialogSeparator, null), /* @__PURE__ */ React.createElement(DSDialogFooter, null, /* @__PURE__ */ React.createElement(DSButtonV2, {
+    buttonType: "outline",
+    onClick: logoutSession
+  }, "Logout"), /* @__PURE__ */ React.createElement(DSButtonV2, {
+    onClick: resetSession
+  }, "Reset"))) : null;
+});
+export {
+  SessionExpiry
+};

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

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+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((_a) => {
+  var _b = _a, {
+    size = "m",
+    style = { color: "white", fontSize: "1.25rem" }
+  } = _b, rest = __objRest(_b, [
+    "size",
+    "style"
+  ]);
+  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__ */ React.createElement(DSLoadingIndicator, __spreadProps(__spreadValues({
+    id: "em-loading",
+    size,
+    style
+  }, rest), {
+    loading: isOpen,
+    message
+  }));
+});
+export {
+  WaitMessage
+};

package/dist/esm/view/modals/wait-message/use-html-wait-message.js

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+const useHTMLWaitMessage = (close) => {
+  useEffect(() => {
+    const htmlWaitMsgElement = document.getElementById("em-wait-message");
+    if (htmlWaitMsgElement && close)
+      htmlWaitMsgElement.remove();
+  }, [close]);
+};
+export {
+  useHTMLWaitMessage
+};

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

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useEffect } from "react";
 import { useAppDispatch } from "../../../data/react-redux.js";
 import { waitMessage } from "../../../data/wait-message/actions.js";
@@ -10,7 +9,7 @@ const WaitMessageLauncher = () => {
       dispatch(waitMessage.close());
     };
   }, [dispatch]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return null;
 };
 export {
   WaitMessageLauncher

package/dist/{es/route/page-view.js → esm/view/page.js}

@@ -1,3 +1,5 @@
+import * as React from "react";
+import { Helmet } from "react-helmet";
 import * as brum from "@elliemae/pui-user-monitoring";
 import { pageViewEvent } from "../analytics/page-view-event.js";
 const onPageView = (pageTitle) => {
@@ -10,6 +12,11 @@ const onPageView = (pageTitle) => {
   }
   pageViewEvent({ pageTitle });
 };
+const Page = ({ pageTitle = "ICE", children }) => {
+  onPageView(pageTitle);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Helmet, null, /* @__PURE__ */ React.createElement("title", null, pageTitle)), children);
+};
 export {
+  Page,
   onPageView
 };

package/dist/{es → esm}/view/render-with-delay/index.js

@@ -8,7 +8,7 @@ const RenderWithDelay = memo(({ render }) => {
       clearTimeout(timeoutId);
     };
   }, []);
-  return show ? /* @__PURE__ */ React.createElement(React.Fragment, null, render()) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? render() : "");
 });
 export {
   RenderWithDelay

package/dist/esm/view/require-auth.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { useInjectReducer, useInjectSaga } from "redux-injectors";
+import enums from "../utils/constants.js";
+import { authReducer } from "../data/auth/reducer.js";
+import { authentication } from "../sideeffect/auth/index.js";
+import { Login } from "./login/index.js";
+import { isUserAuthorized } from "../utils/auth/index.js";
+const key = "auth";
+const RequireAuth = ({
+  children,
+  clientId = enums.CLIENT_ID,
+  scope = "loc",
+  responseType = "code"
+}) => {
+  useInjectReducer({ key, reducer: authReducer });
+  useInjectSaga({ key, saga: authentication });
+  const userAuthorized = isUserAuthorized();
+  if (userAuthorized) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }
+  return /* @__PURE__ */ React.createElement(Login, {
+    clientId,
+    scope,
+    responseType
+  });
+};
+export {
+  RequireAuth
+};

package/dist/{es → esm}/view/session-timeout/index.js

@@ -22,7 +22,11 @@ const SessionTimeout = () => {
       setwarningNotifiedAt(sessionExpiryWarningNotifiedAt);
       setSessionExpiryWarning(true);
     });
-    const resetCb = subscribeToResetSession(setSessionExpiryWarning.bind(null, false));
+    const resetCb = subscribeToResetSession((resetWarningModal) => {
+      if (resetWarningModal === true) {
+        setSessionExpiryWarning(false);
+      }
+    });
     const sessionExpiredCb = subscribeToSessionExpiry(() => {
       dispatch(logout.confirm());
       setSessionExpiryWarning(false);

package/dist/{es/view/window-size/index.js → esm/view/use-window-size-change.js}

@@ -1,8 +1,7 @@
-import * as React from "react";
 import { useEffect } from "react";
 import { publish } from "pubsub-js";
-import { HOST_WINDOW_RESIZED } from "../../utils/constants.js";
-const WindowSize = () => {
+import { HOST_WINDOW_RESIZED } from "../utils/constants.js";
+const useWindowSizeChange = () => {
   useEffect(() => {
     if (window.ResizeObserver) {
       const observer = new ResizeObserver((entries) => {
@@ -16,8 +15,7 @@ const WindowSize = () => {
     return () => {
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null);
 };
 export {
-  WindowSize
+  useWindowSizeChange
 };

package/dist/esm/view/visually-hidden/index.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import { forwardRef } from "react";
+import styled from "styled-components";
+const Span = styled.span`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+  word-wrap: normal;
+`;
+const VisuallyHidden = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(Span, __spreadValues({
+  ref
+}, props)));
+export {
+  VisuallyHidden
+};

package/dist/types/data/react-redux.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, PayloadAction, AnyAction } from '@reduxjs/toolkit';
+import { TypedUseSelectorHook } from 'react-redux';
+import { RootState } from './store.js';
+import { WaitMessageState } from './wait-message/reducer.js';
+import { BreakpointState } from './breakpoint/index.js';
+import { ErrorState } from './error/index.js';
+import { LiveMessageState } from './live-message/index.js';
+declare type AppDispatch = Dispatch<PayloadAction<WaitMessageState> | PayloadAction<BreakpointState> | PayloadAction<ErrorState> | PayloadAction<LiveMessageState> | AnyAction>;
+export declare const useAppDispatch: () => AppDispatch;
+export declare const useAppSelector: TypedUseSelectorHook<RootState>;
+export {};

package/dist/types/{lib/data → data}/store.d.ts

@@ -50,5 +50,4 @@ export declare const createAppStore: (initialState: import("redux").CombinedStat
     liveMessage: import("./live-message/index.js").LiveMessageState;
 }>, import("redux").Dispatch<import("redux").AnyAction>>>>;
 export declare type AppStore = ReturnType<typeof createAppStore>;
-export declare type AppDispatch = AppStore['dispatch'];
 export {};

package/dist/types/data/webpack-hmr.d.ts

@@ -0,0 +1 @@
+export declare const enableHotReloading: (baseStore: {}) => void;

package/dist/types/{lib/index.d.ts → index.d.ts}

@@ -1,9 +1,9 @@
 export { isUserAuthorized, login, authorize } from './utils/auth/index.js';
-export { PrivateRoute } from './route/private-route/index.js';
-export { AppRoute as Route } from './route/index.js';
 export { getHTTPClient, getAuthHTTPClient, } from './communication/http-client/index.js';
 export { onAuthorizationFailure } from './communication/http-client/response-interceptor.js';
 export { auth } from './data/auth/actions.js';
+export { RequireAuth } from './view/require-auth.js';
+export { Page } from './view/page.js';
 export { default as globalConstants } from './utils/constants.js';
 export { useAppDispatch, useAppSelector } from './data/react-redux.js';
 export { useInjectReducer, useInjectSaga } from 'redux-injectors';
@@ -23,7 +23,7 @@ export { CMicroAppGuest } from './utils/micro-frontend/guest.js';
 export { CMicroAppHost } from './utils/micro-frontend/host.js';
 export { enableReactAppForHostIntegration } from './utils/app-host-integration/react.js';
 export { getAppConfigValue, setAppConfigValue, setAppConfig, } from './utils/app-config/config.js';
-export { getMicroFrontEndAppConfig } from './utils/micro-frontend/index.js';
+export { getMicroFrontEndAppConfig, getLogger, } from './utils/micro-frontend/index.js';
 export { loadAppConfig } from './utils/app-config/index.js';
 export { AppRoot } from './view/app-root/index.js';
 export { ErrorBoundary } from './view/error-boundary/index.js';
@@ -41,13 +41,12 @@ export { renderWithRouter } from './utils/testing/render-with-router.js';
 export { RenderWithStateAddOns } from './utils/testing/render-with-state-addons.js';
 export { getApiActionCreator, getSelectField } from './api/helpers.js';
 export { getUser as fetchUserSettings } from './api/users/index.js';
-export { useMediaBreakpoints } from './view/useMediaBreakpoints/index.js';
 export { withAppDecorator } from './view/storybook/decorator.js';
-export { Header } from './view/header/index.js';
 export { ErrorToast } from './view/error-toast/index.js';
 export { Form } from './view/form/index.js';
 export { ConnectForm } from './view/fields/connect-form.js';
 export { FormItemLayout } from './view/fields/form-item-layout/index.js';
+export { FormLayoutBlockItem } from './view/fields/form-layout-block-item/index.js';
 export { TextBox } from './view/fields/text-box/index.js';
 export { LargeTextBox } from './view/fields/large-text-box/index.js';
 export { InputMask, MASK_TYPES, MASK_PIPES, } from './view/fields/input-mask/index.js';
@@ -58,7 +57,7 @@ export { RadioGroup } from './view/fields/radio-group/index.js';
 export { DateInput } from './view/fields/date-input/index.js';
 export { DatePicker } from './view/fields/date-picker/index.js';
 export { FormSubmitButton } from './view/form/submit-button/index.js';
-export { MediaBreakpoint } from './view/media-breakpoint/index.js';
+export { useMediaQueryList } from './view/breakpoint/use-media-query-list.js';
 export { VisuallyHidden } from './view/visually-hidden/index.js';
 export { actions as ariaLive } from './data/live-message/index.js';
 export { actions as error } from './data/error/index.js';

package/dist/types/{lib/utils → utils}/app-config/config.d.ts

@@ -21,6 +21,6 @@ export interface AppConfig {
 }
 export declare const setAppConfig: (config: AppConfig) => void;
 export declare const getAppConfigValue: <Type>(key?: string, defaultValue?: unknown) => Type;
-export declare const setAppConfigValue: <Type>(key: string | undefined, value: Type) => AppConfig;
+export declare const setAppConfigValue: <Type>(key: string, value: Type) => AppConfig;
 export declare const hasItem: (key?: string) => boolean;
 export {};

package/dist/types/utils/history.d.ts

@@ -0,0 +1,2 @@
+export declare const browserHistory: import("history").BrowserHistory;
+export declare const memoryHistory: import("history").MemoryHistory;

package/dist/types/{lib/utils → utils}/micro-frontend/guest.d.ts

@@ -1,5 +1,5 @@
 import { DefaultTheme } from 'styled-components';
-import { History, Path } from 'history';
+import { History, To } from 'history';
 import type { IMicroAppGuest, IMicroAppHost, InitOptions, MountOptions } from '@elliemae/pui-micro-frontend-base';
 import { MicroFrontEndLogger } from './console-logger.js';
 import { JSONValue } from '../types.js';
@@ -42,6 +42,6 @@ export declare class CMicroAppGuest implements IMicroAppGuest {
     mount(this: CMicroAppGuest, options?: MountOptions): Promise<void>;
     unmount(this: CMicroAppGuest, options: MountOptions): Promise<JSONValue>;
     getRef<T>(this: CMicroAppGuest): T | null;
-    navigate(this: CMicroAppGuest, url: Path, state?: any): void;
+    navigate(this: CMicroAppGuest, url: To, state?: any): void;
 }
 export {};

package/dist/types/{lib/utils → utils}/micro-frontend/host.d.ts

@@ -1,5 +1,5 @@
 import { IMicroAppHost, ResizeEventHandler, BreakpointChangeEventHandler, SubscriptionListener, BAEvent } from '@elliemae/pui-micro-frontend-base';
-import { History, Path } from 'history';
+import { History, To } from 'history';
 import { DefaultTheme } from 'styled-components';
 import { MicroFrontEndLogger } from './console-logger.js';
 declare type HostOptions = {
@@ -33,7 +33,7 @@ export declare class CMicroAppHost implements IMicroAppHost {
     publish<Type>(message: string | symbol, data?: Type): boolean;
     subscribe<T>(message: string | symbol, func: SubscriptionListener<T>): string;
     unsubscribe(token: string): void;
-    navigate(this: CMicroAppHost, url: Path, state?: any): void;
+    navigate(this: CMicroAppHost, url: To, state?: any): void;
     openWaitMessage(): void;
     closeWaitMessage(): void;
     openErrorBanner(message: string): void;

package/dist/types/{lib/utils → utils}/session.d.ts

@@ -1,14 +1,17 @@
 declare type WARNLISTENER = {
     (sessionExpiryWarningNotifiedAt: number | null): void;
 };
+declare type RESETLISTENER = {
+    (resetWarningModal: unknown): void;
+};
 declare type LISTENER = {
     (): void;
 };
-export declare const resetUserIdleTime: () => void;
+export declare const resetUserIdleTime: (resetWarningModal?: unknown) => void;
 export declare const stopSessionMonitoring: () => void;
 export declare const initSessionMonitoring: () => void;
 export declare const subscribeToSessionExpiryWarning: (onSessionExpiryWarn: WARNLISTENER) => () => void;
 export declare const subscribeToSessionExpiry: (onSessionExpiry: LISTENER) => () => void;
-export declare const subscribeToResetSession: (onResetListener: LISTENER) => () => void;
+export declare const subscribeToResetSession: (onResetListener: RESETLISTENER) => () => void;
 export declare const trackActivity: (element: Document | null, cb: (...args: unknown[]) => void) => () => void;
 export {};

package/dist/types/{lib/utils → utils}/storybook/preview.d.ts

@@ -28,3 +28,4 @@ export declare const getParameters: (storyBookTheme: {
     };
 };
 export declare const decorators: ((story: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => JSX.Element)[];
+export declare const loaders: (() => Promise<void>)[];

package/dist/types/{lib/utils → utils}/testing/render-with-router.d.ts

@@ -5,7 +5,7 @@ interface Args {
     history: History;
 }
 export declare const renderWithRouter: (ui: React.ReactElement, { route, history, }?: Args) => {
-    history: History<unknown>;
+    history: History;
     container: HTMLElement;
     baseElement: Element;
     debug: (baseElement?: Element | DocumentFragment | (Element | DocumentFragment)[] | undefined, maxLength?: number | undefined, options?: import("pretty-format").PrettyFormatOptions | undefined) => void;

package/dist/types/{lib/utils → utils}/testing/render-with-state-addons.d.ts

@@ -19,5 +19,5 @@ interface RenderWithStateAddOnsProps {
     theme?: Theme;
     [x: string]: any;
 }
-export declare const RenderWithStateAddOns: React.FC<RenderWithStateAddOnsProps>;
+export declare const RenderWithStateAddOns: ({ Component, reducer, saga, theme, ...rest }: RenderWithStateAddOnsProps) => JSX.Element | null;
 export {};

package/dist/types/{lib/view → view}/app-root/hosted-app.d.ts

@@ -2,5 +2,5 @@
 declare type HostedAppProps = {
     children: React.ReactNode;
 };
-export declare const HostedApp: React.FC<HostedAppProps>;
+export declare const HostedApp: ({ children }: HostedAppProps) => JSX.Element;
 export {};

package/dist/types/{lib/view → view}/app-root/index.d.ts

@@ -11,5 +11,5 @@ declare type AppRootProps = {
     WaitMessage?: React.ReactNode;
     errorTemplate?: React.ComponentType;
 };
-export declare const AppRoot: React.FC<AppRootProps>;
+export declare const AppRoot: ({ store, history, theme, manageSession, WaitMessage, errorTemplate, children, }: AppRootProps) => JSX.Element;
 export {};