@elliemae/ds-dialog 2.2.0-next.5 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/cjs/DSDialog.js +30 -23
  2. package/cjs/{DSDialogInternalTypes.d.js → DSDialogInternalTypes.js} +0 -0
  3. package/cjs/index.js +6 -52
  4. package/cjs/propTypes.js +4 -17
  5. package/cjs/styles.js +45 -21
  6. package/esm/DSDialog.js +32 -25
  7. package/esm/{DSDialogInternalTypes.d.js → DSDialogInternalTypes.js} +0 -0
  8. package/esm/index.js +1 -43
  9. package/esm/propTypes.js +4 -13
  10. package/esm/styles.js +40 -16
  11. package/package.json +6 -6
  12. package/types/DSDialog.d.ts +4 -2167
  13. package/types/DSDialogInternalTypes.d.ts +25 -0
  14. package/types/DSDialogTypes.d.ts +1 -0
  15. package/types/index.d.ts +1 -148
  16. package/types/propTypes.d.ts +3 -2166
  17. package/types/styles.d.ts +13 -13
package/cjs/DSDialog.js CHANGED
@@ -39,7 +39,10 @@ const DSDialog = props => {
39
39
  var _FixedBody;
40
40
 
41
41
  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
42
- const [isBodyOverflow, setIsBodyOverflow] = react.useState(false);
42
+ const [bodyInfo, setBodyInfo] = react.useState({
43
+ overflow: false,
44
+ padding: '0px'
45
+ });
43
46
  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
44
47
 
45
48
  const {
@@ -61,45 +64,49 @@ const DSDialog = props => {
61
64
  if (e.key === 'Escape') onClickOutside();
62
65
  }, [onClickOutside]);
63
66
  react.useEffect(() => {
67
+ var _window$getComputedSt;
68
+
64
69
  const body = document.getElementsByTagName('body')[0];
65
70
  const {
66
71
  offsetHeight,
67
72
  scrollHeight
68
73
  } = body;
69
- if (!isOpen) return setIsBodyOverflow(false);
70
- return setIsBodyOverflow(offsetHeight < scrollHeight);
74
+ const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
75
+ if (!isOpen) return setBodyInfo({
76
+ overflow: false,
77
+ padding: '0px'
78
+ });
79
+ return setBodyInfo({
80
+ overflow: offsetHeight < scrollHeight,
81
+ padding
82
+ });
71
83
  }, [isOpen]);
72
84
  react.useEffect(() => {
73
85
  var _containerRef$current;
74
86
 
75
87
  if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
76
88
  }, [isOpen, removeAutoFocus]);
77
- const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
78
- onClick: handleOutsideClick
79
- });
80
89
 
81
90
  if (isOpen) {
82
- return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/jsxRuntime.jsxs(styles.StyledDialogBackground, _objectSpread(_objectSpread({
91
+ return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
83
92
  onClick: handleOutsideClick,
84
93
  "data-portalbg": true,
85
94
  "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
86
95
  zIndex: zIndex
87
- }, globalAttributes), {}, {
88
- children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
89
- isBodyOverflow: isBodyOverflow
90
- })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
91
- role: "dialog",
92
- "aria-modal": true,
93
- ref: containerRef,
94
- tabIndex: !removeAutoFocus ? 0 : undefined,
95
- onKeyDown: handleOnKeyDown
96
- }, utils.getSpaceProps(rest)), {}, {
97
- size: size,
98
- centered: centered,
99
- "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
100
- children: children
101
- }))]
102
- })), document.getElementsByTagName('body')[0]);
96
+ }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
97
+ bodyInfo: bodyInfo
98
+ })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
99
+ role: "dialog",
100
+ "aria-modal": true,
101
+ ref: containerRef,
102
+ tabIndex: !removeAutoFocus ? 0 : undefined,
103
+ onKeyDown: handleOnKeyDown
104
+ }, utils.getSpaceProps(rest)), {}, {
105
+ size: size,
106
+ centered: centered,
107
+ "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
108
+ children: children
109
+ }))), document.getElementsByTagName('body')[0]);
103
110
  }
104
111
 
105
112
  return null;
package/cjs/index.js CHANGED
@@ -2,50 +2,17 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var reactDesc = require('react-desc');
6
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
7
- var styles = require('./styles.js');
8
5
  var DSDialog = require('./DSDialog.js');
9
6
  var DSDialogDatatestid = require('./DSDialogDatatestid.js');
10
7
  var utils = require('./utils.js');
8
+ var styles = require('./styles.js');
9
+
11
10
 
12
- styles.DSDialogBody.propTypes = dsPropsHelpers.globalAttributesPropTypes;
13
- styles.DSDialogHeader.propTypes = dsPropsHelpers.globalAttributesPropTypes;
14
- styles.DSDialogFooter.propTypes = dsPropsHelpers.globalAttributesPropTypes;
15
- styles.DSDialogSeparator.propTypes = dsPropsHelpers.globalAttributesPropTypes;
16
- styles.DSDialogTitle.propTypes = dsPropsHelpers.globalAttributesPropTypes;
17
- styles.DSDialogAddon.propTypes = dsPropsHelpers.globalAttributesPropTypes;
18
- styles.DSDialogDefaultLayout.propTypes = dsPropsHelpers.globalAttributesPropTypes;
19
- styles.DSDialogPrimaryMessage.propTypes = dsPropsHelpers.globalAttributesPropTypes;
20
- styles.DSDialogSecondaryMessage.propTypes = dsPropsHelpers.globalAttributesPropTypes;
21
- styles.DSDialogBody.displayName = 'DSDialogBody';
22
- styles.DSDialogHeader.displayName = 'DSDialogHeader';
23
- styles.DSDialogFooter.displayName = 'DSDialogFooter';
24
- styles.DSDialogSeparator.displayName = 'DSDialogSeparator';
25
- styles.DSDialogTitle.displayName = 'DSDialogTitle';
26
- styles.DSDialogAddon.displayName = 'DSDialogAddon';
27
- styles.DSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';
28
- styles.DSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';
29
- styles.DSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';
30
- const DSDialogBodyWithSchema = reactDesc.describe(styles.DSDialogBody);
31
- const DSDialogHeaderWithSchema = reactDesc.describe(styles.DSDialogHeader);
32
- const DSDialogFooterWithSchema = reactDesc.describe(styles.DSDialogFooter);
33
- const DSDialogSeparatorWithSchema = reactDesc.describe(styles.DSDialogSeparator);
34
- const DSDialogTitleWithSchema = reactDesc.describe(styles.DSDialogTitle);
35
- const DSDialogAddonWithSchema = reactDesc.describe(styles.DSDialogAddon);
36
- const DSDialogDefaultLayoutWithSchema = reactDesc.describe(styles.DSDialogDefaultLayout);
37
- const DSDialogPrimaryMessageWithSchema = reactDesc.describe(styles.DSDialogPrimaryMessage);
38
- const DSDialogSecondaryMessageWithSchema = reactDesc.describe(styles.DSDialogSecondaryMessage);
39
- DSDialogBodyWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
40
- DSDialogHeaderWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
41
- DSDialogFooterWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
42
- DSDialogSeparatorWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
43
- DSDialogTitleWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
44
- DSDialogAddonWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
45
- DSDialogDefaultLayoutWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
46
- DSDialogPrimaryMessageWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
47
- DSDialogSecondaryMessageWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
48
11
 
12
+ exports.DSDialog = DSDialog.DSDialog;
13
+ exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
14
+ exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
15
+ exports.DSDialogSizes = utils.DSDialogSizes;
49
16
  exports.DSDialogAddon = styles.DSDialogAddon;
50
17
  exports.DSDialogBody = styles.DSDialogBody;
51
18
  exports.DSDialogDefaultLayout = styles.DSDialogDefaultLayout;
@@ -55,16 +22,3 @@ exports.DSDialogPrimaryMessage = styles.DSDialogPrimaryMessage;
55
22
  exports.DSDialogSecondaryMessage = styles.DSDialogSecondaryMessage;
56
23
  exports.DSDialogSeparator = styles.DSDialogSeparator;
57
24
  exports.DSDialogTitle = styles.DSDialogTitle;
58
- exports.DSDialog = DSDialog.DSDialog;
59
- exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
60
- exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
61
- exports.DSDialogSizes = utils.DSDialogSizes;
62
- exports.DSDialogAddonWithSchema = DSDialogAddonWithSchema;
63
- exports.DSDialogBodyWithSchema = DSDialogBodyWithSchema;
64
- exports.DSDialogDefaultLayoutWithSchema = DSDialogDefaultLayoutWithSchema;
65
- exports.DSDialogFooterWithSchema = DSDialogFooterWithSchema;
66
- exports.DSDialogHeaderWithSchema = DSDialogHeaderWithSchema;
67
- exports.DSDialogPrimaryMessageWithSchema = DSDialogPrimaryMessageWithSchema;
68
- exports.DSDialogSecondaryMessageWithSchema = DSDialogSecondaryMessageWithSchema;
69
- exports.DSDialogSeparatorWithSchema = DSDialogSeparatorWithSchema;
70
- exports.DSDialogTitleWithSchema = DSDialogTitleWithSchema;
package/cjs/propTypes.js CHANGED
@@ -2,30 +2,17 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.for-each.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
5
  var reactDesc = require('react-desc');
12
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
13
6
  var utils = require('./utils.js');
14
7
 
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
18
-
19
- 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; }
20
-
21
- 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; }
22
- const propTypes = _objectSpread({
23
- isOpen: reactDesc.PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
8
+ /* eslint-disable max-len */
9
+ const propTypes = {
10
+ isOpen: reactDesc.PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
24
11
  children: reactDesc.PropTypes.node.description('Nested components.').isRequired,
25
12
  centered: reactDesc.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
26
13
  size: reactDesc.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT),
27
14
  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),
28
15
  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(() => {})
29
- }, dsPropsHelpers.globalAttributesPropTypes);
16
+ };
30
17
 
31
18
  exports.propTypes = propTypes;
package/cjs/styles.js CHANGED
@@ -3,7 +3,9 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
- var styled = require('@xstyled/styled-components');
6
+ var styled = require('styled-components');
7
+ var dsSystem = require('@elliemae/ds-system');
8
+ var styledComponents = require('@xstyled/styled-components');
7
9
  var utils = require('./utils.js');
8
10
 
9
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,20 +13,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
13
  var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
12
14
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
15
 
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
15
- const FixedBody = styled.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
16
+ var _templateObject;
17
+ const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
16
18
  let {
17
- isBodyOverflow
19
+ bodyInfo
18
20
  } = _ref;
19
- return isBodyOverflow ? "padding-right: 15px !important;" : "";
21
+ return bodyInfo.overflow ? "padding-right: calc( ".concat(bodyInfo.padding, " + 15px ) !important;") : "";
20
22
  });
21
- const StyledDialogBackground = styled__default["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n position: fixed;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ", ";\n"])), _ref2 => {
23
+ const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
24
+ componentId: "sc-106vqwv-0"
25
+ })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
22
26
  let {
23
27
  zIndex
24
28
  } = _ref2;
25
29
  return zIndex;
26
30
  });
27
- const StyledDialogContainer = styled__default["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ", ";\n width: ", ";\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ", ";\n background: ", ";\n overflow-y: auto;\n ", "\n &:focus {\n outline: none;\n }\n"])), _ref3 => {
31
+ const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
32
+ componentId: "sc-106vqwv-1"
33
+ })(["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 => {
28
34
  let {
29
35
  centered
30
36
  } = _ref3;
@@ -44,15 +50,21 @@ const StyledDialogContainer = styled__default["default"].div(_templateObject3 ||
44
50
  theme
45
51
  } = _ref6;
46
52
  return theme.colors.neutral['000'];
47
- }, styled.space);
48
- const DSDialogTitle = styled__default["default"].h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n font-size: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])), _ref7 => {
53
+ }, styledComponents.space);
54
+ const DSDialogTitle = /*#__PURE__*/styled__default["default"].h3.withConfig({
55
+ componentId: "sc-106vqwv-2"
56
+ })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref7 => {
49
57
  let {
50
58
  theme
51
59
  } = _ref7;
52
60
  return theme.fontSizes.title[700];
53
61
  });
54
- const DSDialogAddon = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"]([""])));
55
- const DSDialogHeader = styled__default["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ", ";\n padding: 10px ", ";\n & ", " + ", " {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ", ":only-child {\n justify-self: flex-end;\n }\n ", "\n"])), _ref8 => {
62
+ const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
63
+ componentId: "sc-106vqwv-3"
64
+ })([""]);
65
+ const DSDialogHeader = /*#__PURE__*/styled__default["default"].div.withConfig({
66
+ componentId: "sc-106vqwv-4"
67
+ })(["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 => {
56
68
  let {
57
69
  theme
58
70
  } = _ref8;
@@ -62,35 +74,47 @@ const DSDialogHeader = styled__default["default"].div(_templateObject6 || (_temp
62
74
  theme
63
75
  } = _ref9;
64
76
  return theme.space.xs;
65
- }, DSDialogTitle, DSDialogAddon, DSDialogAddon, styled.space);
66
- const DSDialogSeparator = styled__default["default"].hr.attrs(() => ({
77
+ }, DSDialogTitle, DSDialogAddon, DSDialogAddon, styledComponents.space);
78
+ const DSDialogSeparator = /*#__PURE__*/styled__default["default"].hr.attrs(() => ({
67
79
  'aria-hidden': true
68
- }))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n margin: 0;\n border-top: 1px solid ", ";\n"])), _ref10 => {
80
+ })).withConfig({
81
+ componentId: "sc-106vqwv-5"
82
+ })(["margin:0;border-top:1px solid ", ";"], _ref10 => {
69
83
  let {
70
84
  theme
71
85
  } = _ref10;
72
86
  return theme.colors.neutral['080'];
73
87
  });
74
- const DSDialogBody = styled__default["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n padding: ", ";\n overflow-y: auto;\n ", "\n ", "\n ", "\n ", "\n"])), _ref11 => {
88
+ const DSDialogBody = /*#__PURE__*/styled__default["default"].div.withConfig({
89
+ componentId: "sc-106vqwv-6"
90
+ })(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref11 => {
75
91
  let {
76
92
  theme
77
93
  } = _ref11;
78
94
  return theme.space.xs;
79
- }, styled.layout, styled.space, styled.flexboxes, styled.sizing);
80
- const DSDialogPrimaryMessage = styled__default["default"].h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default["default"](["\n margin: 0;\n"])));
81
- const DSDialogSecondaryMessage = styled__default["default"].p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n margin: 0;\n color: ", ";\n"])), _ref12 => {
95
+ }, styledComponents.layout, styledComponents.space, styledComponents.flexboxes, styledComponents.sizing);
96
+ const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withConfig({
97
+ componentId: "sc-106vqwv-7"
98
+ })(["margin:0;"]);
99
+ const DSDialogSecondaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
100
+ componentId: "sc-106vqwv-8"
101
+ })(["margin:0;color:", ";"], _ref12 => {
82
102
  let {
83
103
  theme
84
104
  } = _ref12;
85
105
  return theme.colors.neutral[500];
86
106
  });
87
- const DSDialogDefaultLayout = styled__default["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default["default"](["\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ", ";\n\n ", " {\n text-align: center;\n }\n"])), _ref13 => {
107
+ const DSDialogDefaultLayout = /*#__PURE__*/styled__default["default"].div.withConfig({
108
+ componentId: "sc-106vqwv-9"
109
+ })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
88
110
  let {
89
111
  theme
90
112
  } = _ref13;
91
113
  return theme.space.xxs;
92
114
  }, DSDialogSecondaryMessage);
93
- const DSDialogFooter = styled__default["default"].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default["default"](["\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ", ";\n min-height: ", ";\n padding: 0 ", ";\n ", "\n ", "\n ", "\n"])), _ref14 => {
115
+ const DSDialogFooter = /*#__PURE__*/styled__default["default"].div.withConfig({
116
+ componentId: "sc-106vqwv-10"
117
+ })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", " ", ""], _ref14 => {
94
118
  let {
95
119
  theme
96
120
  } = _ref14;
@@ -105,7 +129,7 @@ const DSDialogFooter = styled__default["default"].div(_templateObject12 || (_tem
105
129
  theme
106
130
  } = _ref16;
107
131
  return theme.space.xs;
108
- }, styled.space, styled.flexboxes, styled.sizing);
132
+ }, styledComponents.space, styledComponents.flexboxes, styledComponents.sizing);
109
133
 
110
134
  exports.DSDialogAddon = DSDialogAddon;
111
135
  exports.DSDialogBody = DSDialogBody;
package/esm/DSDialog.js CHANGED
@@ -10,13 +10,13 @@ import 'core-js/modules/web.dom-collections.iterator.js';
10
10
  import ReactDOM from 'react-dom';
11
11
  import { useState, useRef, useCallback, useEffect } from 'react';
12
12
  import { describe } from 'react-desc';
13
- import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
13
+ import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
14
14
  import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
15
15
  import { propTypes } from './propTypes.js';
16
16
  import { defaultProps } from './defaultProps.js';
17
17
  import { getSpaceProps } from './utils.js';
18
18
  import { DSDialogDatatestid } from './DSDialogDatatestid.js';
19
- import { jsxs, jsx } from 'react/jsx-runtime';
19
+ import { jsx } from 'react/jsx-runtime';
20
20
 
21
21
  const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
22
22
 
@@ -28,7 +28,10 @@ const DSDialog = props => {
28
28
  var _FixedBody;
29
29
 
30
30
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
31
- const [isBodyOverflow, setIsBodyOverflow] = useState(false);
31
+ const [bodyInfo, setBodyInfo] = useState({
32
+ overflow: false,
33
+ padding: '0px'
34
+ });
32
35
  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
33
36
 
34
37
  const {
@@ -50,45 +53,49 @@ const DSDialog = props => {
50
53
  if (e.key === 'Escape') onClickOutside();
51
54
  }, [onClickOutside]);
52
55
  useEffect(() => {
56
+ var _window$getComputedSt;
57
+
53
58
  const body = document.getElementsByTagName('body')[0];
54
59
  const {
55
60
  offsetHeight,
56
61
  scrollHeight
57
62
  } = body;
58
- if (!isOpen) return setIsBodyOverflow(false);
59
- return setIsBodyOverflow(offsetHeight < scrollHeight);
63
+ const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
64
+ if (!isOpen) return setBodyInfo({
65
+ overflow: false,
66
+ padding: '0px'
67
+ });
68
+ return setBodyInfo({
69
+ overflow: offsetHeight < scrollHeight,
70
+ padding
71
+ });
60
72
  }, [isOpen]);
61
73
  useEffect(() => {
62
74
  var _containerRef$current;
63
75
 
64
76
  if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
65
77
  }, [isOpen, removeAutoFocus]);
66
- const globalAttributes = useGetGlobalAttributes(propsWithDefault, {
67
- onClick: handleOutsideClick
68
- });
69
78
 
70
79
  if (isOpen) {
71
- return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/jsxs(StyledDialogBackground, _objectSpread(_objectSpread({
80
+ return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
72
81
  onClick: handleOutsideClick,
73
82
  "data-portalbg": true,
74
83
  "data-testid": DSDialogDatatestid.BACKGROUND,
75
84
  zIndex: zIndex
76
- }, globalAttributes), {}, {
77
- children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
78
- isBodyOverflow: isBodyOverflow
79
- })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
80
- role: "dialog",
81
- "aria-modal": true,
82
- ref: containerRef,
83
- tabIndex: !removeAutoFocus ? 0 : undefined,
84
- onKeyDown: handleOnKeyDown
85
- }, getSpaceProps(rest)), {}, {
86
- size: size,
87
- centered: centered,
88
- "data-testid": DSDialogDatatestid.CONTAINER,
89
- children: children
90
- }))]
91
- })), document.getElementsByTagName('body')[0]);
85
+ }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
86
+ bodyInfo: bodyInfo
87
+ })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
88
+ role: "dialog",
89
+ "aria-modal": true,
90
+ ref: containerRef,
91
+ tabIndex: !removeAutoFocus ? 0 : undefined,
92
+ onKeyDown: handleOnKeyDown
93
+ }, getSpaceProps(rest)), {}, {
94
+ size: size,
95
+ centered: centered,
96
+ "data-testid": DSDialogDatatestid.CONTAINER,
97
+ children: children
98
+ }))), document.getElementsByTagName('body')[0]);
92
99
  }
93
100
 
94
101
  return null;
package/esm/index.js CHANGED
@@ -1,46 +1,4 @@
1
- import { describe } from 'react-desc';
2
- import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
3
- import { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage } from './styles.js';
4
- export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
5
1
  export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
6
2
  export { DSDialogDatatestid } from './DSDialogDatatestid.js';
7
3
  export { DSDialogSizes } from './utils.js';
8
-
9
- DSDialogBody.propTypes = globalAttributesPropTypes;
10
- DSDialogHeader.propTypes = globalAttributesPropTypes;
11
- DSDialogFooter.propTypes = globalAttributesPropTypes;
12
- DSDialogSeparator.propTypes = globalAttributesPropTypes;
13
- DSDialogTitle.propTypes = globalAttributesPropTypes;
14
- DSDialogAddon.propTypes = globalAttributesPropTypes;
15
- DSDialogDefaultLayout.propTypes = globalAttributesPropTypes;
16
- DSDialogPrimaryMessage.propTypes = globalAttributesPropTypes;
17
- DSDialogSecondaryMessage.propTypes = globalAttributesPropTypes;
18
- DSDialogBody.displayName = 'DSDialogBody';
19
- DSDialogHeader.displayName = 'DSDialogHeader';
20
- DSDialogFooter.displayName = 'DSDialogFooter';
21
- DSDialogSeparator.displayName = 'DSDialogSeparator';
22
- DSDialogTitle.displayName = 'DSDialogTitle';
23
- DSDialogAddon.displayName = 'DSDialogAddon';
24
- DSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';
25
- DSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';
26
- DSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';
27
- const DSDialogBodyWithSchema = describe(DSDialogBody);
28
- const DSDialogHeaderWithSchema = describe(DSDialogHeader);
29
- const DSDialogFooterWithSchema = describe(DSDialogFooter);
30
- const DSDialogSeparatorWithSchema = describe(DSDialogSeparator);
31
- const DSDialogTitleWithSchema = describe(DSDialogTitle);
32
- const DSDialogAddonWithSchema = describe(DSDialogAddon);
33
- const DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout);
34
- const DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage);
35
- const DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage);
36
- DSDialogBodyWithSchema.propTypes = globalAttributesPropTypes;
37
- DSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes;
38
- DSDialogFooterWithSchema.propTypes = globalAttributesPropTypes;
39
- DSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes;
40
- DSDialogTitleWithSchema.propTypes = globalAttributesPropTypes;
41
- DSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;
42
- DSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;
43
- DSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;
44
- DSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;
45
-
46
- export { DSDialogAddonWithSchema, DSDialogBodyWithSchema, DSDialogDefaultLayoutWithSchema, DSDialogFooterWithSchema, DSDialogHeaderWithSchema, DSDialogPrimaryMessageWithSchema, DSDialogSecondaryMessageWithSchema, DSDialogSeparatorWithSchema, DSDialogTitleWithSchema };
4
+ export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
package/esm/propTypes.js CHANGED
@@ -1,23 +1,14 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
1
  import { PropTypes } from 'react-desc';
8
- import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
9
2
  import { DSDialogSizesArrayValues, DSDialogSizes } from './utils.js';
10
3
 
11
- 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; }
12
-
13
- 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; }
14
- const propTypes = _objectSpread({
15
- isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
4
+ /* eslint-disable max-len */
5
+ const propTypes = {
6
+ isOpen: PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
16
7
  children: PropTypes.node.description('Nested components.').isRequired,
17
8
  centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
18
9
  size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT),
19
10
  removeAutoFocus: 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),
20
11
  onClickOutside: 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(() => {})
21
- }, globalAttributesPropTypes);
12
+ };
22
13
 
23
14
  export { propTypes };
package/esm/styles.js CHANGED
@@ -1,21 +1,27 @@
1
1
  import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
- import styled, { createGlobalStyle, space, layout, flexboxes, sizing } from '@xstyled/styled-components';
2
+ import styled from 'styled-components';
3
+ import { createGlobalStyle } from '@elliemae/ds-system';
4
+ import { space, layout, flexboxes, sizing } from '@xstyled/styled-components';
3
5
  import { allSizes } from './utils.js';
4
6
 
5
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
7
+ var _templateObject;
6
8
  const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
7
9
  let {
8
- isBodyOverflow
10
+ bodyInfo
9
11
  } = _ref;
10
- return isBodyOverflow ? "padding-right: 15px !important;" : "";
12
+ return bodyInfo.overflow ? "padding-right: calc( ".concat(bodyInfo.padding, " + 15px ) !important;") : "";
11
13
  });
12
- const StyledDialogBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ", ";\n"])), _ref2 => {
14
+ const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
15
+ componentId: "sc-106vqwv-0"
16
+ })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
13
17
  let {
14
18
  zIndex
15
19
  } = _ref2;
16
20
  return zIndex;
17
21
  });
18
- const StyledDialogContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ", ";\n width: ", ";\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ", ";\n background: ", ";\n overflow-y: auto;\n ", "\n &:focus {\n outline: none;\n }\n"])), _ref3 => {
22
+ const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
23
+ componentId: "sc-106vqwv-1"
24
+ })(["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 => {
19
25
  let {
20
26
  centered
21
27
  } = _ref3;
@@ -36,14 +42,20 @@ const StyledDialogContainer = styled.div(_templateObject3 || (_templateObject3 =
36
42
  } = _ref6;
37
43
  return theme.colors.neutral['000'];
38
44
  }, space);
39
- const DSDialogTitle = styled.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])), _ref7 => {
45
+ const DSDialogTitle = /*#__PURE__*/styled.h3.withConfig({
46
+ componentId: "sc-106vqwv-2"
47
+ })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref7 => {
40
48
  let {
41
49
  theme
42
50
  } = _ref7;
43
51
  return theme.fontSizes.title[700];
44
52
  });
45
- const DSDialogAddon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
46
- const DSDialogHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ", ";\n padding: 10px ", ";\n & ", " + ", " {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ", ":only-child {\n justify-self: flex-end;\n }\n ", "\n"])), _ref8 => {
53
+ const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
54
+ componentId: "sc-106vqwv-3"
55
+ })([""]);
56
+ const DSDialogHeader = /*#__PURE__*/styled.div.withConfig({
57
+ componentId: "sc-106vqwv-4"
58
+ })(["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 => {
47
59
  let {
48
60
  theme
49
61
  } = _ref8;
@@ -54,34 +66,46 @@ const DSDialogHeader = styled.div(_templateObject6 || (_templateObject6 = _tagge
54
66
  } = _ref9;
55
67
  return theme.space.xs;
56
68
  }, DSDialogTitle, DSDialogAddon, DSDialogAddon, space);
57
- const DSDialogSeparator = styled.hr.attrs(() => ({
69
+ const DSDialogSeparator = /*#__PURE__*/styled.hr.attrs(() => ({
58
70
  'aria-hidden': true
59
- }))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin: 0;\n border-top: 1px solid ", ";\n"])), _ref10 => {
71
+ })).withConfig({
72
+ componentId: "sc-106vqwv-5"
73
+ })(["margin:0;border-top:1px solid ", ";"], _ref10 => {
60
74
  let {
61
75
  theme
62
76
  } = _ref10;
63
77
  return theme.colors.neutral['080'];
64
78
  });
65
- const DSDialogBody = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: ", ";\n overflow-y: auto;\n ", "\n ", "\n ", "\n ", "\n"])), _ref11 => {
79
+ const DSDialogBody = /*#__PURE__*/styled.div.withConfig({
80
+ componentId: "sc-106vqwv-6"
81
+ })(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref11 => {
66
82
  let {
67
83
  theme
68
84
  } = _ref11;
69
85
  return theme.space.xs;
70
86
  }, layout, space, flexboxes, sizing);
71
- const DSDialogPrimaryMessage = styled.h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin: 0;\n"])));
72
- const DSDialogSecondaryMessage = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n margin: 0;\n color: ", ";\n"])), _ref12 => {
87
+ const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
88
+ componentId: "sc-106vqwv-7"
89
+ })(["margin:0;"]);
90
+ const DSDialogSecondaryMessage = /*#__PURE__*/styled.p.withConfig({
91
+ componentId: "sc-106vqwv-8"
92
+ })(["margin:0;color:", ";"], _ref12 => {
73
93
  let {
74
94
  theme
75
95
  } = _ref12;
76
96
  return theme.colors.neutral[500];
77
97
  });
78
- const DSDialogDefaultLayout = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ", ";\n\n ", " {\n text-align: center;\n }\n"])), _ref13 => {
98
+ const DSDialogDefaultLayout = /*#__PURE__*/styled.div.withConfig({
99
+ componentId: "sc-106vqwv-9"
100
+ })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
79
101
  let {
80
102
  theme
81
103
  } = _ref13;
82
104
  return theme.space.xxs;
83
105
  }, DSDialogSecondaryMessage);
84
- const DSDialogFooter = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ", ";\n min-height: ", ";\n padding: 0 ", ";\n ", "\n ", "\n ", "\n"])), _ref14 => {
106
+ const DSDialogFooter = /*#__PURE__*/styled.div.withConfig({
107
+ componentId: "sc-106vqwv-10"
108
+ })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", " ", ""], _ref14 => {
85
109
  let {
86
110
  theme
87
111
  } = _ref14;