@elliemae/ds-dialog 2.0.0-rc.6 → 2.0.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 (9) hide show
  1. package/cjs/DSDialog.js +24 -9
  2. package/cjs/defaultProps.js +2 -1
  3. package/cjs/styles.js +40 -30
  4. package/esm/DSDialog.js +22 -7
  5. package/esm/defaultProps.js +2 -1
  6. package/esm/styles.js +40 -30
  7. package/package.json +3 -3
  8. package/types/DSDialog.d.ts +22 -7
  9. package/types/propTypes.d.ts +17 -6
package/cjs/DSDialog.js CHANGED
@@ -2,14 +2,15 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
+ var _jsx = require('@babel/runtime/helpers/jsx');
7
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
+ require('core-js/modules/web.dom-collections.iterator.js');
5
9
  require('core-js/modules/esnext.async-iterator.filter.js');
6
10
  require('core-js/modules/esnext.iterator.constructor.js');
7
11
  require('core-js/modules/esnext.iterator.filter.js');
8
12
  require('core-js/modules/esnext.async-iterator.for-each.js');
9
13
  require('core-js/modules/esnext.iterator.for-each.js');
10
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
- var _jsx = require('@babel/runtime/helpers/jsx');
12
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
13
14
  var ReactDOM = require('react-dom');
14
15
  var react = require('react');
15
16
  var reactDesc = require('react-desc');
@@ -28,16 +29,17 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
28
29
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
29
30
  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
30
31
 
31
- var _FixedBody;
32
-
33
- const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus"];
32
+ const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
34
33
 
35
34
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
36
35
 
37
36
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
38
37
 
39
38
  const DSDialog = props => {
39
+ var _FixedBody;
40
+
40
41
  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
42
+ const [isBodyOverflow, setIsBodyOverflow] = react.useState(false);
41
43
  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
42
44
 
43
45
  const {
@@ -46,7 +48,8 @@ const DSDialog = props => {
46
48
  onClickOutside,
47
49
  centered,
48
50
  size,
49
- removeAutoFocus
51
+ removeAutoFocus,
52
+ zIndex
50
53
  } = propsWithDefault,
51
54
  rest = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
52
55
 
@@ -57,6 +60,15 @@ const DSDialog = props => {
57
60
  const handleOnKeyDown = react.useCallback(e => {
58
61
  if (e.key === 'Escape') onClickOutside();
59
62
  }, [onClickOutside]);
63
+ react.useEffect(() => {
64
+ const body = document.getElementsByTagName('body')[0];
65
+ const {
66
+ offsetHeight,
67
+ scrollHeight
68
+ } = body;
69
+ if (!isOpen) return setIsBodyOverflow(false);
70
+ return setIsBodyOverflow(offsetHeight < scrollHeight);
71
+ }, [isOpen]);
60
72
  react.useEffect(() => {
61
73
  var _containerRef$current;
62
74
 
@@ -67,8 +79,11 @@ const DSDialog = props => {
67
79
  return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
68
80
  onClick: handleOutsideClick,
69
81
  "data-portalbg": true,
70
- "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND
71
- }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {})), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
82
+ "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
83
+ zIndex: zIndex
84
+ }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
85
+ isBodyOverflow: isBodyOverflow
86
+ })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
72
87
  role: "dialog",
73
88
  "aria-modal": true,
74
89
  ref: containerRef,
package/cjs/defaultProps.js CHANGED
@@ -11,7 +11,8 @@ const defaultProps = {
11
11
  centered: false,
12
12
  size: utils.DSDialogSizes.DEFAULT,
13
13
  removeAutoFocus: false,
14
- onClickOutside: noop
14
+ onClickOutside: noop,
15
+ zIndex: 10
15
16
  };
16
17
 
17
18
  exports.defaultProps = defaultProps;
package/cjs/styles.js CHANGED
@@ -14,39 +14,49 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
14
14
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
15
 
16
16
  var _templateObject;
17
- const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n body {\n overflow: hidden;\n }\n"])));
17
+ const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
18
+ let {
19
+ isBodyOverflow
20
+ } = _ref;
21
+ return isBodyOverflow ? "padding-right: 15px !important;" : "";
22
+ });
18
23
  const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
19
24
  componentId: "sc-106vqwv-0"
20
- })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;"]);
25
+ })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
26
+ let {
27
+ zIndex
28
+ } = _ref2;
29
+ return zIndex;
30
+ });
21
31
  const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
22
32
  componentId: "sc-106vqwv-1"
23
- })(["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;}"], _ref => {
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 => {
24
34
  let {
25
35
  centered
26
- } = _ref;
36
+ } = _ref3;
27
37
  return centered ? 'auto' : '20vh auto auto auto';
28
- }, _ref2 => {
38
+ }, _ref4 => {
29
39
  let {
30
40
  size
31
- } = _ref2;
41
+ } = _ref4;
32
42
  return utils.allSizes[size];
33
- }, _ref3 => {
43
+ }, _ref5 => {
34
44
  let {
35
45
  theme
36
- } = _ref3;
46
+ } = _ref5;
37
47
  return theme.colors.neutral[500];
38
- }, _ref4 => {
48
+ }, _ref6 => {
39
49
  let {
40
50
  theme
41
- } = _ref4;
51
+ } = _ref6;
42
52
  return theme.colors.neutral['000'];
43
53
  }, styledSystem.space);
44
54
  const DSDialogTitle = /*#__PURE__*/styled__default["default"].h3.withConfig({
45
55
  componentId: "sc-106vqwv-2"
46
- })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref5 => {
56
+ })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref7 => {
47
57
  let {
48
58
  theme
49
- } = _ref5;
59
+ } = _ref7;
50
60
  return theme.fontSizes.title[700];
51
61
  });
52
62
  const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
@@ -54,33 +64,33 @@ const DSDialogAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
54
64
  })([""]);
55
65
  const DSDialogHeader = /*#__PURE__*/styled__default["default"].div.withConfig({
56
66
  componentId: "sc-106vqwv-4"
57
- })(["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;}", ""], _ref6 => {
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 => {
58
68
  let {
59
69
  theme
60
- } = _ref6;
70
+ } = _ref8;
61
71
  return theme.space.m;
62
- }, _ref7 => {
72
+ }, _ref9 => {
63
73
  let {
64
74
  theme
65
- } = _ref7;
75
+ } = _ref9;
66
76
  return theme.space.xs;
67
77
  }, DSDialogTitle, DSDialogAddon, DSDialogAddon, styledSystem.space);
68
78
  const DSDialogSeparator = /*#__PURE__*/styled__default["default"].hr.attrs(() => ({
69
79
  'aria-hidden': true
70
80
  })).withConfig({
71
81
  componentId: "sc-106vqwv-5"
72
- })(["margin:0;border-top:1px solid ", ";"], _ref8 => {
82
+ })(["margin:0;border-top:1px solid ", ";"], _ref10 => {
73
83
  let {
74
84
  theme
75
- } = _ref8;
85
+ } = _ref10;
76
86
  return theme.colors.neutral['080'];
77
87
  });
78
88
  const DSDialogBody = /*#__PURE__*/styled__default["default"].div.withConfig({
79
89
  componentId: "sc-106vqwv-6"
80
- })(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref9 => {
90
+ })(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref11 => {
81
91
  let {
82
92
  theme
83
- } = _ref9;
93
+ } = _ref11;
84
94
  return theme.space.xs;
85
95
  }, styledSystem.layout, styledSystem.space, styledSystem.flexbox);
86
96
  const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withConfig({
@@ -88,36 +98,36 @@ const DSDialogPrimaryMessage = /*#__PURE__*/styled__default["default"].h3.withCo
88
98
  })(["margin:0;"]);
89
99
  const DSDialogSecondaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
90
100
  componentId: "sc-106vqwv-8"
91
- })(["margin:0;color:", ";"], _ref10 => {
101
+ })(["margin:0;color:", ";"], _ref12 => {
92
102
  let {
93
103
  theme
94
- } = _ref10;
104
+ } = _ref12;
95
105
  return theme.colors.neutral[500];
96
106
  });
97
107
  const DSDialogDefaultLayout = /*#__PURE__*/styled__default["default"].div.withConfig({
98
108
  componentId: "sc-106vqwv-9"
99
- })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref11 => {
109
+ })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
100
110
  let {
101
111
  theme
102
- } = _ref11;
112
+ } = _ref13;
103
113
  return theme.space.xxs;
104
114
  }, DSDialogSecondaryMessage);
105
115
  const DSDialogFooter = /*#__PURE__*/styled__default["default"].div.withConfig({
106
116
  componentId: "sc-106vqwv-10"
107
- })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref12 => {
117
+ })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref14 => {
108
118
  let {
109
119
  theme
110
- } = _ref12;
120
+ } = _ref14;
111
121
  return theme.space.xxs;
112
- }, _ref13 => {
122
+ }, _ref15 => {
113
123
  let {
114
124
  theme
115
- } = _ref13;
125
+ } = _ref15;
116
126
  return theme.space.m;
117
- }, _ref14 => {
127
+ }, _ref16 => {
118
128
  let {
119
129
  theme
120
- } = _ref14;
130
+ } = _ref16;
121
131
  return theme.space.xs;
122
132
  }, styledSystem.space, styledSystem.flexbox);
123
133
 
package/esm/DSDialog.js CHANGED
@@ -6,8 +6,9 @@ import 'core-js/modules/esnext.iterator.for-each.js';
6
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
7
  import _jsx from '@babel/runtime/helpers/esm/jsx';
8
8
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
+ import 'core-js/modules/web.dom-collections.iterator.js';
9
10
  import ReactDOM from 'react-dom';
10
- import { useRef, useCallback, useEffect } from 'react';
11
+ import { useState, useRef, useCallback, useEffect } from 'react';
11
12
  import { describe } from 'react-desc';
12
13
  import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
13
14
  import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
@@ -17,16 +18,17 @@ import { getSpaceProps } from './utils.js';
17
18
  import { DSDialogDatatestid } from './DSDialogDatatestid.js';
18
19
  import { jsx } from 'react/jsx-runtime';
19
20
 
20
- var _FixedBody;
21
-
22
- const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus"];
21
+ const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
23
22
 
24
23
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
25
24
 
26
25
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
27
26
 
28
27
  const DSDialog = props => {
28
+ var _FixedBody;
29
+
29
30
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
31
+ const [isBodyOverflow, setIsBodyOverflow] = useState(false);
30
32
  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
31
33
 
32
34
  const {
@@ -35,7 +37,8 @@ const DSDialog = props => {
35
37
  onClickOutside,
36
38
  centered,
37
39
  size,
38
- removeAutoFocus
40
+ removeAutoFocus,
41
+ zIndex
39
42
  } = propsWithDefault,
40
43
  rest = _objectWithoutProperties(propsWithDefault, _excluded);
41
44
 
@@ -46,6 +49,15 @@ const DSDialog = props => {
46
49
  const handleOnKeyDown = useCallback(e => {
47
50
  if (e.key === 'Escape') onClickOutside();
48
51
  }, [onClickOutside]);
52
+ useEffect(() => {
53
+ const body = document.getElementsByTagName('body')[0];
54
+ const {
55
+ offsetHeight,
56
+ scrollHeight
57
+ } = body;
58
+ if (!isOpen) return setIsBodyOverflow(false);
59
+ return setIsBodyOverflow(offsetHeight < scrollHeight);
60
+ }, [isOpen]);
49
61
  useEffect(() => {
50
62
  var _containerRef$current;
51
63
 
@@ -56,8 +68,11 @@ const DSDialog = props => {
56
68
  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
57
69
  onClick: handleOutsideClick,
58
70
  "data-portalbg": true,
59
- "data-testid": DSDialogDatatestid.BACKGROUND
60
- }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {})), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
71
+ "data-testid": DSDialogDatatestid.BACKGROUND,
72
+ zIndex: zIndex
73
+ }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
74
+ isBodyOverflow: isBodyOverflow
75
+ })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
61
76
  role: "dialog",
62
77
  "aria-modal": true,
63
78
  ref: containerRef,
package/esm/defaultProps.js CHANGED
@@ -7,7 +7,8 @@ const defaultProps = {
7
7
  centered: false,
8
8
  size: DSDialogSizes.DEFAULT,
9
9
  removeAutoFocus: false,
10
- onClickOutside: noop
10
+ onClickOutside: noop,
11
+ zIndex: 10
11
12
  };
12
13
 
13
14
  export { defaultProps };
package/esm/styles.js CHANGED
@@ -5,39 +5,49 @@ import { space, layout, flexbox } from 'styled-system';
5
5
  import { allSizes } from './utils.js';
6
6
 
7
7
  var _templateObject;
8
- const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n body {\n overflow: hidden;\n }\n"])));
8
+ const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n body {\n overflow: hidden;\n \n ", "\n }\n"])), _ref => {
9
+ let {
10
+ isBodyOverflow
11
+ } = _ref;
12
+ return isBodyOverflow ? "padding-right: 15px !important;" : "";
13
+ });
9
14
  const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
10
15
  componentId: "sc-106vqwv-0"
11
- })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;"]);
16
+ })(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
17
+ let {
18
+ zIndex
19
+ } = _ref2;
20
+ return zIndex;
21
+ });
12
22
  const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
13
23
  componentId: "sc-106vqwv-1"
14
- })(["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;}"], _ref => {
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 => {
15
25
  let {
16
26
  centered
17
- } = _ref;
27
+ } = _ref3;
18
28
  return centered ? 'auto' : '20vh auto auto auto';
19
- }, _ref2 => {
29
+ }, _ref4 => {
20
30
  let {
21
31
  size
22
- } = _ref2;
32
+ } = _ref4;
23
33
  return allSizes[size];
24
- }, _ref3 => {
34
+ }, _ref5 => {
25
35
  let {
26
36
  theme
27
- } = _ref3;
37
+ } = _ref5;
28
38
  return theme.colors.neutral[500];
29
- }, _ref4 => {
39
+ }, _ref6 => {
30
40
  let {
31
41
  theme
32
- } = _ref4;
42
+ } = _ref6;
33
43
  return theme.colors.neutral['000'];
34
44
  }, space);
35
45
  const DSDialogTitle = /*#__PURE__*/styled.h3.withConfig({
36
46
  componentId: "sc-106vqwv-2"
37
- })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref5 => {
47
+ })(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;"], _ref7 => {
38
48
  let {
39
49
  theme
40
- } = _ref5;
50
+ } = _ref7;
41
51
  return theme.fontSizes.title[700];
42
52
  });
43
53
  const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
@@ -45,33 +55,33 @@ const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
45
55
  })([""]);
46
56
  const DSDialogHeader = /*#__PURE__*/styled.div.withConfig({
47
57
  componentId: "sc-106vqwv-4"
48
- })(["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;}", ""], _ref6 => {
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 => {
49
59
  let {
50
60
  theme
51
- } = _ref6;
61
+ } = _ref8;
52
62
  return theme.space.m;
53
- }, _ref7 => {
63
+ }, _ref9 => {
54
64
  let {
55
65
  theme
56
- } = _ref7;
66
+ } = _ref9;
57
67
  return theme.space.xs;
58
68
  }, DSDialogTitle, DSDialogAddon, DSDialogAddon, space);
59
69
  const DSDialogSeparator = /*#__PURE__*/styled.hr.attrs(() => ({
60
70
  'aria-hidden': true
61
71
  })).withConfig({
62
72
  componentId: "sc-106vqwv-5"
63
- })(["margin:0;border-top:1px solid ", ";"], _ref8 => {
73
+ })(["margin:0;border-top:1px solid ", ";"], _ref10 => {
64
74
  let {
65
75
  theme
66
- } = _ref8;
76
+ } = _ref10;
67
77
  return theme.colors.neutral['080'];
68
78
  });
69
79
  const DSDialogBody = /*#__PURE__*/styled.div.withConfig({
70
80
  componentId: "sc-106vqwv-6"
71
- })(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref9 => {
81
+ })(["padding:", ";overflow-y:auto;", " ", " ", ""], _ref11 => {
72
82
  let {
73
83
  theme
74
- } = _ref9;
84
+ } = _ref11;
75
85
  return theme.space.xs;
76
86
  }, layout, space, flexbox);
77
87
  const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
@@ -79,36 +89,36 @@ const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
79
89
  })(["margin:0;"]);
80
90
  const DSDialogSecondaryMessage = /*#__PURE__*/styled.p.withConfig({
81
91
  componentId: "sc-106vqwv-8"
82
- })(["margin:0;color:", ";"], _ref10 => {
92
+ })(["margin:0;color:", ";"], _ref12 => {
83
93
  let {
84
94
  theme
85
- } = _ref10;
95
+ } = _ref12;
86
96
  return theme.colors.neutral[500];
87
97
  });
88
98
  const DSDialogDefaultLayout = /*#__PURE__*/styled.div.withConfig({
89
99
  componentId: "sc-106vqwv-9"
90
- })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref11 => {
100
+ })(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
91
101
  let {
92
102
  theme
93
- } = _ref11;
103
+ } = _ref13;
94
104
  return theme.space.xxs;
95
105
  }, DSDialogSecondaryMessage);
96
106
  const DSDialogFooter = /*#__PURE__*/styled.div.withConfig({
97
107
  componentId: "sc-106vqwv-10"
98
- })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref12 => {
108
+ })(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", ""], _ref14 => {
99
109
  let {
100
110
  theme
101
- } = _ref12;
111
+ } = _ref14;
102
112
  return theme.space.xxs;
103
- }, _ref13 => {
113
+ }, _ref15 => {
104
114
  let {
105
115
  theme
106
- } = _ref13;
116
+ } = _ref15;
107
117
  return theme.space.m;
108
- }, _ref14 => {
118
+ }, _ref16 => {
109
119
  let {
110
120
  theme
111
- } = _ref14;
121
+ } = _ref16;
112
122
  return theme.space.xs;
113
123
  }, space, flexbox);
114
124
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dialog",
3
- "version": "2.0.0-rc.6",
3
+ "version": "2.0.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Dialog",
6
6
  "module": "./esm/index.js",
@@ -64,8 +64,8 @@
64
64
  "build": "node ../../scripts/build/build.js"
65
65
  },
66
66
  "dependencies": {
67
- "@elliemae/ds-props-helpers": "2.0.0-rc.6",
68
- "@elliemae/ds-system": "2.0.0-rc.6",
67
+ "@elliemae/ds-props-helpers": "2.0.0",
68
+ "@elliemae/ds-system": "2.0.0",
69
69
  "react-desc": "~4.1.3",
70
70
  "styled-system": "~5.1.5"
71
71
  },
package/types/DSDialog.d.ts CHANGED
@@ -1,15 +1,30 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  import React from 'react';
2
3
  import type { DSDialogPropsT } from './DSDialogTypes';
3
4
  declare const DSDialog: {
4
5
  (props: DSDialogPropsT): React.ReactNode;
5
6
  propTypes: {
6
- isOpen: any;
7
- children: any;
8
- centered: any;
9
- size: any;
10
- removeAutoFocus: any;
11
- onClickOutside: any;
7
+ isOpen: {
8
+ deprecated: import("react-desc").PropTypesDescValidator;
9
+ };
10
+ children: import("react-desc").PropTypesDescValidator;
11
+ centered: {
12
+ deprecated: import("react-desc").PropTypesDescValidator;
13
+ };
14
+ size: {
15
+ deprecated: import("react-desc").PropTypesDescValidator;
16
+ };
17
+ removeAutoFocus: {
18
+ deprecated: import("react-desc").PropTypesDescValidator;
19
+ };
20
+ onClickOutside: {
21
+ deprecated: import("react-desc").PropTypesDescValidator;
22
+ };
12
23
  };
13
24
  };
14
- declare const DSDialogWithSchema: any;
25
+ declare const DSDialogWithSchema: {
26
+ (props?: DSDialogPropsT | undefined): JSX.Element;
27
+ propTypes: unknown;
28
+ toTypescript: () => import("react-desc").TypescriptSchema;
29
+ };
15
30
  export { DSDialog, DSDialogWithSchema };
package/types/propTypes.d.ts CHANGED
@@ -1,8 +1,19 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const propTypes: {
2
- isOpen: any;
3
- children: any;
4
- centered: any;
5
- size: any;
6
- removeAutoFocus: any;
7
- onClickOutside: any;
3
+ isOpen: {
4
+ deprecated: import("react-desc").PropTypesDescValidator;
5
+ };
6
+ children: import("react-desc").PropTypesDescValidator;
7
+ centered: {
8
+ deprecated: import("react-desc").PropTypesDescValidator;
9
+ };
10
+ size: {
11
+ deprecated: import("react-desc").PropTypesDescValidator;
12
+ };
13
+ removeAutoFocus: {
14
+ deprecated: import("react-desc").PropTypesDescValidator;
15
+ };
16
+ onClickOutside: {
17
+ deprecated: import("react-desc").PropTypesDescValidator;
18
+ };
8
19
  };