@elliemae/ds-dialog 2.2.0-beta.0 → 2.2.0-next.4

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