@elliemae/pui-app-sdk 3.0.0-beta.20 → 3.0.0-beta.24

package/dist/cjs/index.js

@@ -39,12 +39,12 @@ __export(lib_exports, {
   ErrorToast: () => import_error_toast.ErrorToast,
   Form: () => import_form.Form,
   FormItemLayout: () => import_form_item_layout.FormItemLayout,
+  FormLayoutBlockItem: () => import_form_layout_block_item.FormLayoutBlockItem,
   FormSubmitButton: () => import_submit_button.FormSubmitButton,
   InputMask: () => import_input_mask.InputMask,
   LargeTextBox: () => import_large_text_box.LargeTextBox,
   MASK_PIPES: () => import_input_mask.MASK_PIPES,
   MASK_TYPES: () => import_input_mask.MASK_TYPES,
-  MediaBreakpoint: () => import_media_breakpoint.MediaBreakpoint,
   MicroApp: () => import_micro_app.MicroApp,
   MicroIFrameApp: () => import_micro_iframe_app.MicroIFrameApp,
   NavigationPromptActions: () => import_actions2.ACTIONS,
@@ -115,7 +115,7 @@ __export(lib_exports, {
   useAppSelector: () => import_react_redux.useAppSelector,
   useInjectReducer: () => import_redux_injectors.useInjectReducer,
   useInjectSaga: () => import_redux_injectors.useInjectSaga,
-  useMediaBreakpoints: () => import_useMediaBreakpoints.useMediaBreakpoints,
+  useMediaQueryList: () => import_use_media_query_list.useMediaQueryList,
   waitMessageAction: () => import_actions3.waitMessage,
   withAppDecorator: () => import_decorator.withAppDecorator
 });
@@ -162,12 +162,12 @@ var import_render_with_router = require("./utils/testing/render-with-router.js")
 var import_render_with_state_addons = require("./utils/testing/render-with-state-addons.js");
 var import_helpers2 = require("./api/helpers.js");
 var import_users = require("./api/users/index.js");
-var import_useMediaBreakpoints = require("./view/useMediaBreakpoints/index.js");
 var import_decorator = require("./view/storybook/decorator.js");
 var import_error_toast = require("./view/error-toast/index.js");
 var import_form = require("./view/form/index.js");
 var import_connect_form = require("./view/fields/connect-form.js");
 var import_form_item_layout = require("./view/fields/form-item-layout/index.js");
+var import_form_layout_block_item = require("./view/fields/form-layout-block-item/index.js");
 var import_text_box = require("./view/fields/text-box/index.js");
 var import_large_text_box = require("./view/fields/large-text-box/index.js");
 var import_input_mask = require("./view/fields/input-mask/index.js");
@@ -178,7 +178,7 @@ var import_radio_group = require("./view/fields/radio-group/index.js");
 var import_date_input = require("./view/fields/date-input/index.js");
 var import_date_picker = require("./view/fields/date-picker/index.js");
 var import_submit_button = require("./view/form/submit-button/index.js");
-var import_media_breakpoint = require("./view/media-breakpoint/index.js");
+var import_use_media_query_list = require("./view/breakpoint/use-media-query-list.js");
 var import_visually_hidden = require("./view/visually-hidden/index.js");
 var import_live_message = require("./data/live-message/index.js");
 var import_error = require("./data/error/index.js");

package/dist/cjs/utils/auth/index.js

@@ -140,7 +140,8 @@ const authorize = async ({
     (0, import_appdynamics.setAppDynamicsUserData)({ instanceId, userId: userName });
     const data = await (0, import_users.getUser)({ userName });
     sessionStorage.setItem("userSettings", JSON.stringify(data));
-    import_history.browserHistory.push(new URL(redirectUri).pathname);
+    import_history.browserHistory.push(`${new URL(redirectUri).pathname}/rerender`);
+    import_history.browserHistory.replace(new URL(redirectUri).pathname);
   } catch (err) {
     const code = err?.response?.data?.code;
     await endSession({ clientId, redirectUri, code, scope, responseType });

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

@@ -31,14 +31,17 @@ __export(hosted_app_exports, {
 });
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_media_breakpoint = require("../media-breakpoint/index.js");
-var import_window_size = require("../window-size/index.js");
-var import_html_wait_message = require("../modals/wait-message/html-wait-message.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_style = __toESM(require("./style.js"));
 const Div = import_styled_components.default.div`
   height: 100%;
 `;
-const HostedApp = ({ children }) => /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), /* @__PURE__ */ React.createElement(import_media_breakpoint.MediaBreakpoint, null), /* @__PURE__ */ React.createElement(import_window_size.WindowSize, null), /* @__PURE__ */ React.createElement(import_html_wait_message.HTMLWaitMessage, {
-  close: true
-}), children);
+const HostedApp = ({ children }) => {
+  (0, import_use_breakpoint.useBreakpoint)();
+  (0, import_use_html_wait_message.useHTMLWaitMessage)(true);
+  (0, import_use_window_size_change.useWindowSizeChange)();
+  return /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), children);
+};
 module.exports = __toCommonJS(hosted_app_exports);

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

@@ -32,8 +32,8 @@ __export(stand_alone_app_exports, {
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_react_aria_live = require("react-aria-live");
-var import_media_breakpoint = require("../media-breakpoint/index.js");
-var import_window_size = require("../window-size/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_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");
@@ -46,5 +46,9 @@ const StandAloneApp = ({
   manageSession,
   WaitMessage,
   children
-}) => /* @__PURE__ */ React.createElement(import_react_aria_live.LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), manageSession && /* @__PURE__ */ React.createElement(import_session_timeout.SessionTimeout, null), /* @__PURE__ */ React.createElement(import_media_breakpoint.MediaBreakpoint, null), /* @__PURE__ */ React.createElement(import_window_size.WindowSize, null), /* @__PURE__ */ React.createElement(import_live_message.LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(import_wait_message.WaitMessage, null), /* @__PURE__ */ React.createElement(import_error_toast.ErrorToast, null), children));
+}) => {
+  (0, import_use_breakpoint.useBreakpoint)();
+  (0, import_use_window_size_change.useWindowSizeChange)();
+  return /* @__PURE__ */ React.createElement(import_react_aria_live.LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), manageSession && /* @__PURE__ */ React.createElement(import_session_timeout.SessionTimeout, null), /* @__PURE__ */ React.createElement(import_live_message.LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(import_wait_message.WaitMessage, null), /* @__PURE__ */ React.createElement(import_error_toast.ErrorToast, null), children));
+};
 module.exports = __toCommonJS(stand_alone_app_exports);

package/dist/cjs/view/{media-breakpoint/index.js → breakpoint/use-breakpoint.js}

@@ -20,20 +20,20 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var media_breakpoint_exports = {};
-__export(media_breakpoint_exports, {
-  MediaBreakpoint: () => MediaBreakpoint
+var use_breakpoint_exports = {};
+__export(use_breakpoint_exports, {
+  useBreakpoint: () => useBreakpoint
 });
 var import_react = require("react");
 var import_styled_components = require("styled-components");
 var import_pubsub_js = require("pubsub-js");
 var import_react_redux = require("../../data/react-redux.js");
 var import_breakpoint = require("../../data/breakpoint/index.js");
-var import_useMediaBreakpoints = require("../useMediaBreakpoints/index.js");
+var import_use_media_query_list = require("./use-media-query-list.js");
 var import_constants = require("../../utils/constants.js");
-const MediaBreakpoint = () => {
+const useBreakpoint = () => {
   const theme = (0, import_react.useContext)(import_styled_components.ThemeContext);
-  const currentBreakpoint = (0, import_useMediaBreakpoints.useMediaBreakpoints)([
+  const currentBreakpoint = (0, import_use_media_query_list.useMediaQueryList)([
     `(max-width: ${theme.breakpoints.small})`,
     `(max-width: ${theme.breakpoints.medium})`,
     `(max-width: ${theme.breakpoints.large})`
@@ -43,6 +43,5 @@ const MediaBreakpoint = () => {
     dispatch({ type: import_breakpoint.breakpoint.change, payload: currentBreakpoint });
     (0, import_pubsub_js.publish)(import_constants.HOST_WINDOW_BREAKPOINT_CHANGED, currentBreakpoint);
   }, [currentBreakpoint, dispatch]);
-  return null;
 };
-module.exports = __toCommonJS(media_breakpoint_exports);
+module.exports = __toCommonJS(use_breakpoint_exports);

package/dist/cjs/view/{useMediaBreakpoints/index.js → breakpoint/use-media-query-list.js}

@@ -20,12 +20,12 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useMediaBreakpoints_exports = {};
-__export(useMediaBreakpoints_exports, {
-  useMediaBreakpoints: () => useMediaBreakpoints
+var use_media_query_list_exports = {};
+__export(use_media_query_list_exports, {
+  useMediaQueryList: () => useMediaQueryList
 });
 var import_react = require("react");
-const useMediaBreakpoints = (queries, values, defaultValue) => {
+const useMediaQueryList = (queries, values, defaultValue) => {
   const mediaQueryLists = queries.map((q) => window.matchMedia(q));
   const getValue = (0, import_react.useCallback)(() => {
     const index = mediaQueryLists.findIndex((mql) => mql.matches);
@@ -34,9 +34,9 @@ const useMediaBreakpoints = (queries, values, defaultValue) => {
   const [value, setValue] = (0, import_react.useState)(getValue);
   (0, import_react.useEffect)(() => {
     const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener("change", handler));
   }, [getValue, mediaQueryLists]);
   return value;
 };
-module.exports = __toCommonJS(useMediaBreakpoints_exports);
+module.exports = __toCommonJS(use_media_query_list_exports);

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

@@ -33,7 +33,7 @@ var React = __toESM(require("react"));
 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_html_wait_message = require("./html-wait-message.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",
@@ -48,15 +48,14 @@ const WaitMessage = (0, import_react.memo)(({
     else
       (0, import_user_wait_event.waitEndEvent)();
   }, [isOpen]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_html_wait_message.HTMLWaitMessage, {
-    close: isOpen !== null
-  }), /* @__PURE__ */ React.createElement(import_ds_loading_indicator.DSLoadingIndicator, {
+  (0, import_use_html_wait_message.useHTMLWaitMessage)(isOpen !== null);
+  return /* @__PURE__ */ React.createElement(import_ds_loading_indicator.DSLoadingIndicator, {
     id: "em-loading",
     size,
     style,
     ...rest,
     loading: isOpen,
     message
-  }));
+  });
 });
 module.exports = __toCommonJS(wait_message_exports);

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

@@ -20,17 +20,16 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var html_wait_message_exports = {};
-__export(html_wait_message_exports, {
-  HTMLWaitMessage: () => HTMLWaitMessage
+var use_html_wait_message_exports = {};
+__export(use_html_wait_message_exports, {
+  useHTMLWaitMessage: () => useHTMLWaitMessage
 });
 var import_react = require("react");
-const HTMLWaitMessage = (0, import_react.memo)(({ close }) => {
+const useHTMLWaitMessage = (close) => {
   (0, import_react.useEffect)(() => {
     const htmlWaitMsgElement = document.getElementById("em-wait-message");
     if (htmlWaitMsgElement && close)
       htmlWaitMsgElement.remove();
   }, [close]);
-  return null;
-});
-module.exports = __toCommonJS(html_wait_message_exports);
+};
+module.exports = __toCommonJS(use_html_wait_message_exports);

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

@@ -32,7 +32,6 @@ __export(require_auth_exports, {
 var React = __toESM(require("react"));
 var import_redux_injectors = require("redux-injectors");
 var import_constants = __toESM(require("../utils/constants.js"));
-var import_render_with_delay = require("./render-with-delay/index.js");
 var import_reducer = require("../data/auth/reducer.js");
 var import_auth = require("../sideeffect/auth/index.js");
 var import_login = require("./login/index.js");
@@ -50,13 +49,10 @@ const RequireAuth = ({
   if (userAuthorized) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
   }
-  const renderLogin = () => /* @__PURE__ */ React.createElement(import_login.Login, {
+  return /* @__PURE__ */ React.createElement(import_login.Login, {
     clientId,
     scope,
     responseType
   });
-  return /* @__PURE__ */ React.createElement(import_render_with_delay.RenderWithDelay, {
-    render: renderLogin
-  });
 };
 module.exports = __toCommonJS(require_auth_exports);

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

@@ -20,14 +20,14 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var window_size_exports = {};
-__export(window_size_exports, {
-  WindowSize: () => WindowSize
+var use_window_size_change_exports = {};
+__export(use_window_size_change_exports, {
+  useWindowSizeChange: () => useWindowSizeChange
 });
 var import_react = require("react");
 var import_pubsub_js = require("pubsub-js");
-var import_constants = require("../../utils/constants.js");
-const WindowSize = () => {
+var import_constants = require("../utils/constants.js");
+const useWindowSizeChange = () => {
   (0, import_react.useEffect)(() => {
     if (window.ResizeObserver) {
       const observer = new ResizeObserver((entries) => {
@@ -41,6 +41,5 @@ const WindowSize = () => {
     return () => {
     };
   }, []);
-  return null;
 };
-module.exports = __toCommonJS(window_size_exports);
+module.exports = __toCommonJS(use_window_size_change_exports);

package/dist/es/index.js

@@ -62,12 +62,12 @@ import { renderWithRouter } from "./utils/testing/render-with-router.js";
 import { RenderWithStateAddOns } from "./utils/testing/render-with-state-addons.js";
 import { getApiActionCreator, getSelectField } from "./api/helpers.js";
 import { getUser } from "./api/users/index.js";
-import { useMediaBreakpoints } from "./view/useMediaBreakpoints/index.js";
 import { withAppDecorator } from "./view/storybook/decorator.js";
 import { ErrorToast } from "./view/error-toast/index.js";
 import { Form } from "./view/form/index.js";
 import { ConnectForm } from "./view/fields/connect-form.js";
 import { FormItemLayout } from "./view/fields/form-item-layout/index.js";
+import { FormLayoutBlockItem } from "./view/fields/form-layout-block-item/index.js";
 import { TextBox } from "./view/fields/text-box/index.js";
 import { LargeTextBox } from "./view/fields/large-text-box/index.js";
 import {
@@ -82,7 +82,7 @@ import { RadioGroup } from "./view/fields/radio-group/index.js";
 import { DateInput } from "./view/fields/date-input/index.js";
 import { DatePicker } from "./view/fields/date-picker/index.js";
 import { FormSubmitButton } from "./view/form/submit-button/index.js";
-import { MediaBreakpoint } from "./view/media-breakpoint/index.js";
+import { useMediaQueryList } from "./view/breakpoint/use-media-query-list.js";
 import { VisuallyHidden } from "./view/visually-hidden/index.js";
 import { actions } from "./data/live-message/index.js";
 import { actions as actions2 } from "./data/error/index.js";
@@ -109,12 +109,12 @@ export {
   ErrorToast,
   Form,
   FormItemLayout,
+  FormLayoutBlockItem,
   FormSubmitButton,
   InputMask,
   LargeTextBox,
   MASK_PIPES,
   MASK_TYPES,
-  MediaBreakpoint,
   MicroApp,
   MicroIFrameApp,
   ACTIONS as NavigationPromptActions,
@@ -185,7 +185,7 @@ export {
   useAppSelector,
   useInjectReducer,
   useInjectSaga,
-  useMediaBreakpoints,
+  useMediaQueryList,
   waitMessage as waitMessageAction,
   withAppDecorator
 };

package/dist/es/utils/auth/index.js

@@ -113,7 +113,8 @@ const authorize = async ({
     setAppDynamicsUserData({ instanceId, userId: userName });
     const data = await getUser({ userName });
     sessionStorage.setItem("userSettings", JSON.stringify(data));
-    history.push(new URL(redirectUri).pathname);
+    history.push(`${new URL(redirectUri).pathname}/rerender`);
+    history.replace(new URL(redirectUri).pathname);
   } catch (err) {
     const code = err?.response?.data?.code;
     await endSession({ clientId, redirectUri, code, scope, responseType });

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

@@ -1,15 +1,18 @@
 import * as React from "react";
 import styled from "styled-components";
-import { MediaBreakpoint } from "../media-breakpoint/index.js";
-import { WindowSize } from "../window-size/index.js";
-import { HTMLWaitMessage } from "../modals/wait-message/html-wait-message.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 GlobalStyle from "./style.js";
 const Div = styled.div`
   height: 100%;
 `;
-const HostedApp = ({ children }) => /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), /* @__PURE__ */ React.createElement(MediaBreakpoint, null), /* @__PURE__ */ React.createElement(WindowSize, null), /* @__PURE__ */ React.createElement(HTMLWaitMessage, {
-  close: true
-}), children);
+const HostedApp = ({ children }) => {
+  useBreakpoint();
+  useHTMLWaitMessage(true);
+  useWindowSizeChange();
+  return /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), children);
+};
 export {
   HostedApp
 };

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import styled from "styled-components";
 import { LiveAnnouncer } from "react-aria-live";
-import { MediaBreakpoint } from "../media-breakpoint/index.js";
-import { WindowSize } from "../window-size/index.js";
+import { useBreakpoint } from "../breakpoint/use-breakpoint.js";
+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";
@@ -15,7 +15,11 @@ const StandAloneApp = ({
   manageSession,
   WaitMessage,
   children
-}) => /* @__PURE__ */ React.createElement(LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), manageSession && /* @__PURE__ */ React.createElement(SessionTimeout, null), /* @__PURE__ */ React.createElement(MediaBreakpoint, null), /* @__PURE__ */ React.createElement(WindowSize, null), /* @__PURE__ */ React.createElement(LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(DefaultWaitMessage, null), /* @__PURE__ */ React.createElement(ErrorToast, null), children));
+}) => {
+  useBreakpoint();
+  useWindowSizeChange();
+  return /* @__PURE__ */ React.createElement(LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), manageSession && /* @__PURE__ */ React.createElement(SessionTimeout, null), /* @__PURE__ */ React.createElement(LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(DefaultWaitMessage, null), /* @__PURE__ */ React.createElement(ErrorToast, null), children));
+};
 export {
   StandAloneApp
 };

package/dist/es/view/{media-breakpoint/index.js → breakpoint/use-breakpoint.js}

@@ -3,11 +3,11 @@ import { ThemeContext } from "styled-components";
 import { publish } from "pubsub-js";
 import { useAppDispatch } from "../../data/react-redux.js";
 import { breakpoint } from "../../data/breakpoint/index.js";
-import { useMediaBreakpoints } from "../useMediaBreakpoints/index.js";
+import { useMediaQueryList } from "./use-media-query-list.js";
 import { HOST_WINDOW_BREAKPOINT_CHANGED } from "../../utils/constants.js";
-const MediaBreakpoint = () => {
+const useBreakpoint = () => {
   const theme = useContext(ThemeContext);
-  const currentBreakpoint = useMediaBreakpoints([
+  const currentBreakpoint = useMediaQueryList([
     `(max-width: ${theme.breakpoints.small})`,
     `(max-width: ${theme.breakpoints.medium})`,
     `(max-width: ${theme.breakpoints.large})`
@@ -17,8 +17,7 @@ const MediaBreakpoint = () => {
     dispatch({ type: breakpoint.change, payload: currentBreakpoint });
     publish(HOST_WINDOW_BREAKPOINT_CHANGED, currentBreakpoint);
   }, [currentBreakpoint, dispatch]);
-  return null;
 };
 export {
-  MediaBreakpoint
+  useBreakpoint
 };

package/dist/es/view/{useMediaBreakpoints/index.js → breakpoint/use-media-query-list.js}

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-const useMediaBreakpoints = (queries, values, defaultValue) => {
+const useMediaQueryList = (queries, values, defaultValue) => {
   const mediaQueryLists = queries.map((q) => window.matchMedia(q));
   const getValue = useCallback(() => {
     const index = mediaQueryLists.findIndex((mql) => mql.matches);
@@ -8,11 +8,11 @@ const useMediaBreakpoints = (queries, values, defaultValue) => {
   const [value, setValue] = useState(getValue);
   useEffect(() => {
     const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener("change", handler));
   }, [getValue, mediaQueryLists]);
   return value;
 };
 export {
-  useMediaBreakpoints
+  useMediaQueryList
 };

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

@@ -2,7 +2,7 @@ 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 { HTMLWaitMessage } from "./html-wait-message.js";
+import { useHTMLWaitMessage } from "./use-html-wait-message.js";
 import {
   waitStartEvent,
   waitEndEvent
@@ -20,16 +20,15 @@ const WaitMessage = memo(({
     else
       waitEndEvent();
   }, [isOpen]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HTMLWaitMessage, {
-    close: isOpen !== null
-  }), /* @__PURE__ */ React.createElement(DSLoadingIndicator, {
+  useHTMLWaitMessage(isOpen !== null);
+  return /* @__PURE__ */ React.createElement(DSLoadingIndicator, {
     id: "em-loading",
     size,
     style,
     ...rest,
     loading: isOpen,
     message
-  }));
+  });
 });
 export {
   WaitMessage

package/dist/es/view/modals/wait-message/{html-wait-message.js → use-html-wait-message.js}

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

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useInjectReducer, useInjectSaga } from "redux-injectors";
 import enums from "../utils/constants.js";
-import { RenderWithDelay } from "./render-with-delay/index.js";
 import { authReducer } from "../data/auth/reducer.js";
 import { authentication } from "../sideeffect/auth/index.js";
 import { Login } from "./login/index.js";
@@ -19,14 +18,11 @@ const RequireAuth = ({
   if (userAuthorized) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
   }
-  const renderLogin = () => /* @__PURE__ */ React.createElement(Login, {
+  return /* @__PURE__ */ React.createElement(Login, {
     clientId,
     scope,
     responseType
   });
-  return /* @__PURE__ */ React.createElement(RenderWithDelay, {
-    render: renderLogin
-  });
 };
 export {
   RequireAuth

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

@@ -1,7 +1,7 @@
 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) => {
@@ -15,8 +15,7 @@ const WindowSize = () => {
     return () => {
     };
   }, []);
-  return null;
 };
 export {
-  WindowSize
+  useWindowSizeChange
 };

package/dist/types/index.d.ts

@@ -41,12 +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 { 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';
@@ -57,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/view/breakpoint/use-breakpoint.d.ts

@@ -0,0 +1 @@
+export declare const useBreakpoint: () => void;

package/dist/types/view/breakpoint/use-media-query-list.d.ts

@@ -0,0 +1 @@
+export declare const useMediaQueryList: (queries: Array<string>, values: Array<string>, defaultValue: string) => string;

package/dist/types/view/modals/wait-message/use-html-wait-message.d.ts

@@ -0,0 +1 @@
+export declare const useHTMLWaitMessage: (close: boolean) => void;

package/dist/types/view/use-window-size-change.d.ts

@@ -0,0 +1 @@
+export declare const useWindowSizeChange: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-app-sdk",
-  "version": "3.0.0-beta.20",
+  "version": "3.0.0-beta.24",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",
@@ -62,7 +62,7 @@
     "url": "http://git.elliemae.io/platform-ui/pui-app-sdk.git"
   },
   "engines": {
-    "npm": ">=8",
+    "pnpm": ">=6",
     "node": ">=16"
   },
   "author": "ICE MT",
@@ -94,7 +94,8 @@
     "test:watch": "pui-cli test -w",
     "test:staged": "jest --coverage --passWithNoTests --bail --findRelatedTests",
     "upgrade": "ncu -u && npm run setup",
-    "prepare": "husky install"
+    "preinstall": "npx only-allow pnpm",
+    "prepare": "[ -n \"$CI\" ] || husky install"
   },
   "jestSonar": {
     "sonar56x": true,
@@ -103,20 +104,20 @@
     "indent": 4
   },
   "peerDependencies": {
-    "@elliemae/app-react-dependencies": "^3.0.0-beta.3",
-    "@elliemae/ds-basic": "^2.3.0-alpha.2",
-    "@elliemae/ds-button": "^2.3.0-alpha.2",
-    "@elliemae/ds-controlled-form": "^2.3.0-alpha.2",
-    "@elliemae/ds-date-picker": "^2.3.0-alpha.2",
-    "@elliemae/ds-date-range-picker": "^2.3.0-alpha.2",
-    "@elliemae/ds-dialog": "^2.3.0-alpha.2",
-    "@elliemae/ds-form": "^2.3.0-alpha.2",
-    "@elliemae/ds-form-layout-blocks": "^2.3.0-alpha.2",
-    "@elliemae/ds-grid": "^2.3.0-alpha.2",
-    "@elliemae/ds-loading-indicator": "^2.3.0-alpha.2",
-    "@elliemae/ds-modal": "^2.3.0-alpha.2",
-    "@elliemae/ds-popperjs": "^2.3.0-alpha.2",
-    "@elliemae/ds-toast": "^2.3.0-alpha.2",
+    "@elliemae/app-react-dependencies": "^3.0.0-beta.4",
+    "@elliemae/ds-basic": "^3.0.0-alpha.0",
+    "@elliemae/ds-button": "^3.0.0-alpha.0",
+    "@elliemae/ds-controlled-form": "^3.0.0-alpha.0",
+    "@elliemae/ds-date-picker": "^3.0.0-alpha.0",
+    "@elliemae/ds-date-range-picker": "^3.0.0-alpha.0",
+    "@elliemae/ds-dialog": "^3.0.0-alpha.0",
+    "@elliemae/ds-form": "^3.0.0-alpha.0",
+    "@elliemae/ds-form-layout-blocks": "^3.0.0-alpha.0",
+    "@elliemae/ds-grid": "^3.0.0-alpha.0",
+    "@elliemae/ds-loading-indicator": "^3.0.0-alpha.0",
+    "@elliemae/ds-modal": "^3.0.0-alpha.0",
+    "@elliemae/ds-popperjs": "^3.0.0-alpha.0",
+    "@elliemae/ds-toast": "^3.0.0-alpha.0",
     "@elliemae/em-ssf-guest": "^1.11.1",
     "@elliemae/pui-diagnostics": "^2.7.3",
     "@elliemae/pui-micro-frontend-base": "^1.10.1",
@@ -124,25 +125,25 @@
     "@elliemae/pui-user-monitoring": "^1.12.2"
   },
   "devDependencies": {
-    "@elliemae/app-react-dependencies": "~3.0.0-beta.3",
+    "@elliemae/app-react-dependencies": "~3.0.0-beta.4",
     "@elliemae/browserslist-config-elliemae-latest-browsers": "~1.2.1",
-    "@elliemae/ds-basic": "~2.3.0-alpha.2",
-    "@elliemae/ds-button": "~2.3.0-alpha.2",
-    "@elliemae/ds-controlled-form": "~2.3.0-alpha.2",
-    "@elliemae/ds-date-picker": "~2.3.0-alpha.2",
-    "@elliemae/ds-date-range-picker": "~2.3.0-alpha.2",
-    "@elliemae/ds-dialog": "~2.3.0-alpha.2",
-    "@elliemae/ds-form": "~2.3.0-alpha.2",
-    "@elliemae/ds-form-layout-blocks": "~2.3.0-alpha.2",
-    "@elliemae/ds-grid": "~2.3.0-alpha.2",
-    "@elliemae/ds-loading-indicator": "~2.3.0-alpha.2",
-    "@elliemae/ds-modal": "~2.3.0-alpha.2",
-    "@elliemae/ds-popperjs": "~2.3.0-alpha.2",
-    "@elliemae/ds-toast": "~2.3.0-alpha.2",
+    "@elliemae/ds-basic": "3.0.0-alpha.0",
+    "@elliemae/ds-button": "3.0.0-alpha.0",
+    "@elliemae/ds-controlled-form": "3.0.0-alpha.0",
+    "@elliemae/ds-date-picker": "3.0.0-alpha.0",
+    "@elliemae/ds-date-range-picker": "3.0.0-alpha.0",
+    "@elliemae/ds-dialog": "3.0.0-alpha.0",
+    "@elliemae/ds-form": "3.0.0-alpha.0",
+    "@elliemae/ds-form-layout-blocks": "3.0.0-alpha.0",
+    "@elliemae/ds-grid": "3.0.0-alpha.0",
+    "@elliemae/ds-loading-indicator": "3.0.0-alpha.0",
+    "@elliemae/ds-modal": "3.0.0-alpha.0",
+    "@elliemae/ds-popperjs": "3.0.0-alpha.0",
+    "@elliemae/ds-toast": "3.0.0-alpha.0",
     "@elliemae/em-ssf-guest": "~1.11.1",
-    "@elliemae/pui-cli": "~6.0.0-beta.37",
+    "@elliemae/pui-cli": "~6.0.0-beta.41",
     "@elliemae/pui-diagnostics": "~2.7.3",
-    "@elliemae/pui-e2e-test-sdk": "~6.9.0",
+    "@elliemae/pui-e2e-test-sdk": "~6.10.0",
     "@elliemae/pui-micro-frontend-base": "~1.10.1",
     "@elliemae/pui-theme": "~2.3.0",
     "@elliemae/pui-user-monitoring": "~1.12.2"

package/dist/types/view/media-breakpoint/index.d.ts

@@ -1 +0,0 @@
-export declare const MediaBreakpoint: () => null;

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare type HTMLWaitMessageProps = {
-    close: boolean;
-};
-export declare const HTMLWaitMessage: import("react").NamedExoticComponent<HTMLWaitMessageProps>;
-export {};

package/dist/types/view/useMediaBreakpoints/index.d.ts

@@ -1 +0,0 @@
-export declare const useMediaBreakpoints: (queries: Array<string>, values: Array<string>, defaultValue: string) => string;

package/dist/types/view/window-size/index.d.ts

@@ -1 +0,0 @@
-export declare const WindowSize: () => null;