@elliemae/ds-dialog 2.2.0-next.7 → 2.2.0-next.8

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/DSDialogInternalTypes.d.ts +25 -0
  9. package/types/DSDialogTypes.d.ts +1 -0
  10. package/types/index.d.ts +9 -108
  11. package/types/styles.d.ts +12 -12
package/cjs/DSDialog.js CHANGED
@@ -38,7 +38,10 @@ const DSDialog = props => {
38
38
  var _FixedBody;
39
39
 
40
40
  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
41
- const [isBodyOverflow, setIsBodyOverflow] = react.useState(false);
41
+ const [bodyInfo, setBodyInfo] = react.useState({
42
+ overflow: false,
43
+ padding: '0px'
44
+ });
42
45
  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
43
46
 
44
47
  const {
@@ -60,13 +63,22 @@ const DSDialog = props => {
60
63
  if (e.key === 'Escape') onClickOutside();
61
64
  }, [onClickOutside]);
62
65
  react.useEffect(() => {
66
+ var _window$getComputedSt;
67
+
63
68
  const body = document.getElementsByTagName('body')[0];
64
69
  const {
65
70
  offsetHeight,
66
71
  scrollHeight
67
72
  } = body;
68
- if (!isOpen) return setIsBodyOverflow(false);
69
- return setIsBodyOverflow(offsetHeight < scrollHeight);
73
+ const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
74
+ if (!isOpen) return setBodyInfo({
75
+ overflow: false,
76
+ padding: '0px'
77
+ });
78
+ return setBodyInfo({
79
+ overflow: offsetHeight < scrollHeight,
80
+ padding
81
+ });
70
82
  }, [isOpen]);
71
83
  react.useEffect(() => {
72
84
  var _containerRef$current;
@@ -85,7 +97,7 @@ const DSDialog = props => {
85
97
  zIndex: zIndex
86
98
  }, globalAttributes), {}, {
87
99
  children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
88
- isBodyOverflow: isBodyOverflow
100
+ bodyInfo: bodyInfo
89
101
  })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
90
102
  role: "dialog",
91
103
  "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
@@ -27,7 +27,10 @@ const DSDialog = props => {
27
27
  var _FixedBody;
28
28
 
29
29
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
30
- const [isBodyOverflow, setIsBodyOverflow] = useState(false);
30
+ const [bodyInfo, setBodyInfo] = useState({
31
+ overflow: false,
32
+ padding: '0px'
33
+ });
31
34
  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
32
35
 
33
36
  const {
@@ -49,13 +52,22 @@ const DSDialog = props => {
49
52
  if (e.key === 'Escape') onClickOutside();
50
53
  }, [onClickOutside]);
51
54
  useEffect(() => {
55
+ var _window$getComputedSt;
56
+
52
57
  const body = document.getElementsByTagName('body')[0];
53
58
  const {
54
59
  offsetHeight,
55
60
  scrollHeight
56
61
  } = body;
57
- if (!isOpen) return setIsBodyOverflow(false);
58
- return setIsBodyOverflow(offsetHeight < scrollHeight);
62
+ const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
63
+ if (!isOpen) return setBodyInfo({
64
+ overflow: false,
65
+ padding: '0px'
66
+ });
67
+ return setBodyInfo({
68
+ overflow: offsetHeight < scrollHeight,
69
+ padding
70
+ });
59
71
  }, [isOpen]);
60
72
  useEffect(() => {
61
73
  var _containerRef$current;
@@ -74,7 +86,7 @@ const DSDialog = props => {
74
86
  zIndex: zIndex
75
87
  }, globalAttributes), {}, {
76
88
  children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
77
- isBodyOverflow: isBodyOverflow
89
+ bodyInfo: bodyInfo
78
90
  })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
79
91
  role: "dialog",
80
92
  "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.2.0-next.7",
3
+ "version": "2.2.0-next.8",
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.2.0-next.7",
68
- "@elliemae/ds-system": "2.2.0-next.7",
67
+ "@elliemae/ds-props-helpers": "2.2.0-next.8",
68
+ "@elliemae/ds-system": "2.2.0-next.8",
69
69
  "@xstyled/styled-components": "~3.1.1",
70
70
  "react-desc": "~4.1.3"
71
71
  },
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 StyledDialogBackgroundT {
19
+ zIndex: number;
20
+ }
21
+ export interface FixedBodyT {
22
+ isBodyOverflow: boolean;
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/index.d.ts CHANGED
@@ -2,146 +2,47 @@
2
2
  /// <reference types="react" />
3
3
  import { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage } from './styles';
4
4
  declare const DSDialogBodyWithSchema: {
5
- (props?: (({
6
- [x: string]: any;
7
- [x: number]: any;
8
- [x: symbol]: any;
9
- } & {
10
- theme?: import("@xstyled/system").Theme | undefined;
11
- } & ({} | {
12
- children?: import("react").ReactNode;
13
- })) & {
14
- as?: string | import("react").ComponentType<any> | undefined;
15
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
16
- }) | undefined): JSX.Element;
5
+ (props?: unknown): JSX.Element;
17
6
  propTypes: unknown;
18
7
  toTypescript: () => import("react-desc").TypescriptSchema;
19
8
  };
20
9
  declare const DSDialogHeaderWithSchema: {
21
- (props?: (({
22
- [x: string]: any;
23
- [x: number]: any;
24
- [x: symbol]: any;
25
- } & {
26
- theme?: import("@xstyled/system").Theme | undefined;
27
- } & ({} | {
28
- children?: import("react").ReactNode;
29
- })) & {
30
- as?: string | import("react").ComponentType<any> | undefined;
31
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
32
- }) | undefined): JSX.Element;
10
+ (props?: unknown): JSX.Element;
33
11
  propTypes: unknown;
34
12
  toTypescript: () => import("react-desc").TypescriptSchema;
35
13
  };
36
14
  declare const DSDialogFooterWithSchema: {
37
- (props?: (({
38
- [x: string]: any;
39
- [x: number]: any;
40
- [x: symbol]: any;
41
- } & {
42
- theme?: import("@xstyled/system").Theme | undefined;
43
- } & ({} | {
44
- children?: import("react").ReactNode;
45
- })) & {
46
- as?: string | import("react").ComponentType<any> | undefined;
47
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
48
- }) | undefined): JSX.Element;
15
+ (props?: unknown): JSX.Element;
49
16
  propTypes: unknown;
50
17
  toTypescript: () => import("react-desc").TypescriptSchema;
51
18
  };
52
19
  declare const DSDialogSeparatorWithSchema: {
53
- (props?: (({
54
- [x: string]: any;
55
- [x: number]: any;
56
- [x: symbol]: any;
57
- } & {
58
- theme?: import("@xstyled/system").Theme | undefined;
59
- } & ({} | {
60
- children?: import("react").ReactNode;
61
- })) & {
62
- as?: string | import("react").ComponentType<any> | undefined;
63
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
64
- }) | undefined): JSX.Element;
20
+ (props?: unknown): JSX.Element;
65
21
  propTypes: unknown;
66
22
  toTypescript: () => import("react-desc").TypescriptSchema;
67
23
  };
68
24
  declare const DSDialogTitleWithSchema: {
69
- (props?: (({
70
- [x: string]: any;
71
- [x: number]: any;
72
- [x: symbol]: any;
73
- } & {
74
- theme?: import("@xstyled/system").Theme | undefined;
75
- } & ({} | {
76
- children?: import("react").ReactNode;
77
- })) & {
78
- as?: string | import("react").ComponentType<any> | undefined;
79
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
80
- }) | undefined): JSX.Element;
25
+ (props?: unknown): JSX.Element;
81
26
  propTypes: unknown;
82
27
  toTypescript: () => import("react-desc").TypescriptSchema;
83
28
  };
84
29
  declare const DSDialogAddonWithSchema: {
85
- (props?: (({
86
- [x: string]: any;
87
- [x: number]: any;
88
- [x: symbol]: any;
89
- } & {
90
- theme?: import("@xstyled/system").Theme | undefined;
91
- } & ({} | {
92
- children?: import("react").ReactNode;
93
- })) & {
94
- as?: string | import("react").ComponentType<any> | undefined;
95
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
96
- }) | undefined): JSX.Element;
30
+ (props?: unknown): JSX.Element;
97
31
  propTypes: unknown;
98
32
  toTypescript: () => import("react-desc").TypescriptSchema;
99
33
  };
100
34
  declare const DSDialogDefaultLayoutWithSchema: {
101
- (props?: (({
102
- [x: string]: any;
103
- [x: number]: any;
104
- [x: symbol]: any;
105
- } & {
106
- theme?: import("@xstyled/system").Theme | undefined;
107
- } & ({} | {
108
- children?: import("react").ReactNode;
109
- })) & {
110
- as?: string | import("react").ComponentType<any> | undefined;
111
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
112
- }) | undefined): JSX.Element;
35
+ (props?: unknown): JSX.Element;
113
36
  propTypes: unknown;
114
37
  toTypescript: () => import("react-desc").TypescriptSchema;
115
38
  };
116
39
  declare const DSDialogPrimaryMessageWithSchema: {
117
- (props?: (({
118
- [x: string]: any;
119
- [x: number]: any;
120
- [x: symbol]: any;
121
- } & {
122
- theme?: import("@xstyled/system").Theme | undefined;
123
- } & ({} | {
124
- children?: import("react").ReactNode;
125
- })) & {
126
- as?: string | import("react").ComponentType<any> | undefined;
127
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
128
- }) | undefined): JSX.Element;
40
+ (props?: unknown): JSX.Element;
129
41
  propTypes: unknown;
130
42
  toTypescript: () => import("react-desc").TypescriptSchema;
131
43
  };
132
44
  declare const DSDialogSecondaryMessageWithSchema: {
133
- (props?: (({
134
- [x: string]: any;
135
- [x: number]: any;
136
- [x: symbol]: any;
137
- } & {
138
- theme?: import("@xstyled/system").Theme | undefined;
139
- } & ({} | {
140
- children?: import("react").ReactNode;
141
- })) & {
142
- as?: string | import("react").ComponentType<any> | undefined;
143
- forwardedAs?: string | import("react").ComponentType<any> | undefined;
144
- }) | undefined): JSX.Element;
45
+ (props?: unknown): JSX.Element;
145
46
  propTypes: unknown;
146
47
  toTypescript: () => import("react-desc").TypescriptSchema;
147
48
  };
package/types/styles.d.ts CHANGED
@@ -1,15 +1,15 @@
1
- import type { StyledDialogContainerT, StyledDialogBackgroundT, FixedBodyT } from './DSDialogInternalTypes';
1
+ import type { StyledDialogBackgroundT, FixedBodyT } from './DSDialogInternalTypes';
2
2
  export declare const FixedBody: import("styled-components").GlobalStyleComponent<FixedBodyT, import("styled-components").DefaultTheme>;
3
- export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, StyledDialogBackgroundT, never>;
4
- export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, StyledDialogContainerT, never>;
5
- export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("@xstyled/system").Theme, {}, never>;
6
- export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
7
- export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
8
- export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("@xstyled/system").Theme, {
3
+ export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogBackgroundT, never>;
4
+ export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, 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, {
9
9
  'aria-hidden': true;
10
10
  }, "aria-hidden">;
11
- export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
12
- export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("@xstyled/system").Theme, {}, never>;
13
- export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("@xstyled/system").Theme, {}, never>;
14
- export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
15
- 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>;