@elliemae/ds-dialog 2.2.0-next.4 → 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 (16) hide show
  1. package/cjs/DSDialog.js +17 -6
  2. package/cjs/{DSDialogInternalTypes.d.js → DSDialogInternalTypes.js} +0 -0
  3. package/cjs/propTypes.js +9 -9
  4. package/cjs/styles.js +45 -21
  5. package/esm/DSDialog.js +17 -6
  6. package/esm/{DSDialogInternalTypes.d.js → DSDialogInternalTypes.js} +0 -0
  7. package/esm/propTypes.js +5 -5
  8. package/esm/styles.js +40 -16
  9. package/package.json +6 -6
  10. package/types/DSDialog.d.ts +2 -2190
  11. package/types/DSDialogInternalTypes.d.ts +25 -0
  12. package/types/DSDialogTypes.d.ts +1 -0
  13. package/types/index.d.ts +9 -108
  14. package/types/propTypes.d.ts +2 -2182
  15. package/types/styles.d.ts +12 -12
  16. package/types/utils.d.ts +6 -6
package/cjs/DSDialog.js CHANGED
@@ -13,7 +13,6 @@ require('core-js/modules/esnext.async-iterator.for-each.js');
13
13
  require('core-js/modules/esnext.iterator.for-each.js');
14
14
  var ReactDOM = require('react-dom');
15
15
  var react = require('react');
16
- var reactDesc = require('react-desc');
17
16
  var dsPropsHelpers = require('@elliemae/ds-props-helpers');
18
17
  var styles = require('./styles.js');
19
18
  var propTypes = require('./propTypes.js');
@@ -39,7 +38,10 @@ const DSDialog = props => {
39
38
  var _FixedBody;
40
39
 
41
40
  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
42
- const [isBodyOverflow, setIsBodyOverflow] = react.useState(false);
41
+ const [bodyInfo, setBodyInfo] = react.useState({
42
+ overflow: false,
43
+ padding: '0px'
44
+ });
43
45
  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
44
46
 
45
47
  const {
@@ -61,13 +63,22 @@ const DSDialog = props => {
61
63
  if (e.key === 'Escape') onClickOutside();
62
64
  }, [onClickOutside]);
63
65
  react.useEffect(() => {
66
+ var _window$getComputedSt;
67
+
64
68
  const body = document.getElementsByTagName('body')[0];
65
69
  const {
66
70
  offsetHeight,
67
71
  scrollHeight
68
72
  } = body;
69
- if (!isOpen) return setIsBodyOverflow(false);
70
- 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
+ });
71
82
  }, [isOpen]);
72
83
  react.useEffect(() => {
73
84
  var _containerRef$current;
@@ -86,7 +97,7 @@ const DSDialog = props => {
86
97
  zIndex: zIndex
87
98
  }, globalAttributes), {}, {
88
99
  children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
89
- isBodyOverflow: isBodyOverflow
100
+ bodyInfo: bodyInfo
90
101
  })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
91
102
  role: "dialog",
92
103
  "aria-modal": true,
@@ -105,7 +116,7 @@ const DSDialog = props => {
105
116
  return null;
106
117
  };
107
118
 
108
- const DSDialogWithSchema = reactDesc.describe(DSDialog);
119
+ const DSDialogWithSchema = dsPropsHelpers.describe(DSDialog);
109
120
  DSDialogWithSchema.propTypes = propTypes.propTypes;
110
121
 
111
122
  exports.DSDialog = DSDialog;
package/cjs/propTypes.js CHANGED
@@ -8,7 +8,6 @@ require('core-js/modules/esnext.iterator.filter.js');
8
8
  require('core-js/modules/esnext.async-iterator.for-each.js');
9
9
  require('core-js/modules/esnext.iterator.for-each.js');
10
10
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
- var reactDesc = require('react-desc');
12
11
  var dsPropsHelpers = require('@elliemae/ds-props-helpers');
13
12
  var utils = require('./utils.js');
14
13
 
@@ -19,13 +18,14 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
19
18
  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
19
 
21
20
  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),
24
- children: reactDesc.PropTypes.node.description('Nested components.').isRequired,
25
- centered: reactDesc.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
26
- size: reactDesc.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT),
27
- 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
- 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);
21
+ const propTypes = _objectSpread(_objectSpread({
22
+ isOpen: dsPropsHelpers.PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
23
+ children: dsPropsHelpers.PropTypes.node.description('Nested components.').isRequired,
24
+ centered: dsPropsHelpers.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
25
+ removeAutoFocus: dsPropsHelpers.PropTypes.bool.description('Removes focus in the Dialog container when is open. If you want to focus an specific element in the Dialog, it should be set to true.').defaultValue(false),
26
+ onClickOutside: dsPropsHelpers.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(() => {})
27
+ }, dsPropsHelpers.globalAttributesPropTypes), {}, {
28
+ size: dsPropsHelpers.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT)
29
+ });
30
30
 
31
31
  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
@@ -9,8 +9,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
9
9
  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
- import { describe } from 'react-desc';
13
- import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
12
+ import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
14
13
  import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
15
14
  import { propTypes } from './propTypes.js';
16
15
  import { defaultProps } from './defaultProps.js';
@@ -28,7 +27,10 @@ const DSDialog = props => {
28
27
  var _FixedBody;
29
28
 
30
29
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
31
- const [isBodyOverflow, setIsBodyOverflow] = useState(false);
30
+ const [bodyInfo, setBodyInfo] = useState({
31
+ overflow: false,
32
+ padding: '0px'
33
+ });
32
34
  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
33
35
 
34
36
  const {
@@ -50,13 +52,22 @@ const DSDialog = props => {
50
52
  if (e.key === 'Escape') onClickOutside();
51
53
  }, [onClickOutside]);
52
54
  useEffect(() => {
55
+ var _window$getComputedSt;
56
+
53
57
  const body = document.getElementsByTagName('body')[0];
54
58
  const {
55
59
  offsetHeight,
56
60
  scrollHeight
57
61
  } = body;
58
- if (!isOpen) return setIsBodyOverflow(false);
59
- 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
+ });
60
71
  }, [isOpen]);
61
72
  useEffect(() => {
62
73
  var _containerRef$current;
@@ -75,7 +86,7 @@ const DSDialog = props => {
75
86
  zIndex: zIndex
76
87
  }, globalAttributes), {}, {
77
88
  children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
78
- isBodyOverflow: isBodyOverflow
89
+ bodyInfo: bodyInfo
79
90
  })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
80
91
  role: "dialog",
81
92
  "aria-modal": true,
package/esm/propTypes.js CHANGED
@@ -4,20 +4,20 @@ import 'core-js/modules/esnext.iterator.filter.js';
4
4
  import 'core-js/modules/esnext.async-iterator.for-each.js';
5
5
  import 'core-js/modules/esnext.iterator.for-each.js';
6
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import { PropTypes } from 'react-desc';
8
- import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
7
+ import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
9
8
  import { DSDialogSizesArrayValues, DSDialogSizes } from './utils.js';
10
9
 
11
10
  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
11
 
13
12
  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({
13
+ const propTypes = _objectSpread(_objectSpread({
15
14
  isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
16
15
  children: PropTypes.node.description('Nested components.').isRequired,
17
16
  centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
18
- size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT),
19
17
  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
18
  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);
19
+ }, globalAttributesPropTypes), {}, {
20
+ size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT)
21
+ });
22
22
 
23
23
  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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dialog",
3
- "version": "2.2.0-next.4",
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.4",
68
- "@elliemae/ds-system": "2.2.0-next.4",
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
  },