@elliemae/ds-modal-slide 3.12.0-rc.0 → 3.12.0-rc.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/DSModalSlide.js +53 -57
  2. package/dist/cjs/DSModalSlide.js.map +1 -1
  3. package/dist/cjs/components/Footer.js +24 -22
  4. package/dist/cjs/components/Footer.js.map +1 -1
  5. package/dist/cjs/components/Header.js +11 -25
  6. package/dist/cjs/components/Header.js.map +2 -2
  7. package/dist/esm/DSModalSlide.js +53 -57
  8. package/dist/esm/DSModalSlide.js.map +1 -1
  9. package/dist/esm/components/Footer.js +24 -22
  10. package/dist/esm/components/Footer.js.map +1 -1
  11. package/dist/esm/components/Header.js +11 -25
  12. package/dist/esm/components/Header.js.map +2 -2
  13. package/package.json +10 -10
package/dist/cjs/DSModalSlide.js CHANGED
@@ -101,66 +101,62 @@ const DSModalSlide = (props2) => {
101
101
  container.style.position = "relative";
102
102
  }
103
103
  return import_react_dom.default.createPortal(
104
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Wrapper, {
105
- ...globalAttrs,
106
- classProps: {
107
- show: isOpen,
108
- centered
109
- },
110
- style: {
111
- "--height": height,
112
- "--fade-in": fadeIn,
113
- "--fade-out": fadeOut,
114
- "--width": width
115
- },
116
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Overlay, {
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
105
+ import_blocks.Wrapper,
106
+ {
107
+ ...globalAttrs,
117
108
  classProps: {
118
- show: isOpen
109
+ show: isOpen,
110
+ centered
119
111
  },
120
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Content, {
121
- onAnimationEnd: handleAnimationEnd,
122
- classProps: {
123
- show: isOpen
124
- },
125
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
126
- style: {
127
- height: "100%",
128
- width: "100%",
129
- maxHeight: "100%",
130
- overflow: "hidden",
131
- "-webkit-backface-visibility": "hidden",
132
- "backface-visibility": "hidden",
133
- "-webkit-transform-style": "preserve-3d"
112
+ style: {
113
+ "--height": height,
114
+ "--fade-in": fadeIn,
115
+ "--fade-out": fadeOut,
116
+ "--width": width
117
+ },
118
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
119
+ import_blocks.Overlay,
120
+ {
121
+ classProps: {
122
+ show: isOpen
134
123
  },
135
- rows: contentRows,
136
- "data-testid": "ds-modal-slide",
137
- children: [
138
- header && import_react.default.cloneElement(header, { fullWidth }),
139
- header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_separator.default, {
140
- position: "initial",
141
- type: "non-form"
142
- }),
143
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
144
- style: { overflow: "hidden" },
145
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, {
146
- ref: innerRef,
147
- tabIndex: 0,
148
- role: "contentinfo",
149
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.ActualContent, {
150
- children
151
- })
152
- })
153
- }),
154
- footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_separator.default, {
155
- position: "initial",
156
- type: "non-form"
157
- }),
158
- footer
159
- ]
160
- })
161
- })
162
- })
163
- }),
124
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
125
+ import_blocks.Content,
126
+ {
127
+ onAnimationEnd: handleAnimationEnd,
128
+ classProps: {
129
+ show: isOpen
130
+ },
131
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
132
+ import_ds_grid.Grid,
133
+ {
134
+ style: {
135
+ height: "100%",
136
+ width: "100%",
137
+ maxHeight: "100%",
138
+ overflow: "hidden",
139
+ "-webkit-backface-visibility": "hidden",
140
+ "backface-visibility": "hidden",
141
+ "-webkit-transform-style": "preserve-3d"
142
+ },
143
+ rows: contentRows,
144
+ "data-testid": "ds-modal-slide",
145
+ children: [
146
+ header && import_react.default.cloneElement(header, { fullWidth }),
147
+ header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_separator.default, { position: "initial", type: "non-form" }),
148
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledWrapper, { ref: innerRef, tabIndex: 0, role: "contentinfo", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.ActualContent, { children }) }) }),
149
+ footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_separator.default, { position: "initial", type: "non-form" }),
150
+ footer
151
+ ]
152
+ }
153
+ )
154
+ }
155
+ )
156
+ }
157
+ )
158
+ }
159
+ ),
164
160
  container
165
161
  );
166
162
  };
package/dist/cjs/DSModalSlide.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSModalSlide.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { PropTypes, describe, useGetGlobalAttributes } from '@elliemae/ds-utilities';\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 theme = useTheme();\n const contentRows = [...(header ? ['auto', '1px'] : []), '1fr', ...(footer ? ['1px', theme.space.m] : [])];\n\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 if (!show) return null;\n\n const container = getContainer();\n if (!container) return null;\n\n const handleAnimationEnd = () => {\n setMoving(false);\n if (!isOpen) setShow(isOpen);\n };\n\n let { height } = container.getBoundingClientRect();\n if (overrideHeight && container.scrollHeight > height) {\n height = container.scrollHeight;\n }\n if (!container.style.position) {\n container.style.position = 'relative';\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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",
5
+ "mappings": "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",
6
6
  "names": ["ModalFooter", "ModalHeader", "props", "ReactDOM", "React", "DSSeparator"]
7
7
  }
package/dist/cjs/components/Footer.js CHANGED
@@ -44,28 +44,30 @@ const ModalFooter = ({
44
44
  rejectProps = {
45
45
  disabled: false
46
46
  }
47
- }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
48
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_blocks.FooterWrapper, {
49
- children: [
50
- !!onReject && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.default, {
51
- buttonType: "secondary",
52
- className: "action-reject",
53
- containerProps: { "data-testid": "modal-footer-reject-btn" },
54
- labelText: rejectLabel,
55
- onClick: onReject,
56
- ...rejectProps
57
- }),
58
- !!onConfirm && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.default, {
59
- buttonType: "primary",
60
- className: "action-confirm",
61
- containerProps: { "data-testid": "modal-footer-confirm-btn" },
62
- labelText: confirmLabel,
63
- onClick: onConfirm,
64
- ...confirmProps
65
- })
66
- ]
67
- })
68
- });
47
+ }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_blocks.FooterWrapper, { children: [
48
+ !!onReject && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
49
+ import_ds_button.default,
50
+ {
51
+ buttonType: "secondary",
52
+ className: "action-reject",
53
+ containerProps: { "data-testid": "modal-footer-reject-btn" },
54
+ labelText: rejectLabel,
55
+ onClick: onReject,
56
+ ...rejectProps
57
+ }
58
+ ),
59
+ !!onConfirm && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
+ import_ds_button.default,
61
+ {
62
+ buttonType: "primary",
63
+ className: "action-confirm",
64
+ containerProps: { "data-testid": "modal-footer-confirm-btn" },
65
+ labelText: confirmLabel,
66
+ onClick: onConfirm,
67
+ ...confirmProps
68
+ }
69
+ )
70
+ ] }) });
69
71
  const props = {
70
72
  confirmLabel: import_ds_utilities.PropTypes.string.description("Confirm Label"),
71
73
  rejectLabel: import_ds_utilities.PropTypes.string.description("Reject Label"),
package/dist/cjs/components/Footer.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Footer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBrB;AAhBF,0BAAoC;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;AAAA,EACE,uDAAC;AAAA,IACE;AAAA,OAAC,CAAC,YACD,4CAAC,iBAAAA,SAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,gBAAgB,EAAE,eAAe,0BAA0B;AAAA,QAC3D,WAAW;AAAA,QACX,SAAS;AAAA,QACR,GAAG;AAAA,OACN;AAAA,MAED,CAAC,CAAC,aACD,4CAAC,iBAAAA,SAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,gBAAgB,EAAE,eAAe,2BAA2B;AAAA,QAC5D,WAAW;AAAA,QACX,SAAS;AAAA,QACR,GAAG;AAAA,OACN;AAAA;AAAA,GAEJ;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,8BAAU,OAAO,YAAY,eAAe;AAAA,EAI1D,aAAa,8BAAU,OAAO,YAAY,cAAc;AAAA,EAIxD,WAAW,8BAAU,KAAK,YAAY,UAAU;AAAA,EAIhD,UAAU,8BAAU,KAAK,YAAY,UAAU;AAAA,EAI/C,cAAc,8BAAU,MAAM;AAAA,IAC5B,UAAU,8BAAU;AAAA,EACtB,CAAC,EAAE,YAAY,uCAAuC;AAAA,EAItD,aAAa,8BAAU,MAAM;AAAA,IAC3B,UAAU,8BAAU;AAAA,EACtB,CAAC,EAAE,YAAY,sCAAsC;AACvD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,mCAA+B,8BAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBrB;AAhBF,0BAAoC;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,EAIZ,cAAc,8BAAU,OAAO,YAAY,eAAe;AAAA,EAI1D,aAAa,8BAAU,OAAO,YAAY,cAAc;AAAA,EAIxD,WAAW,8BAAU,KAAK,YAAY,UAAU;AAAA,EAIhD,UAAU,8BAAU,KAAK,YAAY,UAAU;AAAA,EAI/C,cAAc,8BAAU,MAAM;AAAA,IAC5B,UAAU,8BAAU;AAAA,EACtB,CAAC,EAAE,YAAY,uCAAuC;AAAA,EAItD,aAAa,8BAAU,MAAM;AAAA,IAC3B,UAAU,8BAAU;AAAA,EACtB,CAAC,EAAE,YAAY,sCAAsC;AACvD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,mCAA+B,8BAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
6
6
  "names": ["DSButton"]
7
7
  }
package/dist/cjs/components/Header.js CHANGED
@@ -37,36 +37,22 @@ var import_ds_icons = require("@elliemae/ds-icons");
37
37
  var import_ds_button = __toESM(require("@elliemae/ds-button"));
38
38
  var import_blocks = require("./blocks");
39
39
  const ModalHeader = ({ innerRef = null, title: headerTitle = "", onClose = () => null, toolbar = null }) => {
40
- console.log(innerRef, "innerRef2");
41
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HeaderWrapper, {
42
- children: [
43
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.HeaderLeftSide, {
44
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Header, {
45
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Title, {
46
- children: headerTitle
47
- })
48
- })
49
- }),
50
- toolbar,
51
- toolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSeparator, {
52
- position: "initial",
53
- margin: "none",
54
- orientation: "vertical",
55
- type: "non-form"
56
- }),
57
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCloseButton, {
40
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(HeaderWrapper, { children: [
41
+ /* @__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 }) }) }),
42
+ toolbar,
43
+ toolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSeparator, { position: "initial", margin: "none", orientation: "vertical", type: "non-form" }),
44
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
45
+ StyledCloseButton,
46
+ {
58
47
  "data-testid": "modal-slider-header-close",
59
48
  "aria-label": "Close modal slide",
60
49
  buttonType: "text",
61
- icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Close, {
62
- "aria-label": "Close modal slide",
63
- size: "s"
64
- }),
50
+ icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Close, { "aria-label": "Close modal slide", size: "s" }),
65
51
  onClick: onClose,
66
52
  innerRef
67
- })
68
- ]
69
- });
53
+ }
54
+ )
55
+ ] });
70
56
  };
71
57
  const HeaderWrapper = import_ds_system.styled.div`
72
58
  display: flex;
package/dist/cjs/components/Header.js.map CHANGED
@@ -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-utilities';\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 console.log(innerRef, 'innerRef2');\n\n return (\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};\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;ADYnB;AAXJ,0BAAoC;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,MAAM;AAC1G,UAAQ,IAAI,UAAU,WAAW;AAEjC,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QACC,sDAAC;AAAA,UACC,sDAAC;AAAA,YAAO;AAAA,WAAY;AAAA,SACtB;AAAA,OACF;AAAA,MACC;AAAA,MACA,WAAW,4CAAC;AAAA,QAAgB,UAAS;AAAA,QAAU,QAAO;AAAA,QAAO,aAAY;AAAA,QAAW,MAAK;AAAA,OAAW;AAAA,MACrG,4CAAC;AAAA,QACC,eAAY;AAAA,QACZ,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,4CAAC;AAAA,UAAM,cAAW;AAAA,UAAoB,MAAK;AAAA,SAAI;AAAA,QACrD,SAAS;AAAA,QACT;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,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,EAEZ,SAAS,8BAAU,KAAK,YAAY,yBAAyB;AAAA,EAE7D,SAAS,8BAAU,KAAK,YAAY,0BAA0B;AAAA,EAE9D,OAAO,8BAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,8BAAU,KAAK,YAAY,mBAAmB;AAC1D;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,mCAA+B,8BAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
4
+ "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\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 return (\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};\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;ADUnB;AATJ,0BAAoC;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,MAAM;AAC1G,SACE,6CAAC,iBACC;AAAA,gDAAC,gCACC,sDAAC,wBACC,sDAAC,uBAAO,uBAAY,GACtB,GACF;AAAA,IACC;AAAA,IACA,WAAW,4CAAC,mBAAgB,UAAS,WAAU,QAAO,QAAO,aAAY,YAAW,MAAK,YAAW;AAAA,IACrG;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,4CAAC,yBAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA,QACrD,SAAS;AAAA,QACT;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,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,EAEZ,SAAS,8BAAU,KAAK,YAAY,yBAAyB;AAAA,EAE7D,SAAS,8BAAU,KAAK,YAAY,0BAA0B;AAAA,EAE9D,OAAO,8BAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,8BAAU,KAAK,YAAY,mBAAmB;AAC1D;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,mCAA+B,8BAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
6
6
  "names": ["DSSeparator", "props", "DSButton"]
7
7
  }
package/dist/esm/DSModalSlide.js CHANGED
@@ -68,66 +68,62 @@ const DSModalSlide = (props2) => {
68
68
  container.style.position = "relative";
69
69
  }
70
70
  return ReactDOM.createPortal(
71
- /* @__PURE__ */ jsx(Wrapper, {
72
- ...globalAttrs,
73
- classProps: {
74
- show: isOpen,
75
- centered
76
- },
77
- style: {
78
- "--height": height,
79
- "--fade-in": fadeIn,
80
- "--fade-out": fadeOut,
81
- "--width": width
82
- },
83
- children: /* @__PURE__ */ jsx(Overlay, {
71
+ /* @__PURE__ */ jsx(
72
+ Wrapper,
73
+ {
74
+ ...globalAttrs,
84
75
  classProps: {
85
- show: isOpen
76
+ show: isOpen,
77
+ centered
86
78
  },
87
- children: /* @__PURE__ */ jsx(Content, {
88
- onAnimationEnd: handleAnimationEnd,
89
- classProps: {
90
- show: isOpen
91
- },
92
- children: /* @__PURE__ */ jsxs(Grid, {
93
- style: {
94
- height: "100%",
95
- width: "100%",
96
- maxHeight: "100%",
97
- overflow: "hidden",
98
- "-webkit-backface-visibility": "hidden",
99
- "backface-visibility": "hidden",
100
- "-webkit-transform-style": "preserve-3d"
79
+ style: {
80
+ "--height": height,
81
+ "--fade-in": fadeIn,
82
+ "--fade-out": fadeOut,
83
+ "--width": width
84
+ },
85
+ children: /* @__PURE__ */ jsx(
86
+ Overlay,
87
+ {
88
+ classProps: {
89
+ show: isOpen
101
90
  },
102
- rows: contentRows,
103
- "data-testid": "ds-modal-slide",
104
- children: [
105
- header && React2.cloneElement(header, { fullWidth }),
106
- header && /* @__PURE__ */ jsx(DSSeparator, {
107
- position: "initial",
108
- type: "non-form"
109
- }),
110
- /* @__PURE__ */ jsx(Grid, {
111
- style: { overflow: "hidden" },
112
- children: /* @__PURE__ */ jsx(StyledWrapper, {
113
- ref: innerRef,
114
- tabIndex: 0,
115
- role: "contentinfo",
116
- children: /* @__PURE__ */ jsx(ActualContent, {
117
- children
118
- })
119
- })
120
- }),
121
- footer && /* @__PURE__ */ jsx(DSSeparator, {
122
- position: "initial",
123
- type: "non-form"
124
- }),
125
- footer
126
- ]
127
- })
128
- })
129
- })
130
- }),
91
+ children: /* @__PURE__ */ jsx(
92
+ Content,
93
+ {
94
+ onAnimationEnd: handleAnimationEnd,
95
+ classProps: {
96
+ show: isOpen
97
+ },
98
+ children: /* @__PURE__ */ jsxs(
99
+ Grid,
100
+ {
101
+ style: {
102
+ height: "100%",
103
+ width: "100%",
104
+ maxHeight: "100%",
105
+ overflow: "hidden",
106
+ "-webkit-backface-visibility": "hidden",
107
+ "backface-visibility": "hidden",
108
+ "-webkit-transform-style": "preserve-3d"
109
+ },
110
+ rows: contentRows,
111
+ "data-testid": "ds-modal-slide",
112
+ children: [
113
+ header && React2.cloneElement(header, { fullWidth }),
114
+ header && /* @__PURE__ */ jsx(DSSeparator, { position: "initial", type: "non-form" }),
115
+ /* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(StyledWrapper, { ref: innerRef, tabIndex: 0, role: "contentinfo", children: /* @__PURE__ */ jsx(ActualContent, { children }) }) }),
116
+ footer && /* @__PURE__ */ jsx(DSSeparator, { position: "initial", type: "non-form" }),
117
+ footer
118
+ ]
119
+ }
120
+ )
121
+ }
122
+ )
123
+ }
124
+ )
125
+ }
126
+ ),
131
127
  container
132
128
  );
133
129
  };
package/dist/esm/DSModalSlide.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSModalSlide.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { PropTypes, describe, useGetGlobalAttributes } from '@elliemae/ds-utilities';\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 theme = useTheme();\n const contentRows = [...(header ? ['auto', '1px'] : []), '1fr', ...(footer ? ['1px', theme.space.m] : [])];\n\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 if (!show) return null;\n\n const container = getContainer();\n if (!container) return null;\n\n const handleAnimationEnd = () => {\n setMoving(false);\n if (!isOpen) setShow(isOpen);\n };\n\n let { height } = container.getBoundingClientRect();\n if (overrideHeight && container.scrollHeight > height) {\n height = container.scrollHeight;\n }\n if (!container.style.position) {\n container.style.position = 'relative';\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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",
5
+ "mappings": "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",
6
6
  "names": ["React", "props"]
7
7
  }
package/dist/esm/components/Footer.js CHANGED
@@ -14,28 +14,30 @@ const ModalFooter = ({
14
14
  rejectProps = {
15
15
  disabled: false
16
16
  }
17
- }) => /* @__PURE__ */ jsx(Fragment, {
18
- children: /* @__PURE__ */ jsxs(FooterWrapper, {
19
- children: [
20
- !!onReject && /* @__PURE__ */ jsx(DSButton, {
21
- buttonType: "secondary",
22
- className: "action-reject",
23
- containerProps: { "data-testid": "modal-footer-reject-btn" },
24
- labelText: rejectLabel,
25
- onClick: onReject,
26
- ...rejectProps
27
- }),
28
- !!onConfirm && /* @__PURE__ */ jsx(DSButton, {
29
- buttonType: "primary",
30
- className: "action-confirm",
31
- containerProps: { "data-testid": "modal-footer-confirm-btn" },
32
- labelText: confirmLabel,
33
- onClick: onConfirm,
34
- ...confirmProps
35
- })
36
- ]
37
- })
38
- });
17
+ }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(FooterWrapper, { children: [
18
+ !!onReject && /* @__PURE__ */ jsx(
19
+ DSButton,
20
+ {
21
+ buttonType: "secondary",
22
+ className: "action-reject",
23
+ containerProps: { "data-testid": "modal-footer-reject-btn" },
24
+ labelText: rejectLabel,
25
+ onClick: onReject,
26
+ ...rejectProps
27
+ }
28
+ ),
29
+ !!onConfirm && /* @__PURE__ */ jsx(
30
+ DSButton,
31
+ {
32
+ buttonType: "primary",
33
+ className: "action-confirm",
34
+ containerProps: { "data-testid": "modal-footer-confirm-btn" },
35
+ labelText: confirmLabel,
36
+ onClick: onConfirm,
37
+ ...confirmProps
38
+ }
39
+ )
40
+ ] }) });
39
41
  const props = {
40
42
  confirmLabel: PropTypes.string.description("Confirm Label"),
41
43
  rejectLabel: PropTypes.string.description("Reject Label"),
package/dist/esm/components/Footer.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Footer.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\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;AAAA,EACE,+BAAC;AAAA,IACE;AAAA,OAAC,CAAC,YACD,oBAAC;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,gBAAgB,EAAE,eAAe,0BAA0B;AAAA,QAC3D,WAAW;AAAA,QACX,SAAS;AAAA,QACR,GAAG;AAAA,OACN;AAAA,MAED,CAAC,CAAC,aACD,oBAAC;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,gBAAgB,EAAE,eAAe,2BAA2B;AAAA,QAC5D,WAAW;AAAA,QACX,SAAS;AAAA,QACR,GAAG;AAAA,OACN;AAAA;AAAA,GAEJ;AAAA,CACF;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;",
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;",
6
6
  "names": []
7
7
  }
package/dist/esm/components/Header.js CHANGED
@@ -7,36 +7,22 @@ import { Close } from "@elliemae/ds-icons";
7
7
  import DSButton from "@elliemae/ds-button";
8
8
  import { Header, HeaderLeftSide, Title } from "./blocks";
9
9
  const ModalHeader = ({ innerRef = null, title: headerTitle = "", onClose = () => null, toolbar = null }) => {
10
- console.log(innerRef, "innerRef2");
11
- return /* @__PURE__ */ jsxs(HeaderWrapper, {
12
- children: [
13
- /* @__PURE__ */ jsx(HeaderLeftSide, {
14
- children: /* @__PURE__ */ jsx(Header, {
15
- children: /* @__PURE__ */ jsx(Title, {
16
- children: headerTitle
17
- })
18
- })
19
- }),
20
- toolbar,
21
- toolbar && /* @__PURE__ */ jsx(StyledSeparator, {
22
- position: "initial",
23
- margin: "none",
24
- orientation: "vertical",
25
- type: "non-form"
26
- }),
27
- /* @__PURE__ */ jsx(StyledCloseButton, {
10
+ return /* @__PURE__ */ jsxs(HeaderWrapper, { children: [
11
+ /* @__PURE__ */ jsx(HeaderLeftSide, { children: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Title, { children: headerTitle }) }) }),
12
+ toolbar,
13
+ toolbar && /* @__PURE__ */ jsx(StyledSeparator, { position: "initial", margin: "none", orientation: "vertical", type: "non-form" }),
14
+ /* @__PURE__ */ jsx(
15
+ StyledCloseButton,
16
+ {
28
17
  "data-testid": "modal-slider-header-close",
29
18
  "aria-label": "Close modal slide",
30
19
  buttonType: "text",
31
- icon: /* @__PURE__ */ jsx(Close, {
32
- "aria-label": "Close modal slide",
33
- size: "s"
34
- }),
20
+ icon: /* @__PURE__ */ jsx(Close, { "aria-label": "Close modal slide", size: "s" }),
35
21
  onClick: onClose,
36
22
  innerRef
37
- })
38
- ]
39
- });
23
+ }
24
+ )
25
+ ] });
40
26
  };
41
27
  const HeaderWrapper = styled.div`
42
28
  display: flex;
package/dist/esm/components/Header.js.map CHANGED
@@ -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-utilities';\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 console.log(innerRef, 'innerRef2');\n\n return (\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};\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;ACYnB,SAGM,KAHN;AAXJ,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,MAAM;AAC1G,UAAQ,IAAI,UAAU,WAAW;AAEjC,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QACC,8BAAC;AAAA,UACC,8BAAC;AAAA,YAAO;AAAA,WAAY;AAAA,SACtB;AAAA,OACF;AAAA,MACC;AAAA,MACA,WAAW,oBAAC;AAAA,QAAgB,UAAS;AAAA,QAAU,QAAO;AAAA,QAAO,aAAY;AAAA,QAAW,MAAK;AAAA,OAAW;AAAA,MACrG,oBAAC;AAAA,QACC,eAAY;AAAA,QACZ,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,oBAAC;AAAA,UAAM,cAAW;AAAA,UAAoB,MAAK;AAAA,SAAI;AAAA,QACrD,SAAS;AAAA,QACT;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,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-utilities';\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 return (\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};\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;ACUnB,SAGM,KAHN;AATJ,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,MAAM;AAC1G,SACE,qBAAC,iBACC;AAAA,wBAAC,kBACC,8BAAC,UACC,8BAAC,SAAO,uBAAY,GACtB,GACF;AAAA,IACC;AAAA,IACA,WAAW,oBAAC,mBAAgB,UAAS,WAAU,QAAO,QAAO,aAAY,YAAW,MAAK,YAAW;AAAA,IACrG;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,oBAAC,SAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA,QACrD,SAAS;AAAA,QACT;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,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;",
6
6
  "names": ["props"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-modal-slide",
3
- "version": "3.12.0-rc.0",
3
+ "version": "3.12.0-rc.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Modal Slide",
6
6
  "files": [
@@ -51,23 +51,23 @@
51
51
  "indent": 4
52
52
  },
53
53
  "dependencies": {
54
- "@elliemae/ds-button": "3.12.0-rc.0",
55
- "@elliemae/ds-classnames": "3.12.0-rc.0",
56
- "@elliemae/ds-grid": "3.12.0-rc.0",
57
- "@elliemae/ds-icons": "3.12.0-rc.0",
58
- "@elliemae/ds-separator": "3.12.0-rc.0",
59
- "@elliemae/ds-system": "3.12.0-rc.0",
60
- "@elliemae/ds-utilities": "3.12.0-rc.0"
54
+ "@elliemae/ds-button": "3.12.0-rc.10",
55
+ "@elliemae/ds-classnames": "3.12.0-rc.10",
56
+ "@elliemae/ds-grid": "3.12.0-rc.10",
57
+ "@elliemae/ds-icons": "3.12.0-rc.10",
58
+ "@elliemae/ds-separator": "3.12.0-rc.10",
59
+ "@elliemae/ds-system": "3.12.0-rc.10",
60
+ "@elliemae/ds-utilities": "3.12.0-rc.10"
61
61
  },
62
62
  "devDependencies": {
63
63
  "@testing-library/react": "~12.1.3",
64
- "styled-components": "~5.3.5"
64
+ "styled-components": "~5.3.6"
65
65
  },
66
66
  "peerDependencies": {
67
67
  "lodash": "~4.17.21",
68
68
  "react": "~17.0.2",
69
69
  "react-dom": "~17.0.2",
70
- "styled-components": "^5.3.5"
70
+ "styled-components": "~5.3.6"
71
71
  },
72
72
  "publishConfig": {
73
73
  "access": "public",