@elliemae/ds-side-panel 3.55.0-next.9 → 3.56.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 +15 -20
- package/dist/cjs/SidePanel.js.map +2 -2
- package/dist/cjs/TemplateBasicPageWithSidePanel.js +7 -1
- package/dist/cjs/TemplateBasicPageWithSidePanel.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/SidePanel.js +16 -21
- package/dist/esm/SidePanel.js.map +2 -2
- package/dist/esm/TemplateBasicPageWithSidePanel.js +7 -1
- package/dist/esm/TemplateBasicPageWithSidePanel.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/SidePanel.d.ts +1 -1
- package/dist/types/TemplateBasicPageWithSidePanel.d.ts +7 -1
- package/dist/types/react-desc-prop-types.d.ts +7 -13
- package/package.json +9 -9
package/dist/cjs/SidePanel.js
CHANGED
|
@@ -35,9 +35,9 @@ __export(SidePanel_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(SidePanel_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
-
var import_ds_grid = require("@elliemae/ds-grid");
|
|
39
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
41
41
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
42
42
|
var import_useDelayedOpen = require("./useDelayedOpen.js");
|
|
43
43
|
const Container = import_ds_system.styled.div`
|
|
@@ -64,25 +64,20 @@ const TransGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
64
64
|
const FooterContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
65
65
|
border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
|
|
66
66
|
`;
|
|
67
|
-
const SidePanel = (
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
noGridInfluencer,
|
|
82
|
-
withBorder,
|
|
83
|
-
withBoxShadow,
|
|
84
|
-
side
|
|
85
|
-
} = propsWithDefault;
|
|
67
|
+
const SidePanel = ({
|
|
68
|
+
children,
|
|
69
|
+
isOpen,
|
|
70
|
+
footer,
|
|
71
|
+
header,
|
|
72
|
+
panelContent,
|
|
73
|
+
panelWidth,
|
|
74
|
+
panelContentOverflow,
|
|
75
|
+
widthWhenIsClosed,
|
|
76
|
+
noGridInfluencer = false,
|
|
77
|
+
withBorder = true,
|
|
78
|
+
withBoxShadow = false,
|
|
79
|
+
side = "right"
|
|
80
|
+
}) => {
|
|
86
81
|
const isOpenAnimated = (0, import_useDelayedOpen.useDelayedOpen)(isOpen);
|
|
87
82
|
const panelJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
83
|
TransGrid,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanel.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\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)<{\n flex: string;\n withBoxShadow: boolean;\n withBorder: boolean;\n noGridInfluencer: boolean;\n side: 'left' | 'right';\n}>`\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.dialog};\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\n ? [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n width={`${panelWidth - 1}px`}\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 data-testid=\"ds-side-panel-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.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;ADoFb;AAlFV,8BAAyB;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,EAAG;AAAA;AAG7E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBAOb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC,MAAO;AAAA;AAAA,iBAE9E,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI,MAAO;AAAA,IACtG,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO,MAAM;AAAA;AAAA,KAE5B,IAAI;AAAA;AAAA,OAGD,EAAE;AAAA,gBACM,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG5D,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAGpE,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,UAAU,OAAO,GAAG,iBAAiB;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SACI,CAAC,SAAS,uBAAuB,OAAO,oBAAoB,MAAM,IAClE,CAAC,SAAS,uBAAuB,OAAO,kBAAkB;AAAA,UAEhE,OAAO,EAAE,UAAU,SAAS;AAAA,UAC5B,OAAO,GAAG,aAAa,CAAC;AAAA,UAEtB,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,eAAY,2BAA0B,kBAC9C;AAAA,aAAS,UAAU;AAAA,IACpB,4CAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,iBAAiB,OAAO,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,kCAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,6 +43,7 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
43
43
|
mainContent,
|
|
44
44
|
mainFooter,
|
|
45
45
|
isOpen = false,
|
|
46
|
+
onClose,
|
|
46
47
|
panelFooter,
|
|
47
48
|
panelHeader,
|
|
48
49
|
panelContent,
|
|
@@ -55,6 +56,7 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
55
56
|
footer: panelFooter,
|
|
56
57
|
header: panelHeader,
|
|
57
58
|
panelWidth,
|
|
59
|
+
onClose,
|
|
58
60
|
panelContent,
|
|
59
61
|
isOpen,
|
|
60
62
|
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)(
|
|
@@ -108,7 +110,11 @@ const props = {
|
|
|
108
110
|
/**
|
|
109
111
|
* Width of the panel open. eg: 300
|
|
110
112
|
*/
|
|
111
|
-
panelWidth: import_ds_props_helpers.PropTypes.number.description("Width of the panel open. eg: 300")
|
|
113
|
+
panelWidth: import_ds_props_helpers.PropTypes.number.description("Width of the panel open. eg: 300"),
|
|
114
|
+
/**
|
|
115
|
+
* Callback
|
|
116
|
+
*/
|
|
117
|
+
onClose: import_ds_props_helpers.PropTypes.func.description("callback")
|
|
112
118
|
};
|
|
113
119
|
TemplateBasicPageWithSidePanel.propTypes = props;
|
|
114
120
|
TemplateBasicPageWithSidePanel.displayName = "TemplateBasicPageWithSidePanel";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TemplateBasicPageWithSidePanel.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel.js';\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,8BAAoC;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;AAAA;AAAA;AAAA,EAIZ,cAAc,kCAAU,QAAQ,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI3D,YAAY,kCAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,aAAa,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIpE,YAAY,kCAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,aAAa,kCAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAInE,aAAa,kCAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAIhG,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,kCAAU,OAAO,YAAY,kCAAkC;AAAA;AAAA;AAAA;AAAA,EAI3E,SAAS,kCAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,uCAAmC,kCAAS,8BAA8B;AAChF,iCAAiC,YAAY;",
|
|
6
6
|
"names": ["SidePanel"]
|
|
7
7
|
}
|
|
@@ -46,7 +46,7 @@ const DSInputTextPropTypes = {
|
|
|
46
46
|
/**
|
|
47
47
|
* Main content
|
|
48
48
|
*/
|
|
49
|
-
children: import_ds_props_helpers.PropTypes.element.description("Main content"),
|
|
49
|
+
children: import_ds_props_helpers.PropTypes.element.isRequired.description("Main content"),
|
|
50
50
|
/**
|
|
51
51
|
* Should show the slide panel or not
|
|
52
52
|
*/
|
|
@@ -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": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\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 side?: 'left' | 'right';\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;ADGvB,8BAA0B;AAqBnB,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;AAAA;AAAA;AAAA,EAIlC,UAAU,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,kCAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,kCAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,kCAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,kCAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,kCAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SidePanel.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Grid } from "@elliemae/ds-grid";
|
|
4
3
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
|
-
import {
|
|
4
|
+
import { styled, border } from "@elliemae/ds-system";
|
|
5
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
6
6
|
import { DSInputTextPropTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
7
7
|
import { useDelayedOpen } from "./useDelayedOpen.js";
|
|
8
8
|
const Container = styled.div`
|
|
@@ -29,25 +29,20 @@ const TransGrid = styled(Grid)`
|
|
|
29
29
|
const FooterContainer = styled(Grid)`
|
|
30
30
|
border-top: ${(props) => border(props.theme.colors.neutral["300"])};
|
|
31
31
|
`;
|
|
32
|
-
const SidePanel = (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
noGridInfluencer,
|
|
47
|
-
withBorder,
|
|
48
|
-
withBoxShadow,
|
|
49
|
-
side
|
|
50
|
-
} = propsWithDefault;
|
|
32
|
+
const SidePanel = ({
|
|
33
|
+
children,
|
|
34
|
+
isOpen,
|
|
35
|
+
footer,
|
|
36
|
+
header,
|
|
37
|
+
panelContent,
|
|
38
|
+
panelWidth,
|
|
39
|
+
panelContentOverflow,
|
|
40
|
+
widthWhenIsClosed,
|
|
41
|
+
noGridInfluencer = false,
|
|
42
|
+
withBorder = true,
|
|
43
|
+
withBoxShadow = false,
|
|
44
|
+
side = "right"
|
|
45
|
+
}) => {
|
|
51
46
|
const isOpenAnimated = useDelayedOpen(isOpen);
|
|
52
47
|
const panelJSX = /* @__PURE__ */ jsx(
|
|
53
48
|
TransGrid,
|
|
@@ -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", "/* eslint-disable complexity */\nimport
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSidePanelT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { useDelayedOpen } from './useDelayedOpen.js';\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)<{\n flex: string;\n withBoxShadow: boolean;\n withBorder: boolean;\n noGridInfluencer: boolean;\n side: 'left' | 'right';\n}>`\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.dialog};\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\n ? [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? 'minmax(48px, auto)' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n width={`${panelWidth - 1}px`}\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 data-testid=\"ds-side-panel-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.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;ACoFb,mBACE,KADF;AAlFV,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,EAAG;AAAA;AAG7E,MAAM,YAAY,OAAO,IAAI;AAAA,gBAOb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC,MAAO;AAAA;AAAA,iBAE9E,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,GAAG,KAAK,IAAI,MAAO;AAAA,IACtG,CAAC,EAAE,kBAAkB,MAAM,MAAM,MACjC,mBACI;AAAA;AAAA,cAEM,MAAM,OAAO,MAAM;AAAA;AAAA,KAE5B,IAAI;AAAA;AAAA,OAGD,EAAE;AAAA,gBACM,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAG5D,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC,CAAC;AAAA;AAGpE,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,UAAU,OAAO,GAAG,iBAAiB;AAAA,MACxD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA,MACR;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MACE,SACI,CAAC,SAAS,uBAAuB,OAAO,oBAAoB,MAAM,IAClE,CAAC,SAAS,uBAAuB,OAAO,kBAAkB;AAAA,UAEhE,OAAO,EAAE,UAAU,SAAS;AAAA,UAC5B,OAAO,GAAG,aAAa,CAAC;AAAA,UAEtB,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,eAAY,2BAA0B,kBAC9C;AAAA,aAAS,UAAU;AAAA,IACpB,oBAAC,aAAU,QAAO,QAAO,MAAK,KAAI,IAAI,mBAAmB,GAAG,iBAAiB,OAAO,GACjF,UACH;AAAA,IACC,SAAS,WAAW;AAAA,KACvB;AAEJ;AAEA,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,6 +9,7 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
9
9
|
mainContent,
|
|
10
10
|
mainFooter,
|
|
11
11
|
isOpen = false,
|
|
12
|
+
onClose,
|
|
12
13
|
panelFooter,
|
|
13
14
|
panelHeader,
|
|
14
15
|
panelContent,
|
|
@@ -21,6 +22,7 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
21
22
|
footer: panelFooter,
|
|
22
23
|
header: panelHeader,
|
|
23
24
|
panelWidth,
|
|
25
|
+
onClose,
|
|
24
26
|
panelContent,
|
|
25
27
|
isOpen,
|
|
26
28
|
children: /* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, height: "100%", maxHeight: "100%", children: /* @__PURE__ */ jsxs(
|
|
@@ -74,7 +76,11 @@ const props = {
|
|
|
74
76
|
/**
|
|
75
77
|
* Width of the panel open. eg: 300
|
|
76
78
|
*/
|
|
77
|
-
panelWidth: PropTypes.number.description("Width of the panel open. eg: 300")
|
|
79
|
+
panelWidth: PropTypes.number.description("Width of the panel open. eg: 300"),
|
|
80
|
+
/**
|
|
81
|
+
* Callback
|
|
82
|
+
*/
|
|
83
|
+
onClose: PropTypes.func.description("callback")
|
|
78
84
|
};
|
|
79
85
|
TemplateBasicPageWithSidePanel.propTypes = props;
|
|
80
86
|
TemplateBasicPageWithSidePanel.displayName = "TemplateBasicPageWithSidePanel";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TemplateBasicPageWithSidePanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel.js';\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,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;AAAA;AAAA;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI3D,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,aAAa,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIpE,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,EAIvD,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,aAAa,UAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAInE,aAAa,UAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAIhG,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA;AAAA;AAAA;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
|
}
|
|
@@ -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", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\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 side?: 'left' | 'right';\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;ACGvB,SAAS,iBAAiB;AAqBnB,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;AAAA;AAAA;AAAA,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;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
|
}
|
|
@@ -2,5 +2,5 @@ import React from 'react';
|
|
|
2
2
|
import type { DSSidePanelT } from './react-desc-prop-types.js';
|
|
3
3
|
declare const SidePanel: React.ComponentType<DSSidePanelT.Props>;
|
|
4
4
|
declare const DSSidePanelWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSidePanelT.Props>;
|
|
5
|
-
export {
|
|
5
|
+
export { SidePanel, DSSidePanelWithSchema };
|
|
6
6
|
export default SidePanel;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
declare const TemplateBasicPageWithSidePanel: {
|
|
2
|
-
({ globalHeader, mainHeader, mainContent, mainFooter, isOpen, panelFooter, panelHeader, panelContent, panelWidth, }: {
|
|
2
|
+
({ globalHeader, mainHeader, mainContent, mainFooter, isOpen, onClose, panelFooter, panelHeader, panelContent, panelWidth, }: {
|
|
3
3
|
globalHeader?: null | undefined;
|
|
4
4
|
mainHeader?: null | undefined;
|
|
5
5
|
mainContent: any;
|
|
6
6
|
mainFooter: any;
|
|
7
7
|
isOpen?: boolean | undefined;
|
|
8
|
+
onClose: any;
|
|
8
9
|
panelFooter: any;
|
|
9
10
|
panelHeader: any;
|
|
10
11
|
panelContent: any;
|
|
@@ -47,6 +48,10 @@ declare const TemplateBasicPageWithSidePanel: {
|
|
|
47
48
|
* Width of the panel open. eg: 300
|
|
48
49
|
*/
|
|
49
50
|
panelWidth: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
51
|
+
/**
|
|
52
|
+
* Callback
|
|
53
|
+
*/
|
|
54
|
+
onClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
50
55
|
};
|
|
51
56
|
displayName: string;
|
|
52
57
|
};
|
|
@@ -56,6 +61,7 @@ declare const DSTemplateBasicPageWithSidePanel: import("@elliemae/ds-props-helpe
|
|
|
56
61
|
mainContent: any;
|
|
57
62
|
mainFooter: any;
|
|
58
63
|
isOpen?: boolean | undefined;
|
|
64
|
+
onClose: any;
|
|
59
65
|
panelFooter: any;
|
|
60
66
|
panelHeader: any;
|
|
61
67
|
panelContent: any;
|
|
@@ -2,28 +2,22 @@ import type { WeakValidationMap } from 'react';
|
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
|
|
4
4
|
export declare namespace DSSidePanelT {
|
|
5
|
-
interface
|
|
6
|
-
|
|
7
|
-
interface DefaultProps {
|
|
5
|
+
interface IProps {
|
|
6
|
+
children?: React.ReactNode;
|
|
8
7
|
isOpen: boolean;
|
|
8
|
+
footer?: React.ReactNode;
|
|
9
|
+
header?: React.ReactNode;
|
|
10
|
+
panelContent?: React.ReactNode;
|
|
9
11
|
panelWidth: number;
|
|
10
12
|
widthWhenIsClosed: number;
|
|
11
13
|
panelContentOverflow: 'auto' | 'hidden';
|
|
12
14
|
withBorder: boolean;
|
|
13
15
|
withBoxShadow: boolean;
|
|
14
|
-
}
|
|
15
|
-
interface OptionalProps {
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
footer?: React.ReactNode;
|
|
18
|
-
header?: React.ReactNode;
|
|
19
|
-
panelContent?: React.ReactNode;
|
|
20
16
|
noGridInfluencer?: boolean;
|
|
21
17
|
side?: 'left' | 'right';
|
|
22
18
|
}
|
|
23
|
-
interface Props extends
|
|
24
|
-
}
|
|
25
|
-
interface InternalProps extends DefaultProps, OptionalProps, RequiredProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>, XstyledProps {
|
|
19
|
+
interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {
|
|
26
20
|
}
|
|
27
21
|
}
|
|
28
|
-
export declare const defaultProps: DSSidePanelT.
|
|
22
|
+
export declare const defaultProps: DSSidePanelT.Props;
|
|
29
23
|
export declare const DSInputTextPropTypes: WeakValidationMap<unknown>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-side-panel",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.56.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Side Panel",
|
|
6
6
|
"files": [
|
|
@@ -36,19 +36,19 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.
|
|
40
|
-
"@elliemae/ds-grid": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-side-panel-header": "3.
|
|
44
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-button-v2": "3.56.0-rc.1",
|
|
40
|
+
"@elliemae/ds-grid": "3.56.0-rc.1",
|
|
41
|
+
"@elliemae/ds-icons": "3.56.0-rc.1",
|
|
42
|
+
"@elliemae/ds-system": "3.56.0-rc.1",
|
|
43
|
+
"@elliemae/ds-side-panel-header": "3.56.0-rc.1",
|
|
44
|
+
"@elliemae/ds-props-helpers": "3.56.0-rc.1"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
48
48
|
"jest": "~29.7.0",
|
|
49
49
|
"styled-components": "~5.3.9",
|
|
50
|
-
"@elliemae/ds-test-utils": "3.
|
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
50
|
+
"@elliemae/ds-test-utils": "3.56.0-rc.1",
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.56.0-rc.1"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"lodash-es": "^4.17.21",
|