@elliemae/ds-dialog 2.0.0-rc.4 → 2.0.0-rc.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.
- package/cjs/DSDialog.js +5 -2
- package/cjs/DSDialogDatatestid.js +10 -0
- package/cjs/{types/index.d.js → DSDialogInternalTypes.d.js} +0 -0
- package/cjs/DSDialogTypes.js +2 -0
- package/cjs/defaultProps.js +6 -2
- package/cjs/index.js +4 -0
- package/cjs/propTypes.js +2 -0
- package/cjs/styles.js +3 -10
- package/cjs/utils.js +20 -0
- package/esm/DSDialog.js +5 -2
- package/esm/DSDialogDatatestid.js +6 -0
- package/esm/{types/index.d.js → DSDialogInternalTypes.d.js} +0 -0
- package/esm/DSDialogTypes.js +1 -0
- package/esm/defaultProps.js +6 -2
- package/esm/index.js +2 -0
- package/esm/propTypes.js +2 -0
- package/esm/styles.js +2 -9
- package/esm/utils.js +18 -1
- package/package.json +15 -7
- package/types/DSDialog.d.ts +23 -7
- package/types/DSDialogDatatestid.d.ts +4 -0
- package/types/DSDialogTypes.d.ts +10 -0
- package/types/defaultProps.d.ts +2 -2
- package/types/index.d.ts +2 -0
- package/types/propTypes.d.ts +17 -5
- package/types/styles.d.ts +12 -12
- package/types/utils.d.ts +18 -1
- package/types/types/index.d.d.ts +0 -16
package/cjs/DSDialog.js
CHANGED
|
@@ -18,6 +18,7 @@ var styles = require('./styles.js');
|
|
|
18
18
|
var propTypes = require('./propTypes.js');
|
|
19
19
|
var defaultProps = require('./defaultProps.js');
|
|
20
20
|
var utils = require('./utils.js');
|
|
21
|
+
var DSDialogDatatestid = require('./DSDialogDatatestid.js');
|
|
21
22
|
var jsxRuntime = require('react/jsx-runtime');
|
|
22
23
|
|
|
23
24
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -37,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
37
38
|
|
|
38
39
|
const DSDialog = props => {
|
|
39
40
|
const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
|
|
40
|
-
dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault,
|
|
41
|
+
dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
|
|
41
42
|
|
|
42
43
|
const {
|
|
43
44
|
children,
|
|
@@ -65,7 +66,8 @@ const DSDialog = props => {
|
|
|
65
66
|
if (isOpen) {
|
|
66
67
|
return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
|
|
67
68
|
onClick: handleOutsideClick,
|
|
68
|
-
"data-portalbg": true
|
|
69
|
+
"data-portalbg": true,
|
|
70
|
+
"data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND
|
|
69
71
|
}, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {})), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
|
|
70
72
|
role: "dialog",
|
|
71
73
|
"aria-modal": true,
|
|
@@ -75,6 +77,7 @@ const DSDialog = props => {
|
|
|
75
77
|
}, utils.getSpaceProps(rest)), {}, {
|
|
76
78
|
size: size,
|
|
77
79
|
centered: centered,
|
|
80
|
+
"data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
|
|
78
81
|
children: children
|
|
79
82
|
}))), document.getElementsByTagName('body')[0]);
|
|
80
83
|
}
|
|
File without changes
|
package/cjs/defaultProps.js
CHANGED
|
@@ -2,12 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var utils = require('./utils.js');
|
|
6
|
+
|
|
7
|
+
const noop = () => {};
|
|
8
|
+
|
|
5
9
|
const defaultProps = {
|
|
6
10
|
isOpen: false,
|
|
7
11
|
centered: false,
|
|
8
|
-
size:
|
|
12
|
+
size: utils.DSDialogSizes.DEFAULT,
|
|
9
13
|
removeAutoFocus: false,
|
|
10
|
-
onClickOutside:
|
|
14
|
+
onClickOutside: noop
|
|
11
15
|
};
|
|
12
16
|
|
|
13
17
|
exports.defaultProps = defaultProps;
|
package/cjs/index.js
CHANGED
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var DSDialog = require('./DSDialog.js');
|
|
6
|
+
var DSDialogDatatestid = require('./DSDialogDatatestid.js');
|
|
7
|
+
var utils = require('./utils.js');
|
|
6
8
|
var styles = require('./styles.js');
|
|
7
9
|
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
exports.DSDialog = DSDialog.DSDialog;
|
|
11
13
|
exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
|
|
14
|
+
exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
|
|
15
|
+
exports.DSDialogSizes = utils.DSDialogSizes;
|
|
12
16
|
exports.DSDialogAddon = styles.DSDialogAddon;
|
|
13
17
|
exports.DSDialogBody = styles.DSDialogBody;
|
|
14
18
|
exports.DSDialogDefaultLayout = styles.DSDialogDefaultLayout;
|
package/cjs/propTypes.js
CHANGED
|
@@ -3,12 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var reactDesc = require('react-desc');
|
|
6
|
+
var utils = require('./utils.js');
|
|
6
7
|
|
|
7
8
|
/* eslint-disable max-len */
|
|
8
9
|
const propTypes = {
|
|
9
10
|
isOpen: reactDesc.PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
|
|
10
11
|
children: reactDesc.PropTypes.node.description('Nested components.').isRequired,
|
|
11
12
|
centered: reactDesc.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
|
|
13
|
+
size: reactDesc.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT),
|
|
12
14
|
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),
|
|
13
15
|
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(() => {})
|
|
14
16
|
};
|
package/cjs/styles.js
CHANGED
|
@@ -6,6 +6,7 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
|
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var dsSystem = require('@elliemae/ds-system');
|
|
8
8
|
var styledSystem = require('styled-system');
|
|
9
|
+
var utils = require('./utils.js');
|
|
9
10
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
@@ -13,21 +14,13 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
|
|
|
13
14
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
15
|
|
|
15
16
|
var _templateObject;
|
|
16
|
-
const allSizes = {
|
|
17
|
-
default: '576px',
|
|
18
|
-
small: '320px',
|
|
19
|
-
medium: '656px',
|
|
20
|
-
large: '848px',
|
|
21
|
-
'x-large': '1042px',
|
|
22
|
-
'xx-large': '1440px'
|
|
23
|
-
};
|
|
24
17
|
const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n body {\n overflow: hidden;\n }\n"])));
|
|
25
18
|
const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
26
19
|
componentId: "sc-106vqwv-0"
|
|
27
20
|
})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;"]);
|
|
28
21
|
const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
29
22
|
componentId: "sc-106vqwv-1"
|
|
30
|
-
})(["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:
|
|
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 => {
|
|
31
24
|
let {
|
|
32
25
|
centered
|
|
33
26
|
} = _ref;
|
|
@@ -36,7 +29,7 @@ const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withCo
|
|
|
36
29
|
let {
|
|
37
30
|
size
|
|
38
31
|
} = _ref2;
|
|
39
|
-
return allSizes[size];
|
|
32
|
+
return utils.allSizes[size];
|
|
40
33
|
}, _ref3 => {
|
|
41
34
|
let {
|
|
42
35
|
theme
|
package/cjs/utils.js
CHANGED
|
@@ -11,5 +11,25 @@ const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_
|
|
|
11
11
|
let [key] = _ref;
|
|
12
12
|
return /^[pm][xytblr]?$/.exec(key);
|
|
13
13
|
}));
|
|
14
|
+
const DSDialogSizes = {
|
|
15
|
+
DEFAULT: 'default',
|
|
16
|
+
SMALL: 'small',
|
|
17
|
+
MEDIUM: 'medium',
|
|
18
|
+
LARGE: 'large',
|
|
19
|
+
XLARGE: 'x-large',
|
|
20
|
+
XXLARGE: 'xx-large'
|
|
21
|
+
};
|
|
22
|
+
const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
|
|
23
|
+
const allSizes = {
|
|
24
|
+
default: '576px',
|
|
25
|
+
small: '320px',
|
|
26
|
+
medium: '656px',
|
|
27
|
+
large: '848px',
|
|
28
|
+
'x-large': '1042px',
|
|
29
|
+
'xx-large': '1440px'
|
|
30
|
+
};
|
|
14
31
|
|
|
32
|
+
exports.DSDialogSizes = DSDialogSizes;
|
|
33
|
+
exports.DSDialogSizesArrayValues = DSDialogSizesArrayValues;
|
|
34
|
+
exports.allSizes = allSizes;
|
|
15
35
|
exports.getSpaceProps = getSpaceProps;
|
package/esm/DSDialog.js
CHANGED
|
@@ -14,6 +14,7 @@ import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styl
|
|
|
14
14
|
import { propTypes } from './propTypes.js';
|
|
15
15
|
import { defaultProps } from './defaultProps.js';
|
|
16
16
|
import { getSpaceProps } from './utils.js';
|
|
17
|
+
import { DSDialogDatatestid } from './DSDialogDatatestid.js';
|
|
17
18
|
import { jsx } from 'react/jsx-runtime';
|
|
18
19
|
|
|
19
20
|
var _FixedBody;
|
|
@@ -26,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
26
27
|
|
|
27
28
|
const DSDialog = props => {
|
|
28
29
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
29
|
-
useValidateTypescriptPropTypes(propsWithDefault,
|
|
30
|
+
useValidateTypescriptPropTypes(propsWithDefault, propTypes);
|
|
30
31
|
|
|
31
32
|
const {
|
|
32
33
|
children,
|
|
@@ -54,7 +55,8 @@ const DSDialog = props => {
|
|
|
54
55
|
if (isOpen) {
|
|
55
56
|
return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
|
|
56
57
|
onClick: handleOutsideClick,
|
|
57
|
-
"data-portalbg": true
|
|
58
|
+
"data-portalbg": true,
|
|
59
|
+
"data-testid": DSDialogDatatestid.BACKGROUND
|
|
58
60
|
}, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {})), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
|
|
59
61
|
role: "dialog",
|
|
60
62
|
"aria-modal": true,
|
|
@@ -64,6 +66,7 @@ const DSDialog = props => {
|
|
|
64
66
|
}, getSpaceProps(rest)), {}, {
|
|
65
67
|
size: size,
|
|
66
68
|
centered: centered,
|
|
69
|
+
"data-testid": DSDialogDatatestid.CONTAINER,
|
|
67
70
|
children: children
|
|
68
71
|
}))), document.getElementsByTagName('body')[0]);
|
|
69
72
|
}
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/esm/defaultProps.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
+
import { DSDialogSizes } from './utils.js';
|
|
2
|
+
|
|
3
|
+
const noop = () => {};
|
|
4
|
+
|
|
1
5
|
const defaultProps = {
|
|
2
6
|
isOpen: false,
|
|
3
7
|
centered: false,
|
|
4
|
-
size:
|
|
8
|
+
size: DSDialogSizes.DEFAULT,
|
|
5
9
|
removeAutoFocus: false,
|
|
6
|
-
onClickOutside:
|
|
10
|
+
onClickOutside: noop
|
|
7
11
|
};
|
|
8
12
|
|
|
9
13
|
export { defaultProps };
|
package/esm/index.js
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
|
|
2
|
+
export { DSDialogDatatestid } from './DSDialogDatatestid.js';
|
|
3
|
+
export { DSDialogSizes } from './utils.js';
|
|
2
4
|
export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
|
package/esm/propTypes.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { PropTypes } from 'react-desc';
|
|
2
|
+
import { DSDialogSizesArrayValues, DSDialogSizes } from './utils.js';
|
|
2
3
|
|
|
3
4
|
/* eslint-disable max-len */
|
|
4
5
|
const propTypes = {
|
|
5
6
|
isOpen: PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
|
|
6
7
|
children: PropTypes.node.description('Nested components.').isRequired,
|
|
7
8
|
centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
|
|
9
|
+
size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT),
|
|
8
10
|
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),
|
|
9
11
|
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(() => {})
|
|
10
12
|
};
|
package/esm/styles.js
CHANGED
|
@@ -2,23 +2,16 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { createGlobalStyle } from '@elliemae/ds-system';
|
|
4
4
|
import { space, layout, flexbox } from 'styled-system';
|
|
5
|
+
import { allSizes } from './utils.js';
|
|
5
6
|
|
|
6
7
|
var _templateObject;
|
|
7
|
-
const allSizes = {
|
|
8
|
-
default: '576px',
|
|
9
|
-
small: '320px',
|
|
10
|
-
medium: '656px',
|
|
11
|
-
large: '848px',
|
|
12
|
-
'x-large': '1042px',
|
|
13
|
-
'xx-large': '1440px'
|
|
14
|
-
};
|
|
15
8
|
const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n body {\n overflow: hidden;\n }\n"])));
|
|
16
9
|
const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
|
|
17
10
|
componentId: "sc-106vqwv-0"
|
|
18
11
|
})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;"]);
|
|
19
12
|
const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
|
|
20
13
|
componentId: "sc-106vqwv-1"
|
|
21
|
-
})(["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:
|
|
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 => {
|
|
22
15
|
let {
|
|
23
16
|
centered
|
|
24
17
|
} = _ref;
|
package/esm/utils.js
CHANGED
|
@@ -7,5 +7,22 @@ const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_
|
|
|
7
7
|
let [key] = _ref;
|
|
8
8
|
return /^[pm][xytblr]?$/.exec(key);
|
|
9
9
|
}));
|
|
10
|
+
const DSDialogSizes = {
|
|
11
|
+
DEFAULT: 'default',
|
|
12
|
+
SMALL: 'small',
|
|
13
|
+
MEDIUM: 'medium',
|
|
14
|
+
LARGE: 'large',
|
|
15
|
+
XLARGE: 'x-large',
|
|
16
|
+
XXLARGE: 'xx-large'
|
|
17
|
+
};
|
|
18
|
+
const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
|
|
19
|
+
const allSizes = {
|
|
20
|
+
default: '576px',
|
|
21
|
+
small: '320px',
|
|
22
|
+
medium: '656px',
|
|
23
|
+
large: '848px',
|
|
24
|
+
'x-large': '1042px',
|
|
25
|
+
'xx-large': '1440px'
|
|
26
|
+
};
|
|
10
27
|
|
|
11
|
-
export { getSpaceProps };
|
|
28
|
+
export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dialog",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Dialog",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -15,10 +15,6 @@
|
|
|
15
15
|
"import": "./esm/utils.js",
|
|
16
16
|
"require": "./cjs/utils.js"
|
|
17
17
|
},
|
|
18
|
-
"./types": {
|
|
19
|
-
"import": "./esm/types/index.d.js",
|
|
20
|
-
"require": "./cjs/types/index.d.js"
|
|
21
|
-
},
|
|
22
18
|
"./styles": {
|
|
23
19
|
"import": "./esm/styles.js",
|
|
24
20
|
"require": "./cjs/styles.js"
|
|
@@ -27,6 +23,18 @@
|
|
|
27
23
|
"import": "./esm/propTypes.js",
|
|
28
24
|
"require": "./cjs/propTypes.js"
|
|
29
25
|
},
|
|
26
|
+
"./DSDialogTypes": {
|
|
27
|
+
"import": "./esm/DSDialogTypes.js",
|
|
28
|
+
"require": "./cjs/DSDialogTypes.js"
|
|
29
|
+
},
|
|
30
|
+
"./DSDialogInternalTypes.d": {
|
|
31
|
+
"import": "./esm/DSDialogInternalTypes.d.js",
|
|
32
|
+
"require": "./cjs/DSDialogInternalTypes.d.js"
|
|
33
|
+
},
|
|
34
|
+
"./DSDialogDatatestid": {
|
|
35
|
+
"import": "./esm/DSDialogDatatestid.js",
|
|
36
|
+
"require": "./cjs/DSDialogDatatestid.js"
|
|
37
|
+
},
|
|
30
38
|
"./DSDialog": {
|
|
31
39
|
"import": "./esm/DSDialog.js",
|
|
32
40
|
"require": "./cjs/DSDialog.js"
|
|
@@ -56,8 +64,8 @@
|
|
|
56
64
|
"build": "node ../../scripts/build/build.js"
|
|
57
65
|
},
|
|
58
66
|
"dependencies": {
|
|
59
|
-
"@elliemae/ds-props-helpers": "2.0.0-rc.
|
|
60
|
-
"@elliemae/ds-system": "2.0.0-rc.
|
|
67
|
+
"@elliemae/ds-props-helpers": "2.0.0-rc.8",
|
|
68
|
+
"@elliemae/ds-system": "2.0.0-rc.8",
|
|
61
69
|
"react-desc": "~4.1.3",
|
|
62
70
|
"styled-system": "~5.1.5"
|
|
63
71
|
},
|
package/types/DSDialog.d.ts
CHANGED
|
@@ -1,14 +1,30 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type { DSDialogPropsT } from './
|
|
3
|
+
import type { DSDialogPropsT } from './DSDialogTypes';
|
|
3
4
|
declare const DSDialog: {
|
|
4
5
|
(props: DSDialogPropsT): React.ReactNode;
|
|
5
6
|
propTypes: {
|
|
6
|
-
isOpen:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
+
};
|
|
11
23
|
};
|
|
12
24
|
};
|
|
13
|
-
declare const DSDialogWithSchema:
|
|
25
|
+
declare const DSDialogWithSchema: {
|
|
26
|
+
(props?: DSDialogPropsT | undefined): JSX.Element;
|
|
27
|
+
propTypes: unknown;
|
|
28
|
+
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
29
|
+
};
|
|
14
30
|
export { DSDialog, DSDialogWithSchema };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
|
|
3
|
+
export interface DSDialogPropsT {
|
|
4
|
+
isOpen?: boolean;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
onClickOutside?: () => void;
|
|
7
|
+
size?: Sizes;
|
|
8
|
+
centered?: boolean;
|
|
9
|
+
removeAutoFocus?: boolean;
|
|
10
|
+
}
|
package/types/defaultProps.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare const defaultProps:
|
|
1
|
+
import type { DSDialogDefaultPropsT } from './DSDialogInternalTypes';
|
|
2
|
+
export declare const defaultProps: DSDialogDefaultPropsT;
|
package/types/index.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
export * from './DSDialog';
|
|
2
|
+
export * from './DSDialogDatatestid';
|
|
3
|
+
export { DSDialogSizes } from './utils';
|
|
2
4
|
export { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage, } from './styles';
|
package/types/propTypes.d.ts
CHANGED
|
@@ -1,7 +1,19 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
1
2
|
export declare const propTypes: {
|
|
2
|
-
isOpen:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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
|
+
};
|
|
7
19
|
};
|
package/types/styles.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import type { StyledDialogContainerT } from './
|
|
1
|
+
import type { StyledDialogContainerT } from './DSDialogInternalTypes';
|
|
2
2
|
export declare const FixedBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
|
|
3
|
-
export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div",
|
|
4
|
-
export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div",
|
|
5
|
-
export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3",
|
|
6
|
-
export declare const DSDialogAddon: import("styled-components").StyledComponent<"div",
|
|
7
|
-
export declare const DSDialogHeader: import("styled-components").StyledComponent<"div",
|
|
8
|
-
export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr",
|
|
3
|
+
export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogContainerT, never>;
|
|
5
|
+
export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, {
|
|
9
9
|
'aria-hidden': true;
|
|
10
10
|
}, "aria-hidden">;
|
|
11
|
-
export declare const DSDialogBody: import("styled-components").StyledComponent<"div",
|
|
12
|
-
export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3",
|
|
13
|
-
export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p",
|
|
14
|
-
export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div",
|
|
15
|
-
export declare const DSDialogFooter: import("styled-components").StyledComponent<"div",
|
|
11
|
+
export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
+
export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
+
export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
|
|
14
|
+
export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
15
|
+
export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
package/types/utils.d.ts
CHANGED
|
@@ -1,2 +1,19 @@
|
|
|
1
|
-
import type { GetSpaceArgsT } from './
|
|
1
|
+
import type { GetSpaceArgsT } from './DSDialogInternalTypes';
|
|
2
2
|
export declare const getSpaceProps: (props: GetSpaceArgsT) => GetSpaceArgsT;
|
|
3
|
+
export declare const DSDialogSizes: {
|
|
4
|
+
readonly DEFAULT: "default";
|
|
5
|
+
readonly SMALL: "small";
|
|
6
|
+
readonly MEDIUM: "medium";
|
|
7
|
+
readonly LARGE: "large";
|
|
8
|
+
readonly XLARGE: "x-large";
|
|
9
|
+
readonly XXLARGE: "xx-large";
|
|
10
|
+
};
|
|
11
|
+
export declare const DSDialogSizesArrayValues: ("default" | "small" | "medium" | "large" | "x-large" | "xx-large")[];
|
|
12
|
+
export declare const allSizes: {
|
|
13
|
+
default: string;
|
|
14
|
+
small: string;
|
|
15
|
+
medium: string;
|
|
16
|
+
large: string;
|
|
17
|
+
'x-large': string;
|
|
18
|
+
'xx-large': string;
|
|
19
|
+
};
|
package/types/types/index.d.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare type sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
|
|
3
|
-
export interface DSDialogPropsT {
|
|
4
|
-
isOpen?: boolean;
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
onClickOutside?: () => void;
|
|
7
|
-
size?: sizes;
|
|
8
|
-
centered?: boolean;
|
|
9
|
-
removeAutoFocus?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export interface StyledDialogContainerT {
|
|
12
|
-
size?: sizes;
|
|
13
|
-
centered?: boolean;
|
|
14
|
-
}
|
|
15
|
-
export declare type DSDialogPropsWithDefaultT = Required<DSDialogPropsT>;
|
|
16
|
-
export declare type GetSpaceArgsT = Partial<Record<string, string | number>>;
|