@elliemae/ds-dialog 2.3.0-alpha.8 → 2.3.0-next.10

package/cjs/DSDialog.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+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 ReactDOM = require('react-dom');
+var react = require('react');
+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');
+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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+
+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__default["default"](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 DSDialog = props => {
+  var _FixedBody;
+
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
+  const [bodyInfo, setBodyInfo] = react.useState({
+    overflow: false,
+    padding: '0px'
+  });
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
+
+  const {
+    children,
+    isOpen,
+    onClickOutside,
+    onClose,
+    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]);
+  const handleOnKeyDown = react.useCallback(e => {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
+
+  const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
+    onClick: handleOutsideClick,
+    onKeyDown: handleOnKeyDown
+  }),
+        {
+    className
+  } = _useGetGlobalAttribut,
+        restOfGlobalAttributes = _objectWithoutProperties__default["default"](_useGetGlobalAttribut, _excluded2);
+
+  react.useEffect(() => {
+    var _window$getComputedSt;
+
+    const body = document.getElementsByTagName('body')[0];
+    const {
+      offsetHeight,
+      scrollHeight
+    } = body;
+    const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
+    if (!isOpen) return setBodyInfo({
+      overflow: false,
+      padding: '0px'
+    });
+    return setBodyInfo({
+      overflow: offsetHeight < scrollHeight,
+      padding
+    });
+  }, [isOpen]);
+  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__*/_jsx__default["default"](styles.StyledDialogBackground, {
+      className: className,
+      onClick: handleOutsideClick,
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
+      zIndex: zIndex
+    }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
+      bodyInfo: bodyInfo
+    })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread(_objectSpread({
+      role: "dialog",
+      "aria-modal": true,
+      ref: containerRef,
+      tabIndex: !removeAutoFocus ? 0 : undefined
+    }, utils.getSpaceProps(rest)), {}, {
+      size: size,
+      centered: centered,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER
+    }, restOfGlobalAttributes), {}, {
+      children: children
+    }))), document.getElementsByTagName('body')[0]);
+  }
+
+  return null;
+};
+
+const DSDialogWithSchema = dsPropsHelpers.describe(DSDialog);
+DSDialogWithSchema.propTypes = propTypes.propTypes;
+
+exports.DSDialog = DSDialog;
+exports.DSDialogWithSchema = DSDialogWithSchema;

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/defaultProps.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('./utils.js');
+
+const noop = () => {};
+
+const defaultProps = {
+  isOpen: false,
+  centered: false,
+  size: utils.DSDialogSizes.DEFAULT,
+  removeAutoFocus: false,
+  onClickOutside: noop,
+  onClose: noop,
+  zIndex: 10
+};
+
+exports.defaultProps = defaultProps;

package/cjs/index.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styles = require('./styles.js');
+var DSDialog = require('./DSDialog.js');
+var DSDialogDatatestid = require('./DSDialogDatatestid.js');
+var utils = require('./utils.js');
+
+styles.DSDialogBody.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogHeader.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogFooter.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogSeparator.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogTitle.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogAddon.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogDefaultLayout.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogPrimaryMessage.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogSecondaryMessage.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogBody.displayName = 'DSDialogBody';
+styles.DSDialogHeader.displayName = 'DSDialogHeader';
+styles.DSDialogFooter.displayName = 'DSDialogFooter';
+styles.DSDialogSeparator.displayName = 'DSDialogSeparator';
+styles.DSDialogTitle.displayName = 'DSDialogTitle';
+styles.DSDialogAddon.displayName = 'DSDialogAddon';
+styles.DSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';
+styles.DSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';
+styles.DSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';
+const DSDialogBodyWithSchema = reactDesc.describe(styles.DSDialogBody);
+const DSDialogHeaderWithSchema = reactDesc.describe(styles.DSDialogHeader);
+const DSDialogFooterWithSchema = reactDesc.describe(styles.DSDialogFooter);
+const DSDialogSeparatorWithSchema = reactDesc.describe(styles.DSDialogSeparator);
+const DSDialogTitleWithSchema = reactDesc.describe(styles.DSDialogTitle);
+const DSDialogAddonWithSchema = reactDesc.describe(styles.DSDialogAddon);
+const DSDialogDefaultLayoutWithSchema = reactDesc.describe(styles.DSDialogDefaultLayout);
+const DSDialogPrimaryMessageWithSchema = reactDesc.describe(styles.DSDialogPrimaryMessage);
+const DSDialogSecondaryMessageWithSchema = reactDesc.describe(styles.DSDialogSecondaryMessage);
+DSDialogBodyWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogHeaderWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogFooterWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogSeparatorWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogTitleWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogAddonWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogDefaultLayoutWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogPrimaryMessageWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogSecondaryMessageWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+
+exports.DSDialogAddon = styles.DSDialogAddon;
+exports.DSDialogBody = styles.DSDialogBody;
+exports.DSDialogDefaultLayout = styles.DSDialogDefaultLayout;
+exports.DSDialogFooter = styles.DSDialogFooter;
+exports.DSDialogHeader = styles.DSDialogHeader;
+exports.DSDialogPrimaryMessage = styles.DSDialogPrimaryMessage;
+exports.DSDialogSecondaryMessage = styles.DSDialogSecondaryMessage;
+exports.DSDialogSeparator = styles.DSDialogSeparator;
+exports.DSDialogTitle = styles.DSDialogTitle;
+exports.DSDialog = DSDialog.DSDialog;
+exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
+exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
+exports.DSDialogSizes = utils.DSDialogSizes;
+exports.DSDialogAddonWithSchema = DSDialogAddonWithSchema;
+exports.DSDialogBodyWithSchema = DSDialogBodyWithSchema;
+exports.DSDialogDefaultLayoutWithSchema = DSDialogDefaultLayoutWithSchema;
+exports.DSDialogFooterWithSchema = DSDialogFooterWithSchema;
+exports.DSDialogHeaderWithSchema = DSDialogHeaderWithSchema;
+exports.DSDialogPrimaryMessageWithSchema = DSDialogPrimaryMessageWithSchema;
+exports.DSDialogSecondaryMessageWithSchema = DSDialogSecondaryMessageWithSchema;
+exports.DSDialogSeparatorWithSchema = DSDialogSeparatorWithSchema;
+exports.DSDialogTitleWithSchema = DSDialogTitleWithSchema;

package/cjs/propTypes.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var utils = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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 propTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
+  isOpen: dsPropsHelpers.PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
+  children: dsPropsHelpers.PropTypes.node.description('Nested components.').isRequired,
+  centered: dsPropsHelpers.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
+  removeAutoFocus: dsPropsHelpers.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: dsPropsHelpers.PropTypes.func.description('Callback that should be used to close the modal when the user clicks outside.').defaultValue(() => {}),
+  onClose: dsPropsHelpers.PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),
+  size: dsPropsHelpers.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT)
+});
+
+exports.propTypes = propTypes;

package/cjs/sharedTypes.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.DSDialogInternalsT = void 0;
+
+(function (_DSDialogInternalsT) {})(exports.DSDialogInternalsT || (exports.DSDialogInternalsT = {}));

package/cjs/styles.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var styledComponents = require('@xstyled/styled-components');
+var utils = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject;
+const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  body {\n    overflow: hidden;\n    \n    ", "\n  }\n"])), _ref => {
+  let {
+    bodyInfo
+  } = _ref;
+  return bodyInfo.overflow ? "padding-right: calc( ".concat(bodyInfo.padding, " + 15px ) !important;") : "";
+});
+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;z-index:", ";"], _ref2 => {
+  let {
+    zIndex
+  } = _ref2;
+  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:auto;", " &:focus{outline:none;}"], _ref3 => {
+  let {
+    centered
+  } = _ref3;
+  return centered ? 'auto' : '20vh auto auto auto';
+}, _ref4 => {
+  let {
+    size
+  } = _ref4;
+  return utils.allSizes[size];
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[500];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral['000'];
+}, styledComponents.space);
+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;line-height:28px;margin:0;"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontSizes.title[700];
+});
+const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-106vqwv-3"
+})([""]);
+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;}", " ", ""], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space.m;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.space.xs;
+}, DSDialogTitle, DSDialogAddon, DSDialogAddon, styledComponents.space, styledComponents.sizing);
+const DSDialogSeparator = /*#__PURE__*/styled__default["default"].hr.attrs(() => ({
+  'aria-hidden': true
+})).withConfig({
+  componentId: "sc-106vqwv-5"
+})(["margin:0;border-top:1px solid ", ";"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral['080'];
+});
+const DSDialogBody = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-106vqwv-6"
+})(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xs;
+}, styledComponents.layout, styledComponents.space, styledComponents.flexboxes, styledComponents.sizing);
+const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withConfig({
+  componentId: "sc-106vqwv-7"
+})(["margin:0;"]);
+const DSDialogSecondaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-106vqwv-8"
+})(["margin:0;color:", ";"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.neutral[500];
+});
+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;}"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xxs;
+}, DSDialogSecondaryMessage);
+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 ", ";", " ", " ", ""], _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.space.xxs;
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.m;
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space.xs;
+}, styledComponents.space, styledComponents.flexboxes, styledComponents.sizing);
+
+exports.DSDialogAddon = DSDialogAddon;
+exports.DSDialogBody = DSDialogBody;
+exports.DSDialogDefaultLayout = DSDialogDefaultLayout;
+exports.DSDialogFooter = DSDialogFooter;
+exports.DSDialogHeader = DSDialogHeader;
+exports.DSDialogPrimaryMessage = DSDialogPrimaryMessage;
+exports.DSDialogSecondaryMessage = DSDialogSecondaryMessage;
+exports.DSDialogSeparator = DSDialogSeparator;
+exports.DSDialogTitle = DSDialogTitle;
+exports.FixedBody = FixedBody;
+exports.StyledDialogBackground = StyledDialogBackground;
+exports.StyledDialogContainer = StyledDialogContainer;

package/cjs/utils.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+
+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;

package/esm/DSDialog.js

@@ -0,0 +1,119 @@
+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 'core-js/modules/web.dom-collections.iterator.js';
+import ReactDOM from 'react-dom';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } 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 { DSDialogDatatestid } from './DSDialogDatatestid.js';
+import { jsx } from 'react/jsx-runtime';
+
+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; }
+
+const DSDialog = props => {
+  var _FixedBody;
+
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const [bodyInfo, setBodyInfo] = useState({
+    overflow: false,
+    padding: '0px'
+  });
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
+
+  const {
+    children,
+    isOpen,
+    onClickOutside,
+    onClose,
+    centered,
+    size,
+    removeAutoFocus,
+    zIndex
+  } = propsWithDefault,
+        rest = _objectWithoutProperties(propsWithDefault, _excluded);
+
+  const containerRef = useRef(null);
+  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);
+
+  useEffect(() => {
+    var _window$getComputedSt;
+
+    const body = document.getElementsByTagName('body')[0];
+    const {
+      offsetHeight,
+      scrollHeight
+    } = body;
+    const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
+    if (!isOpen) return setBodyInfo({
+      overflow: false,
+      padding: '0px'
+    });
+    return setBodyInfo({
+      overflow: offsetHeight < scrollHeight,
+      padding
+    });
+  }, [isOpen]);
+  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__*/_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)), {}, {
+      size: size,
+      centered: centered,
+      "data-testid": DSDialogDatatestid.CONTAINER
+    }, restOfGlobalAttributes), {}, {
+      children: children
+    }))), document.getElementsByTagName('body')[0]);
+  }
+
+  return null;
+};
+
+const DSDialogWithSchema = describe(DSDialog);
+DSDialogWithSchema.propTypes = propTypes;
+
+export { DSDialog, DSDialogWithSchema };

package/esm/DSDialogDatatestid.js

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

package/esm/defaultProps.js

@@ -0,0 +1,15 @@
+import { DSDialogSizes } from './utils.js';
+
+const noop = () => {};
+
+const defaultProps = {
+  isOpen: false,
+  centered: false,
+  size: DSDialogSizes.DEFAULT,
+  removeAutoFocus: false,
+  onClickOutside: noop,
+  onClose: noop,
+  zIndex: 10
+};
+
+export { defaultProps };