@elliemae/pui-app-sdk 5.3.2 → 5.3.4

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

@@ -25,6 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_dialog = require("@elliemae/ds-dialog");
 var import_react2 = require("../../../data/react.js");
 var import_actions = require("../../../data/logout/actions.js");
@@ -35,6 +36,9 @@ const SessionExpiry = (0, import_react.memo)(
     const [isOpen, setIsOpen] = (0, import_react.useState)(open);
     const timeLeft = (0, import_customHooks.useTrackSessionExpiry)(warningNotifiedAt);
     const dispatch = (0, import_react2.useAppDispatch)();
+    const firstElementRef = (0, import_react.useRef)(null);
+    const lastElementRef = (0, import_react.useRef)(null);
+    const handleOnKeyDown = (0, import_ds_utilities.useFocusTrap)({ firstElementRef, lastElementRef });
     (0, import_react.useEffect)(() => {
       setIsOpen(open);
     }, [open]);
@@ -48,7 +52,7 @@ const SessionExpiry = (0, import_react.memo)(
       setIsOpen(false);
       dispatch(import_actions.logout.confirm());
     };
-    return timeLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_dialog.DSDialog, { isOpen, size: "small", children: [
+    return timeLeft ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_dialog.DSDialog, { onKeyDown: handleOnKeyDown, isOpen, size: "small", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_dialog.DSDialogBody, { p: "s", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_dialog.DSDialogDefaultLayout, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.WarningCircle, { size: "xl", color: ["warning", "900"] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_dialog.DSDialogPrimaryMessage, { children: `Your session will expire in ${timeLeft}` }),
@@ -56,8 +60,16 @@ const SessionExpiry = (0, import_react.memo)(
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_dialog.DSDialogSeparator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_dialog.DSDialogFooter, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButtonV2, { buttonType: "outline", onClick: logoutSession, children: "Logout" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButtonV2, { onClick: resetSession, children: "Reset" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ds_button.DSButtonV2,
+          {
+            innerRef: firstElementRef,
+            buttonType: "outline",
+            onClick: logoutSession,
+            children: "Logout"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButtonV2, { innerRef: lastElementRef, onClick: resetSession, children: "Reset" })
       ] })
     ] }) : null;
   }

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

@@ -54,6 +54,7 @@ const WaitMessage = (0, import_react.memo)(
     tooltipStartPlacementPreference = "center",
     ...rest
   }) => {
+    const theme = (0, import_react.useContext)(import_styled_components.ThemeContext);
     const ref = (0, import_react.useRef)(false);
     const [show, setShow] = (0, import_react.useState)(false);
     const isOpen = (0, import_react2.useAppSelector)((state) => state.waitMessage?.isOpen);
@@ -73,7 +74,7 @@ const WaitMessage = (0, import_react.memo)(
     }, [isOpen]);
     (0, import_use_html_wait_message.useHTMLWaitMessage)(isOpen !== null);
     return show ? /* @__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)(import_ds_backdrop.DSBackdrop, { zIndex: theme.zIndex.loader }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         StyledCircularIndicator,
         {

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useState, useRef } from "react";
 import { DSButtonV2 } from "@elliemae/ds-button";
 import { WarningCircle } from "@elliemae/ds-icons";
+import { useFocusTrap } from "@elliemae/ds-utilities";
 import {
   DSDialog,
   DSDialogDefaultLayout,
@@ -23,6 +24,9 @@ const SessionExpiry = memo(
     const [isOpen, setIsOpen] = useState(open);
     const timeLeft = useTrackSessionExpiry(warningNotifiedAt);
     const dispatch = useAppDispatch();
+    const firstElementRef = useRef(null);
+    const lastElementRef = useRef(null);
+    const handleOnKeyDown = useFocusTrap({ firstElementRef, lastElementRef });
     useEffect(() => {
       setIsOpen(open);
     }, [open]);
@@ -36,7 +40,7 @@ const SessionExpiry = memo(
       setIsOpen(false);
       dispatch(logout.confirm());
     };
-    return timeLeft ? /* @__PURE__ */ jsxs(DSDialog, { isOpen, size: "small", children: [
+    return timeLeft ? /* @__PURE__ */ jsxs(DSDialog, { onKeyDown: handleOnKeyDown, isOpen, size: "small", children: [
       /* @__PURE__ */ jsx(DSDialogBody, { p: "s", children: /* @__PURE__ */ jsxs(DSDialogDefaultLayout, { children: [
         /* @__PURE__ */ jsx(WarningCircle, { size: "xl", color: ["warning", "900"] }),
         /* @__PURE__ */ jsx(DSDialogPrimaryMessage, { children: `Your session will expire in ${timeLeft}` }),
@@ -44,8 +48,16 @@ const SessionExpiry = memo(
       ] }) }),
       /* @__PURE__ */ jsx(DSDialogSeparator, {}),
       /* @__PURE__ */ jsxs(DSDialogFooter, { children: [
-        /* @__PURE__ */ jsx(DSButtonV2, { buttonType: "outline", onClick: logoutSession, children: "Logout" }),
-        /* @__PURE__ */ jsx(DSButtonV2, { onClick: resetSession, children: "Reset" })
+        /* @__PURE__ */ jsx(
+          DSButtonV2,
+          {
+            innerRef: firstElementRef,
+            buttonType: "outline",
+            onClick: logoutSession,
+            children: "Logout"
+          }
+        ),
+        /* @__PURE__ */ jsx(DSButtonV2, { innerRef: lastElementRef, onClick: resetSession, children: "Reset" })
       ] })
     ] }) : null;
   }

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useEffect, useState, useRef } from "react";
-import styled from "styled-components";
+import { memo, useEffect, useState, useRef, useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
 import { DSBackdrop } from "@elliemae/ds-backdrop";
 import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
 import { useAppSelector } from "../../data/react.js";
@@ -24,6 +24,7 @@ const WaitMessage = memo(
     tooltipStartPlacementPreference = "center",
     ...rest
   }) => {
+    const theme = useContext(ThemeContext);
     const ref = useRef(false);
     const [show, setShow] = useState(false);
     const isOpen = useAppSelector((state) => state.waitMessage?.isOpen);
@@ -43,7 +44,7 @@ const WaitMessage = memo(
     }, [isOpen]);
     useHTMLWaitMessage(isOpen !== null);
     return show ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(DSBackdrop, {}),
+      /* @__PURE__ */ jsx(DSBackdrop, { zIndex: theme.zIndex.loader }),
       /* @__PURE__ */ jsx(
         StyledCircularIndicator,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-app-sdk",
-  "version": "5.3.2",
+  "version": "5.3.4",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",
@@ -159,6 +159,7 @@
     "@elliemae/pui-scripting-object": "~1.20.0",
     "@elliemae/pui-theme": "~2.7.0",
     "@elliemae/pui-user-monitoring": "~1.20.0",
-    "@types/react-aria-live": "~2.0.2"
+    "@types/react-aria-live": "~2.0.2",
+    "@elliemae/ds-utilities": "^3.19.0"
   }
 }