@elliemae/ds-modal-slide 3.16.0 → 3.16.1
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/DSModalSlide.js +31 -3
- package/dist/cjs/DSModalSlide.js.map +2 -2
- package/dist/cjs/components/Footer.js +23 -1
- package/dist/cjs/components/Footer.js.map +2 -2
- package/dist/cjs/components/Header.js +8 -1
- package/dist/cjs/components/Header.js.map +2 -2
- package/dist/cjs/components/blocks.js +4 -0
- package/dist/cjs/components/blocks.js.map +1 -1
- package/dist/cjs/index.js +8 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/esm/DSModalSlide.js +27 -3
- package/dist/esm/DSModalSlide.js.map +2 -2
- package/dist/esm/components/Footer.js +19 -1
- package/dist/esm/components/Footer.js.map +2 -2
- package/dist/esm/components/Header.js +4 -1
- package/dist/esm/components/Header.js.map +2 -2
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/package.json +10 -10
- package/dist/types/DSModalSlide.d.ts +0 -44
- package/dist/types/components/Footer.d.ts +0 -55
- package/dist/types/components/Header.d.ts +0 -26
- package/dist/types/components/blocks.d.ts +0 -11
- package/dist/types/index.d.ts +0 -4
- package/dist/types/tests/DSModalSlide.test.d.ts +0 -1
package/dist/cjs/DSModalSlide.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -40,9 +44,9 @@ var import_react_dom = __toESM(require("react-dom"));
|
|
|
40
44
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
45
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
42
46
|
var import_ds_separator = __toESM(require("@elliemae/ds-separator"));
|
|
43
|
-
var import_blocks = require("./components/blocks");
|
|
44
|
-
var import_Header = __toESM(require("./components/Header"));
|
|
45
|
-
var import_Footer = __toESM(require("./components/Footer"));
|
|
47
|
+
var import_blocks = require("./components/blocks.js");
|
|
48
|
+
var import_Header = __toESM(require("./components/Header.js"));
|
|
49
|
+
var import_Footer = __toESM(require("./components/Footer.js"));
|
|
46
50
|
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
47
51
|
overflow: auto;
|
|
48
52
|
&:focus,
|
|
@@ -175,15 +179,39 @@ const DSModalSlide = (props2) => {
|
|
|
175
179
|
);
|
|
176
180
|
};
|
|
177
181
|
const props = {
|
|
182
|
+
/**
|
|
183
|
+
* If the modal slide is centered or not
|
|
184
|
+
*/
|
|
178
185
|
centered: import_ds_props_helpers.PropTypes.bool.description("If the modal slide is centered or not"),
|
|
186
|
+
/**
|
|
187
|
+
* If the modal slide is visible or not
|
|
188
|
+
*/
|
|
179
189
|
isOpen: import_ds_props_helpers.PropTypes.bool.description("If the modal slide is visible or not"),
|
|
190
|
+
/**
|
|
191
|
+
* Main content of the modal
|
|
192
|
+
*/
|
|
180
193
|
children: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.element, import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.any]).isRequired.description(
|
|
181
194
|
"Main content of the modal"
|
|
182
195
|
),
|
|
196
|
+
/**
|
|
197
|
+
* If the modal slide takes the full width or not
|
|
198
|
+
*/
|
|
183
199
|
fullWidth: import_ds_props_helpers.PropTypes.bool.description("If the modal slide takes the full width or not"),
|
|
200
|
+
/**
|
|
201
|
+
* If the modal slide has a header, only available for full width option
|
|
202
|
+
*/
|
|
184
203
|
header: import_ds_props_helpers.PropTypes.element.description("If the modal slide has a header, only available for full width option"),
|
|
204
|
+
/**
|
|
205
|
+
* Ratio of fade out
|
|
206
|
+
*/
|
|
185
207
|
fadeOut: import_ds_props_helpers.PropTypes.number.description("Ratio of fade out"),
|
|
208
|
+
/**
|
|
209
|
+
* Ratio of fade in
|
|
210
|
+
*/
|
|
186
211
|
fadeIn: import_ds_props_helpers.PropTypes.number.description("Ratio of fade in"),
|
|
212
|
+
/**
|
|
213
|
+
* Override the panel height to scroll height of the container
|
|
214
|
+
*/
|
|
187
215
|
overrideHeight: import_ds_props_helpers.PropTypes.bool.description("Override the panel height to scroll height of the container")
|
|
188
216
|
};
|
|
189
217
|
DSModalSlide.propTypes = props;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSModalSlide.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { PropTypes, describe, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { debounce } from 'lodash';\nimport ReactDOM from 'react-dom';\nimport { useTheme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Wrapper, Overlay, Content, ActualContent } from './components/blocks';\nimport ModalHeader from './components/Header';\nimport ModalFooter from './components/Footer';\n\nconst StyledWrapper = styled(Grid)`\n overflow: auto;\n &:focus,\n &:focus-visible {\n outline: 1px solid ${({ theme }) => theme.colors.brand['600']};\n outline-offset: -1px;\n }\n`;\n// eslint-disable-next-line complexity\nconst DSModalSlide = (props) => {\n const {\n isOpen = false,\n children,\n getContainer,\n centered = false,\n fullWidth = false,\n header = null,\n footer = null,\n fadeOut = 1500,\n fadeIn = 1500,\n overrideHeight = false,\n innerRef = null,\n } = props;\n const [isMoving, setMoving] = useState(false);\n const [show, setShow] = useState(isOpen);\n const [width, setWidth] = useState(50);\n const [height, setHeight] = useState('100%');\n const theme = useTheme();\n const contentRows = [...(header ? ['auto', '1px'] : []), '1fr', ...(footer ? ['1px', theme.space.m] : [])];\n const globalAttrs = useGetGlobalAttributes(props);\n const updateShow = useCallback(() => {\n if (fullWidth) setWidth(100);\n else setWidth(50);\n if (isOpen !== show) {\n setMoving(true);\n if (isOpen) {\n setShow(isOpen);\n }\n }\n }, [isOpen, fullWidth, isMoving]);\n\n useEffect(updateShow, [isOpen, fullWidth]);\n\n const container = getContainer();\n\n const handleHeight = useCallback(() => {\n const newHeight =\n overrideHeight && container.scrollHeight > container.getBoundingClientRect().height\n ? container.scrollHeight\n : container.getBoundingClientRect().height;\n setHeight(newHeight);\n }, [container, overrideHeight]);\n\n const onChangeParent = useMemo(() => debounce(handleHeight, 300), [handleHeight]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => onChangeParent());\n if (container) {\n resizeObserver.observe(container);\n if (!container.style.position) {\n container.style.position = 'relative';\n }\n onChangeParent();\n }\n return () => {\n if (container) resizeObserver.unobserve(container);\n };\n }, [container, onChangeParent]);\n\n if (!show) return null;\n if (!container) return null;\n\n const handleAnimationEnd = () => {\n setMoving(false);\n if (!isOpen) setShow(isOpen);\n };\n\n return ReactDOM.createPortal(\n <Wrapper\n {...globalAttrs}\n classProps={{\n show: isOpen,\n centered,\n }}\n style={{\n '--height': height,\n '--fade-in': fadeIn,\n '--fade-out': fadeOut,\n '--width': width,\n }}\n >\n <Overlay\n classProps={{\n show: isOpen,\n }}\n >\n <Content\n onAnimationEnd={handleAnimationEnd}\n classProps={{\n show: isOpen,\n }}\n >\n <Grid\n style={{\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n '-webkit-backface-visibility': 'hidden',\n 'backface-visibility': 'hidden',\n '-webkit-transform-style': 'preserve-3d',\n }}\n rows={contentRows}\n data-testid=\"ds-modal-slide\"\n >\n {header && React.cloneElement(header, { fullWidth })}\n {header && <DSSeparator position=\"initial\" type=\"non-form\" />}\n <Grid style={{ overflow: 'hidden' }}>\n <StyledWrapper ref={innerRef} tabIndex={0} role=\"contentinfo\">\n <ActualContent>{children}</ActualContent>\n </StyledWrapper>\n </Grid>\n {footer && <DSSeparator position=\"initial\" type=\"non-form\" />}\n {footer}\n </Grid>\n </Content>\n </Overlay>\n </Wrapper>,\n container,\n );\n};\n\nconst props = {\n /**\n * If the modal slide is centered or not\n */\n centered: PropTypes.bool.description('If the modal slide is centered or not'),\n /**\n * If the modal slide is visible or not\n */\n isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n /**\n * Main content of the modal\n */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description(\n 'Main content of the modal',\n ),\n /**\n * If the modal slide takes the full width or not\n */\n fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n /**\n * If the modal slide has a header, only available for full width option\n */\n header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n /**\n * Ratio of fade out\n */\n fadeOut: PropTypes.number.description('Ratio of fade out'),\n /**\n * Ratio of fade in\n */\n fadeIn: PropTypes.number.description('Ratio of fade in'),\n /**\n * Override the panel height to scroll height of the container\n */\n overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n};\n\nDSModalSlide.propTypes = props;\nDSModalSlide.displayName = 'DSModalSlide';\nconst DSModalSlideWithSchema = describe(DSModalSlide);\nDSModalSlideWithSchema.propTypes = props;\n\nexport { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };\n\nexport default DSModalSlide;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { PropTypes, describe, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { debounce } from 'lodash';\nimport ReactDOM from 'react-dom';\nimport { useTheme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Wrapper, Overlay, Content, ActualContent } from './components/blocks.js';\nimport ModalHeader from './components/Header.js';\nimport ModalFooter from './components/Footer.js';\n\nconst StyledWrapper = styled(Grid)`\n overflow: auto;\n &:focus,\n &:focus-visible {\n outline: 1px solid ${({ theme }) => theme.colors.brand['600']};\n outline-offset: -1px;\n }\n`;\n// eslint-disable-next-line complexity\nconst DSModalSlide = (props) => {\n const {\n isOpen = false,\n children,\n getContainer,\n centered = false,\n fullWidth = false,\n header = null,\n footer = null,\n fadeOut = 1500,\n fadeIn = 1500,\n overrideHeight = false,\n innerRef = null,\n } = props;\n const [isMoving, setMoving] = useState(false);\n const [show, setShow] = useState(isOpen);\n const [width, setWidth] = useState(50);\n const [height, setHeight] = useState('100%');\n const theme = useTheme();\n const contentRows = [...(header ? ['auto', '1px'] : []), '1fr', ...(footer ? ['1px', theme.space.m] : [])];\n const globalAttrs = useGetGlobalAttributes(props);\n const updateShow = useCallback(() => {\n if (fullWidth) setWidth(100);\n else setWidth(50);\n if (isOpen !== show) {\n setMoving(true);\n if (isOpen) {\n setShow(isOpen);\n }\n }\n }, [isOpen, fullWidth, isMoving]);\n\n useEffect(updateShow, [isOpen, fullWidth]);\n\n const container = getContainer();\n\n const handleHeight = useCallback(() => {\n const newHeight =\n overrideHeight && container.scrollHeight > container.getBoundingClientRect().height\n ? container.scrollHeight\n : container.getBoundingClientRect().height;\n setHeight(newHeight);\n }, [container, overrideHeight]);\n\n const onChangeParent = useMemo(() => debounce(handleHeight, 300), [handleHeight]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => onChangeParent());\n if (container) {\n resizeObserver.observe(container);\n if (!container.style.position) {\n container.style.position = 'relative';\n }\n onChangeParent();\n }\n return () => {\n if (container) resizeObserver.unobserve(container);\n };\n }, [container, onChangeParent]);\n\n if (!show) return null;\n if (!container) return null;\n\n const handleAnimationEnd = () => {\n setMoving(false);\n if (!isOpen) setShow(isOpen);\n };\n\n return ReactDOM.createPortal(\n <Wrapper\n {...globalAttrs}\n classProps={{\n show: isOpen,\n centered,\n }}\n style={{\n '--height': height,\n '--fade-in': fadeIn,\n '--fade-out': fadeOut,\n '--width': width,\n }}\n >\n <Overlay\n classProps={{\n show: isOpen,\n }}\n >\n <Content\n onAnimationEnd={handleAnimationEnd}\n classProps={{\n show: isOpen,\n }}\n >\n <Grid\n style={{\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n '-webkit-backface-visibility': 'hidden',\n 'backface-visibility': 'hidden',\n '-webkit-transform-style': 'preserve-3d',\n }}\n rows={contentRows}\n data-testid=\"ds-modal-slide\"\n >\n {header && React.cloneElement(header, { fullWidth })}\n {header && <DSSeparator position=\"initial\" type=\"non-form\" />}\n <Grid style={{ overflow: 'hidden' }}>\n <StyledWrapper ref={innerRef} tabIndex={0} role=\"contentinfo\">\n <ActualContent>{children}</ActualContent>\n </StyledWrapper>\n </Grid>\n {footer && <DSSeparator position=\"initial\" type=\"non-form\" />}\n {footer}\n </Grid>\n </Content>\n </Overlay>\n </Wrapper>,\n container,\n );\n};\n\nconst props = {\n /**\n * If the modal slide is centered or not\n */\n centered: PropTypes.bool.description('If the modal slide is centered or not'),\n /**\n * If the modal slide is visible or not\n */\n isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n /**\n * Main content of the modal\n */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description(\n 'Main content of the modal',\n ),\n /**\n * If the modal slide takes the full width or not\n */\n fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n /**\n * If the modal slide has a header, only available for full width option\n */\n header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n /**\n * Ratio of fade out\n */\n fadeOut: PropTypes.number.description('Ratio of fade out'),\n /**\n * Ratio of fade in\n */\n fadeIn: PropTypes.number.description('Ratio of fade in'),\n /**\n * Override the panel height to scroll height of the container\n */\n overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n};\n\nDSModalSlide.propTypes = props;\nDSModalSlide.displayName = 'DSModalSlide';\nconst DSModalSlideWithSchema = describe(DSModalSlide);\nDSModalSlideWithSchema.propTypes = props;\n\nexport { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };\n\nexport default DSModalSlide;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ModalFooter", "ModalHeader", "props", "ReactDOM", "React", "DSSeparator"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -32,7 +36,7 @@ var React = __toESM(require("react"));
|
|
|
32
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
37
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
34
38
|
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
35
|
-
var import_blocks = require("./blocks");
|
|
39
|
+
var import_blocks = require("./blocks.js");
|
|
36
40
|
const ModalFooter = ({
|
|
37
41
|
confirmLabel = "Confirm",
|
|
38
42
|
rejectLabel = "Cancel",
|
|
@@ -69,13 +73,31 @@ const ModalFooter = ({
|
|
|
69
73
|
)
|
|
70
74
|
] }) });
|
|
71
75
|
const props = {
|
|
76
|
+
/**
|
|
77
|
+
* Confirm Label
|
|
78
|
+
*/
|
|
72
79
|
confirmLabel: import_ds_props_helpers.PropTypes.string.description("Confirm Label"),
|
|
80
|
+
/**
|
|
81
|
+
* Reject Label
|
|
82
|
+
*/
|
|
73
83
|
rejectLabel: import_ds_props_helpers.PropTypes.string.description("Reject Label"),
|
|
84
|
+
/**
|
|
85
|
+
* Callback
|
|
86
|
+
*/
|
|
74
87
|
onConfirm: import_ds_props_helpers.PropTypes.func.description("Callback"),
|
|
88
|
+
/**
|
|
89
|
+
* Callback
|
|
90
|
+
*/
|
|
75
91
|
onReject: import_ds_props_helpers.PropTypes.func.description("Callback"),
|
|
92
|
+
/**
|
|
93
|
+
* Extra DSButton props for confirm btn.
|
|
94
|
+
*/
|
|
76
95
|
confirmProps: import_ds_props_helpers.PropTypes.shape({
|
|
77
96
|
disabled: import_ds_props_helpers.PropTypes.bool
|
|
78
97
|
}).description("Extra DSButton props for confirm btn."),
|
|
98
|
+
/**
|
|
99
|
+
* Extra DSButton props for reject btn.
|
|
100
|
+
*/
|
|
79
101
|
rejectProps: import_ds_props_helpers.PropTypes.shape({
|
|
80
102
|
disabled: import_ds_props_helpers.PropTypes.bool
|
|
81
103
|
}).description("Extra DSButton props for reject btn.")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Footer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport DSButton from '@elliemae/ds-button';\nimport { FooterWrapper } from './blocks';\n\nconst ModalFooter = ({\n confirmLabel = 'Confirm',\n rejectLabel = 'Cancel',\n onConfirm,\n onReject,\n confirmProps = {\n disabled: false,\n },\n rejectProps = {\n disabled: false,\n },\n}) => (\n <>\n <FooterWrapper>\n {!!onReject && (\n <DSButton\n buttonType=\"secondary\"\n className=\"action-reject\"\n containerProps={{ 'data-testid': 'modal-footer-reject-btn' }}\n labelText={rejectLabel}\n onClick={onReject}\n {...rejectProps}\n />\n )}\n {!!onConfirm && (\n <DSButton\n buttonType=\"primary\"\n className=\"action-confirm\"\n containerProps={{ 'data-testid': 'modal-footer-confirm-btn' }}\n labelText={confirmLabel}\n onClick={onConfirm}\n {...confirmProps}\n />\n )}\n </FooterWrapper>\n </>\n);\n\nconst props = {\n /**\n * Confirm Label\n */\n confirmLabel: PropTypes.string.description('Confirm Label'),\n /**\n * Reject Label\n */\n rejectLabel: PropTypes.string.description('Reject Label'),\n /**\n * Callback\n */\n onConfirm: PropTypes.func.description('Callback'),\n /**\n * Callback\n */\n onReject: PropTypes.func.description('Callback'),\n /**\n * Extra DSButton props for confirm btn.\n */\n confirmProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for confirm btn.'),\n /**\n * Extra DSButton props for reject btn.\n */\n rejectProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for reject btn.'),\n};\n\nModalFooter.propTypes = props;\nModalFooter.displayName = 'ModalFooter';\nconst DSModalSlideFooterWithSchema = describe(ModalFooter);\nDSModalSlideFooterWithSchema.propTypes = props;\n\nexport { DSModalSlideFooterWithSchema };\n\nexport default ModalFooter;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport DSButton from '@elliemae/ds-button';\nimport { FooterWrapper } from './blocks.js';\n\nconst ModalFooter = ({\n confirmLabel = 'Confirm',\n rejectLabel = 'Cancel',\n onConfirm,\n onReject,\n confirmProps = {\n disabled: false,\n },\n rejectProps = {\n disabled: false,\n },\n}) => (\n <>\n <FooterWrapper>\n {!!onReject && (\n <DSButton\n buttonType=\"secondary\"\n className=\"action-reject\"\n containerProps={{ 'data-testid': 'modal-footer-reject-btn' }}\n labelText={rejectLabel}\n onClick={onReject}\n {...rejectProps}\n />\n )}\n {!!onConfirm && (\n <DSButton\n buttonType=\"primary\"\n className=\"action-confirm\"\n containerProps={{ 'data-testid': 'modal-footer-confirm-btn' }}\n labelText={confirmLabel}\n onClick={onConfirm}\n {...confirmProps}\n />\n )}\n </FooterWrapper>\n </>\n);\n\nconst props = {\n /**\n * Confirm Label\n */\n confirmLabel: PropTypes.string.description('Confirm Label'),\n /**\n * Reject Label\n */\n rejectLabel: PropTypes.string.description('Reject Label'),\n /**\n * Callback\n */\n onConfirm: PropTypes.func.description('Callback'),\n /**\n * Callback\n */\n onReject: PropTypes.func.description('Callback'),\n /**\n * Extra DSButton props for confirm btn.\n */\n confirmProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for confirm btn.'),\n /**\n * Extra DSButton props for reject btn.\n */\n rejectProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for reject btn.'),\n};\n\nModalFooter.propTypes = props;\nModalFooter.displayName = 'ModalFooter';\nconst DSModalSlideFooterWithSchema = describe(ModalFooter);\nDSModalSlideFooterWithSchema.propTypes = props;\n\nexport { DSModalSlideFooterWithSchema };\n\nexport default ModalFooter;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBrB;AAhBF,8BAAoC;AACpC,uBAAqB;AACrB,oBAA8B;AAE9B,MAAM,cAAc,CAAC;AAAA,EACnB,eAAe;AAAA,EACf,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,UAAU;AAAA,EACZ;AACF,MACE,2EACE,uDAAC,+BACE;AAAA,GAAC,CAAC,YACD;AAAA,IAAC,iBAAAA;AAAA,IAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,gBAAgB,EAAE,eAAe,0BAA0B;AAAA,MAC3D,WAAW;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAAA,EAED,CAAC,CAAC,aACD;AAAA,IAAC,iBAAAA;AAAA,IAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,gBAAgB,EAAE,eAAe,2BAA2B;AAAA,MAC5D,WAAW;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAAA,GAEJ,GACF;AAGF,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIZ,cAAc,kCAAU,OAAO,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI1D,aAAa,kCAAU,OAAO,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIxD,WAAW,kCAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,UAAU,kCAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAI/C,cAAc,kCAAU,MAAM;AAAA,IAC5B,UAAU,kCAAU;AAAA,EACtB,CAAC,EAAE,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAItD,aAAa,kCAAU,MAAM;AAAA,IAC3B,UAAU,kCAAU;AAAA,EACtB,CAAC,EAAE,YAAY,sCAAsC;AACvD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,mCAA+B,kCAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
|
|
6
6
|
"names": ["DSButton"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -35,7 +39,7 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
35
39
|
var import_ds_separator = __toESM(require("@elliemae/ds-separator"));
|
|
36
40
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
37
41
|
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
38
|
-
var import_blocks = require("./blocks");
|
|
42
|
+
var import_blocks = require("./blocks.js");
|
|
39
43
|
const ModalHeader = ({ innerRef = null, title: headerTitle = "", onClose = () => null, toolbar = null }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HeaderWrapper, { children: [
|
|
40
44
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.HeaderLeftSide, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Title, { children: headerTitle }) }) }),
|
|
41
45
|
toolbar,
|
|
@@ -67,8 +71,11 @@ const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.default)
|
|
|
67
71
|
margin: ${(props2) => props2.theme.space.xs};
|
|
68
72
|
`;
|
|
69
73
|
const props = {
|
|
74
|
+
/** on modal close callback */
|
|
70
75
|
onClose: import_ds_props_helpers.PropTypes.func.description("on modal close callback"),
|
|
76
|
+
/** modal toolbar component */
|
|
71
77
|
toolbar: import_ds_props_helpers.PropTypes.node.description("modal toolbar comoponent"),
|
|
78
|
+
/** modal title */
|
|
72
79
|
title: import_ds_props_helpers.PropTypes.string.description("modal title"),
|
|
73
80
|
innerRef: import_ds_props_helpers.PropTypes.func.description("button close ref ")
|
|
74
81
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Header.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Header, HeaderLeftSide, Title } from './blocks';\n\nconst ModalHeader = ({ innerRef = null, title: headerTitle = '', onClose = () => null, toolbar = null }) => (\n <HeaderWrapper>\n <HeaderLeftSide>\n <Header>\n <Title>{headerTitle}</Title>\n </Header>\n </HeaderLeftSide>\n {toolbar}\n {toolbar && <StyledSeparator position=\"initial\" margin=\"none\" orientation=\"vertical\" type=\"non-form\" />}\n <StyledCloseButton\n data-testid=\"modal-slider-header-close\"\n aria-label=\"Close modal slide\"\n buttonType=\"text\"\n icon={<Close aria-label=\"Close modal slide\" size=\"s\" />}\n onClick={onClose}\n innerRef={innerRef}\n />\n </HeaderWrapper>\n);\n\nconst HeaderWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n height: 48px;\n overflow: hidden;\n`;\n\nconst StyledSeparator = styled(DSSeparator)`\n padding: ${(props) => props.theme.space.xs} 0;\n`;\n\nconst StyledCloseButton = styled(DSButton)`\n margin: ${(props) => props.theme.space.xs};\n`;\n\nconst props = {\n /** on modal close callback */\n onClose: PropTypes.func.description('on modal close callback'),\n /** modal toolbar component */\n toolbar: PropTypes.node.description('modal toolbar comoponent'),\n /** modal title */\n title: PropTypes.string.description('modal title'),\n innerRef: PropTypes.func.description('button close ref '),\n};\n\nModalHeader.propTypes = props;\nModalHeader.displayName = 'ModalHeader';\nconst DSModalSlideHeaderWithSchema = describe(ModalHeader);\nDSModalSlideHeaderWithSchema.propTypes = props;\n\nexport { DSModalSlideHeaderWithSchema };\n\nexport default ModalHeader;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Header, HeaderLeftSide, Title } from './blocks.js';\n\nconst ModalHeader = ({ innerRef = null, title: headerTitle = '', onClose = () => null, toolbar = null }) => (\n <HeaderWrapper>\n <HeaderLeftSide>\n <Header>\n <Title>{headerTitle}</Title>\n </Header>\n </HeaderLeftSide>\n {toolbar}\n {toolbar && <StyledSeparator position=\"initial\" margin=\"none\" orientation=\"vertical\" type=\"non-form\" />}\n <StyledCloseButton\n data-testid=\"modal-slider-header-close\"\n aria-label=\"Close modal slide\"\n buttonType=\"text\"\n icon={<Close aria-label=\"Close modal slide\" size=\"s\" />}\n onClick={onClose}\n innerRef={innerRef}\n />\n </HeaderWrapper>\n);\n\nconst HeaderWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n height: 48px;\n overflow: hidden;\n`;\n\nconst StyledSeparator = styled(DSSeparator)`\n padding: ${(props) => props.theme.space.xs} 0;\n`;\n\nconst StyledCloseButton = styled(DSButton)`\n margin: ${(props) => props.theme.space.xs};\n`;\n\nconst props = {\n /** on modal close callback */\n onClose: PropTypes.func.description('on modal close callback'),\n /** modal toolbar component */\n toolbar: PropTypes.node.description('modal toolbar comoponent'),\n /** modal title */\n title: PropTypes.string.description('modal title'),\n innerRef: PropTypes.func.description('button close ref '),\n};\n\nModalHeader.propTypes = props;\nModalHeader.displayName = 'ModalHeader';\nconst DSModalSlideHeaderWithSchema = describe(ModalHeader);\nDSModalSlideHeaderWithSchema.propTypes = props;\n\nexport { DSModalSlideHeaderWithSchema };\n\nexport default ModalHeader;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSrB;AARF,8BAAoC;AACpC,uBAAuB;AACvB,0BAAwB;AACxB,sBAAsB;AACtB,uBAAqB;AACrB,oBAA8C;AAE9C,MAAM,cAAc,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,IAAI,UAAU,MAAM,MAAM,UAAU,KAAK,MACpG,6CAAC,iBACC;AAAA,8CAAC,gCACC,sDAAC,wBACC,sDAAC,uBAAO,uBAAY,GACtB,GACF;AAAA,EACC;AAAA,EACA,WAAW,4CAAC,mBAAgB,UAAS,WAAU,QAAO,QAAO,aAAY,YAAW,MAAK,YAAW;AAAA,EACrG;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,YAAW;AAAA,MACX,MAAM,4CAAC,yBAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA,MACrD,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAAA,GACF;AAGF,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,sBAAkB,yBAAO,oBAAAA,OAAW;AAAA,aAC7B,CAACC,WAAUA,OAAM,MAAM,MAAM;AAAA;AAG1C,MAAM,wBAAoB,yBAAO,iBAAAC,OAAQ;AAAA,YAC7B,CAACD,WAAUA,OAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,QAAQ;AAAA;AAAA,EAEZ,SAAS,kCAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE7D,SAAS,kCAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAE9D,OAAO,kCAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,kCAAU,KAAK,YAAY,mBAAmB;AAC1D;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,mCAA+B,kCAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
|
|
6
6
|
"names": ["DSSeparator", "props", "DSButton"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/blocks.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'modal-slide';\n\nexport const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', ({ show, centered }) => ({\n showing: show,\n disappearing: !show,\n centered,\n}));\n\nexport const Overlay = aggregatedClasses('div')(blockName, 'overlay', ({ show }) => ({\n showing: show,\n disappearing: !show,\n}));\n\nexport const Content = aggregatedClasses('div')(blockName, 'content', ({ show }) => ({\n showing: show,\n disappearing: !show,\n}));\n\nexport const Title = aggregatedClasses('div')(blockName, 'title', () => ({}));\n\nexport const BreadcrumTitle = aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));\n\nexport const HeaderLeftSide = aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));\n\nexport const ActualContent = aggregatedClasses('div')(blockName, 'actual-content', () => ({}));\nexport const Header = aggregatedClasses('div')(blockName, 'header', () => ({}));\nexport const Footer = aggregatedClasses('div')(blockName, 'footer', () => ({}));\n\nexport const FooterWrapper = aggregatedClasses('div')(blockName, 'footer-wrapper', () => ({}));\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAkC;AAElC,MAAM,YAAY;AAEX,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,MAAM,SAAS,OAAO;AAAA,EAC7F,SAAS;AAAA,EACT,cAAc,CAAC;AAAA,EACf;AACF,EAAE;AAEK,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,KAAK,OAAO;AAAA,EACnF,SAAS;AAAA,EACT,cAAc,CAAC;AACjB,EAAE;AAEK,MAAM,cAAU,wCAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,KAAK,OAAO;AAAA,EACnF,SAAS;AAAA,EACT,cAAc,CAAC;AACjB,EAAE;AAEK,MAAM,YAAQ,wCAAkB,KAAK,EAAE,WAAW,SAAS,OAAO,CAAC,EAAE;AAErE,MAAM,qBAAiB,wCAAkB,KAAK,EAAE,WAAW,mBAAmB,OAAO,CAAC,EAAE;AAExF,MAAM,qBAAiB,wCAAkB,KAAK,EAAE,WAAW,oBAAoB,OAAO,CAAC,EAAE;AAEzF,MAAM,oBAAgB,wCAAkB,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,EAAE;AACtF,MAAM,aAAS,wCAAkB,KAAK,EAAE,WAAW,UAAU,OAAO,CAAC,EAAE;AACvE,MAAM,aAAS,wCAAkB,KAAK,EAAE,WAAW,UAAU,OAAO,CAAC,EAAE;AAEvE,MAAM,oBAAgB,wCAAkB,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,EAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
21
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
22
26
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
27
|
mod
|
|
24
28
|
));
|
|
@@ -31,8 +35,8 @@ __export(src_exports, {
|
|
|
31
35
|
});
|
|
32
36
|
module.exports = __toCommonJS(src_exports);
|
|
33
37
|
var React = __toESM(require("react"));
|
|
34
|
-
__reExport(src_exports, require("./DSModalSlide"), module.exports);
|
|
35
|
-
var import_DSModalSlide = __toESM(require("./DSModalSlide"));
|
|
36
|
-
var import_Header = require("./components/Header");
|
|
37
|
-
var import_Footer = require("./components/Footer");
|
|
38
|
+
__reExport(src_exports, require("./DSModalSlide.js"), module.exports);
|
|
39
|
+
var import_DSModalSlide = __toESM(require("./DSModalSlide.js"));
|
|
40
|
+
var import_Header = require("./components/Header.js");
|
|
41
|
+
var import_Footer = require("./components/Footer.js");
|
|
38
42
|
//# 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": ["export * from './DSModalSlide';\nexport { default } from './DSModalSlide';\nexport { DSModalSlideHeaderWithSchema } from './components/Header';\nexport { DSModalSlideFooterWithSchema } from './components/Footer';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export * from './DSModalSlide.js';\nexport { default } from './DSModalSlide.js';\nexport { DSModalSlideHeaderWithSchema } from './components/Header.js';\nexport { DSModalSlideFooterWithSchema } from './components/Footer.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,8BAAd;AACA,0BAAwB;AACxB,oBAA6C;AAC7C,oBAA6C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSModalSlide.js
CHANGED
|
@@ -7,9 +7,9 @@ import ReactDOM from "react-dom";
|
|
|
7
7
|
import { useTheme, styled } from "@elliemae/ds-system";
|
|
8
8
|
import { Grid } from "@elliemae/ds-grid";
|
|
9
9
|
import DSSeparator from "@elliemae/ds-separator";
|
|
10
|
-
import { Wrapper, Overlay, Content, ActualContent } from "./components/blocks";
|
|
11
|
-
import ModalHeader from "./components/Header";
|
|
12
|
-
import ModalFooter from "./components/Footer";
|
|
10
|
+
import { Wrapper, Overlay, Content, ActualContent } from "./components/blocks.js";
|
|
11
|
+
import ModalHeader from "./components/Header.js";
|
|
12
|
+
import ModalFooter from "./components/Footer.js";
|
|
13
13
|
const StyledWrapper = styled(Grid)`
|
|
14
14
|
overflow: auto;
|
|
15
15
|
&:focus,
|
|
@@ -142,15 +142,39 @@ const DSModalSlide = (props2) => {
|
|
|
142
142
|
);
|
|
143
143
|
};
|
|
144
144
|
const props = {
|
|
145
|
+
/**
|
|
146
|
+
* If the modal slide is centered or not
|
|
147
|
+
*/
|
|
145
148
|
centered: PropTypes.bool.description("If the modal slide is centered or not"),
|
|
149
|
+
/**
|
|
150
|
+
* If the modal slide is visible or not
|
|
151
|
+
*/
|
|
146
152
|
isOpen: PropTypes.bool.description("If the modal slide is visible or not"),
|
|
153
|
+
/**
|
|
154
|
+
* Main content of the modal
|
|
155
|
+
*/
|
|
147
156
|
children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description(
|
|
148
157
|
"Main content of the modal"
|
|
149
158
|
),
|
|
159
|
+
/**
|
|
160
|
+
* If the modal slide takes the full width or not
|
|
161
|
+
*/
|
|
150
162
|
fullWidth: PropTypes.bool.description("If the modal slide takes the full width or not"),
|
|
163
|
+
/**
|
|
164
|
+
* If the modal slide has a header, only available for full width option
|
|
165
|
+
*/
|
|
151
166
|
header: PropTypes.element.description("If the modal slide has a header, only available for full width option"),
|
|
167
|
+
/**
|
|
168
|
+
* Ratio of fade out
|
|
169
|
+
*/
|
|
152
170
|
fadeOut: PropTypes.number.description("Ratio of fade out"),
|
|
171
|
+
/**
|
|
172
|
+
* Ratio of fade in
|
|
173
|
+
*/
|
|
153
174
|
fadeIn: PropTypes.number.description("Ratio of fade in"),
|
|
175
|
+
/**
|
|
176
|
+
* Override the panel height to scroll height of the container
|
|
177
|
+
*/
|
|
154
178
|
overrideHeight: PropTypes.bool.description("Override the panel height to scroll height of the container")
|
|
155
179
|
};
|
|
156
180
|
DSModalSlide.propTypes = props;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSModalSlide.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { PropTypes, describe, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { debounce } from 'lodash';\nimport ReactDOM from 'react-dom';\nimport { useTheme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Wrapper, Overlay, Content, ActualContent } from './components/blocks';\nimport ModalHeader from './components/Header';\nimport ModalFooter from './components/Footer';\n\nconst StyledWrapper = styled(Grid)`\n overflow: auto;\n &:focus,\n &:focus-visible {\n outline: 1px solid ${({ theme }) => theme.colors.brand['600']};\n outline-offset: -1px;\n }\n`;\n// eslint-disable-next-line complexity\nconst DSModalSlide = (props) => {\n const {\n isOpen = false,\n children,\n getContainer,\n centered = false,\n fullWidth = false,\n header = null,\n footer = null,\n fadeOut = 1500,\n fadeIn = 1500,\n overrideHeight = false,\n innerRef = null,\n } = props;\n const [isMoving, setMoving] = useState(false);\n const [show, setShow] = useState(isOpen);\n const [width, setWidth] = useState(50);\n const [height, setHeight] = useState('100%');\n const theme = useTheme();\n const contentRows = [...(header ? ['auto', '1px'] : []), '1fr', ...(footer ? ['1px', theme.space.m] : [])];\n const globalAttrs = useGetGlobalAttributes(props);\n const updateShow = useCallback(() => {\n if (fullWidth) setWidth(100);\n else setWidth(50);\n if (isOpen !== show) {\n setMoving(true);\n if (isOpen) {\n setShow(isOpen);\n }\n }\n }, [isOpen, fullWidth, isMoving]);\n\n useEffect(updateShow, [isOpen, fullWidth]);\n\n const container = getContainer();\n\n const handleHeight = useCallback(() => {\n const newHeight =\n overrideHeight && container.scrollHeight > container.getBoundingClientRect().height\n ? container.scrollHeight\n : container.getBoundingClientRect().height;\n setHeight(newHeight);\n }, [container, overrideHeight]);\n\n const onChangeParent = useMemo(() => debounce(handleHeight, 300), [handleHeight]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => onChangeParent());\n if (container) {\n resizeObserver.observe(container);\n if (!container.style.position) {\n container.style.position = 'relative';\n }\n onChangeParent();\n }\n return () => {\n if (container) resizeObserver.unobserve(container);\n };\n }, [container, onChangeParent]);\n\n if (!show) return null;\n if (!container) return null;\n\n const handleAnimationEnd = () => {\n setMoving(false);\n if (!isOpen) setShow(isOpen);\n };\n\n return ReactDOM.createPortal(\n <Wrapper\n {...globalAttrs}\n classProps={{\n show: isOpen,\n centered,\n }}\n style={{\n '--height': height,\n '--fade-in': fadeIn,\n '--fade-out': fadeOut,\n '--width': width,\n }}\n >\n <Overlay\n classProps={{\n show: isOpen,\n }}\n >\n <Content\n onAnimationEnd={handleAnimationEnd}\n classProps={{\n show: isOpen,\n }}\n >\n <Grid\n style={{\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n '-webkit-backface-visibility': 'hidden',\n 'backface-visibility': 'hidden',\n '-webkit-transform-style': 'preserve-3d',\n }}\n rows={contentRows}\n data-testid=\"ds-modal-slide\"\n >\n {header && React.cloneElement(header, { fullWidth })}\n {header && <DSSeparator position=\"initial\" type=\"non-form\" />}\n <Grid style={{ overflow: 'hidden' }}>\n <StyledWrapper ref={innerRef} tabIndex={0} role=\"contentinfo\">\n <ActualContent>{children}</ActualContent>\n </StyledWrapper>\n </Grid>\n {footer && <DSSeparator position=\"initial\" type=\"non-form\" />}\n {footer}\n </Grid>\n </Content>\n </Overlay>\n </Wrapper>,\n container,\n );\n};\n\nconst props = {\n /**\n * If the modal slide is centered or not\n */\n centered: PropTypes.bool.description('If the modal slide is centered or not'),\n /**\n * If the modal slide is visible or not\n */\n isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n /**\n * Main content of the modal\n */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description(\n 'Main content of the modal',\n ),\n /**\n * If the modal slide takes the full width or not\n */\n fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n /**\n * If the modal slide has a header, only available for full width option\n */\n header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n /**\n * Ratio of fade out\n */\n fadeOut: PropTypes.number.description('Ratio of fade out'),\n /**\n * Ratio of fade in\n */\n fadeIn: PropTypes.number.description('Ratio of fade in'),\n /**\n * Override the panel height to scroll height of the container\n */\n overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n};\n\nDSModalSlide.propTypes = props;\nDSModalSlide.displayName = 'DSModalSlide';\nconst DSModalSlideWithSchema = describe(DSModalSlide);\nDSModalSlideWithSchema.propTypes = props;\n\nexport { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };\n\nexport default DSModalSlide;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACmHb,SAca,KAdb;AAjHV,OAAOA,UAAS,UAAU,WAAW,aAAa,eAAe;AACjE,SAAS,WAAW,UAAU,8BAA8B;AAC5D,SAAS,gBAAgB;AACzB,OAAO,cAAc;AACrB,SAAS,UAAU,cAAc;AACjC,SAAS,YAAY;AACrB,OAAO,iBAAiB;AACxB,SAAS,SAAS,SAAS,SAAS,qBAAqB;AACzD,OAAO,iBAAiB;AACxB,OAAO,iBAAiB;AAExB,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,yBAIR,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { PropTypes, describe, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { debounce } from 'lodash';\nimport ReactDOM from 'react-dom';\nimport { useTheme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Wrapper, Overlay, Content, ActualContent } from './components/blocks.js';\nimport ModalHeader from './components/Header.js';\nimport ModalFooter from './components/Footer.js';\n\nconst StyledWrapper = styled(Grid)`\n overflow: auto;\n &:focus,\n &:focus-visible {\n outline: 1px solid ${({ theme }) => theme.colors.brand['600']};\n outline-offset: -1px;\n }\n`;\n// eslint-disable-next-line complexity\nconst DSModalSlide = (props) => {\n const {\n isOpen = false,\n children,\n getContainer,\n centered = false,\n fullWidth = false,\n header = null,\n footer = null,\n fadeOut = 1500,\n fadeIn = 1500,\n overrideHeight = false,\n innerRef = null,\n } = props;\n const [isMoving, setMoving] = useState(false);\n const [show, setShow] = useState(isOpen);\n const [width, setWidth] = useState(50);\n const [height, setHeight] = useState('100%');\n const theme = useTheme();\n const contentRows = [...(header ? ['auto', '1px'] : []), '1fr', ...(footer ? ['1px', theme.space.m] : [])];\n const globalAttrs = useGetGlobalAttributes(props);\n const updateShow = useCallback(() => {\n if (fullWidth) setWidth(100);\n else setWidth(50);\n if (isOpen !== show) {\n setMoving(true);\n if (isOpen) {\n setShow(isOpen);\n }\n }\n }, [isOpen, fullWidth, isMoving]);\n\n useEffect(updateShow, [isOpen, fullWidth]);\n\n const container = getContainer();\n\n const handleHeight = useCallback(() => {\n const newHeight =\n overrideHeight && container.scrollHeight > container.getBoundingClientRect().height\n ? container.scrollHeight\n : container.getBoundingClientRect().height;\n setHeight(newHeight);\n }, [container, overrideHeight]);\n\n const onChangeParent = useMemo(() => debounce(handleHeight, 300), [handleHeight]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => onChangeParent());\n if (container) {\n resizeObserver.observe(container);\n if (!container.style.position) {\n container.style.position = 'relative';\n }\n onChangeParent();\n }\n return () => {\n if (container) resizeObserver.unobserve(container);\n };\n }, [container, onChangeParent]);\n\n if (!show) return null;\n if (!container) return null;\n\n const handleAnimationEnd = () => {\n setMoving(false);\n if (!isOpen) setShow(isOpen);\n };\n\n return ReactDOM.createPortal(\n <Wrapper\n {...globalAttrs}\n classProps={{\n show: isOpen,\n centered,\n }}\n style={{\n '--height': height,\n '--fade-in': fadeIn,\n '--fade-out': fadeOut,\n '--width': width,\n }}\n >\n <Overlay\n classProps={{\n show: isOpen,\n }}\n >\n <Content\n onAnimationEnd={handleAnimationEnd}\n classProps={{\n show: isOpen,\n }}\n >\n <Grid\n style={{\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n '-webkit-backface-visibility': 'hidden',\n 'backface-visibility': 'hidden',\n '-webkit-transform-style': 'preserve-3d',\n }}\n rows={contentRows}\n data-testid=\"ds-modal-slide\"\n >\n {header && React.cloneElement(header, { fullWidth })}\n {header && <DSSeparator position=\"initial\" type=\"non-form\" />}\n <Grid style={{ overflow: 'hidden' }}>\n <StyledWrapper ref={innerRef} tabIndex={0} role=\"contentinfo\">\n <ActualContent>{children}</ActualContent>\n </StyledWrapper>\n </Grid>\n {footer && <DSSeparator position=\"initial\" type=\"non-form\" />}\n {footer}\n </Grid>\n </Content>\n </Overlay>\n </Wrapper>,\n container,\n );\n};\n\nconst props = {\n /**\n * If the modal slide is centered or not\n */\n centered: PropTypes.bool.description('If the modal slide is centered or not'),\n /**\n * If the modal slide is visible or not\n */\n isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n /**\n * Main content of the modal\n */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description(\n 'Main content of the modal',\n ),\n /**\n * If the modal slide takes the full width or not\n */\n fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n /**\n * If the modal slide has a header, only available for full width option\n */\n header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n /**\n * Ratio of fade out\n */\n fadeOut: PropTypes.number.description('Ratio of fade out'),\n /**\n * Ratio of fade in\n */\n fadeIn: PropTypes.number.description('Ratio of fade in'),\n /**\n * Override the panel height to scroll height of the container\n */\n overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n};\n\nDSModalSlide.propTypes = props;\nDSModalSlide.displayName = 'DSModalSlide';\nconst DSModalSlideWithSchema = describe(DSModalSlide);\nDSModalSlideWithSchema.propTypes = props;\n\nexport { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };\n\nexport default DSModalSlide;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "props"]
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { PropTypes, describe } from "@elliemae/ds-props-helpers";
|
|
4
4
|
import DSButton from "@elliemae/ds-button";
|
|
5
|
-
import { FooterWrapper } from "./blocks";
|
|
5
|
+
import { FooterWrapper } from "./blocks.js";
|
|
6
6
|
const ModalFooter = ({
|
|
7
7
|
confirmLabel = "Confirm",
|
|
8
8
|
rejectLabel = "Cancel",
|
|
@@ -39,13 +39,31 @@ const ModalFooter = ({
|
|
|
39
39
|
)
|
|
40
40
|
] }) });
|
|
41
41
|
const props = {
|
|
42
|
+
/**
|
|
43
|
+
* Confirm Label
|
|
44
|
+
*/
|
|
42
45
|
confirmLabel: PropTypes.string.description("Confirm Label"),
|
|
46
|
+
/**
|
|
47
|
+
* Reject Label
|
|
48
|
+
*/
|
|
43
49
|
rejectLabel: PropTypes.string.description("Reject Label"),
|
|
50
|
+
/**
|
|
51
|
+
* Callback
|
|
52
|
+
*/
|
|
44
53
|
onConfirm: PropTypes.func.description("Callback"),
|
|
54
|
+
/**
|
|
55
|
+
* Callback
|
|
56
|
+
*/
|
|
45
57
|
onReject: PropTypes.func.description("Callback"),
|
|
58
|
+
/**
|
|
59
|
+
* Extra DSButton props for confirm btn.
|
|
60
|
+
*/
|
|
46
61
|
confirmProps: PropTypes.shape({
|
|
47
62
|
disabled: PropTypes.bool
|
|
48
63
|
}).description("Extra DSButton props for confirm btn."),
|
|
64
|
+
/**
|
|
65
|
+
* Extra DSButton props for reject btn.
|
|
66
|
+
*/
|
|
49
67
|
rejectProps: PropTypes.shape({
|
|
50
68
|
disabled: PropTypes.bool
|
|
51
69
|
}).description("Extra DSButton props for reject btn.")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Footer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport DSButton from '@elliemae/ds-button';\nimport { FooterWrapper } from './blocks';\n\nconst ModalFooter = ({\n confirmLabel = 'Confirm',\n rejectLabel = 'Cancel',\n onConfirm,\n onReject,\n confirmProps = {\n disabled: false,\n },\n rejectProps = {\n disabled: false,\n },\n}) => (\n <>\n <FooterWrapper>\n {!!onReject && (\n <DSButton\n buttonType=\"secondary\"\n className=\"action-reject\"\n containerProps={{ 'data-testid': 'modal-footer-reject-btn' }}\n labelText={rejectLabel}\n onClick={onReject}\n {...rejectProps}\n />\n )}\n {!!onConfirm && (\n <DSButton\n buttonType=\"primary\"\n className=\"action-confirm\"\n containerProps={{ 'data-testid': 'modal-footer-confirm-btn' }}\n labelText={confirmLabel}\n onClick={onConfirm}\n {...confirmProps}\n />\n )}\n </FooterWrapper>\n </>\n);\n\nconst props = {\n /**\n * Confirm Label\n */\n confirmLabel: PropTypes.string.description('Confirm Label'),\n /**\n * Reject Label\n */\n rejectLabel: PropTypes.string.description('Reject Label'),\n /**\n * Callback\n */\n onConfirm: PropTypes.func.description('Callback'),\n /**\n * Callback\n */\n onReject: PropTypes.func.description('Callback'),\n /**\n * Extra DSButton props for confirm btn.\n */\n confirmProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for confirm btn.'),\n /**\n * Extra DSButton props for reject btn.\n */\n rejectProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for reject btn.'),\n};\n\nModalFooter.propTypes = props;\nModalFooter.displayName = 'ModalFooter';\nconst DSModalSlideFooterWithSchema = describe(ModalFooter);\nDSModalSlideFooterWithSchema.propTypes = props;\n\nexport { DSModalSlideFooterWithSchema };\n\nexport default ModalFooter;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACiBrB,mBAGM,KAFJ,YADF;AAhBF,SAAS,WAAW,gBAAgB;AACpC,OAAO,cAAc;AACrB,SAAS,qBAAqB;AAE9B,MAAM,cAAc,CAAC;AAAA,EACnB,eAAe;AAAA,EACf,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,UAAU;AAAA,EACZ;AACF,MACE,gCACE,+BAAC,iBACE;AAAA,GAAC,CAAC,YACD;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,gBAAgB,EAAE,eAAe,0BAA0B;AAAA,MAC3D,WAAW;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAAA,EAED,CAAC,CAAC,aACD;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,gBAAgB,EAAE,eAAe,2BAA2B;AAAA,MAC5D,WAAW;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAAA,GAEJ,GACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,UAAU,OAAO,YAAY,eAAe;AAAA,EAI1D,aAAa,UAAU,OAAO,YAAY,cAAc;AAAA,EAIxD,WAAW,UAAU,KAAK,YAAY,UAAU;AAAA,EAIhD,UAAU,UAAU,KAAK,YAAY,UAAU;AAAA,EAI/C,cAAc,UAAU,MAAM;AAAA,IAC5B,UAAU,UAAU;AAAA,EACtB,CAAC,EAAE,YAAY,uCAAuC;AAAA,EAItD,aAAa,UAAU,MAAM;AAAA,IAC3B,UAAU,UAAU;AAAA,EACtB,CAAC,EAAE,YAAY,sCAAsC;AACvD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,+BAA+B,SAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport DSButton from '@elliemae/ds-button';\nimport { FooterWrapper } from './blocks.js';\n\nconst ModalFooter = ({\n confirmLabel = 'Confirm',\n rejectLabel = 'Cancel',\n onConfirm,\n onReject,\n confirmProps = {\n disabled: false,\n },\n rejectProps = {\n disabled: false,\n },\n}) => (\n <>\n <FooterWrapper>\n {!!onReject && (\n <DSButton\n buttonType=\"secondary\"\n className=\"action-reject\"\n containerProps={{ 'data-testid': 'modal-footer-reject-btn' }}\n labelText={rejectLabel}\n onClick={onReject}\n {...rejectProps}\n />\n )}\n {!!onConfirm && (\n <DSButton\n buttonType=\"primary\"\n className=\"action-confirm\"\n containerProps={{ 'data-testid': 'modal-footer-confirm-btn' }}\n labelText={confirmLabel}\n onClick={onConfirm}\n {...confirmProps}\n />\n )}\n </FooterWrapper>\n </>\n);\n\nconst props = {\n /**\n * Confirm Label\n */\n confirmLabel: PropTypes.string.description('Confirm Label'),\n /**\n * Reject Label\n */\n rejectLabel: PropTypes.string.description('Reject Label'),\n /**\n * Callback\n */\n onConfirm: PropTypes.func.description('Callback'),\n /**\n * Callback\n */\n onReject: PropTypes.func.description('Callback'),\n /**\n * Extra DSButton props for confirm btn.\n */\n confirmProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for confirm btn.'),\n /**\n * Extra DSButton props for reject btn.\n */\n rejectProps: PropTypes.shape({\n disabled: PropTypes.bool,\n }).description('Extra DSButton props for reject btn.'),\n};\n\nModalFooter.propTypes = props;\nModalFooter.displayName = 'ModalFooter';\nconst DSModalSlideFooterWithSchema = describe(ModalFooter);\nDSModalSlideFooterWithSchema.propTypes = props;\n\nexport { DSModalSlideFooterWithSchema };\n\nexport default ModalFooter;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiBrB,mBAGM,KAFJ,YADF;AAhBF,SAAS,WAAW,gBAAgB;AACpC,OAAO,cAAc;AACrB,SAAS,qBAAqB;AAE9B,MAAM,cAAc,CAAC;AAAA,EACnB,eAAe;AAAA,EACf,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,UAAU;AAAA,EACZ;AACF,MACE,gCACE,+BAAC,iBACE;AAAA,GAAC,CAAC,YACD;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,gBAAgB,EAAE,eAAe,0BAA0B;AAAA,MAC3D,WAAW;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAAA,EAED,CAAC,CAAC,aACD;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,gBAAgB,EAAE,eAAe,2BAA2B;AAAA,MAC5D,WAAW;AAAA,MACX,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAAA,GAEJ,GACF;AAGF,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIZ,cAAc,UAAU,OAAO,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI1D,aAAa,UAAU,OAAO,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIxD,WAAW,UAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,UAAU,UAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAI/C,cAAc,UAAU,MAAM;AAAA,IAC5B,UAAU,UAAU;AAAA,EACtB,CAAC,EAAE,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAItD,aAAa,UAAU,MAAM;AAAA,IAC3B,UAAU,UAAU;AAAA,EACtB,CAAC,EAAE,YAAY,sCAAsC;AACvD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,+BAA+B,SAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ import { styled } from "@elliemae/ds-system";
|
|
|
5
5
|
import DSSeparator from "@elliemae/ds-separator";
|
|
6
6
|
import { Close } from "@elliemae/ds-icons";
|
|
7
7
|
import DSButton from "@elliemae/ds-button";
|
|
8
|
-
import { Header, HeaderLeftSide, Title } from "./blocks";
|
|
8
|
+
import { Header, HeaderLeftSide, Title } from "./blocks.js";
|
|
9
9
|
const ModalHeader = ({ innerRef = null, title: headerTitle = "", onClose = () => null, toolbar = null }) => /* @__PURE__ */ jsxs(HeaderWrapper, { children: [
|
|
10
10
|
/* @__PURE__ */ jsx(HeaderLeftSide, { children: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Title, { children: headerTitle }) }) }),
|
|
11
11
|
toolbar,
|
|
@@ -37,8 +37,11 @@ const StyledCloseButton = styled(DSButton)`
|
|
|
37
37
|
margin: ${(props2) => props2.theme.space.xs};
|
|
38
38
|
`;
|
|
39
39
|
const props = {
|
|
40
|
+
/** on modal close callback */
|
|
40
41
|
onClose: PropTypes.func.description("on modal close callback"),
|
|
42
|
+
/** modal toolbar component */
|
|
41
43
|
toolbar: PropTypes.node.description("modal toolbar comoponent"),
|
|
44
|
+
/** modal title */
|
|
42
45
|
title: PropTypes.string.description("modal title"),
|
|
43
46
|
innerRef: PropTypes.func.description("button close ref ")
|
|
44
47
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Header.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Header, HeaderLeftSide, Title } from './blocks';\n\nconst ModalHeader = ({ innerRef = null, title: headerTitle = '', onClose = () => null, toolbar = null }) => (\n <HeaderWrapper>\n <HeaderLeftSide>\n <Header>\n <Title>{headerTitle}</Title>\n </Header>\n </HeaderLeftSide>\n {toolbar}\n {toolbar && <StyledSeparator position=\"initial\" margin=\"none\" orientation=\"vertical\" type=\"non-form\" />}\n <StyledCloseButton\n data-testid=\"modal-slider-header-close\"\n aria-label=\"Close modal slide\"\n buttonType=\"text\"\n icon={<Close aria-label=\"Close modal slide\" size=\"s\" />}\n onClick={onClose}\n innerRef={innerRef}\n />\n </HeaderWrapper>\n);\n\nconst HeaderWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n height: 48px;\n overflow: hidden;\n`;\n\nconst StyledSeparator = styled(DSSeparator)`\n padding: ${(props) => props.theme.space.xs} 0;\n`;\n\nconst StyledCloseButton = styled(DSButton)`\n margin: ${(props) => props.theme.space.xs};\n`;\n\nconst props = {\n /** on modal close callback */\n onClose: PropTypes.func.description('on modal close callback'),\n /** modal toolbar component */\n toolbar: PropTypes.node.description('modal toolbar comoponent'),\n /** modal title */\n title: PropTypes.string.description('modal title'),\n innerRef: PropTypes.func.description('button close ref '),\n};\n\nModalHeader.propTypes = props;\nModalHeader.displayName = 'ModalHeader';\nconst DSModalSlideHeaderWithSchema = describe(ModalHeader);\nDSModalSlideHeaderWithSchema.propTypes = props;\n\nexport { DSModalSlideHeaderWithSchema };\n\nexport default ModalHeader;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACSrB,SAGM,KAHN;AARF,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,OAAO,iBAAiB;AACxB,SAAS,aAAa;AACtB,OAAO,cAAc;AACrB,SAAS,QAAQ,gBAAgB,aAAa;AAE9C,MAAM,cAAc,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,IAAI,UAAU,MAAM,MAAM,UAAU,KAAK,MACpG,qBAAC,iBACC;AAAA,sBAAC,kBACC,8BAAC,UACC,8BAAC,SAAO,uBAAY,GACtB,GACF;AAAA,EACC;AAAA,EACA,WAAW,oBAAC,mBAAgB,UAAS,WAAU,QAAO,QAAO,aAAY,YAAW,MAAK,YAAW;AAAA,EACrG;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,YAAW;AAAA,MACX,MAAM,oBAAC,SAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA,MACrD,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAAA,GACF;AAGF,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,kBAAkB,OAAO,WAAW;AAAA,aAC7B,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA;AAG1C,MAAM,oBAAoB,OAAO,QAAQ;AAAA,YAC7B,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,QAAQ;AAAA,EAEZ,SAAS,UAAU,KAAK,YAAY,yBAAyB;AAAA,EAE7D,SAAS,UAAU,KAAK,YAAY,0BAA0B;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAC1D;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,+BAA+B,SAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Header, HeaderLeftSide, Title } from './blocks.js';\n\nconst ModalHeader = ({ innerRef = null, title: headerTitle = '', onClose = () => null, toolbar = null }) => (\n <HeaderWrapper>\n <HeaderLeftSide>\n <Header>\n <Title>{headerTitle}</Title>\n </Header>\n </HeaderLeftSide>\n {toolbar}\n {toolbar && <StyledSeparator position=\"initial\" margin=\"none\" orientation=\"vertical\" type=\"non-form\" />}\n <StyledCloseButton\n data-testid=\"modal-slider-header-close\"\n aria-label=\"Close modal slide\"\n buttonType=\"text\"\n icon={<Close aria-label=\"Close modal slide\" size=\"s\" />}\n onClick={onClose}\n innerRef={innerRef}\n />\n </HeaderWrapper>\n);\n\nconst HeaderWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n height: 48px;\n overflow: hidden;\n`;\n\nconst StyledSeparator = styled(DSSeparator)`\n padding: ${(props) => props.theme.space.xs} 0;\n`;\n\nconst StyledCloseButton = styled(DSButton)`\n margin: ${(props) => props.theme.space.xs};\n`;\n\nconst props = {\n /** on modal close callback */\n onClose: PropTypes.func.description('on modal close callback'),\n /** modal toolbar component */\n toolbar: PropTypes.node.description('modal toolbar comoponent'),\n /** modal title */\n title: PropTypes.string.description('modal title'),\n innerRef: PropTypes.func.description('button close ref '),\n};\n\nModalHeader.propTypes = props;\nModalHeader.displayName = 'ModalHeader';\nconst DSModalSlideHeaderWithSchema = describe(ModalHeader);\nDSModalSlideHeaderWithSchema.propTypes = props;\n\nexport { DSModalSlideHeaderWithSchema };\n\nexport default ModalHeader;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACSrB,SAGM,KAHN;AARF,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,OAAO,iBAAiB;AACxB,SAAS,aAAa;AACtB,OAAO,cAAc;AACrB,SAAS,QAAQ,gBAAgB,aAAa;AAE9C,MAAM,cAAc,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,IAAI,UAAU,MAAM,MAAM,UAAU,KAAK,MACpG,qBAAC,iBACC;AAAA,sBAAC,kBACC,8BAAC,UACC,8BAAC,SAAO,uBAAY,GACtB,GACF;AAAA,EACC;AAAA,EACA,WAAW,oBAAC,mBAAgB,UAAS,WAAU,QAAO,QAAO,aAAY,YAAW,MAAK,YAAW;AAAA,EACrG;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,YAAW;AAAA,MACX,MAAM,oBAAC,SAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA,MACrD,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAAA,GACF;AAGF,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,kBAAkB,OAAO,WAAW;AAAA,aAC7B,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA;AAG1C,MAAM,oBAAoB,OAAO,QAAQ;AAAA,YAC7B,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,QAAQ;AAAA;AAAA,EAEZ,SAAS,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE7D,SAAS,UAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAC1D;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,+BAA+B,SAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
export * from "./DSModalSlide";
|
|
3
|
-
import { default as default2 } from "./DSModalSlide";
|
|
4
|
-
import { DSModalSlideHeaderWithSchema } from "./components/Header";
|
|
5
|
-
import { DSModalSlideFooterWithSchema } from "./components/Footer";
|
|
2
|
+
export * from "./DSModalSlide.js";
|
|
3
|
+
import { default as default2 } from "./DSModalSlide.js";
|
|
4
|
+
import { DSModalSlideHeaderWithSchema } from "./components/Header.js";
|
|
5
|
+
import { DSModalSlideFooterWithSchema } from "./components/Footer.js";
|
|
6
6
|
export {
|
|
7
7
|
DSModalSlideFooterWithSchema,
|
|
8
8
|
DSModalSlideHeaderWithSchema,
|
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", "export * from './DSModalSlide';\nexport { default } from './DSModalSlide';\nexport { DSModalSlideHeaderWithSchema } from './components/Header';\nexport { DSModalSlideFooterWithSchema } from './components/Footer';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSModalSlide.js';\nexport { default } from './DSModalSlide.js';\nexport { DSModalSlideHeaderWithSchema } from './components/Header.js';\nexport { DSModalSlideFooterWithSchema } from './components/Footer.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;AACxB,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;",
|
|
6
6
|
"names": ["default"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-modal-slide",
|
|
3
|
-
"version": "3.16.
|
|
3
|
+
"version": "3.16.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Modal Slide",
|
|
6
6
|
"files": [
|
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
"indent": 4
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-button": "3.16.
|
|
55
|
-
"@elliemae/ds-classnames": "3.16.
|
|
56
|
-
"@elliemae/ds-grid": "3.16.
|
|
57
|
-
"@elliemae/ds-icons": "3.16.
|
|
58
|
-
"@elliemae/ds-props-helpers": "3.16.
|
|
59
|
-
"@elliemae/ds-separator": "3.16.
|
|
60
|
-
"@elliemae/ds-system": "3.16.
|
|
61
|
-
"@elliemae/ds-utilities": "3.16.
|
|
54
|
+
"@elliemae/ds-button": "3.16.1",
|
|
55
|
+
"@elliemae/ds-classnames": "3.16.1",
|
|
56
|
+
"@elliemae/ds-grid": "3.16.1",
|
|
57
|
+
"@elliemae/ds-icons": "3.16.1",
|
|
58
|
+
"@elliemae/ds-props-helpers": "3.16.1",
|
|
59
|
+
"@elliemae/ds-separator": "3.16.1",
|
|
60
|
+
"@elliemae/ds-system": "3.16.1",
|
|
61
|
+
"@elliemae/ds-utilities": "3.16.1"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@testing-library/react": "~12.1.3",
|
|
65
|
-
"styled-components": "~5.3.
|
|
65
|
+
"styled-components": "~5.3.9"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
68
|
"lodash": "~4.17.21",
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ModalHeader from './components/Header';
|
|
3
|
-
import ModalFooter from './components/Footer';
|
|
4
|
-
declare const DSModalSlide: {
|
|
5
|
-
(props: any): React.ReactPortal | null;
|
|
6
|
-
propTypes: {
|
|
7
|
-
/**
|
|
8
|
-
* If the modal slide is centered or not
|
|
9
|
-
*/
|
|
10
|
-
centered: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
11
|
-
/**
|
|
12
|
-
* If the modal slide is visible or not
|
|
13
|
-
*/
|
|
14
|
-
isOpen: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
15
|
-
/**
|
|
16
|
-
* Main content of the modal
|
|
17
|
-
*/
|
|
18
|
-
children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
19
|
-
/**
|
|
20
|
-
* If the modal slide takes the full width or not
|
|
21
|
-
*/
|
|
22
|
-
fullWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
23
|
-
/**
|
|
24
|
-
* If the modal slide has a header, only available for full width option
|
|
25
|
-
*/
|
|
26
|
-
header: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
27
|
-
/**
|
|
28
|
-
* Ratio of fade out
|
|
29
|
-
*/
|
|
30
|
-
fadeOut: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
31
|
-
/**
|
|
32
|
-
* Ratio of fade in
|
|
33
|
-
*/
|
|
34
|
-
fadeIn: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
35
|
-
/**
|
|
36
|
-
* Override the panel height to scroll height of the container
|
|
37
|
-
*/
|
|
38
|
-
overrideHeight: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
39
|
-
};
|
|
40
|
-
displayName: string;
|
|
41
|
-
};
|
|
42
|
-
declare const DSModalSlideWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<any>;
|
|
43
|
-
export { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };
|
|
44
|
-
export default DSModalSlide;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
declare const ModalFooter: {
|
|
2
|
-
({ confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps, }: {
|
|
3
|
-
confirmLabel?: string | undefined;
|
|
4
|
-
rejectLabel?: string | undefined;
|
|
5
|
-
onConfirm: any;
|
|
6
|
-
onReject: any;
|
|
7
|
-
confirmProps?: {
|
|
8
|
-
disabled: boolean;
|
|
9
|
-
} | undefined;
|
|
10
|
-
rejectProps?: {
|
|
11
|
-
disabled: boolean;
|
|
12
|
-
} | undefined;
|
|
13
|
-
}): JSX.Element;
|
|
14
|
-
propTypes: {
|
|
15
|
-
/**
|
|
16
|
-
* Confirm Label
|
|
17
|
-
*/
|
|
18
|
-
confirmLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
19
|
-
/**
|
|
20
|
-
* Reject Label
|
|
21
|
-
*/
|
|
22
|
-
rejectLabel: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
23
|
-
/**
|
|
24
|
-
* Callback
|
|
25
|
-
*/
|
|
26
|
-
onConfirm: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
27
|
-
/**
|
|
28
|
-
* Callback
|
|
29
|
-
*/
|
|
30
|
-
onReject: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
31
|
-
/**
|
|
32
|
-
* Extra DSButton props for confirm btn.
|
|
33
|
-
*/
|
|
34
|
-
confirmProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
35
|
-
/**
|
|
36
|
-
* Extra DSButton props for reject btn.
|
|
37
|
-
*/
|
|
38
|
-
rejectProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
39
|
-
};
|
|
40
|
-
displayName: string;
|
|
41
|
-
};
|
|
42
|
-
declare const DSModalSlideFooterWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
|
|
43
|
-
confirmLabel?: string | undefined;
|
|
44
|
-
rejectLabel?: string | undefined;
|
|
45
|
-
onConfirm: any;
|
|
46
|
-
onReject: any;
|
|
47
|
-
confirmProps?: {
|
|
48
|
-
disabled: boolean;
|
|
49
|
-
} | undefined;
|
|
50
|
-
rejectProps?: {
|
|
51
|
-
disabled: boolean;
|
|
52
|
-
} | undefined;
|
|
53
|
-
}>;
|
|
54
|
-
export { DSModalSlideFooterWithSchema };
|
|
55
|
-
export default ModalFooter;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
declare const ModalHeader: {
|
|
2
|
-
({ innerRef, title: headerTitle, onClose, toolbar }: {
|
|
3
|
-
innerRef?: null | undefined;
|
|
4
|
-
title?: string | undefined;
|
|
5
|
-
onClose?: (() => null) | undefined;
|
|
6
|
-
toolbar?: null | undefined;
|
|
7
|
-
}): JSX.Element;
|
|
8
|
-
propTypes: {
|
|
9
|
-
/** on modal close callback */
|
|
10
|
-
onClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
11
|
-
/** modal toolbar component */
|
|
12
|
-
toolbar: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
13
|
-
/** modal title */
|
|
14
|
-
title: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
15
|
-
innerRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
16
|
-
};
|
|
17
|
-
displayName: string;
|
|
18
|
-
};
|
|
19
|
-
declare const DSModalSlideHeaderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
|
|
20
|
-
innerRef?: null | undefined;
|
|
21
|
-
title?: string | undefined;
|
|
22
|
-
onClose?: (() => null) | undefined;
|
|
23
|
-
toolbar?: null | undefined;
|
|
24
|
-
}>;
|
|
25
|
-
export { DSModalSlideHeaderWithSchema };
|
|
26
|
-
export default ModalHeader;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const Wrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
3
|
-
export declare const Overlay: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
4
|
-
export declare const Content: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
5
|
-
export declare const Title: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
6
|
-
export declare const BreadcrumTitle: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
7
|
-
export declare const HeaderLeftSide: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
8
|
-
export declare const ActualContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
9
|
-
export declare const Header: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
10
|
-
export declare const Footer: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
|
11
|
-
export declare const FooterWrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
|
package/dist/types/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|