@elliemae/ds-dialog 1.60.0 → 2.0.0-alpha.12

package/cjs/DSDialog.js

@@ -2,79 +2,93 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var ReactDOM = require('react-dom');
-var React = require('react');
+var react = require('react');
 var reactDesc = require('react-desc');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var styles = require('./styles.js');
 var propTypes = require('./propTypes.js');
 var defaultProps = require('./defaultProps.js');
 var utils = require('./utils.js');
-require('@babel/runtime/helpers/taggedTemplateLiteral');
-require('styled-components');
-require('@elliemae/ds-system');
-require('styled-system');
-require('@babel/runtime/helpers/slicedToArray');
+var DSDialogDatatestid = require('./DSDialogDatatestid.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus"];
+var _FixedBody;
 
-var DSDialog = function DSDialog(props) {
-  var propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, DSDialogWithSchema.toTypescript());
+const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
 
-  var children = propsWithDefault.children,
-      isOpen = propsWithDefault.isOpen,
-      onClickOutside = propsWithDefault.onClickOutside,
-      centered = propsWithDefault.centered,
-      size = propsWithDefault.size,
-      removeAutoFocus = propsWithDefault.removeAutoFocus,
-      rest = _objectWithoutProperties__default['default'](propsWithDefault, _excluded);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  var containerRef = React.useRef(null);
-  var handleOutsideClick = React.useCallback(function (e) {
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DSDialog = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
+
+  const {
+    children,
+    isOpen,
+    onClickOutside,
+    centered,
+    size,
+    removeAutoFocus,
+    zIndex
+  } = propsWithDefault,
+        rest = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
+
+  const containerRef = react.useRef(null);
+  const handleOutsideClick = react.useCallback(e => {
     if (e.target.dataset.portalbg) onClickOutside();
   }, [onClickOutside]);
-  var handleOnKeyDown = React.useCallback(function (e) {
+  const handleOnKeyDown = react.useCallback(e => {
     if (e.key === 'Escape') onClickOutside();
   }, [onClickOutside]);
-  React.useEffect(function () {
+  react.useEffect(() => {
     var _containerRef$current;
 
     if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
   }, [isOpen, removeAutoFocus]);
 
   if (isOpen) {
-    return /*#__PURE__*/ReactDOM__default['default'].createPortal( /*#__PURE__*/React__default['default'].createElement(styles.StyledDialogBackground, {
+    return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
       onClick: handleOutsideClick,
-      "data-portalbg": true
-    }, /*#__PURE__*/React__default['default'].createElement(styles.FixedBody, null), /*#__PURE__*/React__default['default'].createElement(styles.StyledDialogContainer, _extends__default['default']({
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
+      zIndex: zIndex
+    }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {})), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
       role: "dialog",
       "aria-modal": true,
       ref: containerRef,
       tabIndex: !removeAutoFocus ? 0 : undefined,
       onKeyDown: handleOnKeyDown
-    }, utils.getSpaceProps(rest), {
+    }, utils.getSpaceProps(rest)), {}, {
       size: size,
-      centered: centered
-    }), children)), document.getElementsByTagName('body')[0]);
+      centered: centered,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
+      children: children
+    }))), document.getElementsByTagName('body')[0]);
   }
 
   return null;
 };
 
-DSDialog.propTypes = propTypes.propTypes;
-var DSDialogWithSchema = reactDesc.describe(DSDialog);
+const DSDialogWithSchema = reactDesc.describe(DSDialog);
 DSDialogWithSchema.propTypes = propTypes.propTypes;
 
 exports.DSDialog = DSDialog;
 exports.DSDialogWithSchema = DSDialogWithSchema;
-//# sourceMappingURL=DSDialog.js.map

package/cjs/DSDialogDatatestid.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSDialogDatatestid = {
+  CONTAINER: 'ds-dialog-container',
+  BACKGROUND: 'ds-dialog-background'
+};
+
+exports.DSDialogDatatestid = DSDialogDatatestid;

package/cjs/DSDialogInternalTypes.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/DSDialogTypes.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/defaultProps.js

@@ -2,13 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var defaultProps = {
+var utils = require('./utils.js');
+
+const noop = () => {};
+
+const defaultProps = {
   isOpen: false,
   centered: false,
-  size: 'default',
+  size: utils.DSDialogSizes.DEFAULT,
   removeAutoFocus: false,
-  onClickOutside: function onClickOutside() {}
+  onClickOutside: noop,
+  zIndex: 10
 };
 
 exports.defaultProps = defaultProps;
-//# sourceMappingURL=defaultProps.js.map

package/cjs/index.js

@@ -3,26 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSDialog = require('./DSDialog.js');
+var DSDialogDatatestid = require('./DSDialogDatatestid.js');
+var utils = require('./utils.js');
 var styles = require('./styles.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('react-dom');
-require('react');
-require('react-desc');
-require('@elliemae/ds-props-helpers');
-require('./propTypes.js');
-require('./defaultProps.js');
-require('./utils.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/taggedTemplateLiteral');
-require('styled-components');
-require('@elliemae/ds-system');
-require('styled-system');
 
 
 
 exports.DSDialog = DSDialog.DSDialog;
 exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
+exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
+exports.DSDialogSizes = utils.DSDialogSizes;
 exports.DSDialogAddon = styles.DSDialogAddon;
 exports.DSDialogBody = styles.DSDialogBody;
 exports.DSDialogDefaultLayout = styles.DSDialogDefaultLayout;
@@ -32,4 +22,3 @@ exports.DSDialogPrimaryMessage = styles.DSDialogPrimaryMessage;
 exports.DSDialogSecondaryMessage = styles.DSDialogSecondaryMessage;
 exports.DSDialogSeparator = styles.DSDialogSeparator;
 exports.DSDialogTitle = styles.DSDialogTitle;
-//# sourceMappingURL=index.js.map

package/cjs/propTypes.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
+var utils = require('./utils.js');
 
 /* eslint-disable max-len */
-var propTypes = {
+const propTypes = {
   isOpen: reactDesc.PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
   children: reactDesc.PropTypes.node.description('Nested components.').isRequired,
   centered: reactDesc.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
+  size: reactDesc.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT),
   removeAutoFocus: reactDesc.PropTypes.bool.description('Removes focus in the Dialog container when is open. If you want to focus an specific element in the Dialog, it should be set to true.').defaultValue(false),
-  onClickOutside: reactDesc.PropTypes.func.description('Callback that should be used to close the modal when the user clicks outside. Cb also triggers when the user press ESC key for accessibility purposes.').defaultValue(function () {})
+  onClickOutside: reactDesc.PropTypes.func.description('Callback that should be used to close the modal when the user clicks outside. Cb also triggers when the user press ESC key for accessibility purposes.').defaultValue(() => {})
 };
 
 exports.propTypes = propTypes;
-//# sourceMappingURL=propTypes.js.map

package/cjs/styles.js

@@ -6,6 +6,7 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var styledSystem = require('styled-system');
+var utils = require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,92 +14,115 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject;
-var allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
-};
-var FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n  body {\n    overflow: hidden;\n  }\n"])));
-var StyledDialogBackground = /*#__PURE__*/styled__default['default'].div.withConfig({
+const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  body {\n    overflow: hidden;\n  }\n"])));
+const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-0"
-})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;"]);
-var StyledDialogContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex;
+});
+const StyledDialogContainer = /*#__PURE__*/styled__default["default"].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:scroll;", " &:focus{outline:none;}"], function (_ref) {
-  var centered = _ref.centered;
+})(["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;}"], _ref2 => {
+  let {
+    centered
+  } = _ref2;
   return centered ? 'auto' : '20vh auto auto auto';
-}, function (_ref2) {
-  var size = _ref2.size;
-  return allSizes[size];
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    size
+  } = _ref3;
+  return utils.allSizes[size];
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.colors.neutral[500];
-}, function (_ref4) {
-  var theme = _ref4.theme;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.colors.neutral['000'];
 }, styledSystem.space);
-var DSDialogTitle = /*#__PURE__*/styled__default['default'].h3.withConfig({
+const DSDialogTitle = /*#__PURE__*/styled__default["default"].h3.withConfig({
   componentId: "sc-106vqwv-2"
-})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], function (_ref5) {
-  var theme = _ref5.theme;
+})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.fontSizes.title[700];
 });
-var DSDialogAddon = /*#__PURE__*/styled__default['default'].div.withConfig({
+const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-3"
 })([""]);
-var DSDialogHeader = /*#__PURE__*/styled__default['default'].div.withConfig({
+const DSDialogHeader = /*#__PURE__*/styled__default["default"].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;}", ""], function (_ref6) {
-  var theme = _ref6.theme;
+})(["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;}", ""], _ref7 => {
+  let {
+    theme
+  } = _ref7;
   return theme.space.m;
-}, function (_ref7) {
-  var theme = _ref7.theme;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
   return theme.space.xs;
 }, DSDialogTitle, DSDialogAddon, DSDialogAddon, styledSystem.space);
-var DSDialogSeparator = /*#__PURE__*/styled__default['default'].hr.attrs(function () {
-  return {
-    'aria-hidden': true
-  };
-}).withConfig({
+const DSDialogSeparator = /*#__PURE__*/styled__default["default"].hr.attrs(() => ({
+  'aria-hidden': true
+})).withConfig({
   componentId: "sc-106vqwv-5"
-})(["margin:0;border-top:1px solid ", ";"], function (_ref8) {
-  var theme = _ref8.theme;
+})(["margin:0;border-top:1px solid ", ";"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
   return theme.colors.neutral['080'];
 });
-var DSDialogBody = /*#__PURE__*/styled__default['default'].div.withConfig({
+const DSDialogBody = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-6"
-})(["padding:", ";overflow-y:auto;", " ", " ", ""], function (_ref9) {
-  var theme = _ref9.theme;
+})(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref10 => {
+  let {
+    theme
+  } = _ref10;
   return theme.space.xs;
 }, styledSystem.layout, styledSystem.space, styledSystem.flexbox);
-var DSDialogPrimaryMessage = /*#__PURE__*/styled__default['default'].h3.withConfig({
+const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withConfig({
   componentId: "sc-106vqwv-7"
 })(["margin:0;"]);
-var DSDialogSecondaryMessage = /*#__PURE__*/styled__default['default'].p.withConfig({
+const DSDialogSecondaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-106vqwv-8"
-})(["margin:0;color:", ";"], function (_ref10) {
-  var theme = _ref10.theme;
+})(["margin:0;color:", ";"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.colors.neutral[500];
 });
-var DSDialogDefaultLayout = /*#__PURE__*/styled__default['default'].div.withConfig({
+const DSDialogDefaultLayout = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-9"
-})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], function (_ref11) {
-  var theme = _ref11.theme;
+})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.space.xxs;
 }, DSDialogSecondaryMessage);
-var DSDialogFooter = /*#__PURE__*/styled__default['default'].div.withConfig({
+const DSDialogFooter = /*#__PURE__*/styled__default["default"].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 ", ";", " ", ""], function (_ref12) {
-  var theme = _ref12.theme;
+})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref13 => {
+  let {
+    theme
+  } = _ref13;
   return theme.space.xxs;
-}, function (_ref13) {
-  var theme = _ref13.theme;
+}, _ref14 => {
+  let {
+    theme
+  } = _ref14;
   return theme.space.m;
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
   return theme.space.xs;
 }, styledSystem.space, styledSystem.flexbox);
 
@@ -114,4 +138,3 @@ exports.DSDialogTitle = DSDialogTitle;
 exports.FixedBody = FixedBody;
 exports.StyledDialogBackground = StyledDialogBackground;
 exports.StyledDialogContainer = StyledDialogContainer;
-//# sourceMappingURL=styles.js.map

package/cjs/utils.js

@@ -2,20 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-
-var getSpaceProps = function getSpaceProps(props) {
-  return Object.fromEntries(Object.entries(props).filter(function (_ref) {
-    var _ref2 = _slicedToArray__default['default'](_ref, 1),
-        key = _ref2[0];
-
-    return /^[pm][xytblr]?$/.exec(key);
-  }));
+const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_ref => {
+  let [key] = _ref;
+  return /^[pm][xytblr]?$/.exec(key);
+}));
+const DSDialogSizes = {
+  DEFAULT: 'default',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  XLARGE: 'x-large',
+  XXLARGE: 'xx-large'
+};
+const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
+const allSizes = {
+  default: '576px',
+  small: '320px',
+  medium: '656px',
+  large: '848px',
+  'x-large': '1042px',
+  'xx-large': '1440px'
 };
 
+exports.DSDialogSizes = DSDialogSizes;
+exports.DSDialogSizesArrayValues = DSDialogSizesArrayValues;
+exports.allSizes = allSizes;
 exports.getSpaceProps = getSpaceProps;
-//# sourceMappingURL=utils.js.map

package/esm/DSDialog.js

@@ -1,68 +1,82 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+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 ReactDOM from 'react-dom';
-import React, { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { describe } from 'react-desc';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
 import { propTypes } from './propTypes.js';
 import { defaultProps } from './defaultProps.js';
 import { getSpaceProps } from './utils.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import 'styled-components';
-import '@elliemae/ds-system';
-import 'styled-system';
-import '@babel/runtime/helpers/esm/slicedToArray';
+import { DSDialogDatatestid } from './DSDialogDatatestid.js';
+import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus"];
+var _FixedBody;
 
-var DSDialog = function DSDialog(props) {
-  var propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSDialogWithSchema.toTypescript());
+const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
 
-  var children = propsWithDefault.children,
-      isOpen = propsWithDefault.isOpen,
-      onClickOutside = propsWithDefault.onClickOutside,
-      centered = propsWithDefault.centered,
-      size = propsWithDefault.size,
-      removeAutoFocus = propsWithDefault.removeAutoFocus,
-      rest = _objectWithoutProperties(propsWithDefault, _excluded);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  var containerRef = useRef(null);
-  var handleOutsideClick = useCallback(function (e) {
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DSDialog = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
+
+  const {
+    children,
+    isOpen,
+    onClickOutside,
+    centered,
+    size,
+    removeAutoFocus,
+    zIndex
+  } = propsWithDefault,
+        rest = _objectWithoutProperties(propsWithDefault, _excluded);
+
+  const containerRef = useRef(null);
+  const handleOutsideClick = useCallback(e => {
     if (e.target.dataset.portalbg) onClickOutside();
   }, [onClickOutside]);
-  var handleOnKeyDown = useCallback(function (e) {
+  const handleOnKeyDown = useCallback(e => {
     if (e.key === 'Escape') onClickOutside();
   }, [onClickOutside]);
-  useEffect(function () {
+  useEffect(() => {
     var _containerRef$current;
 
     if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
   }, [isOpen, removeAutoFocus]);
 
   if (isOpen) {
-    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledDialogBackground, {
+    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
       onClick: handleOutsideClick,
-      "data-portalbg": true
-    }, /*#__PURE__*/React.createElement(FixedBody, null), /*#__PURE__*/React.createElement(StyledDialogContainer, _extends({
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.BACKGROUND,
+      zIndex: zIndex
+    }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {})), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
       role: "dialog",
       "aria-modal": true,
       ref: containerRef,
       tabIndex: !removeAutoFocus ? 0 : undefined,
       onKeyDown: handleOnKeyDown
-    }, getSpaceProps(rest), {
+    }, getSpaceProps(rest)), {}, {
       size: size,
-      centered: centered
-    }), children)), document.getElementsByTagName('body')[0]);
+      centered: centered,
+      "data-testid": DSDialogDatatestid.CONTAINER,
+      children: children
+    }))), document.getElementsByTagName('body')[0]);
   }
 
   return null;
 };
 
-DSDialog.propTypes = propTypes;
-var DSDialogWithSchema = describe(DSDialog);
+const DSDialogWithSchema = describe(DSDialog);
 DSDialogWithSchema.propTypes = propTypes;
 
 export { DSDialog, DSDialogWithSchema };
-//# sourceMappingURL=DSDialog.js.map

package/esm/DSDialogDatatestid.js

@@ -0,0 +1,6 @@
+const DSDialogDatatestid = {
+  CONTAINER: 'ds-dialog-container',
+  BACKGROUND: 'ds-dialog-background'
+};
+
+export { DSDialogDatatestid };

package/esm/DSDialogInternalTypes.d.js

@@ -0,0 +1 @@
+

package/esm/DSDialogTypes.js

@@ -0,0 +1 @@
+

package/esm/defaultProps.js

@@ -1,10 +1,14 @@
-var defaultProps = {
+import { DSDialogSizes } from './utils.js';
+
+const noop = () => {};
+
+const defaultProps = {
   isOpen: false,
   centered: false,
-  size: 'default',
+  size: DSDialogSizes.DEFAULT,
   removeAutoFocus: false,
-  onClickOutside: function onClickOutside() {}
+  onClickOutside: noop,
+  zIndex: 10
 };
 
 export { defaultProps };
-//# sourceMappingURL=defaultProps.js.map

package/esm/index.js

@@ -1,17 +1,4 @@
 export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
+export { DSDialogDatatestid } from './DSDialogDatatestid.js';
+export { DSDialogSizes } from './utils.js';
 export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react-dom';
-import 'react';
-import 'react-desc';
-import '@elliemae/ds-props-helpers';
-import './propTypes.js';
-import './defaultProps.js';
-import './utils.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import 'styled-components';
-import '@elliemae/ds-system';
-import 'styled-system';
-//# sourceMappingURL=index.js.map