@elliemae/ds-dialog 3.0.0-next.2 → 3.0.0-next.6

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 (58) hide show
  1. package/dist/cjs/DSDialog.js +157 -0
  2. package/dist/cjs/DSDialog.js.map +7 -0
  3. package/dist/cjs/DSDialogDatatestid.js +38 -0
  4. package/dist/cjs/DSDialogDatatestid.js.map +7 -0
  5. package/dist/cjs/defaultProps.js +46 -0
  6. package/dist/cjs/defaultProps.js.map +7 -0
  7. package/dist/cjs/index.js +94 -0
  8. package/dist/cjs/index.js.map +7 -0
  9. package/dist/cjs/propTypes.js +64 -0
  10. package/dist/cjs/propTypes.js.map +7 -0
  11. package/dist/cjs/sharedTypes.js +27 -0
  12. package/dist/cjs/sharedTypes.js.map +7 -0
  13. package/dist/cjs/styles.js +153 -0
  14. package/dist/cjs/styles.js.map +7 -0
  15. package/dist/cjs/utils.js +55 -0
  16. package/dist/cjs/utils.js.map +7 -0
  17. package/dist/esm/DSDialog.js +135 -0
  18. package/dist/esm/DSDialog.js.map +7 -0
  19. package/dist/esm/DSDialogDatatestid.js +9 -0
  20. package/dist/esm/DSDialogDatatestid.js.map +7 -0
  21. package/dist/esm/defaultProps.js +17 -0
  22. package/dist/esm/defaultProps.js.map +7 -0
  23. package/{esm → dist/esm}/index.js +48 -19
  24. package/dist/esm/index.js.map +7 -0
  25. package/dist/esm/propTypes.js +37 -0
  26. package/dist/esm/propTypes.js.map +7 -0
  27. package/dist/esm/sharedTypes.js +2 -0
  28. package/dist/esm/sharedTypes.js.map +7 -0
  29. package/dist/esm/styles.js +124 -0
  30. package/dist/esm/styles.js.map +7 -0
  31. package/dist/esm/utils.js +26 -0
  32. package/dist/esm/utils.js.map +7 -0
  33. package/package.json +45 -35
  34. package/cjs/DSDialog.js +0 -112
  35. package/cjs/DSDialogDatatestid.js +0 -10
  36. package/cjs/DSDialogInternalTypes.d.js +0 -2
  37. package/cjs/DSDialogTypes.js +0 -2
  38. package/cjs/defaultProps.js +0 -18
  39. package/cjs/index.js +0 -70
  40. package/cjs/propTypes.js +0 -31
  41. package/cjs/styles.js +0 -121
  42. package/cjs/utils.js +0 -35
  43. package/esm/DSDialog.js +0 -100
  44. package/esm/DSDialogDatatestid.js +0 -6
  45. package/esm/DSDialogInternalTypes.d.js +0 -1
  46. package/esm/DSDialogTypes.js +0 -1
  47. package/esm/defaultProps.js +0 -14
  48. package/esm/propTypes.js +0 -23
  49. package/esm/styles.js +0 -101
  50. package/esm/utils.js +0 -28
  51. package/types/DSDialog.d.ts +0 -2193
  52. package/types/DSDialogDatatestid.d.ts +0 -4
  53. package/types/DSDialogTypes.d.ts +0 -10
  54. package/types/defaultProps.d.ts +0 -2
  55. package/types/index.d.ts +0 -151
  56. package/types/propTypes.d.ts +0 -2182
  57. package/types/styles.d.ts +0 -15
  58. package/types/utils.d.ts +0 -19
@@ -0,0 +1,124 @@
1
+ import * as React from "react";
2
+ import styled from "styled-components";
3
+ import { createGlobalStyle } from "@elliemae/ds-system";
4
+ import { space, flexboxes, layout, sizing } from "@xstyled/styled-components";
5
+ import { allSizes } from "./utils";
6
+ const FixedBody = createGlobalStyle`
7
+ body {
8
+ overflow: hidden;
9
+ ${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;` : ``}
10
+ }
11
+ `;
12
+ const StyledDialogBackground = styled.div`
13
+ position: fixed;
14
+ top: 0;
15
+ bottom: 0;
16
+ left: 0;
17
+ width: 100%;
18
+ height: 100%;
19
+ background: rgba(37, 41, 47, 50%);
20
+ overflow-y: auto;
21
+ z-index: ${({ zIndex }) => zIndex};
22
+ `;
23
+ const StyledDialogContainer = styled.div`
24
+ height: fit-content;
25
+ position: absolute;
26
+ top: 0;
27
+ bottom: 0;
28
+ left: 0;
29
+ right: 0;
30
+ margin: ${({ centered }) => centered ? "auto" : "20vh auto auto auto"};
31
+ width: ${({ size }) => allSizes[size]};
32
+ min-width: 300px;
33
+ box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};
34
+ background: ${({ theme }) => theme.colors.neutral["000"]};
35
+ overflow-y: auto;
36
+ ${space}
37
+ &:focus {
38
+ outline: none;
39
+ }
40
+ `;
41
+ const DSDialogTitle = styled.h3`
42
+ font-size: ${({ theme }) => theme.fontSizes.title[700]};
43
+ display: -webkit-box;
44
+ -webkit-line-clamp: 2;
45
+ -webkit-box-orient: vertical;
46
+ overflow: hidden;
47
+ line-height: 28px;
48
+ margin: 0;
49
+ `;
50
+ const DSDialogAddon = styled.div``;
51
+ const DSDialogHeader = styled.div`
52
+ display: grid;
53
+ align-items: center;
54
+ grid-auto-flow: column;
55
+ min-height: ${({ theme }) => theme.space.m};
56
+ padding: 10px ${({ theme }) => theme.space.xs};
57
+ & ${DSDialogTitle} + ${DSDialogAddon} {
58
+ align-self: flex-start;
59
+ justify-self: flex-end;
60
+ }
61
+ & ${DSDialogAddon}:only-child {
62
+ justify-self: flex-end;
63
+ }
64
+ ${space}
65
+ ${sizing}
66
+ `;
67
+ const DSDialogSeparator = styled.hr.attrs(() => ({ "aria-hidden": true }))`
68
+ margin: 0;
69
+ border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
70
+ `;
71
+ const DSDialogBody = styled.div`
72
+ padding: ${({ theme }) => theme.space.xs};
73
+ overflow-y: auto;
74
+
75
+ ${layout}
76
+ ${space}
77
+ ${flexboxes}
78
+ ${sizing}
79
+ `;
80
+ const DSDialogPrimaryMessage = styled.h3`
81
+ margin: 0;
82
+ `;
83
+ const DSDialogSecondaryMessage = styled.p`
84
+ margin: 0;
85
+ color: ${({ theme }) => theme.colors.neutral[500]};
86
+ `;
87
+ const DSDialogDefaultLayout = styled.div`
88
+ display: grid;
89
+ grid-auto-flow: row;
90
+ justify-items: center;
91
+ align-items: center;
92
+ grid-gap: ${({ theme }) => theme.space.xxs};
93
+
94
+ ${DSDialogSecondaryMessage} {
95
+ text-align: center;
96
+ }
97
+ `;
98
+ const DSDialogFooter = styled.div`
99
+ display: grid;
100
+ grid-auto-flow: column;
101
+ align-items: center;
102
+ justify-content: flex-end;
103
+ grid-gap: ${({ theme }) => theme.space.xxs};
104
+ min-height: ${({ theme }) => theme.space.m};
105
+ padding: 0 ${({ theme }) => theme.space.xs};
106
+ ${space}
107
+ ${flexboxes}
108
+ ${sizing}
109
+ `;
110
+ export {
111
+ DSDialogAddon,
112
+ DSDialogBody,
113
+ DSDialogDefaultLayout,
114
+ DSDialogFooter,
115
+ DSDialogHeader,
116
+ DSDialogPrimaryMessage,
117
+ DSDialogSecondaryMessage,
118
+ DSDialogSeparator,
119
+ DSDialogTitle,
120
+ FixedBody,
121
+ StyledDialogBackground,
122
+ StyledDialogContainer
123
+ };
124
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface FixedBodyT {\n bodyInfo: DSDialogInternalsT.BodyInfoT;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n body {\n overflow: hidden;\n ${({ bodyInfo }) =>\n bodyInfo.overflow\n ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;`\n : ``}\n }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n width: ${({ size }) => allSizes[size]};\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n background: ${({ theme }) => theme.colors.neutral['000']};\n overflow-y: auto;\n ${space}\n &:focus {\n outline: none;\n }\n`;\n\nexport const DSDialogTitle = styled.h3`\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 28px;\n margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled.div`\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ${({ theme }) => theme.space.m};\n padding: 10px ${({ theme }) => theme.space.xs};\n & ${DSDialogTitle} + ${DSDialogAddon} {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ${DSDialogAddon}:only-child {\n justify-self: flex-end;\n }\n ${space}\n ${sizing}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n margin: 0;\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled.div`\n padding: ${({ theme }) => theme.space.xs};\n overflow-y: auto;\n\n ${layout}\n ${space}\n ${flexboxes}\n ${sizing}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n margin: 0;\n color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n\n ${DSDialogSecondaryMessage} {\n text-align: center;\n }\n`;\n\nexport const DSDialogFooter = styled.div`\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ${({ theme }) => theme.space.xxs};\n min-height: ${({ theme }) => theme.space.m};\n padding: 0 ${({ theme }) => theme.space.xs};\n ${space}\n ${flexboxes}\n ${sizing}\n`;\n"],
5
+ "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAiBO,MAAM,YAAY;AAAA;AAAA;AAAA,MAGnB,CAAC,EAAE,eACH,SAAS,WACL,wBAAwB,SAAS,kBAAkB,SAAS,iCAC5D;AAAA;AAAA;AAIH,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,SAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEhD;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,OAAO;AAE7B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA;AAGG,MAAM,oBAAoB,OAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,0BAE/C,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,OAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,26 @@
1
+ import * as React from "react";
2
+ const getSpaceProps = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));
3
+ const DSDialogSizes = {
4
+ DEFAULT: "default",
5
+ SMALL: "small",
6
+ MEDIUM: "medium",
7
+ LARGE: "large",
8
+ XLARGE: "x-large",
9
+ XXLARGE: "xx-large"
10
+ };
11
+ const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
12
+ const allSizes = {
13
+ default: "576px",
14
+ small: "320px",
15
+ medium: "656px",
16
+ large: "848px",
17
+ "x-large": "1042px",
18
+ "xx-large": "1440px"
19
+ };
20
+ export {
21
+ DSDialogSizes,
22
+ DSDialogSizesArrayValues,
23
+ allSizes,
24
+ getSpaceProps
25
+ };
26
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "type GetSpaceArgsT = Partial<Record<string, string | number>>;\n\nexport const getSpaceProps = (props: GetSpaceArgsT): GetSpaceArgsT =>\n Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));\n\nexport const DSDialogSizes = {\n DEFAULT: 'default' as const,\n SMALL: 'small' as const,\n MEDIUM: 'medium' as const,\n LARGE: 'large' as const,\n XLARGE: 'x-large' as const,\n XXLARGE: 'xx-large' as const,\n};\n\nexport const DSDialogSizesArrayValues = Object.values(DSDialogSizes);\n\nexport const allSizes = {\n default: '576px',\n small: '320px',\n medium: '656px',\n large: '848px',\n 'x-large': '1042px',\n 'xx-large': '1440px',\n};\n"],
5
+ "mappings": "AAAA;ACEO,MAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,OAAO,OAAO,CAAC,CAAC,SAAS,kBAAkB,KAAK;AAE7E,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA;AAGJ,MAAM,2BAA2B,OAAO,OAAO;AAE/C,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,47 +1,50 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dialog",
3
- "version": "3.0.0-next.2",
3
+ "version": "3.0.0-next.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Dialog",
6
- "module": "./esm/index.js",
7
- "main": "./cjs/index.js",
8
- "types": "./types/index.d.ts",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "module": "./dist/esm/index.js",
10
+ "main": "./dist/cjs/index.js",
11
+ "types": "./dist/types/index.d.ts",
9
12
  "exports": {
10
13
  ".": {
11
- "import": "./esm/index.js",
12
- "require": "./cjs/index.js"
14
+ "import": "./dist/esm/index.js",
15
+ "require": "./dist/cjs/index.js"
13
16
  },
14
17
  "./utils": {
15
- "import": "./esm/utils.js",
16
- "require": "./cjs/utils.js"
18
+ "import": "./dist/esm/utils.js",
19
+ "require": "./dist/cjs/utils.js"
17
20
  },
18
21
  "./styles": {
19
- "import": "./esm/styles.js",
20
- "require": "./cjs/styles.js"
22
+ "import": "./dist/esm/styles.js",
23
+ "require": "./dist/cjs/styles.js"
21
24
  },
22
25
  "./propTypes": {
23
- "import": "./esm/propTypes.js",
24
- "require": "./cjs/propTypes.js"
26
+ "import": "./dist/esm/propTypes.js",
27
+ "require": "./dist/cjs/propTypes.js"
25
28
  },
26
29
  "./DSDialogTypes": {
27
- "import": "./esm/DSDialogTypes.js",
28
- "require": "./cjs/DSDialogTypes.js"
30
+ "import": "./dist/esm/DSDialogTypes.js",
31
+ "require": "./dist/cjs/DSDialogTypes.js"
29
32
  },
30
- "./DSDialogInternalTypes.d": {
31
- "import": "./esm/DSDialogInternalTypes.d.js",
32
- "require": "./cjs/DSDialogInternalTypes.d.js"
33
+ "./DSDialogInternalTypes": {
34
+ "import": "./dist/esm/DSDialogInternalTypes.js",
35
+ "require": "./dist/cjs/DSDialogInternalTypes.js"
33
36
  },
34
37
  "./DSDialogDatatestid": {
35
- "import": "./esm/DSDialogDatatestid.js",
36
- "require": "./cjs/DSDialogDatatestid.js"
38
+ "import": "./dist/esm/DSDialogDatatestid.js",
39
+ "require": "./dist/cjs/DSDialogDatatestid.js"
37
40
  },
38
41
  "./DSDialog": {
39
- "import": "./esm/DSDialog.js",
40
- "require": "./cjs/DSDialog.js"
42
+ "import": "./dist/esm/DSDialog.js",
43
+ "require": "./dist/cjs/DSDialog.js"
41
44
  },
42
45
  "./defaultProps": {
43
- "import": "./esm/defaultProps.js",
44
- "require": "./cjs/defaultProps.js"
46
+ "import": "./dist/esm/defaultProps.js",
47
+ "require": "./dist/cjs/defaultProps.js"
45
48
  }
46
49
  },
47
50
  "sideEffects": [
@@ -53,20 +56,21 @@
53
56
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
54
57
  },
55
58
  "engines": {
56
- "npm": ">=7",
57
- "node": ">=14"
59
+ "pnpm": ">=6",
60
+ "node": ">=16"
58
61
  },
59
62
  "author": "ICE MT",
60
- "scripts": {
61
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
62
- "prebuild": "exit 0",
63
- "predev": "exit 0",
64
- "build": "node ../../scripts/build/build.js"
63
+ "jestSonar": {
64
+ "sonar56x": true,
65
+ "reportPath": "reports",
66
+ "reportFile": "tests.xml",
67
+ "indent": 4
65
68
  },
66
69
  "dependencies": {
67
- "@elliemae/ds-props-helpers": "3.0.0-next.2",
68
- "@elliemae/ds-system": "3.0.0-next.2",
69
- "@xstyled/styled-components": "~3.1.1",
70
+ "@elliemae/ds-button": "3.0.0-next.6",
71
+ "@elliemae/ds-props-helpers": "3.0.0-next.6",
72
+ "@elliemae/ds-system": "3.0.0-next.6",
73
+ "@xstyled/styled-components": "~3.1.2",
70
74
  "react-desc": "~4.1.3"
71
75
  },
72
76
  "devDependencies": {
@@ -79,7 +83,13 @@
79
83
  },
80
84
  "publishConfig": {
81
85
  "access": "public",
82
- "directory": "dist",
83
- "generateSubmodules": true
86
+ "typeSafety": false
87
+ },
88
+ "scripts": {
89
+ "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
90
+ "test": "node ../../scripts/testing/test.mjs",
91
+ "lint": "node ../../scripts/lint.mjs",
92
+ "dts": "node ../../scripts/dts.mjs",
93
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
84
94
  }
85
95
  }
package/cjs/DSDialog.js DELETED
@@ -1,112 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var _jsx = require('@babel/runtime/helpers/jsx');
7
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
- require('core-js/modules/web.dom-collections.iterator.js');
9
- require('core-js/modules/esnext.async-iterator.filter.js');
10
- require('core-js/modules/esnext.iterator.constructor.js');
11
- require('core-js/modules/esnext.iterator.filter.js');
12
- require('core-js/modules/esnext.async-iterator.for-each.js');
13
- require('core-js/modules/esnext.iterator.for-each.js');
14
- var ReactDOM = require('react-dom');
15
- var react = require('react');
16
- var reactDesc = require('react-desc');
17
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
18
- var styles = require('./styles.js');
19
- var propTypes = require('./propTypes.js');
20
- var defaultProps = require('./defaultProps.js');
21
- var utils = require('./utils.js');
22
- var DSDialogDatatestid = require('./DSDialogDatatestid.js');
23
- var jsxRuntime = require('react/jsx-runtime');
24
-
25
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
26
-
27
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
28
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
29
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
30
- var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
31
-
32
- const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
33
-
34
- 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; }
35
-
36
- 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; }
37
-
38
- const DSDialog = props => {
39
- var _FixedBody;
40
-
41
- const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
42
- const [isBodyOverflow, setIsBodyOverflow] = react.useState(false);
43
- dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
44
-
45
- const {
46
- children,
47
- isOpen,
48
- onClickOutside,
49
- centered,
50
- size,
51
- removeAutoFocus,
52
- zIndex
53
- } = propsWithDefault,
54
- rest = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
55
-
56
- const containerRef = react.useRef(null);
57
- const handleOutsideClick = react.useCallback(e => {
58
- if (e.target.dataset.portalbg) onClickOutside();
59
- }, [onClickOutside]);
60
- const handleOnKeyDown = react.useCallback(e => {
61
- if (e.key === 'Escape') onClickOutside();
62
- }, [onClickOutside]);
63
- react.useEffect(() => {
64
- const body = document.getElementsByTagName('body')[0];
65
- const {
66
- offsetHeight,
67
- scrollHeight
68
- } = body;
69
- if (!isOpen) return setIsBodyOverflow(false);
70
- return setIsBodyOverflow(offsetHeight < scrollHeight);
71
- }, [isOpen]);
72
- react.useEffect(() => {
73
- var _containerRef$current;
74
-
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();
76
- }, [isOpen, removeAutoFocus]);
77
- const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
78
- onClick: handleOutsideClick
79
- });
80
-
81
- if (isOpen) {
82
- return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/jsxRuntime.jsxs(styles.StyledDialogBackground, _objectSpread(_objectSpread({
83
- onClick: handleOutsideClick,
84
- "data-portalbg": true,
85
- "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
86
- zIndex: zIndex
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]);
103
- }
104
-
105
- return null;
106
- };
107
-
108
- const DSDialogWithSchema = reactDesc.describe(DSDialog);
109
- DSDialogWithSchema.propTypes = propTypes.propTypes;
110
-
111
- exports.DSDialog = DSDialog;
112
- exports.DSDialogWithSchema = DSDialogWithSchema;
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const DSDialogDatatestid = {
6
- CONTAINER: 'ds-dialog-container',
7
- BACKGROUND: 'ds-dialog-background'
8
- };
9
-
10
- exports.DSDialogDatatestid = DSDialogDatatestid;
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,18 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var utils = require('./utils.js');
6
-
7
- const noop = () => {};
8
-
9
- const defaultProps = {
10
- isOpen: false,
11
- centered: false,
12
- size: utils.DSDialogSizes.DEFAULT,
13
- removeAutoFocus: false,
14
- onClickOutside: noop,
15
- zIndex: 10
16
- };
17
-
18
- exports.defaultProps = defaultProps;
package/cjs/index.js DELETED
@@ -1,70 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactDesc = require('react-desc');
6
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
7
- var styles = require('./styles.js');
8
- var DSDialog = require('./DSDialog.js');
9
- var DSDialogDatatestid = require('./DSDialogDatatestid.js');
10
- var utils = require('./utils.js');
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;
48
-
49
- exports.DSDialogAddon = styles.DSDialogAddon;
50
- exports.DSDialogBody = styles.DSDialogBody;
51
- exports.DSDialogDefaultLayout = styles.DSDialogDefaultLayout;
52
- exports.DSDialogFooter = styles.DSDialogFooter;
53
- exports.DSDialogHeader = styles.DSDialogHeader;
54
- exports.DSDialogPrimaryMessage = styles.DSDialogPrimaryMessage;
55
- exports.DSDialogSecondaryMessage = styles.DSDialogSecondaryMessage;
56
- exports.DSDialogSeparator = styles.DSDialogSeparator;
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 DELETED
@@ -1,31 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
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');
11
- var reactDesc = require('react-desc');
12
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
13
- var utils = require('./utils.js');
14
-
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),
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);
30
-
31
- exports.propTypes = propTypes;