@elliemae/ds-side-panel 3.12.0-rc.2 → 3.12.0-rc.4

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/SidePanel.js +31 -48
  2. package/dist/cjs/SidePanel.js.map +1 -1
  3. package/dist/cjs/SidePanelHeader.js +23 -47
  4. package/dist/cjs/SidePanelHeader.js.map +1 -1
  5. package/dist/cjs/TemplateBasicPageWithSidePanel.js +16 -34
  6. package/dist/cjs/TemplateBasicPageWithSidePanel.js.map +1 -1
  7. package/dist/esm/SidePanel.js +31 -48
  8. package/dist/esm/SidePanel.js.map +1 -1
  9. package/dist/esm/SidePanelHeader.js +23 -47
  10. package/dist/esm/SidePanelHeader.js.map +1 -1
  11. package/dist/esm/TemplateBasicPageWithSidePanel.js +16 -34
  12. package/dist/esm/TemplateBasicPageWithSidePanel.js.map +1 -1
  13. package/package.json +6 -6
package/dist/cjs/SidePanel.js CHANGED
@@ -75,55 +75,38 @@ const SidePanel = ({
75
75
  side = "right"
76
76
  }) => {
77
77
  const isOpenAnimated = (0, import_useDelayedOpen.useDelayedOpen)(isOpen);
78
- const panelJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransGrid, {
79
- style: { overflow: "hidden" },
80
- height: "100%",
81
- maxHeight: "100%",
82
- width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
83
- withBorder,
84
- withBoxShadow,
85
- isOpen,
86
- cols: [1],
87
- noGridInfluencer,
88
- side,
89
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
90
- rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
78
+ const panelJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
+ TransGrid,
80
+ {
91
81
  style: { overflow: "hidden" },
92
- children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
93
- children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
95
- children: header
96
- }),
97
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
98
- style: { overflow: "hidden" },
99
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
100
- style: { overflow: panelContentOverflow },
101
- children: panelContent
102
- })
103
- }),
104
- footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterContainer, {
105
- alignItems: "center",
106
- pl: "xs",
107
- pr: "xs",
108
- children: footer
109
- }) : null
110
- ]
111
- })
112
- })
113
- });
114
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, {
115
- noGridInfluencer,
116
- children: [
117
- side === "left" && panelJSX,
118
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransGrid, {
119
- height: "100%",
120
- flex: "1",
121
- mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0,
122
- children
123
- }),
124
- side === "right" && panelJSX
125
- ]
126
- });
82
+ height: "100%",
83
+ maxHeight: "100%",
84
+ width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
85
+ withBorder,
86
+ withBoxShadow,
87
+ isOpen,
88
+ cols: [1],
89
+ noGridInfluencer,
90
+ side,
91
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
92
+ import_ds_grid.Grid,
93
+ {
94
+ rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
95
+ style: { overflow: "hidden" },
96
+ children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
97
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: header }),
98
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: panelContentOverflow }, children: panelContent }) }),
99
+ footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterContainer, { alignItems: "center", pl: "xs", pr: "xs", children: footer }) : null
100
+ ] })
101
+ }
102
+ )
103
+ }
104
+ );
105
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { noGridInfluencer, children: [
106
+ side === "left" && panelJSX,
107
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransGrid, { height: "100%", flex: "1", mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0, children }),
108
+ side === "right" && panelJSX
109
+ ] });
127
110
  };
128
111
  SidePanel.propTypes = import_react_desc_prop_types.DSInputTextPropTypes;
129
112
  SidePanel.defaultProps = import_react_desc_prop_types.defaultProps;
package/dist/cjs/SidePanel.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/SidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer, side, theme }) =>\n noGridInfluencer\n ? `\n position: absolute;\n z-index: ${theme.zIndex.popper};\n top:0;\n ${side}: 0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer = false,\n withBorder = true,\n withBoxShadow = false,\n side = 'right',\n}): React.ReactElement => {\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n const panelJSX = (\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n side={side}\n >\n <Grid\n rows={\n footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n {(isOpenAnimated || widthWhenIsClosed > 0) && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </>\n )}\n </Grid>\n </TransGrid>\n );\n\n return (\n <Container noGridInfluencer={noGridInfluencer}>\n {side === 'left' && panelJSX}\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n {side === 'right' && panelJSX}\n </Container>\n );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Eb;AAzEV,0BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AAErB,mCAAmD;AACnD,4BAA+B;AAE/B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,qBAAiB,sCAAe,MAAM;AAE5C,QAAM,WACJ,4CAAC;AAAA,IACC,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B,QAAO;AAAA,IACP,WAAU;AAAA,IACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,CAAC,CAAC;AAAA,IACR;AAAA,IACA;AAAA,IAEA,sDAAC;AAAA,MACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,MAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,MAE1B,6BAAkB,oBAAoB,MACtC;AAAA,QACE;AAAA,sDAAC;AAAA,YAAM;AAAA,WAAO;AAAA,UACd,4CAAC;AAAA,YAAK,OAAO,EAAE,UAAU,SAAS;AAAA,YAChC,sDAAC;AAAA,cAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,cAAI;AAAA,aAAa;AAAA,WACjE;AAAA,UACC,SACC,4CAAC;AAAA,YAAgB,YAAW;AAAA,YAAS,IAAG;AAAA,YAAK,IAAG;AAAA,YAC7C;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,KAEJ;AAAA,GACF;AAGF,SACE,6CAAC;AAAA,IAAU;AAAA,IACR;AAAA,eAAS,UAAU;AAAA,MACpB,4CAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACC,SAAS,WAAW;AAAA;AAAA,GACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,8BAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Eb;AAzEV,0BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AAErB,mCAAmD;AACnD,4BAA+B;AAE/B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,qBAAiB,sCAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,UAE1B,6BAAkB,oBAAoB,MACtC,4EACE;AAAA,wDAAC,uBAAM,kBAAO;AAAA,YACd,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,4CAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,6CAAC,aAAU,kBACR;AAAA,aAAS,UAAU;AAAA,IACpB,4CAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,wBAAwB,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,8BAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/SidePanelHeader.js CHANGED
@@ -53,61 +53,37 @@ const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
53
53
  `;
54
54
  const SidePanelHeader = ({ title = null, additionalAction = null, onClose = import_lodash.noop, showClose = true }) => {
55
55
  const theme = (0, import_ds_system.useTheme)();
56
- const separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
57
- height: "24px",
58
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSeparator, {})
59
- });
56
+ const separator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "24px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSeparator, {}) });
60
57
  const cols = [1, "auto", "auto"];
61
58
  const cols2 = ["auto"];
62
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
63
- cols,
64
- height: theme.space.m,
65
- pl: theme.space.xs,
66
- pr: theme.space.xs,
67
- alignItems: "center",
68
- width: "100%",
69
- children: [
70
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
71
- alignItems: "center",
72
- justifyContent: "flex-start",
73
- cols: cols2,
74
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
75
- alignItems: "center",
76
- pr: theme.space.xs,
77
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
78
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
79
- alignItems: "center",
80
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, {
81
- maxWidth: "100%",
82
- alignItems: "center",
83
- children: title
84
- })
85
- })
86
- })
87
- })
88
- }),
89
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
90
- ml: "xxs",
91
- alignItems: "center",
92
- cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"],
93
- children: [
94
- additionalAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
95
- children: additionalAction
96
- }),
59
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
60
+ Wrapper,
61
+ {
62
+ cols,
63
+ height: theme.space.m,
64
+ pl: theme.space.xs,
65
+ pr: theme.space.xs,
66
+ alignItems: "center",
67
+ width: "100%",
68
+ children: [
69
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", justifyContent: "flex-start", cols: cols2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", pr: theme.space.xs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { maxWidth: "100%", alignItems: "center", children: title }) }) }) }) }),
70
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { ml: "xxs", alignItems: "center", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
71
+ additionalAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: additionalAction }),
97
72
  additionalAction && showClose && separator,
98
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
99
- children: showClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.default, {
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: showClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_ds_button.default,
75
+ {
100
76
  buttonType: "text",
101
77
  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseSmall, {}),
102
78
  size: "m",
103
79
  onClick: onClose,
104
80
  "data-testid": "btn-close-slide-panel"
105
- })
106
- })
107
- ]
108
- })
109
- ]
110
- });
81
+ }
82
+ ) })
83
+ ] })
84
+ ]
85
+ }
86
+ );
111
87
  };
112
88
  const props = {
113
89
  title: import_ds_utilities.PropTypes.string.description("Page title"),
package/dist/cjs/SidePanelHeader.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/SidePanelHeader.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled, border, truncate, useTheme } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledSeparator = styled.div`\n width: 0;\n height: 100%;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n`;\n\nconst StyledTitle = styled.div`\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n`;\n\nconst Wrapper = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {\n const theme = useTheme();\n const separator = (\n <Grid height=\"24px\">\n <StyledSeparator />\n </Grid>\n );\n const cols = [1, 'auto', 'auto'];\n const cols2 = ['auto'];\n return (\n <Wrapper\n cols={cols}\n height={theme.space.m}\n pl={theme.space.xs}\n pr={theme.space.xs}\n alignItems=\"center\"\n width=\"100%\"\n >\n <Grid alignItems=\"center\" justifyContent=\"flex-start\" cols={cols2}>\n <Grid alignItems=\"center\" pr={theme.space.xs}>\n <Grid>\n <Grid alignItems=\"center\">\n <StyledTitle maxWidth=\"100%\" alignItems=\"center\">\n {title}\n </StyledTitle>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n {additionalAction && <Grid>{additionalAction}</Grid>}\n {additionalAction && showClose && separator}\n <Grid>\n {showClose && (\n <DSButton\n buttonType=\"text\"\n icon={<CloseSmall />}\n size=\"m\"\n onClick={onClose}\n data-testid=\"btn-close-slide-panel\"\n />\n )}\n </Grid>\n </Grid>\n </Wrapper>\n );\n};\n\nconst props = {\n /** Page title */\n title: PropTypes.string.description('Page title'),\n\n /** Action button */\n additionalAction: PropTypes.element.description('Action button'),\n\n /** Called when the slide collapse */\n onClose: PropTypes.func.description('Called when the slide collapse'),\n\n /** Show/Hide close button */\n showClose: PropTypes.bool.description('Show/Hide close button'),\n};\n\nSidePanelHeader.propTypes = props;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = props;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA7BN,0BAAoC;AACpC,uBAAmD;AACnD,oBAAqB;AACrB,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,wBAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,QAC7C,2BAAS;AAAA;AAGb,MAAM,cAAU,yBAAO,mBAAI;AAAA,mBACR,CAACA,eAAU,yBAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,KAAK,MAAM;AACvG,QAAM,YAAQ,2BAAS;AACvB,QAAM,YACJ,4CAAC;AAAA,IAAK,QAAO;AAAA,IACX,sDAAC,mBAAgB;AAAA,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,6CAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,IAEN;AAAA,kDAAC;AAAA,QAAK,YAAW;AAAA,QAAS,gBAAe;AAAA,QAAa,MAAM;AAAA,QAC1D,sDAAC;AAAA,UAAK,YAAW;AAAA,UAAS,IAAI,MAAM,MAAM;AAAA,UACxC,sDAAC;AAAA,YACC,sDAAC;AAAA,cAAK,YAAW;AAAA,cACf,sDAAC;AAAA,gBAAY,UAAS;AAAA,gBAAO,YAAW;AAAA,gBACrC;AAAA,eACH;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,MACA,6CAAC;AAAA,QAAK,IAAG;AAAA,QAAM,YAAW;AAAA,QAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,QAC3F;AAAA,8BAAoB,4CAAC;AAAA,YAAM;AAAA,WAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,4CAAC;AAAA,YACE,uBACC,4CAAC,iBAAAC,SAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,4CAAC,8BAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA,aACd;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,8BAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,8BAAS,eAAe;AAE5D,4BAA4B,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA7BN,0BAAoC;AACpC,uBAAmD;AACnD,oBAAqB;AACrB,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,wBAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,QAC7C,2BAAS;AAAA;AAGb,MAAM,cAAU,yBAAO,mBAAI;AAAA,mBACR,CAACA,eAAU,yBAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,KAAK,MAAM;AACvG,QAAM,YAAQ,2BAAS;AACvB,QAAM,YACJ,4CAAC,uBAAK,QAAO,QACX,sDAAC,mBAAgB,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,MAAM,MAAM;AAAA,MACpB,IAAI,MAAM,MAAM;AAAA,MAChB,IAAI,MAAM,MAAM;AAAA,MAChB,YAAW;AAAA,MACX,OAAM;AAAA,MAEN;AAAA,oDAAC,uBAAK,YAAW,UAAS,gBAAe,cAAa,MAAM,OAC1D,sDAAC,uBAAK,YAAW,UAAS,IAAI,MAAM,MAAM,IACxC,sDAAC,uBACC,sDAAC,uBAAK,YAAW,UACf,sDAAC,eAAY,UAAS,QAAO,YAAW,UACrC,iBACH,GACF,GACF,GACF,GACF;AAAA,QACA,6CAAC,uBAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,8BAAoB,4CAAC,uBAAM,4BAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,4CAAC,uBACE,uBACC;AAAA,YAAC,iBAAAC;AAAA,YAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,4CAAC,8BAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA;AAAA,UACd,GAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,8BAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,kCAA8B,8BAAS,eAAe;AAE5D,4BAA4B,YAAY;",
6
6
  "names": ["props", "DSButton"]
7
7
  }
package/dist/cjs/TemplateBasicPageWithSidePanel.js CHANGED
@@ -44,50 +44,32 @@ const TemplateBasicPageWithSidePanel = ({
44
44
  panelHeader,
45
45
  panelContent,
46
46
  panelWidth
47
- }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
48
- style: { overflow: "hidden", width: "100%" },
49
- height: "100%",
50
- maxHeight: "100%",
51
- rows: ["auto", "1fr"],
52
- children: [
53
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
54
- children: globalHeader
55
- }),
56
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SidePanel.default, {
47
+ }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { style: { overflow: "hidden", width: "100%" }, height: "100%", maxHeight: "100%", rows: ["auto", "1fr"], children: [
48
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: globalHeader }),
49
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
50
+ import_SidePanel.default,
51
+ {
57
52
  footer: panelFooter,
58
53
  header: panelHeader,
59
54
  panelWidth,
60
55
  onClose,
61
56
  panelContent,
62
57
  isOpen,
63
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
64
- style: { overflow: "hidden" },
65
- height: "100%",
66
- maxHeight: "100%",
67
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
58
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: "hidden" }, height: "100%", maxHeight: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
59
+ import_ds_grid.Grid,
60
+ {
68
61
  rows: mainFooter ? [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)", "48px"] : [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)"],
69
62
  style: { overflow: "hidden" },
70
63
  children: [
71
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
72
- children: mainHeader
73
- }),
74
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
75
- style: { overflow: "hidden" },
76
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
77
- style: { overflow: "auto" },
78
- children: mainContent
79
- })
80
- }),
81
- mainFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
82
- alignItems: "center",
83
- children: mainFooter
84
- })
64
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: mainHeader }),
65
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { overflow: "auto" }, children: mainContent }) }),
66
+ mainFooter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: mainFooter })
85
67
  ]
86
- })
87
- })
88
- })
89
- ]
90
- });
68
+ }
69
+ ) })
70
+ }
71
+ )
72
+ ] });
91
73
  const props = {
92
74
  globalHeader: import_ds_utilities.PropTypes.element.description("Global Header"),
93
75
  mainHeader: import_ds_utilities.PropTypes.element.description("Main Header"),
package/dist/cjs/TemplateBasicPageWithSidePanel.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/TemplateBasicPageWithSidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\n\nconst TemplateBasicPageWithSidePanel = ({\n globalHeader = null,\n mainHeader = null,\n mainContent,\n mainFooter,\n isOpen = false,\n onClose,\n panelFooter,\n panelHeader,\n panelContent,\n panelWidth,\n}) => (\n <Grid style={{ overflow: 'hidden', width: '100%' }} height=\"100%\" maxHeight=\"100%\" rows={['auto', '1fr']}>\n <Grid>{globalHeader}</Grid>\n <SidePanel\n footer={panelFooter}\n header={panelHeader}\n panelWidth={panelWidth}\n onClose={onClose}\n panelContent={panelContent}\n isOpen={isOpen}\n >\n <Grid style={{ overflow: 'hidden' }} height=\"100%\" maxHeight=\"100%\">\n <Grid\n rows={\n mainFooter\n ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px']\n : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <Grid>{mainHeader}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>{mainContent}</Grid>\n </Grid>\n {mainFooter && <Grid alignItems=\"center\">{mainFooter}</Grid>}\n </Grid>\n </Grid>\n </SidePanel>\n </Grid>\n);\n\nconst props = {\n /**\n * Global Header\n */\n globalHeader: PropTypes.element.description('Global Header'),\n /**\n * Main Header\n */\n mainHeader: PropTypes.element.description('Main Header'),\n /**\n * Main content\n */\n mainContent: PropTypes.element.isRequired.description('Main content'),\n /**\n * Main Footer\n */\n mainFooter: PropTypes.element.description('Main Footer'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n panelFooter: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n panelHeader: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n /**\n * Callback\n */\n onClose: PropTypes.func.description('callback'),\n};\n\nTemplateBasicPageWithSidePanel.propTypes = props;\nTemplateBasicPageWithSidePanel.displayName = 'TemplateBasicPageWithSidePanel';\nconst DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,0BAAoC;AACpC,qBAAqB;AACrB,uBAAsB;AAEtB,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6CAAC;AAAA,EAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAAG,QAAO;AAAA,EAAO,WAAU;AAAA,EAAO,MAAM,CAAC,QAAQ,KAAK;AAAA,EACrG;AAAA,gDAAC;AAAA,MAAM;AAAA,KAAa;AAAA,IACpB,4CAAC,iBAAAA,SAAA;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC;AAAA,QAAK,OAAO,EAAE,UAAU,SAAS;AAAA,QAAG,QAAO;AAAA,QAAO,WAAU;AAAA,QAC3D,uDAAC;AAAA,UACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,UAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE5B;AAAA,wDAAC;AAAA,cAAM;AAAA,aAAW;AAAA,YAClB,4CAAC;AAAA,cAAK,OAAO,EAAE,UAAU,SAAS;AAAA,cAChC,sDAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,OAAO;AAAA,gBAAI;AAAA,eAAY;AAAA,aAClD;AAAA,YACC,cAAc,4CAAC;AAAA,cAAK,YAAW;AAAA,cAAU;AAAA,aAAW;AAAA;AAAA,SACvD;AAAA,OACF;AAAA,KACF;AAAA;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAIhG,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,8BAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,uCAAmC,8BAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAjBJ,0BAAoC;AACpC,qBAAqB;AACrB,uBAAsB;AAEtB,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,6CAAC,uBAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO,GAAG,QAAO,QAAO,WAAU,QAAO,MAAM,CAAC,QAAQ,KAAK,GACrG;AAAA,8CAAC,uBAAM,wBAAa;AAAA,EACpB;AAAA,IAAC,iBAAAA;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAAG,QAAO,QAAO,WAAU,QAC3D;AAAA,QAAC;AAAA;AAAA,UACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,UAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE5B;AAAA,wDAAC,uBAAM,sBAAW;AAAA,YAClB,4CAAC,uBAAK,OAAO,EAAE,UAAU,SAAS,GAChC,sDAAC,uBAAK,OAAO,EAAE,UAAU,OAAO,GAAI,uBAAY,GAClD;AAAA,YACC,cAAc,4CAAC,uBAAK,YAAW,UAAU,sBAAW;AAAA;AAAA;AAAA,MACvD,GACF;AAAA;AAAA,EACF;AAAA,GACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAIhG,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,8BAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,uCAAmC,8BAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
6
6
  "names": ["SidePanel"]
7
7
  }
package/dist/esm/SidePanel.js CHANGED
@@ -44,55 +44,38 @@ const SidePanel = ({
44
44
  side = "right"
45
45
  }) => {
46
46
  const isOpenAnimated = useDelayedOpen(isOpen);
47
- const panelJSX = /* @__PURE__ */ jsx(TransGrid, {
48
- style: { overflow: "hidden" },
49
- height: "100%",
50
- maxHeight: "100%",
51
- width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
52
- withBorder,
53
- withBoxShadow,
54
- isOpen,
55
- cols: [1],
56
- noGridInfluencer,
57
- side,
58
- children: /* @__PURE__ */ jsx(Grid, {
59
- rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
47
+ const panelJSX = /* @__PURE__ */ jsx(
48
+ TransGrid,
49
+ {
60
50
  style: { overflow: "hidden" },
61
- children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ jsxs(Fragment, {
62
- children: [
63
- /* @__PURE__ */ jsx(Grid, {
64
- children: header
65
- }),
66
- /* @__PURE__ */ jsx(Grid, {
67
- style: { overflow: "hidden" },
68
- children: /* @__PURE__ */ jsx(Grid, {
69
- style: { overflow: panelContentOverflow },
70
- children: panelContent
71
- })
72
- }),
73
- footer ? /* @__PURE__ */ jsx(FooterContainer, {
74
- alignItems: "center",
75
- pl: "xs",
76
- pr: "xs",
77
- children: footer
78
- }) : null
79
- ]
80
- })
81
- })
82
- });
83
- return /* @__PURE__ */ jsxs(Container, {
84
- noGridInfluencer,
85
- children: [
86
- side === "left" && panelJSX,
87
- /* @__PURE__ */ jsx(TransGrid, {
88
- height: "100%",
89
- flex: "1",
90
- mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0,
91
- children
92
- }),
93
- side === "right" && panelJSX
94
- ]
95
- });
51
+ height: "100%",
52
+ maxHeight: "100%",
53
+ width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
54
+ withBorder,
55
+ withBoxShadow,
56
+ isOpen,
57
+ cols: [1],
58
+ noGridInfluencer,
59
+ side,
60
+ children: /* @__PURE__ */ jsx(
61
+ Grid,
62
+ {
63
+ rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
64
+ style: { overflow: "hidden" },
65
+ children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
66
+ /* @__PURE__ */ jsx(Grid, { children: header }),
67
+ /* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(Grid, { style: { overflow: panelContentOverflow }, children: panelContent }) }),
68
+ footer ? /* @__PURE__ */ jsx(FooterContainer, { alignItems: "center", pl: "xs", pr: "xs", children: footer }) : null
69
+ ] })
70
+ }
71
+ )
72
+ }
73
+ );
74
+ return /* @__PURE__ */ jsxs(Container, { noGridInfluencer, children: [
75
+ side === "left" && panelJSX,
76
+ /* @__PURE__ */ jsx(TransGrid, { height: "100%", flex: "1", mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0, children }),
77
+ side === "right" && panelJSX
78
+ ] });
96
79
  };
97
80
  SidePanel.propTypes = DSInputTextPropTypes;
98
81
  SidePanel.defaultProps = defaultProps;
package/dist/esm/SidePanel.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer, side, theme }) =>\n noGridInfluencer\n ? `\n position: absolute;\n z-index: ${theme.zIndex.popper};\n top:0;\n ${side}: 0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer = false,\n withBorder = true,\n withBoxShadow = false,\n side = 'right',\n}): React.ReactElement => {\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n const panelJSX = (\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n side={side}\n >\n <Grid\n rows={\n footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n {(isOpenAnimated || widthWhenIsClosed > 0) && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </>\n )}\n </Grid>\n </TransGrid>\n );\n\n return (\n <Container noGridInfluencer={noGridInfluencer}>\n {side === 'left' && panelJSX}\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n {side === 'right' && panelJSX}\n </Container>\n );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC0Eb,mBACE,KADF;AAzEV,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AAErB,SAAS,sBAAsB,oBAAoB;AACnD,SAAS,sBAAsB;AAE/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,iBAAiB,eAAe,MAAM;AAE5C,QAAM,WACJ,oBAAC;AAAA,IACC,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B,QAAO;AAAA,IACP,WAAU;AAAA,IACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,CAAC,CAAC;AAAA,IACR;AAAA,IACA;AAAA,IAEA,8BAAC;AAAA,MACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,MAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,MAE1B,6BAAkB,oBAAoB,MACtC;AAAA,QACE;AAAA,8BAAC;AAAA,YAAM;AAAA,WAAO;AAAA,UACd,oBAAC;AAAA,YAAK,OAAO,EAAE,UAAU,SAAS;AAAA,YAChC,8BAAC;AAAA,cAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,cAAI;AAAA,aAAa;AAAA,WACjE;AAAA,UACC,SACC,oBAAC;AAAA,YAAgB,YAAW;AAAA,YAAS,IAAG;AAAA,YAAK,IAAG;AAAA,YAC7C;AAAA,WACH,IACE;AAAA;AAAA,OACN;AAAA,KAEJ;AAAA,GACF;AAGF,SACE,qBAAC;AAAA,IAAU;AAAA,IACR;AAAA,eAAS,UAAU;AAAA,MACpB,oBAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACC,SAAS,WAAW;AAAA;AAAA,GACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
5
+ "mappings": "AAAA,YAAY,WAAW;AC0Eb,mBACE,KADF;AAzEV,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AAErB,SAAS,sBAAsB,oBAAoB;AACnD,SAAS,sBAAsB;AAE/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO;AAAA;AAAA,KAEtB;AAAA;AAAA,OAGG;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,OAAO;AACT,MAA0B;AACxB,QAAM,iBAAiB,eAAe,MAAM;AAE5C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU,SAAS;AAAA,MAC5B,QAAO;AAAA,MACP,WAAU;AAAA,MACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,UAE1B,6BAAkB,oBAAoB,MACtC,iCACE;AAAA,gCAAC,QAAM,kBAAO;AAAA,YACd,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,qBAAqB,GAAI,wBAAa,GACjE;AAAA,YACC,SACC,oBAAC,mBAAgB,YAAW,UAAS,IAAG,MAAK,IAAG,MAC7C,kBACH,IACE;AAAA,aACN;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAGF,SACE,qBAAC,aAAU,kBACR;AAAA,aAAS,UAAU;AAAA,IACpB,oBAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,wBAAwB,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/SidePanelHeader.js CHANGED
@@ -23,61 +23,37 @@ const Wrapper = styled(Grid)`
23
23
  `;
24
24
  const SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {
25
25
  const theme = useTheme();
26
- const separator = /* @__PURE__ */ jsx(Grid, {
27
- height: "24px",
28
- children: /* @__PURE__ */ jsx(StyledSeparator, {})
29
- });
26
+ const separator = /* @__PURE__ */ jsx(Grid, { height: "24px", children: /* @__PURE__ */ jsx(StyledSeparator, {}) });
30
27
  const cols = [1, "auto", "auto"];
31
28
  const cols2 = ["auto"];
32
- return /* @__PURE__ */ jsxs(Wrapper, {
33
- cols,
34
- height: theme.space.m,
35
- pl: theme.space.xs,
36
- pr: theme.space.xs,
37
- alignItems: "center",
38
- width: "100%",
39
- children: [
40
- /* @__PURE__ */ jsx(Grid, {
41
- alignItems: "center",
42
- justifyContent: "flex-start",
43
- cols: cols2,
44
- children: /* @__PURE__ */ jsx(Grid, {
45
- alignItems: "center",
46
- pr: theme.space.xs,
47
- children: /* @__PURE__ */ jsx(Grid, {
48
- children: /* @__PURE__ */ jsx(Grid, {
49
- alignItems: "center",
50
- children: /* @__PURE__ */ jsx(StyledTitle, {
51
- maxWidth: "100%",
52
- alignItems: "center",
53
- children: title
54
- })
55
- })
56
- })
57
- })
58
- }),
59
- /* @__PURE__ */ jsxs(Grid, {
60
- ml: "xxs",
61
- alignItems: "center",
62
- cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"],
63
- children: [
64
- additionalAction && /* @__PURE__ */ jsx(Grid, {
65
- children: additionalAction
66
- }),
29
+ return /* @__PURE__ */ jsxs(
30
+ Wrapper,
31
+ {
32
+ cols,
33
+ height: theme.space.m,
34
+ pl: theme.space.xs,
35
+ pr: theme.space.xs,
36
+ alignItems: "center",
37
+ width: "100%",
38
+ children: [
39
+ /* @__PURE__ */ jsx(Grid, { alignItems: "center", justifyContent: "flex-start", cols: cols2, children: /* @__PURE__ */ jsx(Grid, { alignItems: "center", pr: theme.space.xs, children: /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(StyledTitle, { maxWidth: "100%", alignItems: "center", children: title }) }) }) }) }),
40
+ /* @__PURE__ */ jsxs(Grid, { ml: "xxs", alignItems: "center", cols: additionalAction ? ["auto", "auto", "auto"] : ["auto"], children: [
41
+ additionalAction && /* @__PURE__ */ jsx(Grid, { children: additionalAction }),
67
42
  additionalAction && showClose && separator,
68
- /* @__PURE__ */ jsx(Grid, {
69
- children: showClose && /* @__PURE__ */ jsx(DSButton, {
43
+ /* @__PURE__ */ jsx(Grid, { children: showClose && /* @__PURE__ */ jsx(
44
+ DSButton,
45
+ {
70
46
  buttonType: "text",
71
47
  icon: /* @__PURE__ */ jsx(CloseSmall, {}),
72
48
  size: "m",
73
49
  onClick: onClose,
74
50
  "data-testid": "btn-close-slide-panel"
75
- })
76
- })
77
- ]
78
- })
79
- ]
80
- });
51
+ }
52
+ ) })
53
+ ] })
54
+ ]
55
+ }
56
+ );
81
57
  };
82
58
  const props = {
83
59
  title: PropTypes.string.description("Page title"),
package/dist/esm/SidePanelHeader.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled, border, truncate, useTheme } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledSeparator = styled.div`\n width: 0;\n height: 100%;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n`;\n\nconst StyledTitle = styled.div`\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n`;\n\nconst Wrapper = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {\n const theme = useTheme();\n const separator = (\n <Grid height=\"24px\">\n <StyledSeparator />\n </Grid>\n );\n const cols = [1, 'auto', 'auto'];\n const cols2 = ['auto'];\n return (\n <Wrapper\n cols={cols}\n height={theme.space.m}\n pl={theme.space.xs}\n pr={theme.space.xs}\n alignItems=\"center\"\n width=\"100%\"\n >\n <Grid alignItems=\"center\" justifyContent=\"flex-start\" cols={cols2}>\n <Grid alignItems=\"center\" pr={theme.space.xs}>\n <Grid>\n <Grid alignItems=\"center\">\n <StyledTitle maxWidth=\"100%\" alignItems=\"center\">\n {title}\n </StyledTitle>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n {additionalAction && <Grid>{additionalAction}</Grid>}\n {additionalAction && showClose && separator}\n <Grid>\n {showClose && (\n <DSButton\n buttonType=\"text\"\n icon={<CloseSmall />}\n size=\"m\"\n onClick={onClose}\n data-testid=\"btn-close-slide-panel\"\n />\n )}\n </Grid>\n </Grid>\n </Wrapper>\n );\n};\n\nconst props = {\n /** Page title */\n title: PropTypes.string.description('Page title'),\n\n /** Action button */\n additionalAction: PropTypes.element.description('Action button'),\n\n /** Called when the slide collapse */\n onClose: PropTypes.func.description('Called when the slide collapse'),\n\n /** Show/Hide close button */\n showClose: PropTypes.bool.description('Show/Hide close button'),\n};\n\nSidePanelHeader.propTypes = props;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = props;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC8BjB,cAyBA,YAzBA;AA7BN,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,QAAQ,UAAU,gBAAgB;AACnD,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,YAAY;AAErB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,UAAU,OAAO,IAAI;AAAA,mBACR,CAACA,WAAU,OAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,MAAM,YAAY,KAAK,MAAM;AACvG,QAAM,QAAQ,SAAS;AACvB,QAAM,YACJ,oBAAC;AAAA,IAAK,QAAO;AAAA,IACX,8BAAC,mBAAgB;AAAA,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,qBAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,IAEN;AAAA,0BAAC;AAAA,QAAK,YAAW;AAAA,QAAS,gBAAe;AAAA,QAAa,MAAM;AAAA,QAC1D,8BAAC;AAAA,UAAK,YAAW;AAAA,UAAS,IAAI,MAAM,MAAM;AAAA,UACxC,8BAAC;AAAA,YACC,8BAAC;AAAA,cAAK,YAAW;AAAA,cACf,8BAAC;AAAA,gBAAY,UAAS;AAAA,gBAAO,YAAW;AAAA,gBACrC;AAAA,eACH;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,MACA,qBAAC;AAAA,QAAK,IAAG;AAAA,QAAM,YAAW;AAAA,QAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,QAC3F;AAAA,8BAAoB,oBAAC;AAAA,YAAM;AAAA,WAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,oBAAC;AAAA,YACE,uBACC,oBAAC;AAAA,cACC,YAAW;AAAA,cACX,MAAM,oBAAC,cAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA,aACd;AAAA,WAEJ;AAAA;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,UAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,UAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,UAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
5
+ "mappings": "AAAA,YAAY,WAAW;AC8BjB,cAyBA,YAzBA;AA7BN,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,QAAQ,UAAU,gBAAgB;AACnD,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,YAAY;AAErB,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGjB,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAACA,WAAU,GAAGA,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAACA,WAAUA,OAAM,MAAM,YAAY;AAAA,WACzC,CAACA,WAAUA,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,UAAU,OAAO,IAAI;AAAA,mBACR,CAACA,WAAU,OAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,MAAM,YAAY,KAAK,MAAM;AACvG,QAAM,QAAQ,SAAS;AACvB,QAAM,YACJ,oBAAC,QAAK,QAAO,QACX,8BAAC,mBAAgB,GACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,MAAM,MAAM;AAAA,MACpB,IAAI,MAAM,MAAM;AAAA,MAChB,IAAI,MAAM,MAAM;AAAA,MAChB,YAAW;AAAA,MACX,OAAM;AAAA,MAEN;AAAA,4BAAC,QAAK,YAAW,UAAS,gBAAe,cAAa,MAAM,OAC1D,8BAAC,QAAK,YAAW,UAAS,IAAI,MAAM,MAAM,IACxC,8BAAC,QACC,8BAAC,QAAK,YAAW,UACf,8BAAC,eAAY,UAAS,QAAO,YAAW,UACrC,iBACH,GACF,GACF,GACF,GACF;AAAA,QACA,qBAAC,QAAK,IAAG,OAAM,YAAW,UAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM,GAC3F;AAAA,8BAAoB,oBAAC,QAAM,4BAAiB;AAAA,UAC5C,oBAAoB,aAAa;AAAA,UAClC,oBAAC,QACE,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,MAAM,oBAAC,cAAW;AAAA,cAClB,MAAK;AAAA,cACL,SAAS;AAAA,cACT,eAAY;AAAA;AAAA,UACd,GAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,UAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,UAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,UAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
6
6
  "names": ["props"]
7
7
  }
package/dist/esm/TemplateBasicPageWithSidePanel.js CHANGED
@@ -14,50 +14,32 @@ const TemplateBasicPageWithSidePanel = ({
14
14
  panelHeader,
15
15
  panelContent,
16
16
  panelWidth
17
- }) => /* @__PURE__ */ jsxs(Grid, {
18
- style: { overflow: "hidden", width: "100%" },
19
- height: "100%",
20
- maxHeight: "100%",
21
- rows: ["auto", "1fr"],
22
- children: [
23
- /* @__PURE__ */ jsx(Grid, {
24
- children: globalHeader
25
- }),
26
- /* @__PURE__ */ jsx(SidePanel, {
17
+ }) => /* @__PURE__ */ jsxs(Grid, { style: { overflow: "hidden", width: "100%" }, height: "100%", maxHeight: "100%", rows: ["auto", "1fr"], children: [
18
+ /* @__PURE__ */ jsx(Grid, { children: globalHeader }),
19
+ /* @__PURE__ */ jsx(
20
+ SidePanel,
21
+ {
27
22
  footer: panelFooter,
28
23
  header: panelHeader,
29
24
  panelWidth,
30
25
  onClose,
31
26
  panelContent,
32
27
  isOpen,
33
- children: /* @__PURE__ */ jsx(Grid, {
34
- style: { overflow: "hidden" },
35
- height: "100%",
36
- maxHeight: "100%",
37
- children: /* @__PURE__ */ jsxs(Grid, {
28
+ children: /* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, height: "100%", maxHeight: "100%", children: /* @__PURE__ */ jsxs(
29
+ Grid,
30
+ {
38
31
  rows: mainFooter ? [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)", "48px"] : [mainHeader ? "auto" : "0px", "minmax(0px, 1fr)"],
39
32
  style: { overflow: "hidden" },
40
33
  children: [
41
- /* @__PURE__ */ jsx(Grid, {
42
- children: mainHeader
43
- }),
44
- /* @__PURE__ */ jsx(Grid, {
45
- style: { overflow: "hidden" },
46
- children: /* @__PURE__ */ jsx(Grid, {
47
- style: { overflow: "auto" },
48
- children: mainContent
49
- })
50
- }),
51
- mainFooter && /* @__PURE__ */ jsx(Grid, {
52
- alignItems: "center",
53
- children: mainFooter
54
- })
34
+ /* @__PURE__ */ jsx(Grid, { children: mainHeader }),
35
+ /* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(Grid, { style: { overflow: "auto" }, children: mainContent }) }),
36
+ mainFooter && /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: mainFooter })
55
37
  ]
56
- })
57
- })
58
- })
59
- ]
60
- });
38
+ }
39
+ ) })
40
+ }
41
+ )
42
+ ] });
61
43
  const props = {
62
44
  globalHeader: PropTypes.element.description("Global Header"),
63
45
  mainHeader: PropTypes.element.description("Main Header"),
package/dist/esm/TemplateBasicPageWithSidePanel.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TemplateBasicPageWithSidePanel.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\n\nconst TemplateBasicPageWithSidePanel = ({\n globalHeader = null,\n mainHeader = null,\n mainContent,\n mainFooter,\n isOpen = false,\n onClose,\n panelFooter,\n panelHeader,\n panelContent,\n panelWidth,\n}) => (\n <Grid style={{ overflow: 'hidden', width: '100%' }} height=\"100%\" maxHeight=\"100%\" rows={['auto', '1fr']}>\n <Grid>{globalHeader}</Grid>\n <SidePanel\n footer={panelFooter}\n header={panelHeader}\n panelWidth={panelWidth}\n onClose={onClose}\n panelContent={panelContent}\n isOpen={isOpen}\n >\n <Grid style={{ overflow: 'hidden' }} height=\"100%\" maxHeight=\"100%\">\n <Grid\n rows={\n mainFooter\n ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px']\n : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <Grid>{mainHeader}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>{mainContent}</Grid>\n </Grid>\n {mainFooter && <Grid alignItems=\"center\">{mainFooter}</Grid>}\n </Grid>\n </Grid>\n </SidePanel>\n </Grid>\n);\n\nconst props = {\n /**\n * Global Header\n */\n globalHeader: PropTypes.element.description('Global Header'),\n /**\n * Main Header\n */\n mainHeader: PropTypes.element.description('Main Header'),\n /**\n * Main content\n */\n mainContent: PropTypes.element.isRequired.description('Main content'),\n /**\n * Main Footer\n */\n mainFooter: PropTypes.element.description('Main Footer'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n panelFooter: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n panelHeader: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n /**\n * Callback\n */\n onClose: PropTypes.func.description('callback'),\n};\n\nTemplateBasicPageWithSidePanel.propTypes = props;\nTemplateBasicPageWithSidePanel.displayName = 'TemplateBasicPageWithSidePanel';\nconst DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkBnB,cAUI,YAVJ;AAjBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY;AACrB,OAAO,eAAe;AAEtB,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC;AAAA,EAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAAG,QAAO;AAAA,EAAO,WAAU;AAAA,EAAO,MAAM,CAAC,QAAQ,KAAK;AAAA,EACrG;AAAA,wBAAC;AAAA,MAAM;AAAA,KAAa;AAAA,IACpB,oBAAC;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC;AAAA,QAAK,OAAO,EAAE,UAAU,SAAS;AAAA,QAAG,QAAO;AAAA,QAAO,WAAU;AAAA,QAC3D,+BAAC;AAAA,UACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,UAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE5B;AAAA,gCAAC;AAAA,cAAM;AAAA,aAAW;AAAA,YAClB,oBAAC;AAAA,cAAK,OAAO,EAAE,UAAU,SAAS;AAAA,cAChC,8BAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,OAAO;AAAA,gBAAI;AAAA,eAAY;AAAA,aAClD;AAAA,YACC,cAAc,oBAAC;AAAA,cAAK,YAAW;AAAA,cAAU;AAAA,aAAW;AAAA;AAAA,SACvD;AAAA,OACF;AAAA,KACF;AAAA;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAIhG,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,UAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,mCAAmC,SAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACkBnB,cAUI,YAVJ;AAjBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY;AACrB,OAAO,eAAe;AAEtB,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,QAAK,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO,GAAG,QAAO,QAAO,WAAU,QAAO,MAAM,CAAC,QAAQ,KAAK,GACrG;AAAA,sBAAC,QAAM,wBAAa;AAAA,EACpB;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAAG,QAAO,QAAO,WAAU,QAC3D;AAAA,QAAC;AAAA;AAAA,UACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,UAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE5B;AAAA,gCAAC,QAAM,sBAAW;AAAA,YAClB,oBAAC,QAAK,OAAO,EAAE,UAAU,SAAS,GAChC,8BAAC,QAAK,OAAO,EAAE,UAAU,OAAO,GAAI,uBAAY,GAClD;AAAA,YACC,cAAc,oBAAC,QAAK,YAAW,UAAU,sBAAW;AAAA;AAAA;AAAA,MACvD,GACF;AAAA;AAAA,EACF;AAAA,GACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAIhG,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,UAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,mCAAmC,SAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-side-panel",
3
- "version": "3.12.0-rc.2",
3
+ "version": "3.12.0-rc.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Side Panel",
6
6
  "files": [
@@ -55,11 +55,11 @@
55
55
  "indent": 4
56
56
  },
57
57
  "dependencies": {
58
- "@elliemae/ds-button": "3.12.0-rc.2",
59
- "@elliemae/ds-grid": "3.12.0-rc.2",
60
- "@elliemae/ds-icons": "3.12.0-rc.2",
61
- "@elliemae/ds-system": "3.12.0-rc.2",
62
- "@elliemae/ds-utilities": "3.12.0-rc.2"
58
+ "@elliemae/ds-button": "3.12.0-rc.4",
59
+ "@elliemae/ds-grid": "3.12.0-rc.4",
60
+ "@elliemae/ds-icons": "3.12.0-rc.4",
61
+ "@elliemae/ds-system": "3.12.0-rc.4",
62
+ "@elliemae/ds-utilities": "3.12.0-rc.4"
63
63
  },
64
64
  "devDependencies": {
65
65
  "styled-components": "~5.3.6"