@elliemae/ds-side-panel 3.9.0-next.2 → 3.9.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/SidePanel.js +2 -1
- package/dist/cjs/SidePanel.js.map +2 -2
- package/dist/cjs/SidePanelHeader.js +0 -3
- package/dist/cjs/SidePanelHeader.js.map +2 -2
- package/dist/esm/SidePanel.js +2 -1
- package/dist/esm/SidePanel.js.map +2 -2
- package/dist/esm/SidePanelHeader.js +0 -3
- package/dist/esm/SidePanelHeader.js.map +2 -2
- package/package.json +6 -6
package/dist/cjs/SidePanel.js
CHANGED
|
@@ -48,8 +48,9 @@ const TransGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
48
48
|
box-shadow: ${(props) => props.withBoxShadow ? "0 2px 5px 0 rgba(53, 60, 70, 0.5)" : "none"};
|
|
49
49
|
transition: 300ms;
|
|
50
50
|
border-left: ${(props) => props.withBorder ? (0, import_ds_system.border)(props.theme.colors.neutral["300"], "1px") : "none"};
|
|
51
|
-
${({ noGridInfluencer, side }) => noGridInfluencer ? `
|
|
51
|
+
${({ noGridInfluencer, side, theme }) => noGridInfluencer ? `
|
|
52
52
|
position: absolute;
|
|
53
|
+
z-index: ${theme.zIndex.popper};
|
|
53
54
|
top:0;
|
|
54
55
|
${side}: 0;
|
|
55
56
|
height: 100%;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
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 { DSInputTextPropTypes, defaultProps, DSSidePanelT } 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 }) =>\n noGridInfluencer\n ? `\n position: absolute;\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;ADAvB;AACA,0BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AACrB,mCAAiE;AACjE,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,
|
|
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 { DSInputTextPropTypes, defaultProps, DSSidePanelT } 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;ADAvB;AACA,0BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AACrB,mCAAiE;AACjE,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -73,13 +73,10 @@ const SidePanelHeader = ({ title = null, additionalAction = null, onClose = impo
|
|
|
73
73
|
justifyContent: "flex-start",
|
|
74
74
|
cols: cols2,
|
|
75
75
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
76
|
-
cols: [1],
|
|
77
76
|
alignItems: "center",
|
|
78
77
|
pr: theme.space.xs,
|
|
79
78
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
80
|
-
flexGrow: 0,
|
|
81
79
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
82
|
-
cols: ["auto", "auto"],
|
|
83
80
|
alignItems: "center",
|
|
84
81
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, {
|
|
85
82
|
maxWidth: "100%",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanelHeader.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 { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAoC;AACpC,uBAAuB;AACvB,oBAAqB;AACrB,IAAAA,oBAA2C;AAC3C,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAACC,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,4BAAS;AAAA;AAGb,MAAM,cAAU,yBAAO,mBAAI;AAAA,mBACR,CAACA,eAAU,0BAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,KAAK,MAAM;AACvG,QAAM,YAAQ,4BAAS;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,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\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;ADAvB;AACA,0BAAoC;AACpC,uBAAuB;AACvB,oBAAqB;AACrB,IAAAA,oBAA2C;AAC3C,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAACC,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,4BAAS;AAAA;AAGb,MAAM,cAAU,yBAAO,mBAAI;AAAA,mBACR,CAACA,eAAU,0BAAOA,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,KAAK,MAAM;AACvG,QAAM,YAAQ,4BAAS;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;",
|
|
6
6
|
"names": ["import_ds_system", "props", "DSButton"]
|
|
7
7
|
}
|
package/dist/esm/SidePanel.js
CHANGED
|
@@ -17,8 +17,9 @@ const TransGrid = styled(Grid)`
|
|
|
17
17
|
box-shadow: ${(props) => props.withBoxShadow ? "0 2px 5px 0 rgba(53, 60, 70, 0.5)" : "none"};
|
|
18
18
|
transition: 300ms;
|
|
19
19
|
border-left: ${(props) => props.withBorder ? border(props.theme.colors.neutral["300"], "1px") : "none"};
|
|
20
|
-
${({ noGridInfluencer, side }) => noGridInfluencer ? `
|
|
20
|
+
${({ noGridInfluencer, side, theme }) => noGridInfluencer ? `
|
|
21
21
|
position: absolute;
|
|
22
|
+
z-index: ${theme.zIndex.popper};
|
|
22
23
|
top:0;
|
|
23
24
|
${side}: 0;
|
|
24
25
|
height: 100%;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
|
|
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 { DSInputTextPropTypes, defaultProps, DSSidePanelT } 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 }) =>\n noGridInfluencer\n ? `\n position: absolute;\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;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AACrB,SAAS,sBAAsB,oBAAkC;AACjE,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,
|
|
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 { DSInputTextPropTypes, defaultProps, DSSidePanelT } 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;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AACrB,SAAS,sBAAsB,oBAAkC;AACjE,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,13 +43,10 @@ const SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop
|
|
|
43
43
|
justifyContent: "flex-start",
|
|
44
44
|
cols: cols2,
|
|
45
45
|
children: /* @__PURE__ */ jsx(Grid, {
|
|
46
|
-
cols: [1],
|
|
47
46
|
alignItems: "center",
|
|
48
47
|
pr: theme.space.xs,
|
|
49
48
|
children: /* @__PURE__ */ jsx(Grid, {
|
|
50
|
-
flexGrow: 0,
|
|
51
49
|
children: /* @__PURE__ */ jsx(Grid, {
|
|
52
|
-
cols: ["auto", "auto"],
|
|
53
50
|
alignItems: "center",
|
|
54
51
|
children: /* @__PURE__ */ jsx(StyledTitle, {
|
|
55
52
|
maxWidth: "100%",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.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 { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU,gBAAgB;AAC3C,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,
|
|
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 { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\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;ACAvB;AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU,gBAAgB;AAC3C,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;",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-side-panel",
|
|
3
|
-
"version": "3.9.0-
|
|
3
|
+
"version": "3.9.0-rc.1",
|
|
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.9.0-
|
|
59
|
-
"@elliemae/ds-grid": "3.9.0-
|
|
60
|
-
"@elliemae/ds-icons": "3.9.0-
|
|
61
|
-
"@elliemae/ds-system": "3.9.0-
|
|
62
|
-
"@elliemae/ds-utilities": "3.9.0-
|
|
58
|
+
"@elliemae/ds-button": "3.9.0-rc.1",
|
|
59
|
+
"@elliemae/ds-grid": "3.9.0-rc.1",
|
|
60
|
+
"@elliemae/ds-icons": "3.9.0-rc.1",
|
|
61
|
+
"@elliemae/ds-system": "3.9.0-rc.1",
|
|
62
|
+
"@elliemae/ds-utilities": "3.9.0-rc.1"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"styled-components": "~5.3.5"
|