@elliemae/ds-dialog 2.4.1-rc.1 → 2.4.1-rc.5

package/esm/DSDialog.js

@@ -1,148 +1,18 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import ReactDOM from 'react-dom';
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { debounce } from 'lodash';
-import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
-import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
+import 'react';
+import { describe } from '@elliemae/ds-props-helpers';
 import { propTypes } from './propTypes.js';
-import { defaultProps } from './defaultProps.js';
-import { getSpaceProps } from './utils.js';
-import { DSDialogDatatestid } from './DSDialogDatatestid.js';
-import { jsx } from 'react/jsx-runtime';
+import { useDialog } from './config/useDialog.js';
+import { DSDialogPortal } from './parts/DSDialogPortal.js';
+import { DSDialogContext } from './DSDialogCTX.js';
 
-const _excluded = ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"],
-      _excluded2 = ["className"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _DSDialogPortal;
 
 const DSDialog = props => {
-  var _FixedBody;
-
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  const [bodyInfo, setBodyInfo] = useState({
-    overflow: false,
-    paddingRight: '0px',
-    scrollbarWidth: '0px'
-  });
-  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
-
-  const {
-    children,
-    isOpen,
-    onClickOutside,
-    onClose,
-    centered,
-    size,
-    removeAutoFocus,
-    zIndex
-  } = propsWithDefault,
-        rest = _objectWithoutProperties(propsWithDefault, _excluded);
-
-  const containerRef = useRef(null);
-  const focusContainer = useCallback(() => {
-    var _containerRef$current, _containerRef$current2, _containerRef$current3;
-
-    const isContainerOrChildFocused = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(document.activeElement);
-    if (!isContainerOrChildFocused) (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : (_containerRef$current3 = _containerRef$current2.focus) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.call(_containerRef$current2);
-  }, []);
-  useEffect(() => {
-    document.addEventListener('focusin', focusContainer);
-    return () => document.removeEventListener('focusin', focusContainer);
-  }, [focusContainer]);
-  const handleOutsideClick = useCallback(e => {
-    if (e.target.dataset.portalbg) onClickOutside();
-  }, [onClickOutside]);
-  const handleOnKeyDown = useCallback(e => {
-    if (e.key === 'Escape') onClose();
-  }, [onClose]);
-
-  const _useGetGlobalAttribut = useGetGlobalAttributes(propsWithDefault, {
-    onClick: handleOutsideClick,
-    onKeyDown: handleOnKeyDown
-  }),
-        {
-    className
-  } = _useGetGlobalAttribut,
-        restOfGlobalAttributes = _objectWithoutProperties(_useGetGlobalAttribut, _excluded2);
-
-  const calculateScrollbar = useCallback(() => {
-    const body = document.getElementsByTagName('body')[0];
-    const {
-      clientWidth
-    } = body;
-    setBodyInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
-      scrollbarWidth: "".concat(window.innerWidth - clientWidth, "px")
-    }));
-  }, []);
-  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);
-  useEffect(() => {
-    calculateScrollbar();
-  }, [calculateScrollbar]);
-  useEffect(() => {
-    window.addEventListener('resize', debouncedCalculateScrollbar);
-    return () => {
-      window.removeEventListener('resize', debouncedCalculateScrollbar);
-    };
-  }, [calculateScrollbar, debouncedCalculateScrollbar]);
-  useEffect(() => {
-    if (isOpen) {
-      var _window$getComputedSt;
-
-      const body = document.getElementsByTagName('body')[0];
-      const {
-        clientHeight,
-        scrollHeight
-      } = body;
-      const paddingRight = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
-      setBodyInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
-        overflow: scrollHeight > clientHeight,
-        paddingRight
-      }));
-    } else setBodyInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
-      overflow: false,
-      paddingRight: '0px'
-    }));
-  }, [isOpen]);
-  useEffect(() => {
-    var _containerRef$current4;
-
-    if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.focus();
-  }, [isOpen, removeAutoFocus]);
-
-  if (isOpen) {
-    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
-      className: className,
-      onClick: handleOutsideClick,
-      "data-portalbg": true,
-      "data-testid": DSDialogDatatestid.BACKGROUND,
-      zIndex: zIndex
-    }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
-      bodyInfo: bodyInfo
-    })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread(_objectSpread({
-      role: "dialog",
-      "aria-modal": true,
-      ref: containerRef,
-      tabIndex: !removeAutoFocus ? 0 : undefined
-    }, getSpaceProps(rest)), {}, {
-      centered: centered,
-      "data-testid": DSDialogDatatestid.CONTAINER
-    }, restOfGlobalAttributes), {}, {
-      size: size,
-      children: children
-    }))), document.getElementsByTagName('body')[0]);
-  }
-
-  return null;
+  const ctx = useDialog(props);
+  return /*#__PURE__*/_jsx(DSDialogContext.Provider, {
+    value: ctx
+  }, void 0, _DSDialogPortal || (_DSDialogPortal = /*#__PURE__*/_jsx(DSDialogPortal, {})));
 };
 
 const DSDialogWithSchema = describe(DSDialog);

package/esm/DSDialogCTX.js

@@ -0,0 +1,17 @@
+import { createContext, createRef } from 'react';
+import { defaultProps } from './defaultProps.js';
+
+const defaultContext = {
+  props: defaultProps,
+  actualPortalRef: /*#__PURE__*/createRef(),
+  containerRef: /*#__PURE__*/createRef(),
+  portalClassName: '',
+  portalInfo: {
+    overflow: false,
+    paddingRight: '0px',
+    scrollbarWidth: '0px'
+  }
+};
+const DSDialogContext = /*#__PURE__*/createContext(defaultContext);
+
+export { DSDialogContext };

package/esm/config/useDialog.js

@@ -0,0 +1,89 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useMemo, useEffect, useLayoutEffect, useCallback } from 'react';
+import { debounce } from 'lodash';
+import { uid } from 'uid';
+import { useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
+import { defaultProps } from '../defaultProps.js';
+import { propTypes } from '../propTypes.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const useDialog = props => {
+  useValidateTypescriptPropTypes(props, propTypes);
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const {
+    portalRef,
+    isOpen
+  } = propsWithDefault;
+  const actualPortalRef = useRef(null);
+  const containerRef = useRef(null);
+  const [portalInfo, setPortalInfo] = useState({
+    paddingRight: '0px',
+    scrollbarWidth: '0px',
+    overflow: false
+  });
+  const portalClassName = useMemo(() => "ds-dialog-".concat(uid(8)), []);
+  useEffect(() => {
+    if (portalRef) actualPortalRef.current = portalRef.current;else actualPortalRef.current = document.getElementsByTagName('body')['0'];
+  }, [portalRef]);
+  useLayoutEffect(() => {
+    if (actualPortalRef.current) {
+      if (isOpen) {
+        actualPortalRef.current.classList.add(portalClassName);
+      } else {
+        actualPortalRef.current.classList.remove(portalClassName);
+      }
+    }
+  }, [actualPortalRef, isOpen, portalClassName]);
+  useEffect(() => {
+    if (actualPortalRef.current) {
+      var _window$getComputedSt;
+
+      const paddingRight = (_window$getComputedSt = window.getComputedStyle(actualPortalRef.current, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
+      setPortalInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        paddingRight
+      }));
+    }
+  }, []);
+  const calculateScrollbarAndOverflow = useCallback(() => {
+    if (actualPortalRef.current) {
+      const body = actualPortalRef.current;
+      const {
+        clientWidth,
+        clientHeight,
+        scrollHeight
+      } = body;
+      setPortalInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        scrollbarWidth: "".concat(window.innerWidth - clientWidth, "px"),
+        overflow: scrollHeight > clientHeight
+      }));
+    }
+  }, [actualPortalRef]);
+  const debouncedCalculateScrollbarAndOverflow = useMemo(() => debounce(calculateScrollbarAndOverflow, 300), [calculateScrollbarAndOverflow]);
+  useEffect(() => {
+    window.addEventListener('resize', debouncedCalculateScrollbarAndOverflow);
+    return () => {
+      window.removeEventListener('resize', debouncedCalculateScrollbarAndOverflow);
+    };
+  }, [calculateScrollbarAndOverflow, debouncedCalculateScrollbarAndOverflow]);
+  useEffect(() => {
+    calculateScrollbarAndOverflow();
+  }, [calculateScrollbarAndOverflow]);
+  const ctx = useMemo(() => ({
+    props: propsWithDefault,
+    actualPortalRef,
+    containerRef,
+    portalInfo,
+    portalClassName
+  }), [portalClassName, portalInfo, propsWithDefault]);
+  return ctx;
+};
+
+export { useDialog };

package/esm/defaultProps.js

@@ -9,7 +9,9 @@ const defaultProps = {
   removeAutoFocus: false,
   onClickOutside: noop,
   onClose: noop,
-  zIndex: 10
+  zIndex: 10,
+  portalRef: null,
+  children: []
 };
 
 export { defaultProps };

package/esm/parts/DSDialogPortal.js

@@ -0,0 +1,23 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import ReactDOM from 'react-dom';
+import { useContext } from 'react';
+import { DSDialogContext } from '../DSDialogCTX.js';
+import { DSDialogContent } from './dialogContent/DSDialogContent.js';
+
+var _DSDialogContent;
+const DSDialogPortal = () => {
+  const {
+    props: {
+      isOpen
+    },
+    actualPortalRef
+  } = useContext(DSDialogContext);
+
+  if (isOpen && actualPortalRef.current) {
+    return /*#__PURE__*/ReactDOM.createPortal(_DSDialogContent || (_DSDialogContent = /*#__PURE__*/_jsx(DSDialogContent, {})), actualPortalRef.current);
+  }
+
+  return null;
+};
+
+export { DSDialogPortal };

package/esm/parts/dialogContent/DSDialogContent.js

@@ -0,0 +1,77 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useContext } from 'react';
+import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { StyledDialogBackground, PortalStyles, StyledDialogContainer } from '../../styles.js';
+import { getSpaceProps } from '../../utils.js';
+import { DSDialogDatatestid } from '../../DSDialogDatatestid.js';
+import { DSDialogContext } from '../../DSDialogCTX.js';
+import { useDialogContent } from './useDialogContent.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["removeAutoFocus", "zIndex", "centered", "size", "children"],
+      _excluded2 = ["className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DSDialogContent = () => {
+  const {
+    handleOutsideClick,
+    handleOnKeyDown
+  } = useDialogContent();
+  const {
+    props,
+    containerRef,
+    portalInfo,
+    portalClassName
+  } = useContext(DSDialogContext);
+
+  const {
+    removeAutoFocus,
+    zIndex,
+    centered,
+    size,
+    children
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  const _useGetGlobalAttribut = useGetGlobalAttributes(props, {
+    onClick: handleOutsideClick,
+    onKeyDown: handleOnKeyDown
+  }),
+        {
+    className
+  } = _useGetGlobalAttribut,
+        restOfGlobalAttributes = _objectWithoutProperties(_useGetGlobalAttribut, _excluded2);
+
+  return /*#__PURE__*/_jsx(StyledDialogBackground, {
+    className: className,
+    onClick: handleOutsideClick,
+    "data-portalbg": true,
+    "data-testid": DSDialogDatatestid.BACKGROUND,
+    zIndex: zIndex
+  }, void 0, /*#__PURE__*/_jsx(PortalStyles, {
+    portalInfo: portalInfo,
+    portalClassName: portalClassName
+  }), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread(_objectSpread({
+    role: "dialog",
+    "aria-modal": true,
+    ref: containerRef,
+    tabIndex: !removeAutoFocus ? 0 : undefined
+  }, getSpaceProps(rest)), {}, {
+    centered: centered,
+    "data-testid": DSDialogDatatestid.CONTAINER
+  }, restOfGlobalAttributes), {}, {
+    size: size,
+    children: children
+  })));
+};
+
+export { DSDialogContent };

package/esm/parts/dialogContent/useDialogContent.js

@@ -0,0 +1,42 @@
+import { useContext, useCallback, useEffect } from 'react';
+import { DSDialogContext } from '../../DSDialogCTX.js';
+
+const useDialogContent = () => {
+  const {
+    props: {
+      onClickOutside,
+      onClose,
+      removeAutoFocus
+    },
+    containerRef
+  } = useContext(DSDialogContext);
+  const handleOutsideClick = useCallback(e => {
+    if (e.target.dataset.portalbg) onClickOutside();
+  }, [onClickOutside]);
+  const handleOnKeyDown = useCallback(e => {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
+  useEffect(() => {
+    var _containerRef$current;
+
+    if (!removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
+  }, [containerRef, removeAutoFocus]);
+  const focusContainer = useCallback(() => {
+    setTimeout(() => {
+      var _containerRef$current2, _containerRef$current3, _containerRef$current4;
+
+      const isContainerOrChildFocused = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.contains(document.activeElement);
+      if (!isContainerOrChildFocused) (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.focus) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.call(_containerRef$current3);
+    });
+  }, [containerRef]);
+  useEffect(() => {
+    document.addEventListener('focusin', focusContainer);
+    return () => document.removeEventListener('focusin', focusContainer);
+  }, [focusContainer]);
+  return {
+    handleOutsideClick,
+    handleOnKeyDown
+  };
+};
+
+export { useDialogContent };

package/esm/styles.js

@@ -5,49 +5,54 @@ import { space, sizing, layout, flexboxes } from '@xstyled/styled-components';
 import { allSizes } from './utils.js';
 
 var _templateObject;
-const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    overflow: hidden;\n    ", "\n  }\n"])), _ref => {
+const PortalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    overflow: hidden;\n    ", "\n  }\n"])), _ref => {
   let {
-    bodyInfo
+    portalClassName
   } = _ref;
-  return bodyInfo.overflow ? "padding-right: calc( ".concat(bodyInfo.paddingRight, " + ").concat(bodyInfo.scrollbarWidth, " ) !important;") : "";
+  return ".".concat(portalClassName);
+}, _ref2 => {
+  let {
+    portalInfo
+  } = _ref2;
+  return portalInfo.overflow ? "padding-right: calc( ".concat(portalInfo.paddingRight, " + ").concat(portalInfo.scrollbarWidth, " ) !important;") : "";
 });
 const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-0"
-})(["position:fixed;top:0;bottom:0;left:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
+})(["position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref3 => {
   let {
     zIndex
-  } = _ref2;
+  } = _ref3;
   return zIndex;
 });
 const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-1"
-})(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:auto;", " &:focus{outline:none;}"], _ref3 => {
+})(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:auto;", " &:focus{outline:none;}"], _ref4 => {
   let {
     centered
-  } = _ref3;
+  } = _ref4;
   return centered ? 'auto' : '20vh auto auto auto';
-}, _ref4 => {
+}, _ref5 => {
   let {
     size
-  } = _ref4;
+  } = _ref5;
   return allSizes[size];
-}, _ref5 => {
+}, _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.colors.neutral[500];
-}, _ref6 => {
+}, _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.colors.neutral['000'];
 }, space);
 const DSDialogTitle = /*#__PURE__*/styled.h3.withConfig({
   componentId: "sc-106vqwv-2"
-})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:28px;margin:0;"], _ref7 => {
+})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:28px;margin:0;"], _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.fontSizes.title[700];
 });
 const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
@@ -55,33 +60,33 @@ const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
 })([""]);
 const DSDialogHeader = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-4"
-})(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", " ", ""], _ref8 => {
+})(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", " ", ""], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.space.m;
-}, _ref9 => {
+}, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.space.xs;
 }, DSDialogTitle, DSDialogAddon, DSDialogAddon, space, sizing);
 const DSDialogSeparator = /*#__PURE__*/styled.hr.attrs(() => ({
   'aria-hidden': true
 })).withConfig({
   componentId: "sc-106vqwv-5"
-})(["margin:0;border-top:1px solid ", ";"], _ref10 => {
+})(["margin:0;border-top:1px solid ", ";"], _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.colors.neutral['080'];
 });
 const DSDialogBody = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-6"
-})(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref11 => {
+})(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.space.xs;
 }, layout, space, flexboxes, sizing);
 const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
@@ -89,37 +94,37 @@ const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
 })(["margin:0;"]);
 const DSDialogSecondaryMessage = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-106vqwv-8"
-})(["margin:0;color:", ";"], _ref12 => {
+})(["margin:0;color:", ";"], _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.colors.neutral[500];
 });
 const DSDialogDefaultLayout = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-9"
-})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
+})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.space.xxs;
 }, DSDialogSecondaryMessage);
 const DSDialogFooter = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-10"
-})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", " ", ""], _ref14 => {
+})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", " ", ""], _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.space.xxs;
-}, _ref15 => {
+}, _ref16 => {
   let {
     theme
-  } = _ref15;
+  } = _ref16;
   return theme.space.m;
-}, _ref16 => {
+}, _ref17 => {
   let {
     theme
-  } = _ref16;
+  } = _ref17;
   return theme.space.xs;
 }, space, flexboxes, sizing);
 
-export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle, FixedBody, StyledDialogBackground, StyledDialogContainer };
+export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle, PortalStyles, StyledDialogBackground, StyledDialogContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.4.1-rc.1",
+  "version": "2.4.1-rc.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -27,10 +27,26 @@
       "import": "./esm/propTypes.js",
       "require": "./cjs/propTypes.js"
     },
+    "./parts/DSDialogPortal": {
+      "import": "./esm/parts/DSDialogPortal.js",
+      "require": "./cjs/parts/DSDialogPortal.js"
+    },
+    "./parts/dialogContent/useDialogContent": {
+      "import": "./esm/parts/dialogContent/useDialogContent.js",
+      "require": "./cjs/parts/dialogContent/useDialogContent.js"
+    },
+    "./parts/dialogContent/DSDialogContent": {
+      "import": "./esm/parts/dialogContent/DSDialogContent.js",
+      "require": "./cjs/parts/dialogContent/DSDialogContent.js"
+    },
     "./DSDialogDatatestid": {
       "import": "./esm/DSDialogDatatestid.js",
       "require": "./cjs/DSDialogDatatestid.js"
     },
+    "./DSDialogCTX": {
+      "import": "./esm/DSDialogCTX.js",
+      "require": "./cjs/DSDialogCTX.js"
+    },
     "./DSDialog": {
       "import": "./esm/DSDialog.js",
       "require": "./cjs/DSDialog.js"
@@ -38,6 +54,10 @@
     "./defaultProps": {
       "import": "./esm/defaultProps.js",
       "require": "./cjs/defaultProps.js"
+    },
+    "./config/useDialog": {
+      "import": "./esm/config/useDialog.js",
+      "require": "./cjs/config/useDialog.js"
     }
   },
   "sideEffects": [
@@ -60,10 +80,10 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.1-rc.1",
-    "@elliemae/ds-icons": "2.4.1-rc.1",
-    "@elliemae/ds-props-helpers": "2.4.1-rc.1",
-    "@elliemae/ds-system": "2.4.1-rc.1",
+    "@elliemae/ds-button": "2.4.1-rc.5",
+    "@elliemae/ds-icons": "2.4.1-rc.5",
+    "@elliemae/ds-props-helpers": "2.4.1-rc.5",
+    "@elliemae/ds-system": "2.4.1-rc.5",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/types/DSDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { DSDialogT } from './propTypes';
-declare const DSDialog: (props: DSDialogT.Props) => JSX.Element | null;
+declare const DSDialog: (props: DSDialogT.Props) => JSX.Element;
 declare const DSDialogWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSDialogT.Props>;
 export { DSDialog, DSDialogWithSchema };

package/types/DSDialogCTX.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DSDialogInternalsT } from './sharedTypes';
+export declare const DSDialogContext: import("react").Context<DSDialogInternalsT.DSDialogContext>;

package/types/config/useDialog.d.ts

@@ -0,0 +1,3 @@
+import type { DSDialogT } from '../propTypes';
+import type { DSDialogInternalsT } from '../sharedTypes';
+export declare const useDialog: (props: DSDialogT.Props) => DSDialogInternalsT.DSDialogContext;