@elliemae/ds-dialog 2.1.0 → 2.1.1-rc.2

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 (11) hide show
  1. package/cjs/DSDialog.js +16 -4
  2. package/cjs/{DSDialogInternalTypes.d.js → DSDialogInternalTypes.js} +0 -0
  3. package/cjs/styles.js +45 -21
  4. package/esm/DSDialog.js +16 -4
  5. package/esm/{DSDialogInternalTypes.d.js → DSDialogInternalTypes.js} +0 -0
  6. package/esm/styles.js +40 -16
  7. package/package.json +6 -6
  8. package/types/DSDialog.d.ts +1 -1
  9. package/types/DSDialogInternalTypes.d.ts +25 -0
  10. package/types/DSDialogTypes.d.ts +1 -0
  11. package/types/styles.d.ts +13 -12
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,13 +64,22 @@ 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;
@@ -82,7 +94,7 @@ const DSDialog = props => {
82
94
  "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
83
95
  zIndex: zIndex
84
96
  }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
85
- isBodyOverflow: isBodyOverflow
97
+ bodyInfo: bodyInfo
86
98
  })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
87
99
  role: "dialog",
88
100
  "aria-modal": true,
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
@@ -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,13 +53,22 @@ 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;
@@ -71,7 +83,7 @@ const DSDialog = props => {
71
83
  "data-testid": DSDialogDatatestid.BACKGROUND,
72
84
  zIndex: zIndex
73
85
  }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
74
- isBodyOverflow: isBodyOverflow
86
+ bodyInfo: bodyInfo
75
87
  })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
76
88
  role: "dialog",
77
89
  "aria-modal": true,
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dialog",
3
- "version": "2.1.0",
3
+ "version": "2.1.1-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Dialog",
6
6
  "module": "./esm/index.js",
@@ -27,9 +27,9 @@
27
27
  "import": "./esm/DSDialogTypes.js",
28
28
  "require": "./cjs/DSDialogTypes.js"
29
29
  },
30
- "./DSDialogInternalTypes.d": {
31
- "import": "./esm/DSDialogInternalTypes.d.js",
32
- "require": "./cjs/DSDialogInternalTypes.d.js"
30
+ "./DSDialogInternalTypes": {
31
+ "import": "./esm/DSDialogInternalTypes.js",
32
+ "require": "./cjs/DSDialogInternalTypes.js"
33
33
  },
34
34
  "./DSDialogDatatestid": {
35
35
  "import": "./esm/DSDialogDatatestid.js",
@@ -64,8 +64,8 @@
64
64
  "build": "node ../../scripts/build/build.js"
65
65
  },
66
66
  "dependencies": {
67
- "@elliemae/ds-props-helpers": "2.1.0",
68
- "@elliemae/ds-system": "2.1.0",
67
+ "@elliemae/ds-props-helpers": "2.1.1-rc.2",
68
+ "@elliemae/ds-system": "2.1.1-rc.2",
69
69
  "@xstyled/styled-components": "~3.1.1",
70
70
  "react-desc": "~4.1.3"
71
71
  },
package/types/DSDialog.d.ts CHANGED
@@ -23,7 +23,7 @@ declare const DSDialog: {
23
23
  };
24
24
  };
25
25
  declare const DSDialogWithSchema: {
26
- (props?: DSDialogPropsT | undefined): JSX.Element;
26
+ (props?: unknown): JSX.Element;
27
27
  propTypes: unknown;
28
28
  toTypescript: () => import("react-desc").TypescriptSchema;
29
29
  };
package/types/DSDialogInternalTypes.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import type { DSDialogPropsT, Sizes } from './DSDialogTypes';
2
+ export interface BodyInfoT {
3
+ overflow: boolean;
4
+ padding: string;
5
+ }
6
+ export interface DSDialogDefaultPropsT {
7
+ isOpen: boolean;
8
+ centered: boolean;
9
+ size: Sizes;
10
+ removeAutoFocus: boolean;
11
+ onClickOutside: () => void;
12
+ zIndex: number;
13
+ }
14
+ export interface StyledDialogContainerPropsT {
15
+ size: Sizes;
16
+ centered: boolean;
17
+ }
18
+ export interface StyledDialogFixedBodyPropsT {
19
+ bodyInfo: BodyInfoT;
20
+ }
21
+ export interface StyledDialogBackgroundPropsT {
22
+ zIndex: number;
23
+ }
24
+ export declare type DSDialogPropsWithDefaultT = Required<DSDialogPropsT>;
25
+ export declare type GetSpaceArgsT = Partial<Record<string, string | number>>;
package/types/DSDialogTypes.d.ts CHANGED
@@ -7,4 +7,5 @@ export interface DSDialogPropsT {
7
7
  size?: Sizes;
8
8
  centered?: boolean;
9
9
  removeAutoFocus?: boolean;
10
+ zIndex?: number;
10
11
  }
package/types/styles.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- export declare const FixedBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
2
- export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
3
- export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, any, never>;
4
- export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("@xstyled/system").Theme, {}, never>;
5
- export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
6
- export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
7
- export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("@xstyled/system").Theme, {
1
+ import type { StyledDialogContainerPropsT, StyledDialogFixedBodyPropsT, StyledDialogBackgroundPropsT } from './DSDialogInternalTypes';
2
+ export declare const FixedBody: import("styled-components").GlobalStyleComponent<StyledDialogFixedBodyPropsT, import("styled-components").DefaultTheme>;
3
+ export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogBackgroundPropsT, never>;
4
+ export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogContainerPropsT, never>;
5
+ export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
6
+ export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
+ export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, {
8
9
  'aria-hidden': true;
9
10
  }, "aria-hidden">;
10
- export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
11
- export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("@xstyled/system").Theme, {}, never>;
12
- export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("@xstyled/system").Theme, {}, never>;
13
- export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
14
- export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
11
+ export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
12
+ export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
13
+ export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
14
+ export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
15
+ export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;