@elliemae/ds-side-panel 3.7.2-rc.4 → 3.8.0-next.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/SidePanel.js +41 -36
- package/dist/cjs/SidePanel.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/SidePanel.js +41 -36
- package/dist/esm/SidePanel.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/package.json +6 -6
package/dist/cjs/SidePanel.js
CHANGED
|
@@ -51,7 +51,7 @@ const TransGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
51
51
|
${({ noGridInfluencer }) => noGridInfluencer ? `
|
|
52
52
|
position: absolute;
|
|
53
53
|
top:0;
|
|
54
|
-
|
|
54
|
+
${({ side }) => side}: 0;
|
|
55
55
|
height: 100%;
|
|
56
56
|
` : ""}
|
|
57
57
|
background: ${(props) => props.theme.colors.neutral["000"]};
|
|
@@ -70,52 +70,57 @@ const SidePanel = ({
|
|
|
70
70
|
widthWhenIsClosed,
|
|
71
71
|
noGridInfluencer = false,
|
|
72
72
|
withBorder = true,
|
|
73
|
-
withBoxShadow = false
|
|
73
|
+
withBoxShadow = false,
|
|
74
|
+
side = "right"
|
|
74
75
|
}) => {
|
|
75
76
|
const isOpenAnimated = (0, import_useDelayedOpen.useDelayedOpen)(isOpen);
|
|
77
|
+
const panelJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransGrid, {
|
|
78
|
+
style: { overflow: "hidden" },
|
|
79
|
+
height: "100%",
|
|
80
|
+
maxHeight: "100%",
|
|
81
|
+
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
82
|
+
withBorder,
|
|
83
|
+
withBoxShadow,
|
|
84
|
+
isOpen,
|
|
85
|
+
cols: [1],
|
|
86
|
+
noGridInfluencer,
|
|
87
|
+
side,
|
|
88
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
89
|
+
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
90
|
+
style: { overflow: "hidden" },
|
|
91
|
+
children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
94
|
+
children: header
|
|
95
|
+
}),
|
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
97
|
+
style: { overflow: "hidden" },
|
|
98
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
99
|
+
style: { overflow: panelContentOverflow },
|
|
100
|
+
children: panelContent
|
|
101
|
+
})
|
|
102
|
+
}),
|
|
103
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterContainer, {
|
|
104
|
+
alignItems: "center",
|
|
105
|
+
pl: "xs",
|
|
106
|
+
pr: "xs",
|
|
107
|
+
children: footer
|
|
108
|
+
}) : null
|
|
109
|
+
]
|
|
110
|
+
})
|
|
111
|
+
})
|
|
112
|
+
});
|
|
76
113
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, {
|
|
77
114
|
noGridInfluencer,
|
|
78
115
|
children: [
|
|
116
|
+
side === "left" && panelJSX,
|
|
79
117
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransGrid, {
|
|
80
118
|
height: "100%",
|
|
81
119
|
flex: "1",
|
|
82
120
|
mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0,
|
|
83
121
|
children
|
|
84
122
|
}),
|
|
85
|
-
|
|
86
|
-
style: { overflow: "hidden" },
|
|
87
|
-
height: "100%",
|
|
88
|
-
maxHeight: "100%",
|
|
89
|
-
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
90
|
-
withBorder,
|
|
91
|
-
withBoxShadow,
|
|
92
|
-
cols: [1],
|
|
93
|
-
noGridInfluencer,
|
|
94
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
95
|
-
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
96
|
-
style: { overflow: "hidden" },
|
|
97
|
-
children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
98
|
-
children: [
|
|
99
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
100
|
-
children: header
|
|
101
|
-
}),
|
|
102
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
103
|
-
style: { overflow: "hidden" },
|
|
104
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
105
|
-
style: { overflow: panelContentOverflow },
|
|
106
|
-
children: panelContent
|
|
107
|
-
})
|
|
108
|
-
}),
|
|
109
|
-
footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterContainer, {
|
|
110
|
-
alignItems: "center",
|
|
111
|
-
pl: "xs",
|
|
112
|
-
pr: "xs",
|
|
113
|
-
children: footer
|
|
114
|
-
})
|
|
115
|
-
]
|
|
116
|
-
})
|
|
117
|
-
})
|
|
118
|
-
})
|
|
123
|
+
side === "right" && panelJSX
|
|
119
124
|
]
|
|
120
125
|
});
|
|
121
126
|
};
|
|
@@ -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 }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\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,iBAAiB,MACpB,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
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 }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\n ${({ side }) => 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,iBAAiB,MACpB,mBACI;AAAA;AAAA;AAAA,KAGH,CAAC,EAAE,KAAK,MAAM;AAAA;AAAA,OAGX;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
|
}
|
|
@@ -49,6 +49,7 @@ const DSInputTextPropTypes = {
|
|
|
49
49
|
panelContentOverflow: import_ds_utilities.PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),
|
|
50
50
|
withBorder: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel has border or not"),
|
|
51
51
|
withBoxShadow: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
|
|
52
|
-
noGridInfluencer: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
|
|
52
|
+
noGridInfluencer: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel is grid-influencer or not"),
|
|
53
|
+
side: import_ds_utilities.PropTypes.oneOf(["left", "right"]).description("Wheter to put the side panel on the left or right").defaultValue("right")
|
|
53
54
|
};
|
|
54
55
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\n\nexport declare namespace DSSidePanelT {\n export interface IProps {\n children?: React.ReactNode;\n isOpen: boolean;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n noGridInfluencer?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\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 footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: 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 widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2D;AAoBpD,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA,EAIlC,UAAU,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,8BAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,8BAAU,KAAK,YAAY,iDAAiD;
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\n\nexport declare namespace DSSidePanelT {\n export interface IProps {\n children?: React.ReactNode;\n isOpen: boolean;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n noGridInfluencer?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\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 footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: 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 widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n side: PropTypes.oneOf(['left', 'right'])\n .description('Wheter to put the side panel on the left or right')\n .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2D;AAoBpD,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA,EAIlC,UAAU,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,8BAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,8BAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,8BAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SidePanel.js
CHANGED
|
@@ -20,7 +20,7 @@ const TransGrid = styled(Grid)`
|
|
|
20
20
|
${({ noGridInfluencer }) => noGridInfluencer ? `
|
|
21
21
|
position: absolute;
|
|
22
22
|
top:0;
|
|
23
|
-
|
|
23
|
+
${({ side }) => side}: 0;
|
|
24
24
|
height: 100%;
|
|
25
25
|
` : ""}
|
|
26
26
|
background: ${(props) => props.theme.colors.neutral["000"]};
|
|
@@ -39,52 +39,57 @@ const SidePanel = ({
|
|
|
39
39
|
widthWhenIsClosed,
|
|
40
40
|
noGridInfluencer = false,
|
|
41
41
|
withBorder = true,
|
|
42
|
-
withBoxShadow = false
|
|
42
|
+
withBoxShadow = false,
|
|
43
|
+
side = "right"
|
|
43
44
|
}) => {
|
|
44
45
|
const isOpenAnimated = useDelayedOpen(isOpen);
|
|
46
|
+
const panelJSX = /* @__PURE__ */ jsx(TransGrid, {
|
|
47
|
+
style: { overflow: "hidden" },
|
|
48
|
+
height: "100%",
|
|
49
|
+
maxHeight: "100%",
|
|
50
|
+
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
51
|
+
withBorder,
|
|
52
|
+
withBoxShadow,
|
|
53
|
+
isOpen,
|
|
54
|
+
cols: [1],
|
|
55
|
+
noGridInfluencer,
|
|
56
|
+
side,
|
|
57
|
+
children: /* @__PURE__ */ jsx(Grid, {
|
|
58
|
+
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
59
|
+
style: { overflow: "hidden" },
|
|
60
|
+
children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ jsxs(Fragment, {
|
|
61
|
+
children: [
|
|
62
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
63
|
+
children: header
|
|
64
|
+
}),
|
|
65
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
66
|
+
style: { overflow: "hidden" },
|
|
67
|
+
children: /* @__PURE__ */ jsx(Grid, {
|
|
68
|
+
style: { overflow: panelContentOverflow },
|
|
69
|
+
children: panelContent
|
|
70
|
+
})
|
|
71
|
+
}),
|
|
72
|
+
footer ? /* @__PURE__ */ jsx(FooterContainer, {
|
|
73
|
+
alignItems: "center",
|
|
74
|
+
pl: "xs",
|
|
75
|
+
pr: "xs",
|
|
76
|
+
children: footer
|
|
77
|
+
}) : null
|
|
78
|
+
]
|
|
79
|
+
})
|
|
80
|
+
})
|
|
81
|
+
});
|
|
45
82
|
return /* @__PURE__ */ jsxs(Container, {
|
|
46
83
|
noGridInfluencer,
|
|
47
84
|
children: [
|
|
85
|
+
side === "left" && panelJSX,
|
|
48
86
|
/* @__PURE__ */ jsx(TransGrid, {
|
|
49
87
|
height: "100%",
|
|
50
88
|
flex: "1",
|
|
51
89
|
mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0,
|
|
52
90
|
children
|
|
53
91
|
}),
|
|
54
|
-
|
|
55
|
-
style: { overflow: "hidden" },
|
|
56
|
-
height: "100%",
|
|
57
|
-
maxHeight: "100%",
|
|
58
|
-
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
59
|
-
withBorder,
|
|
60
|
-
withBoxShadow,
|
|
61
|
-
cols: [1],
|
|
62
|
-
noGridInfluencer,
|
|
63
|
-
children: /* @__PURE__ */ jsx(Grid, {
|
|
64
|
-
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
65
|
-
style: { overflow: "hidden" },
|
|
66
|
-
children: (isOpenAnimated || widthWhenIsClosed > 0) && /* @__PURE__ */ jsxs(Fragment, {
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ jsx(Grid, {
|
|
69
|
-
children: header
|
|
70
|
-
}),
|
|
71
|
-
/* @__PURE__ */ jsx(Grid, {
|
|
72
|
-
style: { overflow: "hidden" },
|
|
73
|
-
children: /* @__PURE__ */ jsx(Grid, {
|
|
74
|
-
style: { overflow: panelContentOverflow },
|
|
75
|
-
children: panelContent
|
|
76
|
-
})
|
|
77
|
-
}),
|
|
78
|
-
footer && /* @__PURE__ */ jsx(FooterContainer, {
|
|
79
|
-
alignItems: "center",
|
|
80
|
-
pl: "xs",
|
|
81
|
-
pr: "xs",
|
|
82
|
-
children: footer
|
|
83
|
-
})
|
|
84
|
-
]
|
|
85
|
-
})
|
|
86
|
-
})
|
|
87
|
-
})
|
|
92
|
+
side === "right" && panelJSX
|
|
88
93
|
]
|
|
89
94
|
});
|
|
90
95
|
};
|
|
@@ -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 }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\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,iBAAiB,MACpB,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
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 }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\n ${({ side }) => 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,iBAAiB,MACpB,mBACI;AAAA;AAAA;AAAA,KAGH,CAAC,EAAE,KAAK,MAAM;AAAA;AAAA,OAGX;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
|
}
|
|
@@ -19,7 +19,8 @@ const DSInputTextPropTypes = {
|
|
|
19
19
|
panelContentOverflow: PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),
|
|
20
20
|
withBorder: PropTypes.bool.description("Whether the sidepanel has border or not"),
|
|
21
21
|
withBoxShadow: PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
|
|
22
|
-
noGridInfluencer: PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
|
|
22
|
+
noGridInfluencer: PropTypes.bool.description("Whether the sidepanel is grid-influencer or not"),
|
|
23
|
+
side: PropTypes.oneOf(["left", "right"]).description("Wheter to put the side panel on the left or right").defaultValue("right")
|
|
23
24
|
};
|
|
24
25
|
export {
|
|
25
26
|
DSInputTextPropTypes,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\n\nexport declare namespace DSSidePanelT {\n export interface IProps {\n children?: React.ReactNode;\n isOpen: boolean;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n noGridInfluencer?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\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 footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: 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 widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAkD;AAoBpD,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\n\nexport declare namespace DSSidePanelT {\n export interface IProps {\n children?: React.ReactNode;\n isOpen: boolean;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n noGridInfluencer?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\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 footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: 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 widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n side: PropTypes.oneOf(['left', 'right'])\n .description('Wheter to put the side panel on the left or right')\n .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAkD;AAoBpD,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
|
|
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.
|
|
3
|
+
"version": "3.8.0-next.10",
|
|
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.
|
|
59
|
-
"@elliemae/ds-grid": "3.
|
|
60
|
-
"@elliemae/ds-icons": "3.
|
|
61
|
-
"@elliemae/ds-system": "3.
|
|
62
|
-
"@elliemae/ds-utilities": "3.
|
|
58
|
+
"@elliemae/ds-button": "3.8.0-next.10",
|
|
59
|
+
"@elliemae/ds-grid": "3.8.0-next.10",
|
|
60
|
+
"@elliemae/ds-icons": "3.8.0-next.10",
|
|
61
|
+
"@elliemae/ds-system": "3.8.0-next.10",
|
|
62
|
+
"@elliemae/ds-utilities": "3.8.0-next.10"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"styled-components": "~5.3.5"
|