@elliemae/ds-side-panel 3.55.1 → 3.57.0-next.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 +3 -3
- package/dist/cjs/SidePanel.js.map +2 -2
- package/dist/cjs/TemplateBasicPageWithSidePanel.js +1 -7
- 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 +3 -3
- package/dist/esm/SidePanel.js.map +2 -2
- package/dist/esm/TemplateBasicPageWithSidePanel.js +1 -7
- 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/TemplateBasicPageWithSidePanel.d.ts +1 -7
- package/dist/types/react-desc-prop-types.d.ts +13 -7
- package/package.json +9 -9
package/dist/cjs/SidePanel.js
CHANGED
|
@@ -66,13 +66,13 @@ const FooterContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
66
66
|
`;
|
|
67
67
|
const SidePanel = ({
|
|
68
68
|
children,
|
|
69
|
-
isOpen,
|
|
69
|
+
isOpen = false,
|
|
70
70
|
footer,
|
|
71
71
|
header,
|
|
72
72
|
panelContent,
|
|
73
|
-
panelWidth,
|
|
73
|
+
panelWidth = 0,
|
|
74
74
|
panelContentOverflow,
|
|
75
|
-
widthWhenIsClosed,
|
|
75
|
+
widthWhenIsClosed = 0,
|
|
76
76
|
noGridInfluencer = false,
|
|
77
77
|
withBorder = true,
|
|
78
78
|
withBoxShadow = false,
|
|
@@ -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 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
|
|
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 isOpen?: boolean;\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 = false,\n footer,\n header,\n panelContent,\n panelWidth = 0,\n panelContentOverflow,\n widthWhenIsClosed = 0,\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;ADqFb;AAnFV,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,gBAQb,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,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,EACpB,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,7 +43,6 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
43
43
|
mainContent,
|
|
44
44
|
mainFooter,
|
|
45
45
|
isOpen = false,
|
|
46
|
-
onClose,
|
|
47
46
|
panelFooter,
|
|
48
47
|
panelHeader,
|
|
49
48
|
panelContent,
|
|
@@ -56,7 +55,6 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
56
55
|
footer: panelFooter,
|
|
57
56
|
header: panelHeader,
|
|
58
57
|
panelWidth,
|
|
59
|
-
onClose,
|
|
60
58
|
panelContent,
|
|
61
59
|
isOpen,
|
|
62
60
|
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)(
|
|
@@ -110,11 +108,7 @@ const props = {
|
|
|
110
108
|
/**
|
|
111
109
|
* Width of the panel open. eg: 300
|
|
112
110
|
*/
|
|
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")
|
|
111
|
+
panelWidth: import_ds_props_helpers.PropTypes.number.description("Width of the panel open. eg: 300")
|
|
118
112
|
};
|
|
119
113
|
TemplateBasicPageWithSidePanel.propTypes = props;
|
|
120
114
|
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": ["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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable default-case */\n/* eslint-disable react/jsx-no-bind */\n/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unsafe-argument, max-params */\n/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */\n/* eslint-disable complexity, @typescript-eslint/no-unsafe-call */\n/* eslint-disable no-unused-vars, @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment */\n/* tslint:disable */\n// @ts-nocheck\n// What's with all the above disables?\n// this is what a legacy 5 year old codebase looks like.\nimport 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 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 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\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;AD8BnB;AAhBJ,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;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,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;AAC7E;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.
|
|
49
|
+
children: import_ds_props_helpers.PropTypes.element.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": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport 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 RequiredProps {}\n export interface DefaultProps {\n isOpen: boolean;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n }\n export interface OptionalProps {\n children?: React.ReactNode;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n noGridInfluencer?: boolean;\n side?: 'left' | 'right';\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n RequiredProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n RequiredProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.DefaultProps = {\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.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;ADIvB,8BAA0B;AAoCnB,MAAM,eAA0C;AAAA,EACrD,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,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAItD,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
|
@@ -31,13 +31,13 @@ const FooterContainer = styled(Grid)`
|
|
|
31
31
|
`;
|
|
32
32
|
const SidePanel = ({
|
|
33
33
|
children,
|
|
34
|
-
isOpen,
|
|
34
|
+
isOpen = false,
|
|
35
35
|
footer,
|
|
36
36
|
header,
|
|
37
37
|
panelContent,
|
|
38
|
-
panelWidth,
|
|
38
|
+
panelWidth = 0,
|
|
39
39
|
panelContentOverflow,
|
|
40
|
-
widthWhenIsClosed,
|
|
40
|
+
widthWhenIsClosed = 0,
|
|
41
41
|
noGridInfluencer = false,
|
|
42
42
|
withBorder = true,
|
|
43
43
|
withBoxShadow = false,
|
|
@@ -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 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
|
|
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 isOpen?: boolean;\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 = false,\n footer,\n header,\n panelContent,\n panelWidth = 0,\n panelContentOverflow,\n widthWhenIsClosed = 0,\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;ACqFb,mBACE,KADF;AAnFV,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,gBAQb,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,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,EACpB,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,7 +9,6 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
9
9
|
mainContent,
|
|
10
10
|
mainFooter,
|
|
11
11
|
isOpen = false,
|
|
12
|
-
onClose,
|
|
13
12
|
panelFooter,
|
|
14
13
|
panelHeader,
|
|
15
14
|
panelContent,
|
|
@@ -22,7 +21,6 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
22
21
|
footer: panelFooter,
|
|
23
22
|
header: panelHeader,
|
|
24
23
|
panelWidth,
|
|
25
|
-
onClose,
|
|
26
24
|
panelContent,
|
|
27
25
|
isOpen,
|
|
28
26
|
children: /* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, height: "100%", maxHeight: "100%", children: /* @__PURE__ */ jsxs(
|
|
@@ -76,11 +74,7 @@ const props = {
|
|
|
76
74
|
/**
|
|
77
75
|
* Width of the panel open. eg: 300
|
|
78
76
|
*/
|
|
79
|
-
panelWidth: PropTypes.number.description("Width of the panel open. eg: 300")
|
|
80
|
-
/**
|
|
81
|
-
* Callback
|
|
82
|
-
*/
|
|
83
|
-
onClose: PropTypes.func.description("callback")
|
|
77
|
+
panelWidth: PropTypes.number.description("Width of the panel open. eg: 300")
|
|
84
78
|
};
|
|
85
79
|
TemplateBasicPageWithSidePanel.propTypes = props;
|
|
86
80
|
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", "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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable default-case */\n/* eslint-disable react/jsx-no-bind */\n/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unsafe-argument, max-params */\n/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */\n/* eslint-disable complexity, @typescript-eslint/no-unsafe-call */\n/* eslint-disable no-unused-vars, @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment */\n/* tslint:disable */\n// @ts-nocheck\n// What's with all the above disables?\n// this is what a legacy 5 year old codebase looks like.\nimport 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 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 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\nTemplateBasicPageWithSidePanel.propTypes = props;\nTemplateBasicPageWithSidePanel.displayName = 'TemplateBasicPageWithSidePanel';\nconst DSTemplateBasicPageWithSidePanel = describe(TemplateBasicPageWithSidePanel);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8BnB,cASI,YATJ;AAhBJ,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;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,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;AAC7E;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", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport 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 RequiredProps {}\n export interface DefaultProps {\n isOpen: boolean;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n }\n export interface OptionalProps {\n children?: React.ReactNode;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n noGridInfluencer?: boolean;\n side?: 'left' | 'right';\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n RequiredProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n RequiredProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.DefaultProps = {\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.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;ACIvB,SAAS,iBAAiB;AAoCnB,MAAM,eAA0C;AAAA,EACrD,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,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAItD,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
|
}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
declare const TemplateBasicPageWithSidePanel: {
|
|
2
|
-
({ globalHeader, mainHeader, mainContent, mainFooter, isOpen,
|
|
2
|
+
({ globalHeader, mainHeader, mainContent, mainFooter, isOpen, 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;
|
|
9
8
|
panelFooter: any;
|
|
10
9
|
panelHeader: any;
|
|
11
10
|
panelContent: any;
|
|
@@ -48,10 +47,6 @@ declare const TemplateBasicPageWithSidePanel: {
|
|
|
48
47
|
* Width of the panel open. eg: 300
|
|
49
48
|
*/
|
|
50
49
|
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;
|
|
55
50
|
};
|
|
56
51
|
displayName: string;
|
|
57
52
|
};
|
|
@@ -61,7 +56,6 @@ declare const DSTemplateBasicPageWithSidePanel: import("@elliemae/ds-props-helpe
|
|
|
61
56
|
mainContent: any;
|
|
62
57
|
mainFooter: any;
|
|
63
58
|
isOpen?: boolean | undefined;
|
|
64
|
-
onClose: any;
|
|
65
59
|
panelFooter: any;
|
|
66
60
|
panelHeader: any;
|
|
67
61
|
panelContent: any;
|
|
@@ -2,22 +2,28 @@ 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
|
-
|
|
5
|
+
interface RequiredProps {
|
|
6
|
+
}
|
|
7
|
+
interface DefaultProps {
|
|
7
8
|
isOpen: boolean;
|
|
8
|
-
footer?: React.ReactNode;
|
|
9
|
-
header?: React.ReactNode;
|
|
10
|
-
panelContent?: React.ReactNode;
|
|
11
9
|
panelWidth: number;
|
|
12
10
|
widthWhenIsClosed: number;
|
|
13
11
|
panelContentOverflow: 'auto' | 'hidden';
|
|
14
12
|
withBorder: boolean;
|
|
15
13
|
withBoxShadow: boolean;
|
|
14
|
+
}
|
|
15
|
+
interface OptionalProps {
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
footer?: React.ReactNode;
|
|
18
|
+
header?: React.ReactNode;
|
|
19
|
+
panelContent?: React.ReactNode;
|
|
16
20
|
noGridInfluencer?: boolean;
|
|
17
21
|
side?: 'left' | 'right';
|
|
18
22
|
}
|
|
19
|
-
interface Props extends
|
|
23
|
+
interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>, XstyledProps {
|
|
24
|
+
}
|
|
25
|
+
interface InternalProps extends DefaultProps, OptionalProps, RequiredProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>, XstyledProps {
|
|
20
26
|
}
|
|
21
27
|
}
|
|
22
|
-
export declare const defaultProps: DSSidePanelT.
|
|
28
|
+
export declare const defaultProps: DSSidePanelT.DefaultProps;
|
|
23
29
|
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.57.0-next.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-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-button-v2": "3.57.0-next.1",
|
|
40
|
+
"@elliemae/ds-icons": "3.57.0-next.1",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.57.0-next.1",
|
|
42
|
+
"@elliemae/ds-side-panel-header": "3.57.0-next.1",
|
|
43
|
+
"@elliemae/ds-grid": "3.57.0-next.1",
|
|
44
|
+
"@elliemae/ds-system": "3.57.0-next.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-
|
|
51
|
-
"@elliemae/ds-
|
|
50
|
+
"@elliemae/ds-test-utils": "3.57.0-next.1",
|
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.57.0-next.1"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"lodash-es": "^4.17.21",
|