@elliemae/ds-dialog 3.0.0-next.4 → 3.0.0-next.42
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/dist/cjs/DSDialog.js +8 -9
- package/dist/cjs/DSDialog.js.map +2 -2
- package/dist/cjs/DSDialogDatatestid.js.map +1 -1
- package/dist/cjs/defaultProps.js.map +1 -1
- package/dist/cjs/index.js +19 -19
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/propTypes.js +9 -9
- package/dist/cjs/propTypes.js.map +2 -2
- package/dist/cjs/styles.js.map +1 -1
- package/dist/cjs/utils.js.map +2 -2
- package/dist/esm/DSDialog.js +4 -5
- package/dist/esm/DSDialog.js.map +2 -2
- package/dist/esm/DSDialogDatatestid.js.map +1 -1
- package/dist/esm/defaultProps.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/propTypes.js +1 -1
- package/dist/esm/propTypes.js.map +2 -2
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/utils.js.map +2 -2
- package/package.json +4 -4
package/dist/cjs/DSDialog.js
CHANGED
|
@@ -63,20 +63,20 @@ var React = __toESM(require("react"));
|
|
|
63
63
|
var import_react_dom = __toESM(require("react-dom"));
|
|
64
64
|
var import_react = __toESM(require("react"));
|
|
65
65
|
var import_lodash = require("lodash");
|
|
66
|
-
var
|
|
66
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
67
67
|
var import_styles = require("./styles");
|
|
68
68
|
var import_propTypes = require("./propTypes");
|
|
69
69
|
var import_defaultProps = require("./defaultProps");
|
|
70
70
|
var import_utils = require("./utils");
|
|
71
71
|
var import_DSDialogDatatestid = require("./DSDialogDatatestid");
|
|
72
72
|
const DSDialog = (props) => {
|
|
73
|
-
const propsWithDefault = (0,
|
|
73
|
+
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
|
|
74
74
|
const [bodyInfo, setBodyInfo] = (0, import_react.useState)({
|
|
75
75
|
overflow: false,
|
|
76
76
|
paddingRight: "0px",
|
|
77
77
|
scrollbarWidth: "0px"
|
|
78
78
|
});
|
|
79
|
-
(0,
|
|
79
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_propTypes.propTypes);
|
|
80
80
|
const _a = propsWithDefault, { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex } = _a, rest = __objRest(_a, ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"]);
|
|
81
81
|
const containerRef = (0, import_react.useRef)(null);
|
|
82
82
|
const focusContainer = (0, import_react.useCallback)(() => {
|
|
@@ -96,7 +96,7 @@ const DSDialog = (props) => {
|
|
|
96
96
|
if (e.key === "Escape")
|
|
97
97
|
onClose();
|
|
98
98
|
}, [onClose]);
|
|
99
|
-
const _b = (0,
|
|
99
|
+
const _b = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault, {
|
|
100
100
|
onClick: handleOutsideClick,
|
|
101
101
|
onKeyDown: handleOnKeyDown
|
|
102
102
|
}), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
|
|
@@ -137,21 +137,20 @@ const DSDialog = (props) => {
|
|
|
137
137
|
zIndex
|
|
138
138
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.FixedBody, {
|
|
139
139
|
bodyInfo
|
|
140
|
-
}), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadProps(__spreadValues(
|
|
140
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadProps(__spreadValues(__spreadValues({
|
|
141
141
|
role: "dialog",
|
|
142
142
|
"aria-modal": true,
|
|
143
143
|
ref: containerRef,
|
|
144
|
-
tabIndex: !removeAutoFocus ? 0 : void 0
|
|
145
|
-
}, (0, import_utils.getSpaceProps)(rest)), {
|
|
144
|
+
tabIndex: !removeAutoFocus ? 0 : void 0,
|
|
146
145
|
centered,
|
|
147
146
|
"data-testid": import_DSDialogDatatestid.DSDialogDatatestid.CONTAINER
|
|
148
|
-
}), restOfGlobalAttributes), {
|
|
147
|
+
}, (0, import_utils.getSpaceProps)(rest)), restOfGlobalAttributes), {
|
|
149
148
|
size
|
|
150
149
|
}), children)), document.getElementsByTagName("body")[0]);
|
|
151
150
|
}
|
|
152
151
|
return null;
|
|
153
152
|
};
|
|
154
|
-
const DSDialogWithSchema = (0,
|
|
153
|
+
const DSDialogWithSchema = (0, import_ds_utilities.describe)(DSDialog);
|
|
155
154
|
DSDialogWithSchema.propTypes = import_propTypes.propTypes;
|
|
156
155
|
module.exports = __toCommonJS(DSDialog_exports);
|
|
157
156
|
//# sourceMappingURL=DSDialog.js.map
|
package/dist/cjs/DSDialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSDialog.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState, WeakValidationMap, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,mBAA4F;AAC5F,oBAAyB;AACzB,
|
|
4
|
+
"sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState, WeakValidationMap, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-utilities';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element | null => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.Props>(props, defaultProps);\n const [bodyInfo, setBodyInfo] = useState<DSDialogInternalsT.BodyInfoT>({\n overflow: false,\n paddingRight: '0px',\n scrollbarWidth: '0px',\n });\n\n useValidateTypescriptPropTypes<DSDialogT.Props>(propsWithDefault, propTypes);\n\n const { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex, ...rest } =\n propsWithDefault;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const focusContainer = useCallback(() => {\n const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n }, []);\n\n useEffect(() => {\n document.addEventListener('focusin', focusContainer);\n return () => document.removeEventListener('focusin', focusContainer);\n }, [focusContainer]);\n\n const handleOutsideClick = useCallback(\n (e: React.MouseEvent) => {\n if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n },\n [onClickOutside],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') onClose();\n },\n [onClose],\n );\n\n const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(propsWithDefault, {\n onClick: handleOutsideClick,\n onKeyDown: handleOnKeyDown,\n });\n\n const calculateScrollbar = useCallback(() => {\n const body = document.getElementsByTagName('body')[0];\n const { clientWidth } = body;\n setBodyInfo((prev) => ({ ...prev, scrollbarWidth: `${window.innerWidth - clientWidth}px` }));\n }, []);\n\n const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n useEffect(() => {\n calculateScrollbar();\n }, [calculateScrollbar]);\n\n useEffect(() => {\n window.addEventListener('resize', debouncedCalculateScrollbar);\n return () => {\n window.removeEventListener('resize', debouncedCalculateScrollbar);\n };\n }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n useEffect(() => {\n if (isOpen) {\n const body = document.getElementsByTagName('body')[0];\n const { clientHeight, scrollHeight } = body;\n const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue('padding-right');\n\n setBodyInfo((prev) => ({ ...prev, overflow: scrollHeight > clientHeight, paddingRight }));\n } else setBodyInfo((prev) => ({ ...prev, overflow: false, paddingRight: '0px' }));\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen && !removeAutoFocus) containerRef?.current?.focus();\n }, [isOpen, removeAutoFocus]);\n\n if (isOpen) {\n return ReactDOM.createPortal(\n <StyledDialogBackground\n className={className}\n onClick={handleOutsideClick}\n data-portalbg\n data-testid={DSDialogDatatestid.BACKGROUND}\n zIndex={zIndex}\n >\n <FixedBody bodyInfo={bodyInfo} />\n <StyledDialogContainer\n role=\"dialog\"\n aria-modal\n ref={containerRef}\n tabIndex={!removeAutoFocus ? 0 : undefined}\n centered={centered}\n data-testid={DSDialogDatatestid.CONTAINER}\n {...getSpaceProps(rest)}\n {...restOfGlobalAttributes}\n size={size}\n >\n {children}\n </StyledDialogContainer>\n </StyledDialogBackground>,\n document.getElementsByTagName('body')[0],\n );\n }\n\n return null;\n};\n\nconst DSDialogWithSchema = describe<DSDialogT.Props>(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSDialogDatatestid.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSDialogDatatestid = {\n CONTAINER: 'ds-dialog-container',\n BACKGROUND: 'ds-dialog-background',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,YAAY;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { DSDialogSizes } from './utils';\nimport type { DSDialogT } from './propTypes';\n\nconst noop = () => {};\n\nexport const defaultProps: DSDialogT.DefaultProps = {\n isOpen: false,\n centered: false,\n size: DSDialogSizes.DEFAULT,\n removeAutoFocus: false,\n onClickOutside: noop,\n onClose: noop,\n zIndex: 10,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,OAAO,MAAM;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAG9B,MAAM,OAAO,MAAM;AAAC;AAEb,MAAM,eAAuC;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,2BAAc;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -49,20 +49,20 @@ __export(src_exports, {
|
|
|
49
49
|
});
|
|
50
50
|
var React = __toESM(require("react"));
|
|
51
51
|
var import_react_desc = require("react-desc");
|
|
52
|
-
var
|
|
52
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
53
53
|
var import_styles = require("./styles");
|
|
54
54
|
__reExport(src_exports, require("./DSDialog"));
|
|
55
55
|
__reExport(src_exports, require("./DSDialogDatatestid"));
|
|
56
56
|
var import_utils = require("./utils");
|
|
57
|
-
import_styles.DSDialogBody.propTypes =
|
|
58
|
-
import_styles.DSDialogHeader.propTypes =
|
|
59
|
-
import_styles.DSDialogFooter.propTypes =
|
|
60
|
-
import_styles.DSDialogSeparator.propTypes =
|
|
61
|
-
import_styles.DSDialogTitle.propTypes =
|
|
62
|
-
import_styles.DSDialogAddon.propTypes =
|
|
63
|
-
import_styles.DSDialogDefaultLayout.propTypes =
|
|
64
|
-
import_styles.DSDialogPrimaryMessage.propTypes =
|
|
65
|
-
import_styles.DSDialogSecondaryMessage.propTypes =
|
|
57
|
+
import_styles.DSDialogBody.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
58
|
+
import_styles.DSDialogHeader.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
59
|
+
import_styles.DSDialogFooter.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
60
|
+
import_styles.DSDialogSeparator.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
61
|
+
import_styles.DSDialogTitle.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
62
|
+
import_styles.DSDialogAddon.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
63
|
+
import_styles.DSDialogDefaultLayout.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
64
|
+
import_styles.DSDialogPrimaryMessage.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
65
|
+
import_styles.DSDialogSecondaryMessage.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
66
66
|
import_styles.DSDialogBody.displayName = "DSDialogBody";
|
|
67
67
|
import_styles.DSDialogHeader.displayName = "DSDialogHeader";
|
|
68
68
|
import_styles.DSDialogFooter.displayName = "DSDialogFooter";
|
|
@@ -81,14 +81,14 @@ const DSDialogAddonWithSchema = (0, import_react_desc.describe)(import_styles.DS
|
|
|
81
81
|
const DSDialogDefaultLayoutWithSchema = (0, import_react_desc.describe)(import_styles.DSDialogDefaultLayout);
|
|
82
82
|
const DSDialogPrimaryMessageWithSchema = (0, import_react_desc.describe)(import_styles.DSDialogPrimaryMessage);
|
|
83
83
|
const DSDialogSecondaryMessageWithSchema = (0, import_react_desc.describe)(import_styles.DSDialogSecondaryMessage);
|
|
84
|
-
DSDialogBodyWithSchema.propTypes =
|
|
85
|
-
DSDialogHeaderWithSchema.propTypes =
|
|
86
|
-
DSDialogFooterWithSchema.propTypes =
|
|
87
|
-
DSDialogSeparatorWithSchema.propTypes =
|
|
88
|
-
DSDialogTitleWithSchema.propTypes =
|
|
89
|
-
DSDialogAddonWithSchema.propTypes =
|
|
90
|
-
DSDialogDefaultLayoutWithSchema.propTypes =
|
|
91
|
-
DSDialogPrimaryMessageWithSchema.propTypes =
|
|
92
|
-
DSDialogSecondaryMessageWithSchema.propTypes =
|
|
84
|
+
DSDialogBodyWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
85
|
+
DSDialogHeaderWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
86
|
+
DSDialogFooterWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
87
|
+
DSDialogSeparatorWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
88
|
+
DSDialogTitleWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
89
|
+
DSDialogAddonWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
90
|
+
DSDialogDefaultLayoutWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
91
|
+
DSDialogPrimaryMessageWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
92
|
+
DSDialogSecondaryMessageWithSchema.propTypes = import_ds_utilities.globalAttributesPropTypes;
|
|
93
93
|
module.exports = __toCommonJS(src_exports);
|
|
94
94
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { describe } from 'react-desc';\nimport { globalAttributesPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAyB;AACzB,
|
|
4
|
+
"sourcesContent": ["import { describe } from 'react-desc';\nimport { globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport {\n DSDialogBody,\n DSDialogHeader,\n DSDialogFooter,\n DSDialogSeparator,\n DSDialogTitle,\n DSDialogAddon,\n DSDialogDefaultLayout,\n DSDialogPrimaryMessage,\n DSDialogSecondaryMessage,\n} from './styles';\n\nDSDialogBody.propTypes = globalAttributesPropTypes;\nDSDialogHeader.propTypes = globalAttributesPropTypes;\nDSDialogFooter.propTypes = globalAttributesPropTypes;\nDSDialogSeparator.propTypes = globalAttributesPropTypes;\nDSDialogTitle.propTypes = globalAttributesPropTypes;\nDSDialogAddon.propTypes = globalAttributesPropTypes;\nDSDialogDefaultLayout.propTypes = globalAttributesPropTypes;\nDSDialogPrimaryMessage.propTypes = globalAttributesPropTypes;\nDSDialogSecondaryMessage.propTypes = globalAttributesPropTypes;\n\nDSDialogBody.displayName = 'DSDialogBody';\nDSDialogHeader.displayName = 'DSDialogHeader';\nDSDialogFooter.displayName = 'DSDialogFooter';\nDSDialogSeparator.displayName = 'DSDialogSeparator';\nDSDialogTitle.displayName = 'DSDialogTitle';\nDSDialogAddon.displayName = 'DSDialogAddon';\nDSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';\nDSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';\nDSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';\n\nconst DSDialogBodyWithSchema = describe(DSDialogBody);\nconst DSDialogHeaderWithSchema = describe(DSDialogHeader);\nconst DSDialogFooterWithSchema = describe(DSDialogFooter);\nconst DSDialogSeparatorWithSchema = describe(DSDialogSeparator);\nconst DSDialogTitleWithSchema = describe(DSDialogTitle);\nconst DSDialogAddonWithSchema = describe(DSDialogAddon);\nconst DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout);\nconst DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage);\nconst DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage);\n\nDSDialogBodyWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogFooterWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogTitleWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;\n\nexport * from './DSDialog';\nexport * from './DSDialogDatatestid';\nexport { DSDialogSizes } from './utils';\nexport {\n DSDialogBody,\n DSDialogHeader,\n DSDialogFooter,\n DSDialogSeparator,\n DSDialogTitle,\n DSDialogAddon,\n DSDialogDefaultLayout,\n DSDialogPrimaryMessage,\n DSDialogSecondaryMessage,\n DSDialogBodyWithSchema,\n DSDialogHeaderWithSchema,\n DSDialogFooterWithSchema,\n DSDialogSeparatorWithSchema,\n DSDialogTitleWithSchema,\n DSDialogAddonWithSchema,\n DSDialogDefaultLayoutWithSchema,\n DSDialogPrimaryMessageWithSchema,\n DSDialogSecondaryMessageWithSchema,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAyB;AACzB,0BAA0C;AAC1C,oBAUO;AA0CP,wBAAc;AACd,wBAAc;AACd,mBAA8B;AA1C9B,2BAAa,YAAY;AACzB,6BAAe,YAAY;AAC3B,6BAAe,YAAY;AAC3B,gCAAkB,YAAY;AAC9B,4BAAc,YAAY;AAC1B,4BAAc,YAAY;AAC1B,oCAAsB,YAAY;AAClC,qCAAuB,YAAY;AACnC,uCAAyB,YAAY;AAErC,2BAAa,cAAc;AAC3B,6BAAe,cAAc;AAC7B,6BAAe,cAAc;AAC7B,gCAAkB,cAAc;AAChC,4BAAc,cAAc;AAC5B,4BAAc,cAAc;AAC5B,oCAAsB,cAAc;AACpC,qCAAuB,cAAc;AACrC,uCAAyB,cAAc;AAEvC,MAAM,yBAAyB,gCAAS,0BAAY;AACpD,MAAM,2BAA2B,gCAAS,4BAAc;AACxD,MAAM,2BAA2B,gCAAS,4BAAc;AACxD,MAAM,8BAA8B,gCAAS,+BAAiB;AAC9D,MAAM,0BAA0B,gCAAS,2BAAa;AACtD,MAAM,0BAA0B,gCAAS,2BAAa;AACtD,MAAM,kCAAkC,gCAAS,mCAAqB;AACtE,MAAM,mCAAmC,gCAAS,oCAAsB;AACxE,MAAM,qCAAqC,gCAAS,sCAAwB;AAE5E,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AACrC,yBAAyB,YAAY;AACrC,4BAA4B,YAAY;AACxC,wBAAwB,YAAY;AACpC,wBAAwB,YAAY;AACpC,gCAAgC,YAAY;AAC5C,iCAAiC,YAAY;AAC7C,mCAAmC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -47,18 +47,18 @@ __export(propTypes_exports, {
|
|
|
47
47
|
propTypes: () => propTypes
|
|
48
48
|
});
|
|
49
49
|
var React = __toESM(require("react"));
|
|
50
|
-
var
|
|
50
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
51
51
|
var import_utils = require("./utils");
|
|
52
|
-
const propTypes = __spreadProps(__spreadValues({},
|
|
53
|
-
isOpen:
|
|
54
|
-
children:
|
|
55
|
-
centered:
|
|
56
|
-
removeAutoFocus:
|
|
57
|
-
onClickOutside:
|
|
52
|
+
const propTypes = __spreadProps(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), {
|
|
53
|
+
isOpen: import_ds_utilities.PropTypes.bool.description("Whether the Dialog is open or not.").defaultValue(false),
|
|
54
|
+
children: import_ds_utilities.PropTypes.node.description("Nested components.").isRequired,
|
|
55
|
+
centered: import_ds_utilities.PropTypes.bool.description("Centers the Dialog.").defaultValue(false),
|
|
56
|
+
removeAutoFocus: import_ds_utilities.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),
|
|
57
|
+
onClickOutside: import_ds_utilities.PropTypes.func.description("Callback that should be used to close the modal when the user clicks outside.").defaultValue(() => {
|
|
58
58
|
}),
|
|
59
|
-
onClose:
|
|
59
|
+
onClose: import_ds_utilities.PropTypes.func.description("Callback triggered with ESC key.").defaultValue(() => {
|
|
60
60
|
}),
|
|
61
|
-
size:
|
|
61
|
+
size: import_ds_utilities.PropTypes.oneOf(import_utils.DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(import_utils.DSDialogSizes.DEFAULT)
|
|
62
62
|
});
|
|
63
63
|
module.exports = __toCommonJS(propTypes_exports);
|
|
64
64
|
//# sourceMappingURL=propTypes.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-len */\nimport { globalAttributesPropTypes, GlobalAttributesT, PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-len */\nimport { globalAttributesPropTypes, GlobalAttributesT, PropTypes } from '@elliemae/ds-utilities';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils';\n\nexport declare namespace DSDialogT {\n export type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\n export interface DefaultProps {\n [key: string]: unknown;\n isOpen: boolean;\n centered: boolean;\n size: Sizes;\n removeAutoFocus: boolean;\n zIndex: number;\n onClickOutside: () => void;\n onClose: () => void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n }\n\n export interface Props\n extends DefaultProps,\n PropsRequired,\n Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'children'> {\n [key: string]: unknown;\n }\n}\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),\n children: PropTypes.node.description('Nested components.').isRequired,\n centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),\n removeAutoFocus: PropTypes.bool\n .description(\n '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.',\n )\n .defaultValue(false),\n onClickOutside: PropTypes.func\n .description('Callback that should be used to close the modal when the user clicks outside.')\n .defaultValue(() => {}),\n onClose: PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),\n size: PropTypes.oneOf(DSDialogSizesArrayValues)\n .description(`Dialog's width size.`)\n .defaultValue(DSDialogSizes.DEFAULT),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAwE;AACxE,mBAAwD;AA2BjD,MAAM,YAAY,iCACpB,gDADoB;AAAA,EAEvB,QAAQ,8BAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,UAAU,8BAAU,KAAK,YAAY,oBAAoB,EAAE;AAAA,EAC3D,UAAU,8BAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA,EAC9E,iBAAiB,8BAAU,KACxB,YACC,uIACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,8BAAU,KACvB,YAAY,+EAA+E,EAC3F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,SAAS,8BAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC7F,MAAM,8BAAU,MAAM,qCAAwB,EAC3C,YAAY,sBAAsB,EAClC,aAAa,2BAAc,OAAO;AACvC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAkC;AAClC,gCAAiD;AACjD,mBAAyB;AAiBlB,MAAM,YAAY;AAAA;AAAA;AAAA,MAGnB,CAAC,EAAE,eACH,SAAS,WACL,wBAAwB,SAAS,kBAAkB,SAAS,iCAC5D;AAAA;AAAA;AAIH,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,sBAAS;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,iCAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,iCAAO;AAE7B,MAAM,iBAAiB,iCAAO;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,iCAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAkC;AAClC,gCAAiD;AACjD,mBAAyB;AAiBlB,MAAM,YAAY;AAAA;AAAA;AAAA,MAGnB,CAAC,EAAE,eACH,SAAS,WACL,wBAAwB,SAAS,kBAAkB,SAAS,iCAC5D;AAAA;AAAA;AAIH,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,sBAAS;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,iCAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,iCAAO;AAE7B,MAAM,iBAAiB,iCAAO;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,iCAAO,GAAG,MAAM,MAAO,GAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,iCAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,iCAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,iCAAO;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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["type
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["type GetSpacePropsT = <T extends Record<string, unknown> = Record<string, unknown>>(\n props: T,\n) => Record<string, unknown>;\n\nexport const getSpaceProps: GetSpacePropsT = (props) =>\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIhB,MAAM,gBAAgC,CAAC,UAC5C,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,kBAAkB,KAAK,GAAG,CAAC,CAAC;AAElF,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,2BAA2B,OAAO,OAAO,aAAa;AAE5D,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSDialog.js
CHANGED
|
@@ -38,7 +38,7 @@ import {
|
|
|
38
38
|
useGetGlobalAttributes,
|
|
39
39
|
useValidateTypescriptPropTypes,
|
|
40
40
|
describe
|
|
41
|
-
} from "@elliemae/ds-
|
|
41
|
+
} from "@elliemae/ds-utilities";
|
|
42
42
|
import { FixedBody, StyledDialogBackground, StyledDialogContainer } from "./styles";
|
|
43
43
|
import { propTypes } from "./propTypes";
|
|
44
44
|
import { defaultProps } from "./defaultProps";
|
|
@@ -112,15 +112,14 @@ const DSDialog = (props) => {
|
|
|
112
112
|
zIndex
|
|
113
113
|
}, /* @__PURE__ */ React2.createElement(FixedBody, {
|
|
114
114
|
bodyInfo
|
|
115
|
-
}), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadProps(__spreadValues(
|
|
115
|
+
}), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadProps(__spreadValues(__spreadValues({
|
|
116
116
|
role: "dialog",
|
|
117
117
|
"aria-modal": true,
|
|
118
118
|
ref: containerRef,
|
|
119
|
-
tabIndex: !removeAutoFocus ? 0 : void 0
|
|
120
|
-
}, getSpaceProps(rest)), {
|
|
119
|
+
tabIndex: !removeAutoFocus ? 0 : void 0,
|
|
121
120
|
centered,
|
|
122
121
|
"data-testid": DSDialogDatatestid.CONTAINER
|
|
123
|
-
}), restOfGlobalAttributes), {
|
|
122
|
+
}, getSpaceProps(rest)), restOfGlobalAttributes), {
|
|
124
123
|
size
|
|
125
124
|
}), children)), document.getElementsByTagName("body")[0]);
|
|
126
125
|
}
|
package/dist/esm/DSDialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState, WeakValidationMap, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAIA,MAAM,WAAW,CAAC,UAA+C;AAC/D,QAAM,mBAAmB,6BAA8C,OAAO;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState, WeakValidationMap, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-utilities';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element | null => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.Props>(props, defaultProps);\n const [bodyInfo, setBodyInfo] = useState<DSDialogInternalsT.BodyInfoT>({\n overflow: false,\n paddingRight: '0px',\n scrollbarWidth: '0px',\n });\n\n useValidateTypescriptPropTypes<DSDialogT.Props>(propsWithDefault, propTypes);\n\n const { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex, ...rest } =\n propsWithDefault;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const focusContainer = useCallback(() => {\n const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n }, []);\n\n useEffect(() => {\n document.addEventListener('focusin', focusContainer);\n return () => document.removeEventListener('focusin', focusContainer);\n }, [focusContainer]);\n\n const handleOutsideClick = useCallback(\n (e: React.MouseEvent) => {\n if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n },\n [onClickOutside],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') onClose();\n },\n [onClose],\n );\n\n const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(propsWithDefault, {\n onClick: handleOutsideClick,\n onKeyDown: handleOnKeyDown,\n });\n\n const calculateScrollbar = useCallback(() => {\n const body = document.getElementsByTagName('body')[0];\n const { clientWidth } = body;\n setBodyInfo((prev) => ({ ...prev, scrollbarWidth: `${window.innerWidth - clientWidth}px` }));\n }, []);\n\n const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n useEffect(() => {\n calculateScrollbar();\n }, [calculateScrollbar]);\n\n useEffect(() => {\n window.addEventListener('resize', debouncedCalculateScrollbar);\n return () => {\n window.removeEventListener('resize', debouncedCalculateScrollbar);\n };\n }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n useEffect(() => {\n if (isOpen) {\n const body = document.getElementsByTagName('body')[0];\n const { clientHeight, scrollHeight } = body;\n const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue('padding-right');\n\n setBodyInfo((prev) => ({ ...prev, overflow: scrollHeight > clientHeight, paddingRight }));\n } else setBodyInfo((prev) => ({ ...prev, overflow: false, paddingRight: '0px' }));\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen && !removeAutoFocus) containerRef?.current?.focus();\n }, [isOpen, removeAutoFocus]);\n\n if (isOpen) {\n return ReactDOM.createPortal(\n <StyledDialogBackground\n className={className}\n onClick={handleOutsideClick}\n data-portalbg\n data-testid={DSDialogDatatestid.BACKGROUND}\n zIndex={zIndex}\n >\n <FixedBody bodyInfo={bodyInfo} />\n <StyledDialogContainer\n role=\"dialog\"\n aria-modal\n ref={containerRef}\n tabIndex={!removeAutoFocus ? 0 : undefined}\n centered={centered}\n data-testid={DSDialogDatatestid.CONTAINER}\n {...getSpaceProps(rest)}\n {...restOfGlobalAttributes}\n size={size}\n >\n {children}\n </StyledDialogContainer>\n </StyledDialogBackground>,\n document.getElementsByTagName('body')[0],\n );\n }\n\n return null;\n};\n\nconst DSDialogWithSchema = describe<DSDialogT.Props>(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialogDatatestid.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSDialogDatatestid = {\n CONTAINER: 'ds-dialog-container',\n BACKGROUND: 'ds-dialog-background',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,YAAY;
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSDialogSizes } from './utils';\nimport type { DSDialogT } from './propTypes';\n\nconst noop = () => {};\n\nexport const defaultProps: DSDialogT.DefaultProps = {\n isOpen: false,\n centered: false,\n size: DSDialogSizes.DEFAULT,\n removeAutoFocus: false,\n onClickOutside: noop,\n onClose: noop,\n zIndex: 10,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAGA,MAAM,OAAO,MAAM;
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGA,MAAM,OAAO,MAAM;AAAC;AAEb,MAAM,eAAuC;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,cAAc;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AACV;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from 'react-desc';\nimport { globalAttributesPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,aAAa,YAAY;AACzB,eAAe,YAAY;AAC3B,eAAe,YAAY;AAC3B,kBAAkB,YAAY;AAC9B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,sBAAsB,YAAY;AAClC,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AAErC,aAAa,cAAc;AAC3B,eAAe,cAAc;AAC7B,eAAe,cAAc;AAC7B,kBAAkB,cAAc;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,sBAAsB,cAAc;AACpC,uBAAuB,cAAc;AACrC,yBAAyB,cAAc;AAEvC,MAAM,yBAAyB,SAAS;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from 'react-desc';\nimport { globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport {\n DSDialogBody,\n DSDialogHeader,\n DSDialogFooter,\n DSDialogSeparator,\n DSDialogTitle,\n DSDialogAddon,\n DSDialogDefaultLayout,\n DSDialogPrimaryMessage,\n DSDialogSecondaryMessage,\n} from './styles';\n\nDSDialogBody.propTypes = globalAttributesPropTypes;\nDSDialogHeader.propTypes = globalAttributesPropTypes;\nDSDialogFooter.propTypes = globalAttributesPropTypes;\nDSDialogSeparator.propTypes = globalAttributesPropTypes;\nDSDialogTitle.propTypes = globalAttributesPropTypes;\nDSDialogAddon.propTypes = globalAttributesPropTypes;\nDSDialogDefaultLayout.propTypes = globalAttributesPropTypes;\nDSDialogPrimaryMessage.propTypes = globalAttributesPropTypes;\nDSDialogSecondaryMessage.propTypes = globalAttributesPropTypes;\n\nDSDialogBody.displayName = 'DSDialogBody';\nDSDialogHeader.displayName = 'DSDialogHeader';\nDSDialogFooter.displayName = 'DSDialogFooter';\nDSDialogSeparator.displayName = 'DSDialogSeparator';\nDSDialogTitle.displayName = 'DSDialogTitle';\nDSDialogAddon.displayName = 'DSDialogAddon';\nDSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';\nDSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';\nDSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';\n\nconst DSDialogBodyWithSchema = describe(DSDialogBody);\nconst DSDialogHeaderWithSchema = describe(DSDialogHeader);\nconst DSDialogFooterWithSchema = describe(DSDialogFooter);\nconst DSDialogSeparatorWithSchema = describe(DSDialogSeparator);\nconst DSDialogTitleWithSchema = describe(DSDialogTitle);\nconst DSDialogAddonWithSchema = describe(DSDialogAddon);\nconst DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout);\nconst DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage);\nconst DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage);\n\nDSDialogBodyWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogFooterWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogTitleWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;\nDSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;\n\nexport * from './DSDialog';\nexport * from './DSDialogDatatestid';\nexport { DSDialogSizes } from './utils';\nexport {\n DSDialogBody,\n DSDialogHeader,\n DSDialogFooter,\n DSDialogSeparator,\n DSDialogTitle,\n DSDialogAddon,\n DSDialogDefaultLayout,\n DSDialogPrimaryMessage,\n DSDialogSecondaryMessage,\n DSDialogBodyWithSchema,\n DSDialogHeaderWithSchema,\n DSDialogFooterWithSchema,\n DSDialogSeparatorWithSchema,\n DSDialogTitleWithSchema,\n DSDialogAddonWithSchema,\n DSDialogDefaultLayoutWithSchema,\n DSDialogPrimaryMessageWithSchema,\n DSDialogSecondaryMessageWithSchema,\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,aAAa,YAAY;AACzB,eAAe,YAAY;AAC3B,eAAe,YAAY;AAC3B,kBAAkB,YAAY;AAC9B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,sBAAsB,YAAY;AAClC,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AAErC,aAAa,cAAc;AAC3B,eAAe,cAAc;AAC7B,eAAe,cAAc;AAC7B,kBAAkB,cAAc;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,sBAAsB,cAAc;AACpC,uBAAuB,cAAc;AACrC,yBAAyB,cAAc;AAEvC,MAAM,yBAAyB,SAAS,YAAY;AACpD,MAAM,2BAA2B,SAAS,cAAc;AACxD,MAAM,2BAA2B,SAAS,cAAc;AACxD,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,MAAM,0BAA0B,SAAS,aAAa;AACtD,MAAM,0BAA0B,SAAS,aAAa;AACtD,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,MAAM,mCAAmC,SAAS,sBAAsB;AACxE,MAAM,qCAAqC,SAAS,wBAAwB;AAE5E,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AACrC,yBAAyB,YAAY;AACrC,4BAA4B,YAAY;AACxC,wBAAwB,YAAY;AACpC,wBAAwB,YAAY;AACpC,gCAAgC,YAAY;AAC5C,iCAAiC,YAAY;AAC7C,mCAAmC,YAAY;AAE/C;AACA;AACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/propTypes.js
CHANGED
|
@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
import * as React from "react";
|
|
21
|
-
import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-
|
|
21
|
+
import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-utilities";
|
|
22
22
|
import { DSDialogSizes, DSDialogSizesArrayValues } from "./utils";
|
|
23
23
|
const propTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
|
|
24
24
|
isOpen: PropTypes.bool.description("Whether the Dialog is open or not.").defaultValue(false),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { globalAttributesPropTypes, GlobalAttributesT, PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { globalAttributesPropTypes, GlobalAttributesT, PropTypes } from '@elliemae/ds-utilities';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils';\n\nexport declare namespace DSDialogT {\n export type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\n export interface DefaultProps {\n [key: string]: unknown;\n isOpen: boolean;\n centered: boolean;\n size: Sizes;\n removeAutoFocus: boolean;\n zIndex: number;\n onClickOutside: () => void;\n onClose: () => void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n }\n\n export interface Props\n extends DefaultProps,\n PropsRequired,\n Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'children'> {\n [key: string]: unknown;\n }\n}\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),\n children: PropTypes.node.description('Nested components.').isRequired,\n centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),\n removeAutoFocus: PropTypes.bool\n .description(\n '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.',\n )\n .defaultValue(false),\n onClickOutside: PropTypes.func\n .description('Callback that should be used to close the modal when the user clicks outside.')\n .defaultValue(() => {}),\n onClose: PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),\n size: PropTypes.oneOf(DSDialogSizesArrayValues)\n .description(`Dialog's width size.`)\n .defaultValue(DSDialogSizes.DEFAULT),\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AA2BO,MAAM,YAAY,iCACpB,4BADoB;AAAA,EAEvB,QAAQ,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,oBAAoB,EAAE;AAAA,EAC3D,UAAU,UAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA,EAC9E,iBAAiB,UAAU,KACxB,YACC,uIACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,UAAU,KACvB,YAAY,+EAA+E,EAC3F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,SAAS,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC7F,MAAM,UAAU,MAAM,wBAAwB,EAC3C,YAAY,sBAAsB,EAClC,aAAa,cAAc,OAAO;AACvC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
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,
|
|
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,KAAK,EAAE;AAAA;AAAA,0BAEtD,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
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "type
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "type GetSpacePropsT = <T extends Record<string, unknown> = Record<string, unknown>>(\n props: T,\n) => Record<string, unknown>;\n\nexport const getSpaceProps: GetSpacePropsT = (props) =>\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;ACIO,MAAM,gBAAgC,CAAC,UAC5C,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,kBAAkB,KAAK,GAAG,CAAC,CAAC;AAElF,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,2BAA2B,OAAO,OAAO,aAAa;AAE5D,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dialog",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.42",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Dialog",
|
|
6
6
|
"files": [
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"indent": 4
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
|
-
"@elliemae/ds-button": "3.0.0-next.
|
|
71
|
-
"@elliemae/ds-
|
|
72
|
-
"@elliemae/ds-
|
|
70
|
+
"@elliemae/ds-button": "3.0.0-next.42",
|
|
71
|
+
"@elliemae/ds-system": "3.0.0-next.29",
|
|
72
|
+
"@elliemae/ds-utilities": "3.0.0-next.42",
|
|
73
73
|
"@xstyled/styled-components": "~3.1.2",
|
|
74
74
|
"react-desc": "~4.1.3"
|
|
75
75
|
},
|