@elliemae/ds-dialog 3.1.4 → 3.1.5-rc.10

package/dist/cjs/parts/DSDialogPortal.js

@@ -26,14 +26,13 @@ module.exports = __toCommonJS(DSDialogPortal_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
-var import_react2 = require("react");
 var import_DSDialogCTX = require("../DSDialogCTX");
 var import_DSDialogContent = require("./dialogContent/DSDialogContent");
 const DSDialogPortal = () => {
   const {
     props: { isOpen },
     actualPortalRef
-  } = (0, import_react2.useContext)(import_DSDialogCTX.DSDialogContext);
+  } = (0, import_react.useContext)(import_DSDialogCTX.DSDialogContext);
   if (isOpen && actualPortalRef.current) {
     return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(import_DSDialogContent.DSDialogContent, null), actualPortalRef.current);
   }

package/dist/cjs/parts/DSDialogPortal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DSDialogPortal.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useContext } from 'react';\nimport { DSDialogContext } from '../DSDialogCTX';\nimport { DSDialogContent } from './dialogContent/DSDialogContent';\n\nexport const DSDialogPortal = (): JSX.Element | null => {\n  const {\n    props: { isOpen },\n    actualPortalRef,\n  } = useContext(DSDialogContext);\n\n  if (isOpen && actualPortalRef.current) {\n    return ReactDOM.createPortal(<DSDialogContent />, actualPortalRef.current);\n  }\n\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAqB;AACrB,oBAA2B;AAC3B,yBAAgC;AAChC,6BAAgC;AAEzB,MAAM,iBAAiB,MAA0B;AACtD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,8BAAW,kCAAe;AAE9B,MAAI,UAAU,gBAAgB,SAAS;AACrC,WAAO,yBAAS,aAAa,mDAAC,4CAAgB,GAAI,gBAAgB,OAAO;AAAA,EAC3E;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport ReactDOM from 'react-dom';\nimport { DSDialogContext } from '../DSDialogCTX';\nimport { DSDialogContent } from './dialogContent/DSDialogContent';\n\nexport const DSDialogPortal = (): JSX.Element | null => {\n  const {\n    props: { isOpen },\n    actualPortalRef,\n  } = useContext(DSDialogContext);\n\n  if (isOpen && actualPortalRef.current) {\n    return ReactDOM.createPortal(<DSDialogContent />, actualPortalRef.current);\n  }\n\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,uBAAqB;AACrB,yBAAgC;AAChC,6BAAgC;AAEzB,MAAM,iBAAiB,MAA0B;AACtD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW,kCAAe;AAE9B,MAAI,UAAU,gBAAgB,SAAS;AACrC,WAAO,yBAAS,aAAa,mDAAC,4CAAgB,GAAI,gBAAgB,OAAO;AAAA,EAC3E;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/parts/dialogContent/DSDialogContent.js

@@ -68,6 +68,13 @@ const DSDialogContent = () => {
     onClick: handleOutsideClick,
     onKeyDown: handleOnKeyDown
   }), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
+  const refCallback = (0, import_react.useCallback)((_ref) => {
+    if (_ref) {
+      containerRef.current = _ref;
+      if (!removeAutoFocus)
+        _ref.focus();
+    }
+  }, [containerRef, removeAutoFocus]);
   return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogBackground, {
     className,
     onClick: handleOutsideClick,
@@ -80,7 +87,7 @@ const DSDialogContent = () => {
   }), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
     role: "dialog",
     "aria-modal": true,
-    ref: containerRef,
+    ref: refCallback,
     tabIndex: !removeAutoFocus ? 0 : void 0,
     onKeyDown: handleOnKeyDown
   }, (0, import_utils.getSpaceProps)(rest)), {

package/dist/cjs/parts/dialogContent/DSDialogContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/dialogContent/DSDialogContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { PortalStyles, StyledDialogBackground, StyledDialogContainer } from '../../styles';\nimport { getSpaceProps } from '../../utils';\nimport { DSDialogDatatestid } from '../../DSDialogDatatestid';\nimport { DSDialogContext } from '../../DSDialogCTX';\nimport { useDialogContent } from './useDialogContent';\n\nexport const DSDialogContent = () => {\n  const { handleOutsideClick, handleOnKeyDown } = useDialogContent();\n  const { props, containerRef, portalInfo, portalClassName } = useContext(DSDialogContext);\n\n  const { removeAutoFocus, zIndex, centered, size, children, ...rest } = props;\n\n  const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(props, {\n    onClick: handleOutsideClick,\n    onKeyDown: handleOnKeyDown,\n  });\n\n  return (\n    <StyledDialogBackground\n      className={className}\n      onClick={handleOutsideClick}\n      data-portalbg\n      data-testid={DSDialogDatatestid.BACKGROUND}\n      zIndex={zIndex}\n    >\n      <PortalStyles portalInfo={portalInfo} portalClassName={portalClassName} />\n      <StyledDialogContainer\n        role=\"dialog\"\n        aria-modal\n        ref={containerRef}\n        tabIndex={!removeAutoFocus ? 0 : undefined}\n        onKeyDown={handleOnKeyDown}\n        {...getSpaceProps(rest as unknown as Record<string, unknown>)}\n        centered={centered}\n        data-testid={DSDialogDatatestid.CONTAINER}\n        {...restOfGlobalAttributes}\n        size={size}\n      >\n        {children}\n      </StyledDialogContainer>\n    </StyledDialogBackground>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAAuC;AACvC,oBAA4E;AAC5E,mBAA8B;AAC9B,gCAAmC;AACnC,yBAAgC;AAChC,8BAAiC;AAE1B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,oBAAoB,8CAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,oBAAoB,6BAAW,kCAAe;AAEvF,QAAuE,YAA/D,mBAAiB,QAAQ,UAAU,MAAM,aAAsB,IAAT,iBAAS,IAAT,CAAtD,mBAAiB,UAAQ,YAAU,QAAM;AAEjD,QAAiD,qDAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC,GAHO,gBAAyC,IAA3B,mCAA2B,IAA3B,CAAd;AAKR,SACE,mDAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,iBAAa;AAAA,IACb,eAAa,6CAAmB;AAAA,IAChC;AAAA,KAEA,mDAAC;AAAA,IAAa;AAAA,IAAwB;AAAA,GAAkC,GACxE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,cAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,IACjC,WAAW;AAAA,KACP,gCAAc,IAA0C,IAN7D;AAAA,IAOC;AAAA,IACA,eAAa,6CAAmB;AAAA,MAC5B,yBATL;AAAA,IAUC;AAAA,MAEC,QACH,CACF;AAEJ;",
+  "sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { PortalStyles, StyledDialogBackground, StyledDialogContainer } from '../../styles';\nimport { getSpaceProps } from '../../utils';\nimport { DSDialogDatatestid } from '../../DSDialogDatatestid';\nimport { DSDialogContext } from '../../DSDialogCTX';\nimport { useDialogContent } from './useDialogContent';\n\nexport const DSDialogContent = () => {\n  const { handleOutsideClick, handleOnKeyDown } = useDialogContent();\n  const { props, containerRef, portalInfo, portalClassName } = useContext(DSDialogContext);\n\n  const { removeAutoFocus, zIndex, centered, size, children, ...rest } = props;\n\n  const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(props, {\n    onClick: handleOutsideClick,\n    onKeyDown: handleOnKeyDown,\n  });\n\n  const refCallback = useCallback(\n    (_ref: HTMLDivElement | null) => {\n      if (_ref) {\n        containerRef.current = _ref;\n        if (!removeAutoFocus) _ref.focus();\n      }\n    },\n    [containerRef, removeAutoFocus],\n  );\n\n  return (\n    <StyledDialogBackground\n      className={className}\n      onClick={handleOutsideClick}\n      data-portalbg\n      data-testid={DSDialogDatatestid.BACKGROUND}\n      zIndex={zIndex}\n    >\n      <PortalStyles portalInfo={portalInfo} portalClassName={portalClassName} />\n      <StyledDialogContainer\n        role=\"dialog\"\n        aria-modal\n        ref={refCallback}\n        tabIndex={!removeAutoFocus ? 0 : undefined}\n        onKeyDown={handleOnKeyDown}\n        {...getSpaceProps(rest as unknown as Record<string, unknown>)}\n        centered={centered}\n        data-testid={DSDialogDatatestid.CONTAINER}\n        {...restOfGlobalAttributes}\n        size={size}\n      >\n        {children}\n      </StyledDialogContainer>\n    </StyledDialogBackground>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,0BAAuC;AACvC,oBAA4E;AAC5E,mBAA8B;AAC9B,gCAAmC;AACnC,yBAAgC;AAChC,8BAAiC;AAE1B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,oBAAoB,8CAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,oBAAoB,6BAAW,kCAAe;AAEvF,QAAuE,YAA/D,mBAAiB,QAAQ,UAAU,MAAM,aAAsB,IAAT,iBAAS,IAAT,CAAtD,mBAAiB,UAAQ,YAAU,QAAM;AAEjD,QAAiD,qDAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC,GAHO,gBAAyC,IAA3B,mCAA2B,IAA3B,CAAd;AAKR,QAAM,cAAc,8BAClB,CAAC,SAAgC;AAC/B,QAAI,MAAM;AACR,mBAAa,UAAU;AACvB,UAAI,CAAC;AAAiB,aAAK,MAAM;AAAA,IACnC;AAAA,EACF,GACA,CAAC,cAAc,eAAe,CAChC;AAEA,SACE,mDAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,iBAAa;AAAA,IACb,eAAa,6CAAmB;AAAA,IAChC;AAAA,KAEA,mDAAC;AAAA,IAAa;AAAA,IAAwB;AAAA,GAAkC,GACxE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,cAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,IACjC,WAAW;AAAA,KACP,gCAAc,IAA0C,IAN7D;AAAA,IAOC;AAAA,IACA,eAAa,6CAAmB;AAAA,MAC5B,yBATL;AAAA,IAUC;AAAA,MAEC,QACH,CACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/dialogContent/useDialogContent.js

@@ -28,8 +28,7 @@ var import_react = require("react");
 var import_DSDialogCTX = require("../../DSDialogCTX");
 const useDialogContent = () => {
   const {
-    props: { onClickOutside, onClose, removeAutoFocus },
-    containerRef
+    props: { onClickOutside, onClose }
   } = (0, import_react.useContext)(import_DSDialogCTX.DSDialogContext);
   const handleOutsideClick = (0, import_react.useCallback)((e) => {
     if (e.target.dataset.portalbg)
@@ -39,21 +38,6 @@ const useDialogContent = () => {
     if (e.key === "Escape")
       onClose();
   }, [onClose]);
-  (0, import_react.useEffect)(() => {
-    if (!removeAutoFocus)
-      containerRef?.current?.focus();
-  }, [containerRef, removeAutoFocus]);
-  const focusContainer = (0, import_react.useCallback)(() => {
-    setTimeout(() => {
-      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
-      if (!isContainerOrChildFocused)
-        containerRef.current?.focus?.();
-    });
-  }, [containerRef]);
-  (0, import_react.useEffect)(() => {
-    document.addEventListener("focusin", focusContainer);
-    return () => document.removeEventListener("focusin", focusContainer);
-  }, [focusContainer]);
   return {
     handleOutsideClick,
     handleOnKeyDown

package/dist/cjs/parts/dialogContent/useDialogContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/dialogContent/useDialogContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useContext } from 'react';\nimport { DSDialogContext } from '../../DSDialogCTX';\n\nexport const useDialogContent = () => {\n  const {\n    props: { onClickOutside, onClose, removeAutoFocus },\n    containerRef,\n  } = useContext(DSDialogContext);\n\n  const handleOutsideClick = useCallback(\n    (e: React.MouseEvent) => {\n      if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n    },\n    [onClickOutside],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    if (!removeAutoFocus) containerRef?.current?.focus();\n  }, [containerRef, removeAutoFocus]);\n\n  const focusContainer = useCallback(() => {\n    setTimeout(() => {\n      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n      if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n    });\n  }, [containerRef]);\n\n  useEffect(() => {\n    document.addEventListener('focusin', focusContainer);\n    return () => document.removeEventListener('focusin', focusContainer);\n  }, [focusContainer]);\n\n  return {\n    handleOutsideClick,\n    handleOnKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,yBAAgC;AAEzB,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,MACE,6BAAW,kCAAe;AAE9B,QAAM,qBAAqB,8BACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU,qBAAe;AAAA,EACpE,GACA,CAAC,cAAc,CACjB;AAEA,QAAM,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU,cAAQ;AAAA,EAClC,GACA,CAAC,OAAO,CACV;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC;AAAiB,oBAAc,SAAS,MAAM;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,iBAAiB,8BAAY,MAAM;AACvC,eAAW,MAAM;AACf,YAAM,4BAA4B,aAAa,SAAS,SAAS,SAAS,aAAa;AACvF,UAAI,CAAC;AAA2B,qBAAa,SAAS,QAAQ;AAAA,IAChE,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,CAAC;AAEjB,8BAAU,MAAM;AACd,aAAS,iBAAiB,WAAW,cAAc;AACnD,WAAO,MAAM,SAAS,oBAAoB,WAAW,cAAc;AAAA,EACrE,GAAG,CAAC,cAAc,CAAC;AAEnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { DSDialogContext } from '../../DSDialogCTX';\n\nexport const useDialogContent = () => {\n  const {\n    props: { onClickOutside, onClose },\n  } = useContext(DSDialogContext);\n\n  const handleOutsideClick = useCallback(\n    (e: React.MouseEvent) => {\n      if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n    },\n    [onClickOutside],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    },\n    [onClose],\n  );\n\n  return {\n    handleOutsideClick,\n    handleOnKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,yBAAgC;AAEzB,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,MACvB,6BAAW,kCAAe;AAE9B,QAAM,qBAAqB,8BACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU,qBAAe;AAAA,EACpE,GACA,CAAC,cAAc,CACjB;AAEA,QAAM,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU,cAAQ;AAAA,EAClC,GACA,CAAC,OAAO,CACV;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/DSDialogPortal.js

@@ -1,7 +1,6 @@
 import * as React from "react";
-import React2 from "react";
+import React2, { useContext } from "react";
 import ReactDOM from "react-dom";
-import { useContext } from "react";
 import { DSDialogContext } from "../DSDialogCTX";
 import { DSDialogContent } from "./dialogContent/DSDialogContent";
 const DSDialogPortal = () => {

package/dist/esm/parts/DSDialogPortal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DSDialogPortal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useContext } from 'react';\nimport { DSDialogContext } from '../DSDialogCTX';\nimport { DSDialogContent } from './dialogContent/DSDialogContent';\n\nexport const DSDialogPortal = (): JSX.Element | null => {\n  const {\n    props: { isOpen },\n    actualPortalRef,\n  } = useContext(DSDialogContext);\n\n  if (isOpen && actualPortalRef.current) {\n    return ReactDOM.createPortal(<DSDialogContent />, actualPortalRef.current);\n  }\n\n  return null;\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,iBAAiB,MAA0B;AACtD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,eAAe;AAE9B,MAAI,UAAU,gBAAgB,SAAS;AACrC,WAAO,SAAS,aAAa,qCAAC,qBAAgB,GAAI,gBAAgB,OAAO;AAAA,EAC3E;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport ReactDOM from 'react-dom';\nimport { DSDialogContext } from '../DSDialogCTX';\nimport { DSDialogContent } from './dialogContent/DSDialogContent';\n\nexport const DSDialogPortal = (): JSX.Element | null => {\n  const {\n    props: { isOpen },\n    actualPortalRef,\n  } = useContext(DSDialogContext);\n\n  if (isOpen && actualPortalRef.current) {\n    return ReactDOM.createPortal(<DSDialogContent />, actualPortalRef.current);\n  }\n\n  return null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,iBAAiB,MAA0B;AACtD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW,eAAe;AAE9B,MAAI,UAAU,gBAAgB,SAAS;AACrC,WAAO,SAAS,aAAa,qCAAC,qBAAgB,GAAI,gBAAgB,OAAO;AAAA,EAC3E;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/parts/dialogContent/DSDialogContent.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import React2, { useContext } from "react";
+import React2, { useCallback, useContext } from "react";
 import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
 import { PortalStyles, StyledDialogBackground, StyledDialogContainer } from "../../styles";
 import { getSpaceProps } from "../../utils";
@@ -45,6 +45,13 @@ const DSDialogContent = () => {
     onClick: handleOutsideClick,
     onKeyDown: handleOnKeyDown
   }), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
+  const refCallback = useCallback((_ref) => {
+    if (_ref) {
+      containerRef.current = _ref;
+      if (!removeAutoFocus)
+        _ref.focus();
+    }
+  }, [containerRef, removeAutoFocus]);
   return /* @__PURE__ */ React2.createElement(StyledDialogBackground, {
     className,
     onClick: handleOutsideClick,
@@ -57,7 +64,7 @@ const DSDialogContent = () => {
   }), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
     role: "dialog",
     "aria-modal": true,
-    ref: containerRef,
+    ref: refCallback,
     tabIndex: !removeAutoFocus ? 0 : void 0,
     onKeyDown: handleOnKeyDown
   }, getSpaceProps(rest)), {

package/dist/esm/parts/dialogContent/DSDialogContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/dialogContent/DSDialogContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { PortalStyles, StyledDialogBackground, StyledDialogContainer } from '../../styles';\nimport { getSpaceProps } from '../../utils';\nimport { DSDialogDatatestid } from '../../DSDialogDatatestid';\nimport { DSDialogContext } from '../../DSDialogCTX';\nimport { useDialogContent } from './useDialogContent';\n\nexport const DSDialogContent = () => {\n  const { handleOutsideClick, handleOnKeyDown } = useDialogContent();\n  const { props, containerRef, portalInfo, portalClassName } = useContext(DSDialogContext);\n\n  const { removeAutoFocus, zIndex, centered, size, children, ...rest } = props;\n\n  const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(props, {\n    onClick: handleOutsideClick,\n    onKeyDown: handleOnKeyDown,\n  });\n\n  return (\n    <StyledDialogBackground\n      className={className}\n      onClick={handleOutsideClick}\n      data-portalbg\n      data-testid={DSDialogDatatestid.BACKGROUND}\n      zIndex={zIndex}\n    >\n      <PortalStyles portalInfo={portalInfo} portalClassName={portalClassName} />\n      <StyledDialogContainer\n        role=\"dialog\"\n        aria-modal\n        ref={containerRef}\n        tabIndex={!removeAutoFocus ? 0 : undefined}\n        onKeyDown={handleOnKeyDown}\n        {...getSpaceProps(rest as unknown as Record<string, unknown>)}\n        centered={centered}\n        data-testid={DSDialogDatatestid.CONTAINER}\n        {...restOfGlobalAttributes}\n        size={size}\n      >\n        {children}\n      </StyledDialogContainer>\n    </StyledDialogBackground>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,oBAAoB,iBAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,oBAAoB,WAAW,eAAe;AAEvF,QAAuE,YAA/D,mBAAiB,QAAQ,UAAU,MAAM,aAAsB,IAAT,iBAAS,IAAT,CAAtD,mBAAiB,UAAQ,YAAU,QAAM;AAEjD,QAAiD,4BAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC,GAHO,gBAAyC,IAA3B,mCAA2B,IAA3B,CAAd;AAKR,SACE,qCAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,iBAAa;AAAA,IACb,eAAa,mBAAmB;AAAA,IAChC;AAAA,KAEA,qCAAC;AAAA,IAAa;AAAA,IAAwB;AAAA,GAAkC,GACxE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,cAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,IACjC,WAAW;AAAA,KACP,cAAc,IAA0C,IAN7D;AAAA,IAOC;AAAA,IACA,eAAa,mBAAmB;AAAA,MAC5B,yBATL;AAAA,IAUC;AAAA,MAEC,QACH,CACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { PortalStyles, StyledDialogBackground, StyledDialogContainer } from '../../styles';\nimport { getSpaceProps } from '../../utils';\nimport { DSDialogDatatestid } from '../../DSDialogDatatestid';\nimport { DSDialogContext } from '../../DSDialogCTX';\nimport { useDialogContent } from './useDialogContent';\n\nexport const DSDialogContent = () => {\n  const { handleOutsideClick, handleOnKeyDown } = useDialogContent();\n  const { props, containerRef, portalInfo, portalClassName } = useContext(DSDialogContext);\n\n  const { removeAutoFocus, zIndex, centered, size, children, ...rest } = props;\n\n  const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(props, {\n    onClick: handleOutsideClick,\n    onKeyDown: handleOnKeyDown,\n  });\n\n  const refCallback = useCallback(\n    (_ref: HTMLDivElement | null) => {\n      if (_ref) {\n        containerRef.current = _ref;\n        if (!removeAutoFocus) _ref.focus();\n      }\n    },\n    [containerRef, removeAutoFocus],\n  );\n\n  return (\n    <StyledDialogBackground\n      className={className}\n      onClick={handleOutsideClick}\n      data-portalbg\n      data-testid={DSDialogDatatestid.BACKGROUND}\n      zIndex={zIndex}\n    >\n      <PortalStyles portalInfo={portalInfo} portalClassName={portalClassName} />\n      <StyledDialogContainer\n        role=\"dialog\"\n        aria-modal\n        ref={refCallback}\n        tabIndex={!removeAutoFocus ? 0 : undefined}\n        onKeyDown={handleOnKeyDown}\n        {...getSpaceProps(rest as unknown as Record<string, unknown>)}\n        centered={centered}\n        data-testid={DSDialogDatatestid.CONTAINER}\n        {...restOfGlobalAttributes}\n        size={size}\n      >\n        {children}\n      </StyledDialogContainer>\n    </StyledDialogBackground>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,oBAAoB,iBAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,oBAAoB,WAAW,eAAe;AAEvF,QAAuE,YAA/D,mBAAiB,QAAQ,UAAU,MAAM,aAAsB,IAAT,iBAAS,IAAT,CAAtD,mBAAiB,UAAQ,YAAU,QAAM;AAEjD,QAAiD,4BAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC,GAHO,gBAAyC,IAA3B,mCAA2B,IAA3B,CAAd;AAKR,QAAM,cAAc,YAClB,CAAC,SAAgC;AAC/B,QAAI,MAAM;AACR,mBAAa,UAAU;AACvB,UAAI,CAAC;AAAiB,aAAK,MAAM;AAAA,IACnC;AAAA,EACF,GACA,CAAC,cAAc,eAAe,CAChC;AAEA,SACE,qCAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,iBAAa;AAAA,IACb,eAAa,mBAAmB;AAAA,IAChC;AAAA,KAEA,qCAAC;AAAA,IAAa;AAAA,IAAwB;AAAA,GAAkC,GACxE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,cAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,IACjC,WAAW;AAAA,KACP,cAAc,IAA0C,IAN7D;AAAA,IAOC;AAAA,IACA,eAAa,mBAAmB;AAAA,MAC5B,yBATL;AAAA,IAUC;AAAA,MAEC,QACH,CACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/dialogContent/useDialogContent.js

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { useCallback, useEffect, useContext } from "react";
+import { useCallback, useContext } from "react";
 import { DSDialogContext } from "../../DSDialogCTX";
 const useDialogContent = () => {
   const {
-    props: { onClickOutside, onClose, removeAutoFocus },
-    containerRef
+    props: { onClickOutside, onClose }
   } = useContext(DSDialogContext);
   const handleOutsideClick = useCallback((e) => {
     if (e.target.dataset.portalbg)
@@ -14,21 +13,6 @@ const useDialogContent = () => {
     if (e.key === "Escape")
       onClose();
   }, [onClose]);
-  useEffect(() => {
-    if (!removeAutoFocus)
-      containerRef?.current?.focus();
-  }, [containerRef, removeAutoFocus]);
-  const focusContainer = useCallback(() => {
-    setTimeout(() => {
-      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
-      if (!isContainerOrChildFocused)
-        containerRef.current?.focus?.();
-    });
-  }, [containerRef]);
-  useEffect(() => {
-    document.addEventListener("focusin", focusContainer);
-    return () => document.removeEventListener("focusin", focusContainer);
-  }, [focusContainer]);
   return {
     handleOutsideClick,
     handleOnKeyDown

package/dist/esm/parts/dialogContent/useDialogContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/dialogContent/useDialogContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useEffect, useContext } from 'react';\nimport { DSDialogContext } from '../../DSDialogCTX';\n\nexport const useDialogContent = () => {\n  const {\n    props: { onClickOutside, onClose, removeAutoFocus },\n    containerRef,\n  } = useContext(DSDialogContext);\n\n  const handleOutsideClick = useCallback(\n    (e: React.MouseEvent) => {\n      if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n    },\n    [onClickOutside],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    if (!removeAutoFocus) containerRef?.current?.focus();\n  }, [containerRef, removeAutoFocus]);\n\n  const focusContainer = useCallback(() => {\n    setTimeout(() => {\n      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n      if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n    });\n  }, [containerRef]);\n\n  useEffect(() => {\n    document.addEventListener('focusin', focusContainer);\n    return () => document.removeEventListener('focusin', focusContainer);\n  }, [focusContainer]);\n\n  return {\n    handleOutsideClick,\n    handleOnKeyDown,\n  };\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,MACE,WAAW,eAAe;AAE9B,QAAM,qBAAqB,YACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU,qBAAe;AAAA,EACpE,GACA,CAAC,cAAc,CACjB;AAEA,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU,cAAQ;AAAA,EAClC,GACA,CAAC,OAAO,CACV;AAEA,YAAU,MAAM;AACd,QAAI,CAAC;AAAiB,oBAAc,SAAS,MAAM;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,iBAAiB,YAAY,MAAM;AACvC,eAAW,MAAM;AACf,YAAM,4BAA4B,aAAa,SAAS,SAAS,SAAS,aAAa;AACvF,UAAI,CAAC;AAA2B,qBAAa,SAAS,QAAQ;AAAA,IAChE,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,aAAS,iBAAiB,WAAW,cAAc;AACnD,WAAO,MAAM,SAAS,oBAAoB,WAAW,cAAc;AAAA,EACrE,GAAG,CAAC,cAAc,CAAC;AAEnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { DSDialogContext } from '../../DSDialogCTX';\n\nexport const useDialogContent = () => {\n  const {\n    props: { onClickOutside, onClose },\n  } = useContext(DSDialogContext);\n\n  const handleOutsideClick = useCallback(\n    (e: React.MouseEvent) => {\n      if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n    },\n    [onClickOutside],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    },\n    [onClose],\n  );\n\n  return {\n    handleOutsideClick,\n    handleOnKeyDown,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,MACvB,WAAW,eAAe;AAE9B,QAAM,qBAAqB,YACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU,qBAAe;AAAA,EACpE,GACA,CAAC,cAAc,CACjB;AAEA,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU,cAAQ;AAAA,EAClC,GACA,CAAC,OAAO,CACV;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "3.1.4",
+  "version": "3.1.5-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "files": [
@@ -67,10 +67,10 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.1.4",
-    "@elliemae/ds-icons": "3.1.4",
-    "@elliemae/ds-system": "3.1.4",
-    "@elliemae/ds-utilities": "3.1.4",
+    "@elliemae/ds-button": "3.1.5-rc.10",
+    "@elliemae/ds-icons": "3.1.5-rc.10",
+    "@elliemae/ds-system": "3.1.5-rc.10",
+    "@elliemae/ds-utilities": "3.1.5-rc.10",
     "@xstyled/styled-components": "~3.6.0",
     "lodash": "~4.17.21",
     "uid": "~2.0.0"